@splunk/react-ui 4.40.0 → 4.42.0

package/Select.js

@@ -6,10 +6,13 @@
         /***/ (e, t, n) => {
             // EXPORTS
             n.d(t, {
-                default: () => /* reexport */ l
+                default: () => /* reexport */ i
             });
             // EXTERNAL MODULE: external "react"
                         var r = n(9497);
+            // EXTERNAL MODULE: external "lodash/has"
+                        var o = n(5919);
+            var l =  n.n(o);
             // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
             /**
  * This is a private component not intended for use outside @splunk/react-ui
@@ -21,22 +24,26 @@
  *
  * Return the controlled state of the component.
  */
-            function o(e) {
-                var t = e.defaultValue, n = e.value, o = e.componentName, l = o === void 0 ? "this component" : o, a = e.defaultValuePropName, i = a === void 0 ? "defaultValue" : a, u = e.valuePropName, c = u === void 0 ? "value" : u;
-                var s = (0, r.useRef)(n != null);
-                var f = (0, r.useRef)(t);
+            function a(e) {
+                var t = e.componentProps, n = e.componentName, o = n === void 0 ? "this component" : n, a = e.defaultValuePropName, i = a === void 0 ? "defaultValue" : a, u = e.valuePropName, c = u === void 0 ? "value" : u;
+                var s = (0, r.useRef)(l()(t, c));
+                var f = (0, r.useRef)(t[i]);
                 (0, r.useEffect)((function() {
                     if (false) {}
-                }), [ l, t, i, c ]);
+                }), [ o, t, i, c ]);
                 (0, r.useEffect)((function() {
                     if (false) {}
                     if (false) {}
-                }), [ l, t, i, n, c ]);
+                }), [ o, t, i, c ]);
                 return s.current;
             }
-            /* harmony default export */            const l = o;
+            /* harmony default export */            const i = a;
         } // CONCATENATED MODULE: ./src/useControlled/index.ts
         /***/ ,
+        /***/ 5919: 
+        /***/ e => {
+            e.exports = require("lodash/has");
+            /***/        },
         /***/ 9497: 
         /***/ e => {
             e.exports = require("react");
@@ -127,10 +134,10 @@
         n.r(r);
         // EXPORTS
                 n.d(r, {
-            Divider: () => /* reexport */ A.Divider,
-            Heading: () => /* reexport */ A.Heading,
-            Option: () => /* reexport */ Nt,
-            default: () => /* reexport */ un
+            Divider: () => /* reexport */ T.Divider,
+            Heading: () => /* reexport */ T.Heading,
+            Option: () => /* reexport */ Mt,
+            default: () => /* reexport */ tn
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -138,8 +145,8 @@
         // CONCATENATED MODULE: external "prop-types"
         const o = require("prop-types");
         var l =  n.n(o);
-        // CONCATENATED MODULE: external "lodash/has"
-        const a = require("lodash/has");
+        // EXTERNAL MODULE: external "lodash/has"
+                var a = n(5919);
         var i =  n.n(a);
         // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
         const u = require("@splunk/ui-utils/i18n");
@@ -162,70 +169,73 @@
         const g = require("lodash/pick");
         var O =  n.n(g);
         // CONCATENATED MODULE: external "lodash/uniq"
-        const w = require("lodash/uniq");
-        var S =  n.n(w);
+        const S = require("lodash/uniq");
+        var C =  n.n(S);
         // CONCATENATED MODULE: external "lodash/without"
-        const C = require("lodash/without");
-        var k =  n.n(C);
+        const k = require("lodash/without");
+        var w =  n.n(k);
         // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
         const x = require("@splunk/react-ui/Dropdown");
         var j =  n.n(x);
         // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-        const E = require("@splunk/react-ui/Link");
-        var P =  n.n(E);
+        const P = require("@splunk/react-ui/Link");
+        var E =  n.n(P);
         // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
-        const A = require("@splunk/react-ui/Menu");
+        const T = require("@splunk/react-ui/Menu");
         // CONCATENATED MODULE: external "@splunk/react-ui/ResultsMenu"
-        const T = require("@splunk/react-ui/ResultsMenu");
-        var I =  n.n(T);
+        const R = require("@splunk/react-ui/ResultsMenu");
+        var A =  n.n(R);
         // CONCATENATED MODULE: external "@splunk/react-ui/Text"
         const _ = require("@splunk/react-ui/Text");
-        var M =  n.n(_);
+        var I =  n.n(_);
+        // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+        const M = require("@splunk/react-ui/ScreenReaderContent");
+        var L =  n.n(M);
         // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-        const R = require("@splunk/react-ui/usePrevious");
-        var L =  n.n(R);
+        const q = require("@splunk/react-ui/usePrevious");
+        var D =  n.n(q);
         // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
-        const V = require("@splunk/ui-utils/filter");
+        const B = require("@splunk/ui-utils/filter");
         // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-        const q = require("@splunk/ui-utils/id");
+        const V = require("@splunk/ui-utils/id");
         // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-        const B = require("@splunk/ui-utils/keyboard");
+        const N = require("@splunk/ui-utils/keyboard");
         // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-        const D = require("@splunk/react-icons/CaretSmallDown");
-        var N =  n.n(D);
-        // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-        const K = require("@splunk/react-icons/enterprise/Caret");
+        const K = require("@splunk/react-icons/CaretSmallDown");
         var F =  n.n(K);
+        // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
+        const H = require("@splunk/react-icons/enterprise/Caret");
+        var z =  n.n(H);
         // CONCATENATED MODULE: external "@splunk/themes"
-        const H = require("@splunk/themes");
+        const $ = require("@splunk/themes");
         // CONCATENATED MODULE: ./src/Select/icons/CaretSmallDown.tsx
-        var z = function e() {
-            var n = (0, H.useSplunkTheme)(), r = n.isEnterprise;
-            var o = r ?  t().createElement(F(), {
+        var W = function e() {
+            var n = (0, $.useSplunkTheme)(), r = n.isEnterprise;
+            var o = r ?  t().createElement(z(), {
                 screenReaderText: null,
                 hideDefaultTooltip: true,
                 size: .5
-            }) :  t().createElement(N(), null);
+            }) :  t().createElement(F(), null);
             return o;
         };
-        /* harmony default export */        const $ = z;
+        /* harmony default export */        const U = W;
         // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Search"
-        const W = require("@splunk/react-icons/enterprise/Search");
-        var U =  n.n(W);
-        // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
-        const J = require("@splunk/react-icons/Magnifier");
+        const J = require("@splunk/react-icons/enterprise/Search");
         var X =  n.n(J);
+        // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
+        const G = require("@splunk/react-icons/Magnifier");
+        var Q =  n.n(G);
         // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
-        var G = function e() {
-            var n = (0, H.useSplunkTheme)(), r = n.isEnterprise, o = n.isCompact;
+        var Y = function e() {
+            var n = (0, $.useSplunkTheme)(), r = n.isEnterprise, o = n.isCompact;
             var l = (0, u._)("Search");
             var a = o ? "20px" : "24px";
-            var i = r ?  t().createElement(U(), {
+            var i = r ?  t().createElement(X(), {
                 role: "presentation",
                 size: "16px",
                 screenReaderText: l,
                 hideDefaultTooltip: true
-            }) :  t().createElement(X(), {
+            }) :  t().createElement(Q(), {
                 role: "presentation",
                 "aria-label": l,
                 width: a,
@@ -233,18 +243,18 @@
             });
             return i;
         };
-        /* harmony default export */        const Q = G;
+        /* harmony default export */        const Z = Y;
         // CONCATENATED MODULE: ./src/Select/OptionBase.tsx
-        function Y(e) {
+        function ee(e) {
             "@babel/helpers - typeof";
-            return Y = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return ee = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, Y(e);
+            }, ee(e);
         }
-        function Z() {
-            return Z = Object.assign ? Object.assign.bind() : function(e) {
+        function te() {
+            return te = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var n = arguments[t];
                     for (var r in n) {
@@ -252,124 +262,81 @@
                     }
                 }
                 return e;
-            }, Z.apply(null, arguments);
+            }, te.apply(null, arguments);
         }
-        function ee(e, t) {
-            if (null == e) return {};
-            var n, r, o = te(e, t);
+        function ne(e, t) {
+            var n = Object.keys(e);
             if (Object.getOwnPropertySymbols) {
-                var l = Object.getOwnPropertySymbols(e);
-                for (r = 0; r < l.length; r++) {
-                    n = l[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
-                }
-            }
-            return o;
-        }
-        function te(e, t) {
-            if (null == e) return {};
-            var n = {};
-            for (var r in e) {
-                if ({}.hasOwnProperty.call(e, r)) {
-                    if (t.includes(r)) continue;
-                    n[r] = e[r];
-                }
+                var r = Object.getOwnPropertySymbols(e);
+                t && (r = r.filter((function(t) {
+                    return Object.getOwnPropertyDescriptor(e, t).enumerable;
+                }))), n.push.apply(n, r);
             }
             return n;
         }
-        function ne(e, t) {
-            if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-        }
-        function re(e, t) {
-            for (var n = 0; n < t.length; n++) {
-                var r = t[n];
-                r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-                Object.defineProperty(e, de(r.key), r);
+        function re(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = null != arguments[t] ? arguments[t] : {};
+                t % 2 ? ne(Object(n), !0).forEach((function(t) {
+                    oe(e, t, n[t]);
+                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ne(Object(n)).forEach((function(t) {
+                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+                }));
             }
-        }
-        function oe(e, t, n) {
-            return t && re(e.prototype, t), n && re(e, n), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), e;
-        }
-        function le(e, t) {
-            if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-            e.prototype = Object.create(t && t.prototype, {
-                constructor: {
-                    value: e,
-                    writable: !0,
-                    configurable: !0
-                }
-            }), Object.defineProperty(e, "prototype", {
-                writable: !1
-            }), t && ae(e, t);
-        }
-        function ae(e, t) {
-            return ae = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-                return e.__proto__ = t, e;
-            }, ae(e, t);
-        }
-        function ie(e) {
-            var t = se();
-            return function() {
-                var n, r = fe(e);
-                if (t) {
-                    var o = fe(this).constructor;
-                    n = Reflect.construct(r, arguments, o);
-                } else n = r.apply(this, arguments);
-                return ue(this, n);
-            };
-        }
-        function ue(e, t) {
-            if (t && ("object" == Y(t) || "function" == typeof t)) return t;
-            if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-            return ce(e);
-        }
-        function ce(e) {
-            if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
             return e;
         }
-        function se() {
-            try {
-                var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-            } catch (e) {}
-            return (se = function t() {
-                return !!e;
-            })();
-        }
-        function fe(e) {
-            return fe = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-                return e.__proto__ || Object.getPrototypeOf(e);
-            }, fe(e);
-        }
-        function pe(e, t, n) {
-            return (t = de(t)) in e ? Object.defineProperty(e, t, {
+        function oe(e, t, n) {
+            return (t = le(t)) in e ? Object.defineProperty(e, t, {
                 value: n,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[t] = n, e;
         }
-        function de(e) {
-            var t = ve(e, "string");
-            return "symbol" == Y(t) ? t : t + "";
+        function le(e) {
+            var t = ae(e, "string");
+            return "symbol" == ee(t) ? t : t + "";
         }
-        function ve(e, t) {
-            if ("object" != Y(e) || !e) return e;
+        function ae(e, t) {
+            if ("object" != ee(e) || !e) return e;
             var n = e[Symbol.toPrimitive];
             if (void 0 !== n) {
                 var r = n.call(e, t || "default");
-                if ("object" != Y(r)) return r;
+                if ("object" != ee(r)) return r;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === t ? String : Number)(e);
         }
-        var be = {
+        function ie(e, t) {
+            if (null == e) return {};
+            var n, r, o = ue(e, t);
+            if (Object.getOwnPropertySymbols) {
+                var l = Object.getOwnPropertySymbols(e);
+                for (r = 0; r < l.length; r++) {
+                    n = l[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+                }
+            }
+            return o;
+        }
+        function ue(e, t) {
+            if (null == e) return {};
+            var n = {};
+            for (var r in e) {
+                if ({}.hasOwnProperty.call(e, r)) {
+                    if (t.includes(r)) continue;
+                    n[r] = e[r];
+                }
+            }
+            return n;
+        }
+        var ce = {
             /** @private */
             active: l().bool,
             children: l().node,
             description: l().string,
             descriptionPosition: l().oneOf([ "right", "bottom" ]),
             disabled: l().bool,
+            elementRef: l().oneOfType([ l().func, l().object ]),
             hidden: l().bool,
             icon: l().node,
             label: l().string.isRequired,
@@ -390,88 +357,43 @@
             truncate: l().bool,
             value: l().oneOfType([ l().string, l().number, l().bool ]).isRequired
         };
-        var me = {
-            descriptionPosition: "bottom",
-            disabled: false,
-            multiple: false,
-            role: "option",
-            selected: false,
-            truncate: false
-        };
         /**
- * An option within a `Multiselect`. This inherits from
- * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
- * so any elements passed to it must also be pure.
- */        var ye =  function(e) {
-            le(r, e);
-            var n = ie(r);
-            function r() {
-                var e;
-                ne(this, r);
-                for (var t = arguments.length, o = new Array(t), l = 0; l < t; l++) {
-                    o[l] = arguments[l];
-                }
-                e = n.call.apply(n, [ this ].concat(o));
-                pe(ce(e), "c", null);
-                pe(ce(e), "handleClick", (function(t) {
-                    var n = e.props, r = n.onClick, o = n.value, l = n.disabled;
-                    if (!l) {
-                        r === null || r === void 0 ? void 0 : r(t, {
-                            value: o
-                        });
-                    }
-                }));
-                pe(ce(e), "handleMount", (function(t) {
-                    e.c = t;
-                }));
-                return e;
-            }
- // @docs-props-type OptionPropsBase
-                        oe(r, [ {
-                key: "scrollIntoViewIfNeeded",
-                // eslint-disable-next-line react/no-unused-class-component-methods
-                value: function e() {
-                    var t;
-                    (t = this.c) === null || t === void 0 ? void 0 : t.scrollIntoViewIfNeeded();
-                }
-                /**
-     * Place focus on the button.
-     */
-                // eslint-disable-next-line react/no-unused-class-component-methods
-                        }, {
-                key: "focus",
-                value: function e() {
-                    var t;
-                    (t = this.c) === null || t === void 0 ? void 0 : t.focus();
-                }
-            }, {
-                key: "render",
-                value: function e() {
-                    var n = this.props, r = n.value, o = n.children, l = n.label, a = n.multiple, i = n.role, u = n.icon, c = ee(n, [ "value", "children", "label", "multiple", "role", "icon" ]);
-                    var s = r.toString();
-                    
-                    return t().createElement(A.Item, Z({
-                        "data-test-value": r,
-                        "data-test": "option",
-                        ref: this.handleMount
-                    }, c, {
-                        selectable: true,
-                        selectableAppearance: a ? "checkbox" : "checkmark",
-                        onClick: this.handleClick,
-                        role: i,
-                        value: s,
-                        startAdornment: u
-                    }), o || l);
+ * An option within a `Multiselect`.
+ */        function se(n) {
+            var r = n.children, o = n.descriptionPosition, l = o === void 0 ? "bottom" : o, a = n.disabled, i = n.elementRef, u = n.icon, c = n.label, s = n.multiple, f = n.onClick, p = n.role, d = p === void 0 ? "option" : p, v = n.value, b = ie(n, [ "children", "descriptionPosition", "disabled", "elementRef", "icon", "label", "multiple", "onClick", "role", "value" ]);
+            // @docs-props-type OptionPropsBase
+                        var m = (0, e.useCallback)((function(e) {
+                if (!a) {
+                    f === null || f === void 0 ? void 0 : f(e, {
+                        value: v
+                    });
                 }
-            } ]);
-            return r;
-        }(e.PureComponent);
-        pe(ye, "propTypes", be);
-        pe(ye, "defaultProps", me);
-        pe(ye, "type", A.Item);
-        /* harmony default export */        const he = ye;
+            }), [ a, f, v ]);
+            var y = v.toString();
+            var h = re({
+                descriptionPosition: l,
+                disabled: a
+            }, b);
+            
+            return t().createElement(T.Item, te({
+                "data-test-value": v,
+                "data-test": "option",
+                elementRef: i
+            }, h, {
+                selectable: true,
+                selectableAppearance: s ? "checkbox" : "checkmark",
+                startAdornment: u,
+                onClick: m,
+                role: d,
+                value: y
+            }), r || c);
+        }
+        se.propTypes = ce;
+        se.type = T.Item;
+ // For components to distinguish if their children are Options or Headings/Dividers
+        /* harmony default export */        const fe = se;
         // CONCATENATED MODULE: ./src/Select/SelectAllOption.tsx
-        var ge = {
+        var pe = {
             active: l().bool,
             changedToggle: l().bool,
             elementRef: l().oneOfType([ l().func, l().object ]),
@@ -481,13 +403,14 @@
             selected: l().oneOf([ false, true, "some" ]),
             totalCount: l().number
         };
-        var Oe =  t().forwardRef((function(e, n) {
-            var r = e.active, o = e.id, l = e.onClick, a = e.selectAllLabel, i = e.totalCount, u = e.changedToggle, c = e.selected;
+        function de(e) {
+            var n = e.active, r = e.elementRef, o = e.id, l = e.onClick, a = e.selectAllLabel, i = e.totalCount, u = 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 s = u ? " (".concat(i === null || i === void 0 ? void 0 : i.toString(), ")") : "";
             
-            return t().createElement(he, {
-                active: r,
+            return t().createElement(fe, {
+                active: n,
+                elementRef: r,
                 "aria-keyshortcuts": "Control+A",
                 "data-test": "select-all",
                 description: "".concat(s, " Ctrl-a"),
@@ -497,23 +420,22 @@
                 label: a,
                 multiple: true,
                 onClick: l,
-                ref: n,
                 role: "menuitemcheckbox",
                 selected: c,
                 tabIndex: -1,
                 value: "selectAll"
             });
-        }));
-        Oe.propTypes = ge;
-        /* harmony default export */        const we = Oe;
+        }
+        de.propTypes = pe;
+        /* harmony default export */        const ve = de;
         // CONCATENATED MODULE: external "styled-components"
-        const Se = require("styled-components");
-        var Ce =  n.n(Se);
+        const be = require("styled-components");
+        var me =  n.n(be);
         // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-        const ke = require("@splunk/react-ui/Button");
-        var xe =  n.n(ke);
+        const ye = require("@splunk/react-ui/Button");
+        var he =  n.n(ye);
         // CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
-        var je = Ce()(xe()).withConfig({
+        var ge = me()(he()).withConfig({
             displayName: "SelectBaseStyles__StyledButton",
             componentId: "sc-16cj7sk-0"
         })([ "&[data-inline]{width:", ";}", "" ], (function(e) {
@@ -523,76 +445,76 @@
             var t = e.$multiple;
             return !t && "flex-grow: 0;";
         }));
-        var Ee = Ce().span.withConfig({
+        var Oe = me().span.withConfig({
             displayName: "SelectBaseStyles__StyledLinkIcon",
             componentId: "sc-16cj7sk-1"
         })([ "padding-right:2px;" ]);
-        var Pe = Ce().span.withConfig({
+        var Se = me().span.withConfig({
             displayName: "SelectBaseStyles__StyledLinkCaret",
             componentId: "sc-16cj7sk-2"
         })([ "padding-left:2px;" ]);
-        var Ae = Ce().div.withConfig({
+        var Ce = me().div.withConfig({
             displayName: "SelectBaseStyles__StyledFilter",
             componentId: "sc-16cj7sk-3"
-        })([ "padding:", ";min-width:160px;" ], (0, H.pick)({
+        })([ "padding:", ";min-width:160px;" ], (0, $.pick)({
             enterprise: "8px",
             prisma: "10px 16px"
         }));
-        var Te = Ce().span.withConfig({
+        var ke = me().span.withConfig({
             displayName: "SelectBaseStyles__StyledSearchIconWrapper",
             componentId: "sc-16cj7sk-4"
-        })([ "color:", ";pointer-events:none;padding:", ";" ], (0, H.pick)({
+        })([ "color:", ";pointer-events:none;padding:", ";" ], (0, $.pick)({
             enterprise: {
-                light: H.variables.gray60,
-                dark: H.variables.white
+                light: $.variables.gray60,
+                dark: $.variables.white
             },
-            prisma: H.variables.contentColorMuted
-        }), (0, H.pick)({
+            prisma: $.variables.contentColorMuted
+        }), (0, $.pick)({
             comfortable: "0 8px",
             compact: "0 6px"
         }));
-        var Ie = Ce().span.withConfig({
+        var we = me().span.withConfig({
             displayName: "SelectBaseStyles__StyledCount",
             componentId: "sc-16cj7sk-5"
-        })([ "padding-right:", ";" ], H.variables.spacingXSmall);
-        var _e = Ce()(P()).withConfig({
+        })([ "padding-right:", ";" ], $.variables.spacingXSmall);
+        var xe = me()(E()).withConfig({
             displayName: "SelectBaseStyles__StyledControlsLink",
             componentId: "sc-16cj7sk-6"
         })([ "margin-right:20px;", ";" ], (function(e) {
             var t = e.$disabled;
-            return t && (0, Se.css)([ "color:", ";" ], H.variables.contentColorDisabled);
+            return t && (0, be.css)([ "color:", ";" ], $.variables.contentColorDisabled);
         }));
-        var Me = Ce().div.withConfig({
+        var je = me().div.withConfig({
             displayName: "SelectBaseStyles__StyledToggleAllControls",
             componentId: "sc-16cj7sk-7"
-        })([ "padding:", ";", "" ], (0, H.pick)({
+        })([ "padding:", ";", "" ], (0, $.pick)({
             enterprise: "5px 8px",
             prisma: "10px 16px"
-        }), (0, H.pickVariant)("$placement", {
+        }), (0, $.pickVariant)("$placement", {
             above: {
-                enterprise: (0, Se.css)([ "border-top:", ";" ], H.variables.border),
-                prisma: (0, Se.css)([ "border-top:1px solid ", ";" ], H.variables.neutral200)
+                enterprise: (0, be.css)([ "border-top:", ";" ], $.variables.border),
+                prisma: (0, be.css)([ "border-top:1px solid ", ";" ], $.variables.neutral200)
             },
             below: {
-                enterprise: (0, Se.css)([ "border-bottom:", ";" ], H.variables.border),
-                prisma: (0, Se.css)([ "border-bottom:1px solid ", ";" ], H.variables.neutral200)
+                enterprise: (0, be.css)([ "border-bottom:", ";" ], $.variables.border),
+                prisma: (0, be.css)([ "border-bottom:1px solid ", ";" ], $.variables.neutral200)
             }
         }));
         // EXTERNAL MODULE: ./src/useControlled/index.ts + 1 modules
-                var Re = n(2907);
+                var Pe = n(2907);
         // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
         // A utility for matching keyboard characters to list values
-        var Le = function e(t, n) {
+        var Ee = function e(t, n) {
             return t ? t.label.charAt(n).toLowerCase() : "";
         };
-        var Ve = function e(t, n) {
+        var Te = function e(t, n) {
             if (!t.length) {
                 return t;
             }
             var r = null;
             var o = false;
             var l = t.filter((function(e) {
-                var t = Le(e, n.index);
+                var t = Ee(e, n.index);
                 if (t === n.value) {
                     o = true;
                     return true;
@@ -600,7 +522,7 @@
                 // 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 l = Le(r, n.index);
+                    var l = Ee(r, n.index);
                     if (!l) {
                         r = e;
                     } else if (t > n.value) {
@@ -617,9 +539,27 @@
             }));
             return l.length === 0 && r ? [ r ] : l;
         };
+        // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
+        // A utility that attempts to move an element into view by scrolling it's derived parent.
+        var Re = function e(t) {
+            if (!t) {
+                return;
+            }
+            var n = t.offsetParent;
+            if (!n) {
+                return;
+            }
+            // Below the bottom of the container.
+                        if (n.scrollTop + n.clientHeight < t.offsetTop + t.clientHeight) {
+                n.scrollTop = t.offsetTop + t.clientHeight - n.clientHeight;
+                // Above the top of the container.
+                        } else if (n.scrollTop > t.offsetTop) {
+                n.scrollTop = t.offsetTop;
+            }
+        };
         // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
         /* eslint-disable @typescript-eslint/no-empty-function */
-        var qe = {
+        var Ae = {
             body: {
                 appendChild: function e() {
                     return [];
@@ -673,14 +613,14 @@
                 search: ""
             }
         };
-        function Be() {
-            var e = typeof document !== "undefined" ? document : qe;
+        function _e() {
+            var e = typeof document !== "undefined" ? document : Ae;
             return e;
         }
         // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
         /* eslint-disable @typescript-eslint/no-empty-function */
-        var De = {
-            document: qe,
+        var Ie = {
+            document: Ae,
             navigator: {
                 userAgent: ""
             },
@@ -734,25 +674,25 @@
                 clearTimeout(t);
             }
         };
-        function Ne() {
-            var e = typeof window !== "undefined" ? window : De;
+        function Me() {
+            var e = typeof window !== "undefined" ? window : Ie;
             return e;
         }
         // CONCATENATED MODULE: ./src/Select/SelectBase.tsx
-        function Ke(e) {
-            return ze(e) || He(e) || Je(e) || Fe();
+        function Le(e) {
+            return Be(e) || De(e) || Fe(e) || qe();
         }
-        function Fe() {
+        function qe() {
             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 He(e) {
+        function De(e) {
             if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
         }
-        function ze(e) {
-            if (Array.isArray(e)) return Xe(e);
+        function Be(e) {
+            if (Array.isArray(e)) return He(e);
         }
-        function $e() {
-            return $e = Object.assign ? Object.assign.bind() : function(e) {
+        function Ve() {
+            return Ve = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var n = arguments[t];
                     for (var r in n) {
@@ -760,29 +700,29 @@
                     }
                 }
                 return e;
-            }, $e.apply(null, arguments);
+            }, Ve.apply(null, arguments);
         }
-        function We(e, t) {
-            return Qe(e) || Ge(e, t) || Je(e, t) || Ue();
+        function Ne(e, t) {
+            return $e(e) || ze(e, t) || Fe(e, t) || Ke();
         }
-        function Ue() {
+        function Ke() {
             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 Je(e, t) {
+        function Fe(e, t) {
             if (e) {
-                if ("string" == typeof e) return Xe(e, t);
+                if ("string" == typeof e) return He(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? Xe(e, t) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? He(e, t) : void 0;
             }
         }
-        function Xe(e, t) {
+        function He(e, t) {
             (null == t || t > e.length) && (t = e.length);
             for (var n = 0, r = Array(t); n < t; n++) {
                 r[n] = e[n];
             }
             return r;
         }
-        function Ge(e, t) {
+        function ze(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
                 var r, o, l, a, i = [], u = !0, c = !1;
@@ -804,12 +744,12 @@
                 return i;
             }
         }
-        function Qe(e) {
+        function $e(e) {
             if (Array.isArray(e)) return e;
         }
-        function Ye(e, t) {
+        function We(e, t) {
             if (null == e) return {};
-            var n, r, o = Ze(e, t);
+            var n, r, o = Ue(e, t);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (r = 0; r < l.length; r++) {
@@ -818,7 +758,7 @@
             }
             return o;
         }
-        function Ze(e, t) {
+        function Ue(e, t) {
             if (null == e) return {};
             var n = {};
             for (var r in e) {
@@ -829,15 +769,15 @@
             }
             return n;
         }
-        function et(e) {
+        function Je(e) {
             "@babel/helpers - typeof";
-            return et = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return Je = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, et(e);
+            }, Je(e);
         }
-        function tt(e, t) {
+        function Xe(e, t) {
             var n = Object.keys(e);
             if (Object.getOwnPropertySymbols) {
                 var r = Object.getOwnPropertySymbols(e);
@@ -847,40 +787,40 @@
             }
             return n;
         }
-        function nt(e) {
+        function Ge(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = null != arguments[t] ? arguments[t] : {};
-                t % 2 ? tt(Object(n), !0).forEach((function(t) {
-                    rt(e, t, n[t]);
-                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : tt(Object(n)).forEach((function(t) {
+                t % 2 ? Xe(Object(n), !0).forEach((function(t) {
+                    Qe(e, t, n[t]);
+                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Xe(Object(n)).forEach((function(t) {
                     Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
             return e;
         }
-        function rt(e, t, n) {
-            return (t = ot(t)) in e ? Object.defineProperty(e, t, {
+        function Qe(e, t, n) {
+            return (t = Ye(t)) in e ? Object.defineProperty(e, t, {
                 value: n,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[t] = n, e;
         }
-        function ot(e) {
-            var t = lt(e, "string");
-            return "symbol" == et(t) ? t : t + "";
+        function Ye(e) {
+            var t = Ze(e, "string");
+            return "symbol" == Je(t) ? t : t + "";
         }
-        function lt(e, t) {
-            if ("object" != et(e) || !e) return e;
+        function Ze(e, t) {
+            if ("object" != Je(e) || !e) return e;
             var n = e[Symbol.toPrimitive];
             if (void 0 !== n) {
                 var r = n.call(e, t || "default");
-                if ("object" != et(r)) return r;
+                if ("object" != Je(r)) return r;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === t ? String : Number)(e);
         }
-        var at = {
+        var et = {
             allowKeyMatching: l().bool,
             allowNewValues: l().bool,
             animateLoading: l().bool,
@@ -929,296 +869,84 @@
             /** @private. */
             virtualization: l().number
         };
-        var it = h()((function(e) {
+        var tt = h()((function(e) {
             return [ e ];
         }));
         // preserve separate widths for single vs. multi mode
-                var ut = h()((function(e) {
+                var nt = h()((function(e) {
             var t = e.anchorWidth, n = e.isMultiple, r = e.maxHeight, o = e.menuStyle;
-            return n ? nt({
+            return n ? Ge({
                 width: Math.max(t !== null && t !== void 0 ? t : 0, 200),
                 maxHeight: r
-            }, o) : nt({
+            }, o) : Ge({
                 minWidth: t !== null && t !== void 0 ? t : undefined,
                 maxWidth: Math.max(t !== null && t !== void 0 ? t : 0, 300),
                 maxHeight: r
             }, o);
         }));
-        var ct = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
-        function st(e) {
+        var rt = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
+        function ot(e) {
             return e && i()(e.props, "value");
         }
-        function ft(e, t) {
-            return "".concat(et(e), "-").concat(e, "-").concat(t);
-        }
-        var pt = [ "append", "error", "prepend" ];
-        var dt = (0, u._)("No matches");
-        var vt = (0, u._)("Select...");
-        var bt = function e(n) {
-            var r = n.activeItemId, o = n.filterKeyword, l = n.hasChildren, a = n.inputId, i = n.inputRef, c = n.menuListboxId, s = n.multiple, f = n.onClearAll, p = n.onSelectAll, d = n.onTextBlur, v = n.onTextChange, b = n.onTextFocus, m = n.onTextKeyDown, y = n.optionSelection, h = n.placement, g = n.selectAllAppearance, O = n.textHasFocus;
-            var w = (0, u._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
-            var S = (0, u._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
+        function lt(e, t) {
+            return "".concat(Je(e), "-").concat(e, "-").concat(t);
+        }
+        var at = [ "append", "error", "prepend" ];
+        var it = (0, u._)("No matches");
+        var ut = (0, u._)("Select...");
+        var ct = function e(n) {
+            var r = n.activeItemId, o = n.filterA11yId, l = n.filterKeyword, a = n.hasChildren, i = n.inputId, c = n.inputRef, s = n.menuListboxId, f = n.multiple, p = n.onClearAll, d = n.onSelectAll, v = n.onTextBlur, b = n.onTextChange, m = n.onTextFocus, y = n.onTextKeyDown, h = n.optionSelection, g = n.placement, O = n.selectAllAppearance, S = n.textHasFocus;
+            var C = (0, u._)("Select all options".concat(h.current === "all" ? " disabled" : ""));
+            var k = (0, u._)("Clear all options".concat(h.current === "none" ? " disabled" : ""));
             // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
-                        var C =  t().createElement(Me, {
-                $placement: h,
+                        var w =  t().createElement(je, {
+                $placement: g,
                 key: "selectAll"
-            },  t().createElement(_e, {
-                $disabled: y.current === "all",
-                "aria-label": w,
-                onClick: p,
+            },  t().createElement(xe, {
+                $disabled: h.current === "all",
+                "aria-label": C,
+                onClick: d,
                 "data-test": "select-all"
-            }, o ? (0, u._)("Select all Matches") : (0, u._)("Select all")),  t().createElement(_e, {
-                $disabled: y.current === "none",
-                "aria-label": S,
-                onClick: f,
+            }, l ? (0, u._)("Select all Matches") : (0, u._)("Select all")),  t().createElement(xe, {
+                $disabled: h.current === "none",
+                "aria-label": k,
+                onClick: p,
                 "data-test": "clear-all"
-            }, o ? (0, u._)("Clear all Matches") : (0, u._)("Clear all")));
+            }, l ? (0, u._)("Clear all Matches") : (0, u._)("Clear all")));
             
             return t().createElement("div", {
                 key: "controls"
-            },  t().createElement(Ae, {
+            }, o &&  t().createElement(L(), {
+                id: o
+            }, (0, u._)("Type to filter")),  t().createElement(Ce, {
                 key: "filter",
                 "data-test": "filter"
-            },  t().createElement(M(), {
-                value: o,
+            },  t().createElement(I(), {
+                value: l,
                 autoCapitalize: "off",
                 autoComplete: "off",
                 autoCorrect: "off",
                 spellCheck: false,
-                onChange: v,
-                onKeyDown: m,
-                onFocus: b,
-                onBlur: d,
+                onChange: b,
+                onKeyDown: y,
+                onFocus: m,
+                onBlur: v,
                 placeholder: (0, u._)("filter"),
                 role: "combobox",
                 "aria-expanded": "true",
-                "aria-controls": c,
-                "aria-owns": l ? r : undefined,
+                "aria-controls": s,
+                "aria-owns": a ? r : undefined,
                 "aria-label": (0, u._)("Filter"),
                 "aria-autocomplete": "list",
-                "aria-activedescendant": O && l ? r : undefined,
-                inputRef: i,
-                inputId: a,
+                "aria-activedescendant": S && a ? r : undefined,
+                inputRef: c,
+                inputId: i,
                 canClear: true,
-                startAdornment:  t().createElement(Te, null,  t().createElement(Q, null))
-            })), s && l && g === "buttongroup" && C);
+                startAdornment:  t().createElement(ke, null,  t().createElement(Z, null))
+            })), f && a && O === "buttongroup" && w);
         };
-        var mt = false;
-        var yt = function n(r) {
-            var o = r.activeIndex, l = r.activeItemId, a = r.allowKeyMatching, i = r.allowNewValues, c = r.availableMatchOptions, s = r.availableOptionCount, f = r.children, d = r.currentValues, b = r.filter, m = r.filterKeyword, y = r.firstSelectedOptionIndex, h = r.isLoadingOptions, g = r.multiple, O = r.newTopValues, w = r.onActiveOptionMount, S = r.onClearAll, C = r.onClick, k = r.onKeyDown, x = r.onOptionMount, j = r.onScrollBottom, E = r.onSelectAll, P = r.optionSelection, T = r.selectAllAppearance, I = r.selectedOptionCount, _ = r.setActiveValue, M = r.setAvailableMatchOptions, R = r.setAvailableOptionCount, L = r.setDisplayedValues, q = r.setFirstSelectedOptionIndex, B = r.setOptionSelection, D = r.setSelectedOptionCount, N = r.textHasFocus, K = r.toggle;
-            R(0);
-            q(undefined);
-            D(0);
-            _(undefined);
-            M([]);
-            var F;
-            var H = 0;
-            var z = false;
-            // used to avoid overwriting the selected item ref in multiple mode
-                        var $;
-            var W = e.Children.toArray(f).reduce((function(n, r, o) {
-                // ignore Headings and Dividers
-                if (!st(r)) {
-                    n.push(r);
-                    return n;
-                }
-                var l = r.props, i = l.disabled, u = l.hidden, s = l.label, f = l.value;
- // Find out if the search string exactly matches a value
-                                if (f === m) {
-                    F = true;
-                }
-                var p = d && d.indexOf(f) >= 0;
-                var v = !!p && !i && !$;
-                var y = a && !g && !b && !h && !j;
-                var w = ft(f, s);
-                var S = -1;
-                if (y && !i && !u) {
-                    c.current.push({
-                        label: s,
-                        value: f
-                    });
-                    S = c.current.length - 1;
-                }
-                // Format the Menu.Item
-                                var E =  (0, e.cloneElement)(r, {
-                    key: r.key || o,
-                    onClick: C,
-                    onKeyDown: y ? function(e) {
-                        return k(e, S);
-                    } : undefined,
-                    selected: p,
-                    multiple: g,
-                    role: "option",
-                    ref: function e(t) {
-                        return x(t, w, v);
-                    }
-                });
-                if (v) {
-                    $ = true;
-                }
-                if (O && O.indexOf(f) >= 0) {
-                    if (H === 0) {
-                        n.splice(H, 0,  t().createElement(A.Divider, {
-                            key: "topDivider"
-                        }));
-                        z = true;
-                    }
-                    n.splice(H, 0, E);
-                    H += 1;
-                } else {
-                    n.push(E);
-                }
-                return n;
-            }), []);
-            // In multiple mode, add missing items
-                        if (g) {
-                v()(d, (function(e) {
-                    var n = p()(W, (function(t) {
-                        return st(t) && t.props && t.props.value === e;
-                    }));
-                    if (!n) {
-                        if (e === m) {
-                            F = true;
-                        }
-                        var r = O && O.indexOf(e) >= 0;
-                        var o = O.length;
-                        if (H === 0) {
-                            W.splice(0, 0,  t().createElement(A.Divider, {
-                                key: "topDivider"
-                            }));
-                            H += 1;
-                            z = true;
-                        }
-                        W.splice(r ? 0 : o + 1, 0,  t().createElement(he, {
-                            label: String(e),
-                            value: e,
-                            key: "missing-value-".concat(e),
-                            onClick: C,
-                            multiple: g,
-                            selected: true
-                        }));
-                        if (r) {
-                            H += 1;
-                        }
-                    }
-                }));
-            }
-            var U = b === "controlled";
-            // Filter the items
-                        var J = (0, V.stringToKeywords)(m);
-            W = U ? W : W.filter((function(e) {
-                if (st(e)) {
-                    return (0, V.testPhrase)(e.props.label, J);
-                }
-                return true;
- // Keep all headers and non-interactive options
-                        })).map((function(t) {
-                if (!st(t)) {
-                    return t;
-                }
-                // highlight matched text
-                                var n = J && (0, V.keywordLocations)(t.props.label, J);
-                
-                return (0, e.cloneElement)(t, {
-                    matchRanges: n || undefined
-                });
-            }));
-            // Add the option to add the new value
-                        if (i && !F && m) {
-                var X = z ? H + 1 : H;
-                W.splice(X, 0,  t().createElement(he, {
-                    label: "".concat(m, " (new value)"),
-                    value: m,
-                    key: "newValue",
-                    multiple: g,
-                    onClick: C
-                }));
-            }
-            // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
-                        var G = T === "checkbox" && g && W.length > 1 ? 1 : 0;
-            var Q = true;
-            // Highlight the selected Items and remove hidden
-                        W = W.reduce((function(t, n) {
-                // ignore Dividers & Headings
-                if (!st(n)) {
-                    t.push(n);
-                    return t;
-                }
-                // Ignore any hidden items
-                                if (n.props && n.props.hidden) {
-                    return t;
-                }
-                if (n.props.selected && !n.props.disabled && y.current == null) {
-                    q(s.current);
-                }
-                var r = G === o;
-                G += 1;
-                R(s.current + 1);
-                D(I.current + (n.props.selected ? 1 : 0));
-                if (n.key !== "newValue" && !n.props.disabled && !n.props.selected) {
-                    Q = false;
-                }
-                if (!r || !N) {
-                    t.push(n);
-                    return t;
-                }
-                if (!n.props.disabled) {
-                    _(n.props.value);
-                }
-                var a =  (0, e.cloneElement)(n, {
-                    active: r,
-                    id: l,
-                    ref: w
-                });
-                t.push(a);
-                return t;
-            }), []);
-            B(I.current === 0 && "none" || Q && "all" || "some");
-            // add select all option
-                        if (T === "checkbox" && g && s.current > 0) {
-                var Y;
-                if (P.current === "all") {
-                    if (m === "") {
-                        Y = (0, u._)("Clear all");
-                    } else {
-                        Y = (0, u._)("Clear all matches");
-                    }
-                } else if (m === "") {
-                    Y = (0, u._)("Select all");
-                } else {
-                    Y = (0, u._)("Select all matches");
-                }
-                if (o === 0 && N) {
-                    _("selectAll");
-                }
-                W.unshift( t().createElement(we, {
-                    active: o === 0,
-                    changedToggle: !!K,
-                    id: o === 0 ? l : undefined,
-                    onClick: P.current === "all" ? S : E,
-                    selectAllLabel: Y,
-                    selected: P.current === "all" || P.current !== "none" && "some",
-                    totalCount: d.length,
-                    tabIndex: -1,
-                    ref: w
-                }),  t().createElement(A.Divider, {
-                    key: "selectAllDivider"
-                }));
-            }
-            L(W.reduce((function(e, t) {
-                if (st(t)) {
-                    e.push(t.props.value);
-                }
-                return e;
-            }), []));
-            mt = W.some((function(e) {
-                return st(e);
-            }));
-            // eslint-disable-next-line react/jsx-no-useless-fragment
-                        
-            return t().createElement(t().Fragment, null, W);
-        };
-        var ht = function e(t) {
+        var st = false;
+        var ft = function e(t) {
             var n = t.prefixLabel, r = t.label, o = t.suffixLabel;
             var l = r;
             if (n) {
@@ -1229,219 +957,201 @@
             }
             return l;
         };
-        function gt(n) {
-            var r = n.appearance, o = n.append, l = n.children, a = n.currentValues, i = a === void 0 ? [] : a, c = n.describedBy, s = n.disabled, f = n.elementRef, d = n.error, v = n.inline, b = n.labelText, m = n.labelledBy, y = n.multiple, h = n.onClick, g = n.placeholder, w = n.prefixLabel, S = n.prepend, C = n.required, k = n.suffixLabel, x = n.toggle, j = n.toggleContent, E = Ye(n, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent" ]);
-            var A;
+        function pt(n) {
+            var r = n.appearance, o = n.append, l = n.children, a = n.currentValues, i = a === void 0 ? [] : a, c = n.describedBy, s = n.disabled, f = n.elementRef, d = n.error, v = n.inline, b = n.labelText, m = n.labelledBy, y = n.multiple, h = n.onClick, g = n.placeholder, S = n.prefixLabel, C = n.prepend, k = n.required, w = n.suffixLabel, x = n.toggle, j = n.toggleContent, P = We(n, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent" ]);
             var T;
-            var I = [];
+            var R;
+            var A = [];
             // Generate buttonLabels
                         var _ = e.Children.toArray(l);
-            var M = i.reduce((function(e, t, n, r) {
+            var I = i.reduce((function(e, t, n, r) {
                 var o = p()(_, (function(e) {
-                    return st(e) && e.props.value === t;
+                    return ot(e) && e.props.value === t;
                 }));
                 if (o) {
                     var l = o.props, a = l.children, c = l.icon, s = l.label;
                     var f = j !== "optionLabel" && a ? a : s;
                     e.push(f);
-                    I.push(s);
+                    A.push(s);
                     // if not in multiple mode, add the icon
                                         if (!y && i.length === 1) {
-                        A = c;
+                        T = c;
                     }
                 } else if (y) {
                     // only add values that don't match an option in "multiple" mode to preserve old behaviour
                     e.push(t);
-                    I.push(t.toString());
+                    A.push(t.toString());
                 }
                 if (n < r.length - 1) {
                     e.push((0, u._)(", "));
-                    I.push((0, u._)(", "));
+                    A.push((0, u._)(", "));
                 }
                 return e;
             }), []);
-            T = M;
+            R = I;
             // only apply prefix / suffix if the label is not empty
-                        if (T.length > 0) {
+                        if (R.length > 0) {
                 // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
-                I = ht({
-                    prefixLabel: w,
-                    label: T.length > 1 ? [ "".concat(i.length, " items selected") ] : I,
-                    suffixLabel: k
+                A = ft({
+                    prefixLabel: S,
+                    label: R.length > 1 ? [ "".concat(i.length, " items selected") ] : A,
+                    suffixLabel: w
                 });
-                T = ht({
-                    prefixLabel: w,
-                    label: T,
-                    suffixLabel: k
+                R = ft({
+                    prefixLabel: S,
+                    label: R,
+                    suffixLabel: w
                 });
             }
             // single <Select> behaviour is to show the placeholder if all parts of the label
             // are empty strings so we replicate this behaviour here
-                        if (T.length === 0 || !y && T.every((function(e) {
+                        if (R.length === 0 || !y && R.every((function(e) {
                 return e === "";
             }))) {
-                T = it(g);
-                I = T;
+                R = tt(g);
+                A = R;
             }
-            var R = nt({
+            var M = Object.keys(P).includes("aria-labelledby");
+            var L = Ge({
                 "aria-describedby": c,
-                "aria-label": "".concat(b ? "".concat(b, ", ") : "").concat(I.join("")),
+                "aria-label": m || M ? undefined : "".concat(b ? "".concat(b, ", ") : "").concat(A.join("")),
+                // aria-labelledby takes precedence over aria-label, so existence of both is redundant
                 "aria-labelledby": m,
-                // aria-labelledby takes precedence over aria-label if exists
-                "aria-required": C,
+                "aria-required": k,
                 "data-select-appearance": r,
                 append: o,
-                prepend: S,
+                prepend: C,
                 onClick: h,
                 role: "combobox",
                 disabled: s,
                 elementRef: f,
                 error: d
-            }, E);
+            }, P);
             if (y) {
-                R["data-test-values"] = JSON.stringify(i);
+                L["data-test-values"] = JSON.stringify(i);
             } else {
-                var L = We(i, 1), V = L[0];
-                R["data-test-value"] = V;
+                var q = Ne(i, 1), D = q[0];
+                L["data-test-value"] = D;
             }
             if (x) {
                 
-                return (0, e.cloneElement)(x, R);
+                return (0, e.cloneElement)(x, L);
             }
             if (r === "link") {
                 
-                return t().createElement(P(), $e({}, R, {
+                return t().createElement(E(), Ve({}, L, {
                     "data-select-appearance": "link"
-                }), !!A &&  t().createElement(Ee, null, A), T || g,  t().createElement(Pe, null,  t().createElement($, null)));
+                }), !!T &&  t().createElement(Oe, null, T), R || g,  t().createElement(Se, null,  t().createElement(U, null)));
             }
             
-            return t().createElement(je, $e({}, R, {
+            return t().createElement(ge, Ve({}, L, {
                 $multiple: y,
                 appearance: r,
-                label: T,
+                label: R,
                 error: d,
-                icon: A,
+                icon: T,
                 inline: v,
                 isMenu: true,
                 onClick: h
-            }, O()(E, pt)), !!i.length && y &&  t().createElement(Ie, {
+            }, O()(P, at)), !!i.length && y &&  t().createElement(we, {
                 "data-role": "count"
             }, "(", i.length, ")"));
         }
-        gt[x.legacyRefMode] = true;
-        function Ot(n) {
-            var r;
-            var o = n.allowKeyMatching, l = o === void 0 ? true : o, a = n.animateLoading, i = n.appearance, u = i === void 0 ? "toggle" : i, c = n.append, s = n.allowNewValues, f = n.children, d = n.defaultPlacement, v = d === void 0 ? "vertical" : d, b = n.defaultValues, y = n.describedBy, h = n.disabled, g = n.elementRef, O = n.error, w = n.filter, C = n.footerMessage, x = n.inline, E = n.inputId, P = n.inputRef, A = n.isLoadingOptions, _ = n.labelledBy, M = n.labelText, R = n.loadingMessage, V = n.menuStyle, D = V === void 0 ? {} : V, N = n.multiple, K = n.name, F = n.noOptionsMessage, H = F === void 0 ? dt : F, z = n.onChange, $ = n.onScroll, W = n.onScrollBottom, U = n.onFilterChange, J = n.onClick, X = n.onClose, G = n.onOpen, Q = n.required, Y = n.placeholder, Z = Y === void 0 ? vt : Y, ee = n.prefixLabel, te = n.prepend, ne = n.repositionMode, re = ne === void 0 ? "flip" : ne, oe = n.selectAllAppearance, le = oe === void 0 ? "buttongroup" : oe, ae = n.showSelectedValuesFirst, ie = n.suffixLabel, ue = n.tabConfirmsNewValue, ce = n.values, se = n.virtualization, fe = n.toggle, pe = n.toggleContent, de = pe === void 0 ? "optionChildren" : pe, ve = Ye(n, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent" ]);
+        pt[x.legacyRefMode] = true;
+        function dt(n) {
+            var r = n.allowKeyMatching, o = r === void 0 ? true : r, l = n.animateLoading, a = n.appearance, i = a === void 0 ? "toggle" : a, c = n.append, s = n.allowNewValues, f = n.children, d = n.defaultPlacement, b = d === void 0 ? "vertical" : d, y = n.defaultValues, h = n.describedBy, g = n.disabled, O = n.elementRef, S = n.error, k = n.filter, x = n.footerMessage, P = n.inline, E = n.inputId, _ = n.inputRef, I = n.isLoadingOptions, M = n.labelledBy, L = n.labelText, q = n.loadingMessage, K = n.menuStyle, F = K === void 0 ? {} : K, H = n.multiple, z = n.name, $ = n.noOptionsMessage, W = $ === void 0 ? it : $, U = n.onChange, J = n.onScroll, X = n.onScrollBottom, G = n.onFilterChange, Q = n.onClick, Y = n.onClose, Z = n.onOpen, ee = n.required, te = n.placeholder, ne = te === void 0 ? ut : te, re = n.prefixLabel, oe = n.prepend, le = n.repositionMode, ae = le === void 0 ? "flip" : le, ie = n.selectAllAppearance, ue = ie === void 0 ? "buttongroup" : ie, ce = n.showSelectedValuesFirst, se = n.suffixLabel, pe = n.tabConfirmsNewValue, de = n.values, be = n.virtualization, me = n.toggle, ye = n.toggleContent, he = ye === void 0 ? "optionChildren" : ye, ge = We(n, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent" ]);
             // @docs-props-type SelectBasePropsBase
-                        var be = (0, Re["default"])({
-                value: ce,
-                defaultValue: b,
-                componentName: "SelectBase"
+                        var Oe = (0, Pe["default"])({
+                componentName: "SelectBase",
+                /* eslint-disable-next-line prefer-rest-params */
+                componentProps: arguments[0],
+                // see SUI-7028
+                defaultValuePropName: "defaultValues",
+                valuePropName: "values"
             });
             // states
-                        var me = (0, e.useState)((function() {
+                        var Se = (0, e.useState)((function() {
                 return {
-                    activeItemId: (0, q.createDOMID)("active-item"),
-                    menuListboxId: (0, q.createDOMID)("menu-listbox")
+                    activeItemId: (0, V.createDOMID)("active-item"),
+                    menuListboxId: (0, V.createDOMID)("menu-listbox")
                 };
-            })), ye = We(me, 1), he = ye[0], ge = he.activeItemId, Oe = he.menuListboxId;
-            var we = (0, e.useState)(0), Se = We(we, 2), Ce = Se[0], ke = Se[1];
-            var xe = (0, e.useState)(""), je = We(xe, 2), Ee = je[0], Pe = je[1];
-            var Ae = (0, e.useState)(false), Te = We(Ae, 2), Ie = Te[0], _e = Te[1];
-            var Me = (0, e.useState)(false), Le = We(Me, 2), qe = Le[0], Be = Le[1];
-            var De = (0, e.useState)([]), Fe = We(De, 2), He = Fe[0], ze = Fe[1];
-            var Ue = (0, e.useState)(b || []), Je = We(Ue, 2), Xe = Je[0], Ge = Je[1];
+            })), Ce = Ne(Se, 1), ke = Ce[0], we = ke.activeItemId, xe = ke.menuListboxId;
+            var je = (0, e.useState)(0), Ee = Ne(je, 2), Ae = Ee[0], _e = Ee[1];
+            var Ie = (0, e.useState)(""), qe = Ne(Ie, 2), De = qe[0], Be = qe[1];
+            var Ke = (0, e.useState)(false), Fe = Ne(Ke, 2), He = Fe[0], ze = Fe[1];
+            var $e = (0, e.useState)(false), Ue = Ne($e, 2), Je = Ue[0], Xe = Ue[1];
+            var Ge = (0, e.useState)([]), Qe = Ne(Ge, 2), Ye = Qe[0], Ze = Qe[1];
+            var et = (0, e.useState)(y || []), tt = Ne(et, 2), at = tt[0], ft = tt[1];
  // previous state
-                        var Qe = L()(Ce);
+                        var dt = D()(Ae);
             // refs
-                        var Ze = (0, e.useRef)(null);
-            var et = (0, e.useRef)(null);
-            var tt = (0, e.useRef)(null);
-            var nt = (0, e.useRef)([]);
-            var rt = (0, e.useRef)([]);
-            var ot = (0, e.useRef)(Qe);
-            var lt = (0, e.useRef)();
-            var at = (0, e.useRef)({});
-            var it = (0, e.useRef)(0);
-            var pt = (0, e.useRef)([]);
-            var ht = (0, e.useRef)(null);
+                        var vt = (0, e.useRef)(null);
+            var bt = (0, e.useRef)(null);
+            var mt = (0, e.useRef)(null);
+            var yt = (0, e.useRef)([]);
+            var ht = (0, e.useRef)([]);
+            var gt = (0, e.useRef)(dt);
             var Ot = (0, e.useRef)();
-            var wt = (0, e.useRef)(0);
-            var St = (0, e.useRef)("none");
-            // setters for refs used in subcomponents
-                        var Ct = function e(t) {
-                it.current = t;
-            };
-            var kt = function e(t) {
-                Ot.current = t;
-            };
-            var xt = function e(t) {
-                wt.current = t;
-            };
-            var jt = function e(t) {
-                lt.current = t;
-            };
-            var Et = function e(t) {
-                rt.current = t;
-            };
-            var Pt = function e(t) {
-                St.current = t;
-            };
-            var At = function e(t) {
-                pt.current = t;
-            };
+            var St = (0, e.useRef)({});
+            var Ct = (0, e.useRef)(0);
+            var kt = (0, e.useRef)([]);
+            var wt = (0, e.useRef)(null);
+            var xt = (0, e.useRef)();
+            var jt = (0, e.useRef)(0);
+            var Pt = (0, e.useRef)("none");
+            var Et = (0, e.useState)(k ? (0, V.createDOMID)("filter") : undefined), Tt = Ne(Et, 1), Rt = Tt[0];
             (0, e.useEffect)((function() {
                 if (false) {}
-            }), [ u, c, O, te ]);
-            var Tt = (0, e.useCallback)((function() {
-                var e = be ? ce : Xe;
-                return N || e == null ? e : e.slice(0, 1);
-            }), [ be, N, ce, Xe ]);
-            var It = (0, e.useCallback)((function() {
+            }), [ i, c, S, oe ]);
+            var At = (0, e.useCallback)((function() {
+                var e = Oe ? de : at;
+                return H || e == null ? e : e.slice(0, 1);
+            }), [ Oe, H, de, at ]);
+            var _t = (0, e.useCallback)((function() {
                 var e;
                 // in non-multiple mode, don't move values to the top of the list
-                                return N && ae !== "never" ? (e = Tt()) !== null && e !== void 0 ? e : [] : [];
-            }), [ Tt, N, ae ]);
-            var _t = (0, e.useCallback)((function(e) {
-                var t = Ee;
-                _e(true);
-                ze(It());
+                                return H && ce !== "never" ? (e = At()) !== null && e !== void 0 ? e : [] : [];
+            }), [ At, H, ce ]);
+            var It = (0, e.useCallback)((function(e) {
+                var t = De;
+                ze(true);
+                Ze(_t());
                 // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
-                                if (N) {
-                    Pe("");
+                                if (H) {
+                    Be("");
                 }
-                if (t !== Ee) {
-                    U === null || U === void 0 ? void 0 : U(e, {
-                        keyword: Ee
+                if (t !== De) {
+                    G === null || G === void 0 ? void 0 : G(e, {
+                        keyword: De
                     });
                 }
-            }), [ Ee, It, N, U ]);
+            }), [ De, _t, H, G ]);
             (0, e.useEffect)((function() {
-                if (Ie) {
-                    G === null || G === void 0 ? void 0 : G();
-                    if (ht.current && !w) {
-                        ht.current.focus();
+                if (He) {
+                    Z === null || Z === void 0 ? void 0 : Z();
+                    if (wt.current && !k) {
+                        wt.current.focus();
                     } else {
                         var e;
-                        ke((e = Ot.current) !== null && e !== void 0 ? e : 0);
+                        _e((e = xt.current) !== null && e !== void 0 ? e : 0);
                     }
                 }
-            }), [ G, Ie, He, Ee, w ]);
+            }), [ Z, He, Ye, De, k ]);
             var Mt = (0, e.useCallback)((function() {
-                _e(false);
-                ke(0);
-                ot.current = null;
-                X === null || X === void 0 ? void 0 : X();
-            }), [ X ]);
-            var Rt = (0, e.useCallback)((function(e, t) {
+                ze(false);
+                _e(0);
+                gt.current = null;
+                Y === null || Y === void 0 ? void 0 : Y();
+            }), [ Y ]);
+            var Lt = (0, e.useCallback)((function(e, t) {
                 var n;
-                var r = (n = Tt()) !== null && n !== void 0 ? n : [];
+                var r = (n = At()) !== null && n !== void 0 ? n : [];
                 var o = r.indexOf(t);
                 var l;
-                if (N) {
+                if (H) {
                     if (o >= 0) {
-                        l = [].concat(Ke(r.slice(0, o)), Ke(r.slice(o + 1)));
+                        l = [].concat(Le(r.slice(0, o)), Le(r.slice(o + 1)));
                     } else {
                         l = r.concat([ t ]);
                     }
@@ -1449,14 +1159,14 @@
                     // non-multiple mode must always have a value
                     l = [ t ];
                 }
-                var a = !be;
+                var a = !Oe;
                 if (a) {
-                    Ge(l);
+                    ft(l);
                 }
-                if (N) {
+                if (H) {
                     // in uncontrolled multiple mode, keep the menu open
                     if (a) {
-                        _e(true);
+                        ze(true);
                     }
                 } else {
                     var i;
@@ -1465,127 +1175,127 @@
                                         Mt({
                         reason: "contentClick"
                     });
-                    (i = Ze.current) === null || i === void 0 ? void 0 : i.focus();
+                    (i = vt.current) === null || i === void 0 ? void 0 : i.focus();
                 }
-                z === null || z === void 0 ? void 0 : z(e, {
+                U === null || U === void 0 ? void 0 : U(e, {
                     values: l,
-                    name: K,
+                    name: z,
                     reason: "valueToggle"
                 });
-            }), [ Tt, Mt, be, N, K, z ]);
-            var Lt = function e() {
-                et.current = null;
-                nt.current = [];
-                if (tt.current) {
-                    clearTimeout(tt.current);
+            }), [ At, Mt, Oe, H, z, U ]);
+            var qt = function e() {
+                bt.current = null;
+                yt.current = [];
+                if (mt.current) {
+                    clearTimeout(mt.current);
                 }
             };
-            var Vt = (0, e.useCallback)((function(e) {
+            var Dt = (0, e.useCallback)((function(e) {
                 var n;
                 // this doesn't make sense if we can't select multiple values
-                                if (!N) {
+                                if (!H) {
                     return;
                 }
-                var r = (n = Tt()) !== null && n !== void 0 ? n : [];
-                var o = S()(r.concat(pt.current));
+                var r = (n = At()) !== null && n !== void 0 ? n : [];
+                var o = C()(r.concat(kt.current));
                 o = t().Children.toArray(f).filter((function(e) {
-                    return st(e) && m()(o, e.props.value) && (!e.props.disabled || m()(r, e.props.value));
+                    return ot(e) && m()(o, e.props.value) && (!e.props.disabled || m()(r, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!be) {
-                    Ge(o);
+                if (!Oe) {
+                    ft(o);
                 }
-                z === null || z === void 0 ? void 0 : z(e, {
+                U === null || U === void 0 ? void 0 : U(e, {
                     values: o,
-                    name: K,
+                    name: z,
                     reason: "selectAll"
                 });
-            }), [ f, Tt, be, N, K, z ]);
-            var qt = (0, e.useCallback)((function(e) {
+            }), [ f, At, Oe, H, z, U ]);
+            var Bt = (0, e.useCallback)((function(e) {
                 var n;
                 // this doesn't make sense if we can't select multiple values
-                                if (!N) {
+                                if (!H) {
                     return;
                 }
-                var r = (n = Tt()) !== null && n !== void 0 ? n : [];
-                var o = k().apply(void 0, [ r ].concat(Ke(pt.current)));
+                var r = (n = At()) !== null && n !== void 0 ? n : [];
+                var o = w().apply(void 0, [ r ].concat(Le(kt.current)));
                 // this will unselect all selected values unless those values are disabled or hidden by the filter
                                 var l = t().Children.toArray(f).filter((function(e) {
-                    return st(e) && (m()(r, e.props.value) && e.props.disabled || m()(o, e.props.value));
+                    return ot(e) && (m()(r, e.props.value) && e.props.disabled || m()(o, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!be) {
-                    Ge(l);
+                if (!Oe) {
+                    ft(l);
                 }
-                z === null || z === void 0 ? void 0 : z(e, {
+                U === null || U === void 0 ? void 0 : U(e, {
                     values: l,
-                    name: K,
+                    name: z,
                     reason: "clearAll"
                 });
-            }), [ f, Tt, be, N, K, z ]);
-            var Bt = (0, e.useCallback)((function(e) {
-                if (Ie && !A) {
-                    W === null || W === void 0 ? void 0 : W(e);
+            }), [ f, At, Oe, H, z, U ]);
+            var Vt = (0, e.useCallback)((function(e) {
+                if (He && !I) {
+                    X === null || X === void 0 ? void 0 : X(e);
                 }
-            }), [ Ie, A, W ]);
-            var Dt = (0, e.useCallback)((function(t) {
-                var n = (0, B.keycode)(t.nativeEvent);
+            }), [ He, I, X ]);
+            var Nt = (0, e.useCallback)((function(t) {
+                var n = (0, N.keycode)(t.nativeEvent);
                 if (n === "tab") {
-                    if (ue && lt.current && it.current <= 1) {
+                    if (pe && Ot.current && Ct.current <= 1) {
                         t.preventDefault();
-                        Rt(t, lt.current);
+                        Lt(t, Ot.current);
                     }
                 }
                 if (t.shiftKey || t.metaKey || t.ctrlKey) {
                     if (n === "a" && (t.ctrlKey || t.metaKey)) {
                         // handle control + A
-                        if (St.current === "all") {
-                            qt(t);
+                        if (Pt.current === "all") {
+                            Bt(t);
                         } else {
-                            Vt(t);
+                            Dt(t);
                         }
                     }
                     return;
                 }
                 if (n === "down") {
                     t.preventDefault();
-                    ke(Math.min(Ce + 1, le === "checkbox" ? it.current : it.current - 1));
-                    if (f && W) {
+                    _e(Math.min(Ae + 1, ue === "checkbox" ? Ct.current : Ct.current - 1));
+                    if (f && X) {
                         var r;
-                        var o = e.Children.toArray(f).length - (2 + ((r = Tt()) !== null && r !== void 0 ? r : []).length);
-                        if (Ce === o) {
-                            Bt(t);
+                        var o = e.Children.toArray(f).length - (2 + ((r = At()) !== null && r !== void 0 ? r : []).length);
+                        if (Ae === o) {
+                            Vt(t);
                         }
                     }
                 }
                 if (n === "up") {
                     t.preventDefault();
-                    ke(Math.max(Ce - 1, 0));
+                    _e(Math.max(Ae - 1, 0));
                 }
-                if (n === "enter" && lt.current && Ie) {
-                    if (lt.current === "selectAll") {
-                        if (St.current === "all") {
-                            qt(t);
+                if (n === "enter" && Ot.current && He) {
+                    if (Ot.current === "selectAll") {
+                        if (Pt.current === "all") {
+                            Bt(t);
                         } else {
-                            Vt(t);
+                            Dt(t);
                         }
                     } else {
                         t.preventDefault();
-                        Rt(t, lt.current);
+                        Lt(t, Ot.current);
                     }
                 }
-            }), [ Ce, f, Tt, qt, Bt, Vt, W, Ie, le, ue, Rt ]);
-            var Nt = (0, e.useCallback)((function(e, t) {
+            }), [ Ae, f, At, Bt, Vt, Dt, X, He, ue, pe, Lt ]);
+            var Kt = (0, e.useCallback)((function(e, t) {
                 var n = t.value;
                 e.preventDefault();
-                if (!Ie) {
+                if (!He) {
                     return;
                 }
-                Rt(e, n);
-            }), [ Ie, Rt ]);
-            var Kt = (0, e.useCallback)((function(e, t) {
+                Lt(e, n);
+            }), [ He, Lt ]);
+            var Ft = (0, e.useCallback)((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) {
@@ -1594,227 +1304,435 @@
                         index: 0,
                         value: n
                     };
-                    if (!et.current) {
+                    if (!bt.current) {
                         if (n === " ") {
-                            Lt();
+                            qt();
                             return;
                         }
-                        r = Ve(rt.current, o);
-                    } else if (nt.current.length > 1) {
-                        o.index = et.current.index + 1;
-                        r = Ve(nt.current, o);
+                        r = Te(ht.current, o);
+                    } else if (yt.current.length > 1) {
+                        o.index = bt.current.index + 1;
+                        r = Te(yt.current, o);
                     }
                     if (r.length) {
-                        var l = 0;
+                        var l;
+                        var a = 0;
                         // If the active option is a first character match, cycle to the next matching option.
                                                 if (o.index === 0 && r.length > 1) {
-                            var a = r.indexOf(rt.current[t]);
-                            if (a >= 0) {
-                                l = a === r.length - 1 ? 0 : a + 1;
+                            var i = r.indexOf(ht.current[t]);
+                            if (i >= 0) {
+                                a = i === r.length - 1 ? 0 : i + 1;
                             }
                         }
-                        var i = r[l];
-                        var u = i.value, c = i.label;
-                        var s = at.current[ft(u, c)];
-                        if (s != null) {
-                            var f;
-                            (f = s.focus) === null || f === void 0 ? void 0 : f.call(s);
-                        }
+                        var u = r[a];
+                        var c = u.value, s = u.label;
+                        var f = St.current[lt(c, s)];
+                        f === null || f === void 0 ? void 0 : (l = f.focus) === null || l === void 0 ? void 0 : l.call(f);
                     }
-                    nt.current = r;
-                    et.current = o;
-                    if (tt.current) {
-                        clearTimeout(tt.current);
+                    yt.current = r;
+                    bt.current = o;
+                    if (mt.current) {
+                        clearTimeout(mt.current);
                     }
-                    tt.current = setTimeout(Lt, 500);
+                    mt.current = setTimeout(qt, 500);
                     e.preventDefault();
                     e.stopPropagation();
                 }
             }), []);
-            var Ft = (0, e.useCallback)((function(e, t) {
+            var Ht = (0, e.useCallback)((function(e, t) {
                 var n = t.value;
-                Pe(n);
-                _e(true);
-                ke(0);
-                U === null || U === void 0 ? void 0 : U(e, {
+                Be(n);
+                ze(true);
+                _e(0);
+                G === null || G === void 0 ? void 0 : G(e, {
                     keyword: n
                 });
-            }), [ U ]);
-            var Ht = (0, e.useCallback)((function() {
-                Be(true);
-            }), []);
+            }), [ G ]);
             var zt = (0, e.useCallback)((function() {
-                Be(false);
+                Xe(true);
             }), []);
-            var $t = (0, e.useCallback)((function(e) {
-                if (ot.current !== Ce) {
-                    e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
+            var $t = (0, e.useCallback)((function() {
+                Xe(false);
+            }), []);
+            var Wt = (0, e.useCallback)((function(e) {
+                if (gt.current !== Ae) {
+                    Re(e);
                 }
-            }), [ Ce ]);
-            var Wt = (0, e.useCallback)((function(e, t, n) {
+            }), [ Ae ]);
+            var Ut = (0, e.useCallback)((function(e, t, n) {
                 if (n) {
-                    ht.current = e;
+                    wt.current = e;
                 }
                 if (e == null) {
-                    delete at.current[t];
+                    delete St.current[t];
                 } else {
-                    at.current[t] = e;
+                    St.current[t] = e;
                 }
-            }), []);
-            var Ut = (0, e.useCallback)((function(e) {
-                Ze.current = e;
-            }), [ Ze ]);
-            var Jt = (r = Tt()) !== null && r !== void 0 ? r : [];
-            var Xt = e.Children.toArray(f);
-            var Gt = Jt.some((function(e) {
-                var t = p()(Xt, (function(t) {
-                    return st(t) && t.props.value === e;
+            }), [ St ]);
+            var Jt = (0, e.useCallback)((function(e) {
+                vt.current = e;
+            }), [ vt ]);
+            var Xt = (0, e.useMemo)((function() {
+                var e;
+                return (e = At()) !== null && e !== void 0 ? e : [];
+            }), [ At ]);
+            var Gt = e.Children.toArray(f);
+            var Qt = Xt.some((function(e) {
+                var t = p()(Gt, (function(t) {
+                    return ot(t) && t.props.value === e;
                 }));
                 return t && !t.props.disabled;
             }));
-            var Qt = ae === "immediately" ? It() : He;
-            var Yt = {
-                activeIndex: Ce,
-                activeItemId: ge,
-                allowKeyMatching: l,
-                allowNewValues: s,
-                availableMatchOptions: rt,
-                availableOptionCount: it,
-                children: f,
-                currentValues: Jt,
-                filter: w,
-                filterKeyword: Ee,
-                firstSelectedOptionIndex: Ot,
-                isLoadingOptions: A,
-                multiple: N,
-                newTopValues: Qt,
-                onActiveOptionMount: $t,
-                onClick: Nt,
-                onClearAll: qt,
-                onKeyDown: Kt,
-                onOptionMount: Wt,
-                onScrollBottom: W,
-                onSelectAll: Vt,
-                optionSelection: St,
-                selectAllAppearance: le,
-                selectedOptionCount: wt,
-                setActiveValue: jt,
-                setAvailableMatchOptions: Et,
-                setAvailableOptionCount: Ct,
-                setDisplayedValues: At,
-                setFirstSelectedOptionIndex: kt,
-                setOptionSelection: Pt,
-                setSelectedOptionCount: xt,
-                textHasFocus: qe,
-                toggle: fe
-            };
-            var Zt = function e(n) {
-                var r = n.anchorWidth, o = n.maxHeight, l = n.placement;
-                var i = ut({
+            var Yt = ce === "immediately" ? _t() : Ye;
+            var Zt = (0, e.useMemo)((function() {
+                Ct.current = 0;
+                xt.current = undefined;
+                jt.current = 0;
+                Ot.current = undefined;
+                ht.current = [];
+                var n = function e(t, n) {
+                    return function(e) {
+                        return Ut(e, t, n);
+                    };
+                };
+                var r;
+                var l = 0;
+                var a = false;
+                // used to avoid overwriting the selected item ref in multiple mode
+                                var i;
+                var c = e.Children.toArray(f).reduce((function(u, c, s) {
+                    // ignore Headings and Dividers
+                    if (!ot(c)) {
+                        u.push(c);
+                        return u;
+                    }
+                    var f = c.props, p = f.disabled, d = f.hidden, v = f.label, b = f.value;
+ // Find out if the search string exactly matches a value
+                                        if (b === De) {
+                        r = true;
+                    }
+                    var m = Xt && Xt.indexOf(b) >= 0;
+                    var y = !!m && !p && !i;
+                    var h = o && !H && !k && !I && !X;
+                    var g = lt(b, v);
+                    var O = -1;
+                    if (h && !p && !d) {
+                        ht.current.push({
+                            label: v,
+                            value: b
+                        });
+                        O = ht.current.length - 1;
+                    }
+                    // Format the Menu.Item
+                                        var S =  (0, e.cloneElement)(c, {
+                        elementRef: n(g, y),
+                        key: c.key || s,
+                        onClick: Kt,
+                        onKeyDown: h ? function(e) {
+                            return Ft(e, O);
+                        } : undefined,
+                        selected: m,
+                        multiple: H,
+                        role: "option"
+                    });
+                    if (y) {
+                        i = true;
+                    }
+                    if (Yt && Yt.indexOf(b) >= 0) {
+                        if (l === 0) {
+                            u.splice(l, 0,  t().createElement(T.Divider, {
+                                key: "topDivider"
+                            }));
+                            a = true;
+                        }
+                        u.splice(l, 0, S);
+                        l += 1;
+                    } else {
+                        u.push(S);
+                    }
+                    return u;
+                }), []);
+                // In multiple mode, add missing items
+                                if (H) {
+                    v()(Xt, (function(e) {
+                        var o = p()(c, (function(t) {
+                            return ot(t) && t.props && t.props.value === e;
+                        }));
+                        if (!o) {
+                            if (e === De) {
+                                r = true;
+                            }
+                            var i = Yt && Yt.indexOf(e) >= 0;
+                            var u = Yt.length;
+                            if (l === 0) {
+                                c.splice(0, 0,  t().createElement(T.Divider, {
+                                    key: "topDivider"
+                                }));
+                                l += 1;
+                                a = true;
+                            }
+                            var s = String(e);
+                            var f = lt(e, s);
+                            c.splice(i ? 0 : u + 1, 0,  t().createElement(fe, {
+                                elementRef: n(f),
+                                label: s,
+                                value: e,
+                                key: "missing-value-".concat(e),
+                                onClick: Kt,
+                                multiple: H,
+                                selected: true
+                            }));
+                            if (i) {
+                                l += 1;
+                            }
+                        }
+                    }));
+                }
+                var d = k === "controlled";
+                // Filter the items
+                                var b = (0, B.stringToKeywords)(De);
+                c = d ? c : c.filter((function(e) {
+                    if (ot(e)) {
+                        return (0, B.testPhrase)(e.props.label, b);
+                    }
+                    return true;
+ // Keep all headers and non-interactive options
+                                })).map((function(t) {
+                    if (!ot(t)) {
+                        return t;
+                    }
+                    // highlight matched text
+                                        var n = b && (0, B.keywordLocations)(t.props.label, b);
+                    
+                    return (0, e.cloneElement)(t, {
+                        matchRanges: n || undefined
+                    });
+                }));
+                // Add the option to add the new value
+                                if (s && !r && De) {
+                    var m = a ? l + 1 : l;
+                    var y = "".concat(De, " (new value)");
+                    var h = lt(De, y);
+                    c.splice(m, 0,  t().createElement(fe, {
+                        elementRef: n(h),
+                        label: y,
+                        value: De,
+                        key: "newValue",
+                        multiple: H,
+                        onClick: Kt
+                    }));
+                }
+                // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
+                                var g = ue === "checkbox" && H && c.length > 1 ? 1 : 0;
+                var O = true;
+                // Highlight the selected Items and remove hidden
+                                c = c.reduce((function(t, n) {
+                    // ignore Dividers & Headings
+                    if (!ot(n)) {
+                        t.push(n);
+                        return t;
+                    }
+                    // Ignore any hidden items
+                                        if (n.props && n.props.hidden) {
+                        return t;
+                    }
+                    if (n.props.selected && !n.props.disabled && xt.current == null) {
+                        xt.current = Ct.current;
+                    }
+                    var r = g === Ae;
+                    g += 1;
+                    Ct.current += 1;
+                    jt.current += n.props.selected ? 1 : 0;
+                    if (n.key !== "newValue" && !n.props.disabled && !n.props.selected) {
+                        O = false;
+                    }
+                    if (!r || !Je) {
+                        t.push(n);
+                        return t;
+                    }
+                    if (!n.props.disabled) {
+                        Ot.current = n.props.value;
+                    }
+                    var o =  (0, e.cloneElement)(n, {
+                        active: r,
+                        elementRef: Wt,
+                        id: we
+                    });
+                    t.push(o);
+                    return t;
+                }), []);
+                Pt.current = jt.current === 0 && "none" || O && "all" || "some";
+                // add select all option
+                                if (ue === "checkbox" && H && Ct.current > 0) {
+                    var S;
+                    if (Pt.current === "all") {
+                        if (De === "") {
+                            S = (0, u._)("Clear all");
+                        } else {
+                            S = (0, u._)("Clear all matches");
+                        }
+                    } else if (De === "") {
+                        S = (0, u._)("Select all");
+                    } else {
+                        S = (0, u._)("Select all matches");
+                    }
+                    if (Ae === 0 && Je) {
+                        Ot.current = "selectAll";
+                    }
+                    c.unshift( t().createElement(ve, {
+                        key: "select-all-option",
+                        active: Ae === 0,
+                        changedToggle: !!me,
+                        elementRef: Wt,
+                        id: Ae === 0 ? we : undefined,
+                        onClick: Pt.current === "all" ? Bt : Dt,
+                        selectAllLabel: S,
+                        selected: Pt.current === "all" || Pt.current !== "none" && "some",
+                        totalCount: Xt.length,
+                        tabIndex: -1
+                    }),  t().createElement(T.Divider, {
+                        key: "selectAllDivider"
+                    }));
+                }
+                kt.current = c.reduce((function(e, t) {
+                    if (ot(t)) {
+                        e.push(t.props.value);
+                    }
+                    return e;
+                }), []);
+                st = c.some((function(e) {
+                    return ot(e);
+                }));
+                return c;
+            }), [ Ae, we, o, s, f, Xt, k, De, Wt, Bt, Kt, Ft, Ut, Dt, I, H, Yt, X, ue, Je, me ]);
+            var en = function e(n) {
+                var r = n.anchorWidth, o = n.maxHeight, a = n.placement;
+                var i = nt({
                     anchorWidth: r,
-                    isMultiple: N,
+                    isMultiple: H,
                     maxHeight: o,
-                    menuStyle: D
+                    menuStyle: F
                 });
-                var u = Jt.length > 0 && !Gt && !w ? 0 : undefined;
+                var u = Xt.length > 0 && !Qt && !k ? 0 : undefined;
                 var c = {
-                    "aria-multiselectable": N || undefined,
-                    childrenStart: !!w &&  t().createElement(bt, {
-                        activeItemId: ge,
-                        filterKeyword: Ee,
-                        hasChildren: mt,
+                    "aria-multiselectable": H || undefined,
+                    childrenStart: !!k &&  t().createElement(ct, {
+                        activeItemId: we,
+                        filterA11yId: Rt,
+                        filterKeyword: De,
+                        hasChildren: st,
                         inputId: E,
-                        inputRef: P,
-                        menuListboxId: Oe,
-                        multiple: N,
-                        onClearAll: qt,
-                        onSelectAll: Vt,
-                        onTextBlur: zt,
-                        onTextChange: Ft,
-                        onTextFocus: Ht,
-                        onTextKeyDown: Dt,
-                        optionSelection: St,
-                        placement: l,
-                        selectAllAppearance: le,
-                        textHasFocus: qe
+                        inputRef: _,
+                        menuListboxId: xe,
+                        multiple: H,
+                        onClearAll: Bt,
+                        onSelectAll: Dt,
+                        onTextBlur: $t,
+                        onTextChange: Ht,
+                        onTextFocus: zt,
+                        onTextKeyDown: Nt,
+                        optionSelection: Pt,
+                        placement: a,
+                        selectAllAppearance: ue,
+                        textHasFocus: Je
                     }),
-                    focusMode: w ? "never" : undefined,
-                    isLoading: A,
-                    menuId: Oe,
-                    onScrollBottom: W ? Bt : undefined,
-                    placement: l !== null && l !== void 0 ? l : undefined,
-                    noOptionsMessage: H,
-                    footerMessage: C,
-                    animateLoading: a,
-                    loadingMessage: R,
-                    onScroll: $,
+                    focusMode: k ? "never" : undefined,
+                    isLoading: I,
+                    menuId: xe,
+                    onScrollBottom: X ? Vt : undefined,
+                    placement: a !== null && a !== void 0 ? a : undefined,
+                    noOptionsMessage: W,
+                    footerMessage: x,
+                    animateLoading: l,
+                    loadingMessage: q,
+                    onScroll: J,
                     style: i,
                     tabIndex: u
                 };
-                if (se) {
+                if (be) {
                     
-                    return t().createElement(T.VirtualizedResultsMenu, $e({
-                        virtualization: se
-                    }, c),  t().createElement(yt, Yt));
+                    return t().createElement(R.VirtualizedResultsMenu, Ve({
+                        virtualization: be
+                    }, c), Zt);
                 }
                 
-                return t().createElement(I(), c,  t().createElement(yt, Yt));
+                return t().createElement(A(), c, Zt);
             };
             
             return t().createElement(j(), {
-                closeReasons: ct,
+                closeReasons: rt,
                 inputId: E,
-                toggle:  t().createElement(gt, $e({
-                    appearance: u,
+                "aria-labelledby": Rt,
+                toggle:  t().createElement(pt, Ve({
+                    appearance: i,
                     append: c,
-                    currentValues: Tt(),
-                    "data-test": N ? "multiselect" : "select",
-                    describedBy: y,
-                    disabled: h,
-                    elementRef: g,
-                    error: O,
-                    inline: x,
-                    labelText: M,
-                    labelledBy: _,
-                    multiple: N,
-                    onClick: J,
-                    placeholder: Z,
-                    prefixLabel: ee,
-                    prepend: te,
-                    required: Q,
-                    suffixLabel: ie,
-                    toggle: fe,
-                    toggleContent: de
-                }, ve), f),
-                onRequestOpen: _t,
+                    currentValues: At(),
+                    "data-test": H ? "multiselect" : "select",
+                    describedBy: h,
+                    disabled: g,
+                    elementRef: O,
+                    error: S,
+                    inline: P,
+                    labelText: L,
+                    labelledBy: M,
+                    multiple: H,
+                    onClick: Q,
+                    placeholder: ne,
+                    prefixLabel: re,
+                    prepend: oe,
+                    required: ee,
+                    suffixLabel: se,
+                    toggle: me,
+                    toggleContent: he
+                }, ge), f),
+                onRequestOpen: It,
                 onRequestClose: Mt,
-                open: Ie,
+                open: He,
                 openWithArrowKeys: true,
-                repositionMode: re,
-                defaultPlacement: w ? v : undefined,
-                canCoverAnchor: Ne().innerHeight < 500,
-                ref: Ut,
+                repositionMode: ae,
+                defaultPlacement: k ? b : undefined,
+                canCoverAnchor: Me().innerHeight < 500,
+                ref: Jt,
                 retainFocus: false,
-                takeFocus: Jt.length === 0 || Jt.length > 0 && !Gt || !!w
-            }, Zt);
-        }
-        Ot.propTypes = at;
-        Ot.componentType = "SelectBase";
-        Ot.Option = he;
-        Ot.Divider = A.Divider;
-        Ot.Heading = A.Heading;
-        /* harmony default export */        const wt = Ot;
+                takeFocus: Xt.length === 0 || Xt.length > 0 && !Qt || !!k
+            }, en);
+        }
+        dt.propTypes = et;
+        dt.componentType = "SelectBase";
+        dt.Option = fe;
+        dt.Divider = T.Divider;
+        dt.Heading = T.Heading;
+        /* harmony default export */        const vt = dt;
+        // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+        /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+        function bt(e, t) {
+            if (e) {
+                if (typeof e === "function") {
+                    e(t);
+                } else {
+                    // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                    // the intention here is to signal "we will take care of setting 'current', not you".
+                    e.current = t;
+ // eslint-disable-line no-param-reassign
+                                }
+            }
+        }
         // CONCATENATED MODULE: ./src/Select/Option.tsx
-        function St(e) {
+        function mt(e) {
             "@babel/helpers - typeof";
-            return St = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return mt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, St(e);
+            }, mt(e);
         }
-        function Ct() {
-            return Ct = Object.assign ? Object.assign.bind() : function(e) {
+        function yt() {
+            return yt = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var n = arguments[t];
                     for (var r in n) {
@@ -1822,24 +1740,24 @@
                     }
                 }
                 return e;
-            }, Ct.apply(null, arguments);
+            }, yt.apply(null, arguments);
         }
-        function kt(e, t) {
+        function ht(e, t) {
             if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
         }
-        function xt(e, t) {
+        function gt(e, t) {
             for (var n = 0; n < t.length; n++) {
                 var r = t[n];
                 r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-                Object.defineProperty(e, Lt(r.key), r);
+                Object.defineProperty(e, Tt(r.key), r);
             }
         }
-        function jt(e, t, n) {
-            return t && xt(e.prototype, t), n && xt(e, n), Object.defineProperty(e, "prototype", {
+        function Ot(e, t, n) {
+            return t && gt(e.prototype, t), n && gt(e, n), Object.defineProperty(e, "prototype", {
                 writable: !1
             }), e;
         }
-        function Et(e, t) {
+        function St(e, t) {
             if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
             e.prototype = Object.create(t && t.prototype, {
                 constructor: {
@@ -1849,75 +1767,76 @@
                 }
             }), Object.defineProperty(e, "prototype", {
                 writable: !1
-            }), t && Pt(e, t);
+            }), t && Ct(e, t);
         }
-        function Pt(e, t) {
-            return Pt = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
+        function Ct(e, t) {
+            return Ct = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
                 return e.__proto__ = t, e;
-            }, Pt(e, t);
+            }, Ct(e, t);
         }
-        function At(e) {
-            var t = _t();
+        function kt(e) {
+            var t = jt();
             return function() {
-                var n, r = Mt(e);
+                var n, r = Pt(e);
                 if (t) {
-                    var o = Mt(this).constructor;
+                    var o = Pt(this).constructor;
                     n = Reflect.construct(r, arguments, o);
                 } else n = r.apply(this, arguments);
-                return Tt(this, n);
+                return wt(this, n);
             };
         }
-        function Tt(e, t) {
-            if (t && ("object" == St(t) || "function" == typeof t)) return t;
+        function wt(e, t) {
+            if (t && ("object" == mt(t) || "function" == typeof t)) return t;
             if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-            return It(e);
+            return xt(e);
         }
-        function It(e) {
+        function xt(e) {
             if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
             return e;
         }
-        function _t() {
+        function jt() {
             try {
                 var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
             } catch (e) {}
-            return (_t = function t() {
+            return (jt = function t() {
                 return !!e;
             })();
         }
-        function Mt(e) {
-            return Mt = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+        function Pt(e) {
+            return Pt = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
                 return e.__proto__ || Object.getPrototypeOf(e);
-            }, Mt(e);
+            }, Pt(e);
         }
-        function Rt(e, t, n) {
-            return (t = Lt(t)) in e ? Object.defineProperty(e, t, {
+        function Et(e, t, n) {
+            return (t = Tt(t)) in e ? Object.defineProperty(e, t, {
                 value: n,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[t] = n, e;
         }
-        function Lt(e) {
-            var t = Vt(e, "string");
-            return "symbol" == St(t) ? t : t + "";
+        function Tt(e) {
+            var t = Rt(e, "string");
+            return "symbol" == mt(t) ? t : t + "";
         }
-        function Vt(e, t) {
-            if ("object" != St(e) || !e) return e;
+        function Rt(e, t) {
+            if ("object" != mt(e) || !e) return e;
             var n = e[Symbol.toPrimitive];
             if (void 0 !== n) {
                 var r = n.call(e, t || "default");
-                if ("object" != St(r)) return r;
+                if ("object" != mt(r)) return r;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === t ? String : Number)(e);
         }
-        var qt = {
+        var At = {
             /** @private */
             active: l().bool,
             children: l().node,
             description: l().string,
             descriptionPosition: l().oneOf([ "right", "bottom" ]),
             disabled: l().bool,
+            elementRef: l().oneOfType([ l().func, l().object ]),
             hidden: l().bool,
             icon: l().node,
             label: l().string.isRequired,
@@ -1934,7 +1853,7 @@
             truncate: l().bool,
             value: l().oneOfType([ l().string, l().number, l().bool ]).isRequired
         };
-        var Bt = {
+        var _t = {
             active: false,
             descriptionPosition: "bottom",
             disabled: false,
@@ -1946,29 +1865,29 @@
  * An option within a `Select`. This inherits from
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
- */        var Dt =  function(e) {
-            Et(r, e);
-            var n = At(r);
+ */        var It =  function(e) {
+            St(r, e);
+            var n = kt(r);
             function r() {
                 var e;
-                kt(this, r);
-                for (var t = arguments.length, o = new Array(t), l = 0; l < t; l++) {
-                    o[l] = arguments[l];
-                }
-                e = n.call.apply(n, [ this ].concat(o));
-                Rt(It(e), "c", null);
-                Rt(It(e), "handleMount", (function(t) {
-                    e.c = t;
+                ht(this, r);
+                for (var o = arguments.length, l = new Array(o), a = 0; a < o; a++) {
+                    l[a] = arguments[a];
+                }
+                e = n.call.apply(n, [ this ].concat(l));
+                Et(xt(e), "optionBaseRef",  t().createRef());
+                Et(xt(e), "handleMount", (function(t) {
+                    bt(e.props.elementRef, t);
+                    bt(e.optionBaseRef, t);
                 }));
                 return e;
             }
  // @docs-props-type OptionPropsBase
-                        jt(r, [ {
+                        Ot(r, [ {
                 key: "scrollIntoViewIfNeeded",
                 // eslint-disable-next-line react/no-unused-class-component-methods
                 value: function e() {
-                    var t;
-                    (t = this.c) === null || t === void 0 ? void 0 : t.scrollIntoViewIfNeeded();
+                    Re(this.optionBaseRef.current);
                 }
                 /**
      * Place focus on the button.
@@ -1977,35 +1896,35 @@
                         }, {
                 key: "focus",
                 value: function e() {
-                    var t;
-                    (t = this.c) === null || t === void 0 ? void 0 : t.focus();
+                    var t, n;
+                    (t = this.optionBaseRef) === null || t === void 0 ? void 0 : (n = t.current) === null || n === void 0 ? void 0 : n.focus();
                 }
             }, {
                 key: "render",
                 value: function e() {
                     
-                    return t().createElement(he, Ct({}, this.props, {
-                        multiple: false,
-                        ref: this.handleMount
+                    return t().createElement(fe, yt({}, this.props, {
+                        elementRef: this.handleMount,
+                        multiple: false
                     }), this.props.children || this.props.label);
                 }
             } ]);
             return r;
         }(e.PureComponent);
-        Rt(Dt, "propTypes", qt);
-        Rt(Dt, "defaultProps", Bt);
-        /* harmony default export */        const Nt = Dt;
+        Et(It, "propTypes", At);
+        Et(It, "defaultProps", _t);
+        /* harmony default export */        const Mt = It;
         // CONCATENATED MODULE: ./src/Select/Select.tsx
-        function Kt(e) {
+        function Lt(e) {
             "@babel/helpers - typeof";
-            return Kt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return Lt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                 return typeof e;
             } : function(e) {
                 return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-            }, Kt(e);
+            }, Lt(e);
         }
-        function Ft() {
-            return Ft = Object.assign ? Object.assign.bind() : function(e) {
+        function qt() {
+            return qt = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var n = arguments[t];
                     for (var r in n) {
@@ -2013,11 +1932,11 @@
                     }
                 }
                 return e;
-            }, Ft.apply(null, arguments);
+            }, qt.apply(null, arguments);
         }
-        function Ht(e, t) {
+        function Dt(e, t) {
             if (null == e) return {};
-            var n, r, o = zt(e, t);
+            var n, r, o = Bt(e, t);
             if (Object.getOwnPropertySymbols) {
                 var l = Object.getOwnPropertySymbols(e);
                 for (r = 0; r < l.length; r++) {
@@ -2026,7 +1945,7 @@
             }
             return o;
         }
-        function zt(e, t) {
+        function Bt(e, t) {
             if (null == e) return {};
             var n = {};
             for (var r in e) {
@@ -2037,22 +1956,22 @@
             }
             return n;
         }
-        function $t(e, t) {
+        function Vt(e, t) {
             if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
         }
-        function Wt(e, t) {
+        function Nt(e, t) {
             for (var n = 0; n < t.length; n++) {
                 var r = t[n];
                 r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-                Object.defineProperty(e, nn(r.key), r);
+                Object.defineProperty(e, Gt(r.key), r);
             }
         }
-        function Ut(e, t, n) {
-            return t && Wt(e.prototype, t), n && Wt(e, n), Object.defineProperty(e, "prototype", {
+        function Kt(e, t, n) {
+            return t && Nt(e.prototype, t), n && Nt(e, n), Object.defineProperty(e, "prototype", {
                 writable: !1
             }), e;
         }
-        function Jt(e, t) {
+        function Ft(e, t) {
             if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
             e.prototype = Object.create(t && t.prototype, {
                 constructor: {
@@ -2062,64 +1981,64 @@
                 }
             }), Object.defineProperty(e, "prototype", {
                 writable: !1
-            }), t && Xt(e, t);
+            }), t && Ht(e, t);
         }
-        function Xt(e, t) {
-            return Xt = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
+        function Ht(e, t) {
+            return Ht = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
                 return e.__proto__ = t, e;
-            }, Xt(e, t);
+            }, Ht(e, t);
         }
-        function Gt(e) {
-            var t = Zt();
+        function zt(e) {
+            var t = Ut();
             return function() {
-                var n, r = en(e);
+                var n, r = Jt(e);
                 if (t) {
-                    var o = en(this).constructor;
+                    var o = Jt(this).constructor;
                     n = Reflect.construct(r, arguments, o);
                 } else n = r.apply(this, arguments);
-                return Qt(this, n);
+                return $t(this, n);
             };
         }
-        function Qt(e, t) {
-            if (t && ("object" == Kt(t) || "function" == typeof t)) return t;
+        function $t(e, t) {
+            if (t && ("object" == Lt(t) || "function" == typeof t)) return t;
             if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-            return Yt(e);
+            return Wt(e);
         }
-        function Yt(e) {
+        function Wt(e) {
             if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
             return e;
         }
-        function Zt() {
+        function Ut() {
             try {
                 var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
             } catch (e) {}
-            return (Zt = function t() {
+            return (Ut = function t() {
                 return !!e;
             })();
         }
-        function en(e) {
-            return en = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+        function Jt(e) {
+            return Jt = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
                 return e.__proto__ || Object.getPrototypeOf(e);
-            }, en(e);
+            }, Jt(e);
         }
-        function tn(e, t, n) {
-            return (t = nn(t)) in e ? Object.defineProperty(e, t, {
+        function Xt(e, t, n) {
+            return (t = Gt(t)) in e ? Object.defineProperty(e, t, {
                 value: n,
                 enumerable: !0,
                 configurable: !0,
                 writable: !0
             }) : e[t] = n, e;
         }
-        function nn(e) {
-            var t = rn(e, "string");
-            return "symbol" == Kt(t) ? t : t + "";
+        function Gt(e) {
+            var t = Qt(e, "string");
+            return "symbol" == Lt(t) ? t : t + "";
         }
-        function rn(e, t) {
-            if ("object" != Kt(e) || !e) return e;
+        function Qt(e, t) {
+            if ("object" != Lt(e) || !e) return e;
             var n = e[Symbol.toPrimitive];
             if (void 0 !== n) {
                 var r = n.call(e, t || "default");
-                if ("object" != Kt(r)) return r;
+                if ("object" != Lt(r)) return r;
                 throw new TypeError("@@toPrimitive must return a primitive value.");
             }
             return ("string" === t ? String : Number)(e);
@@ -2127,7 +2046,7 @@
         /* eslint-disable max-classes-per-file */
         /** @public */
         /** @public */
-        /** @public */        var on = {
+        /** @public */        var Yt = {
             allowKeyMatching: l().bool,
             animateLoading: l().bool,
             appearance: l().oneOf([ "default", "link", "primary", "pill", "toggle", "flat", "subtle" ]),
@@ -2168,7 +2087,7 @@
             /** @private. */
             virtualization: l().number
         };
-        var ln = {
+        var Zt = {
             allowKeyMatching: true,
             animateLoading: false,
             appearance: "toggle",
@@ -2186,13 +2105,13 @@
             prepend: false,
             toggleContent: "optionChildren"
         };
-        var an =  function(e) {
-            Jt(r, e);
-            var n = Gt(r);
+        var en =  function(e) {
+            Ft(r, e);
+            var n = zt(r);
             // @docs-props-type SelectPropsBase
                         function r(e) {
                 var t;
-                $t(this, r);
+                Vt(this, r);
                 t = n.call(this, e);
                 var o = {};
                 // wrap defaultValue in an array once to avoid failing <SelectBase>'s defaultValues comparison check
@@ -2210,7 +2129,7 @@
                                 if (false) {}
                 return t;
             }
-            Ut(r, [ {
+            Kt(r, [ {
                 key: "componentDidUpdate",
                 value: function e(t) {
                     if (false) {}
@@ -2218,7 +2137,7 @@
             }, {
                 key: "render",
                 value: function e() {
-                    var n = this.props, r = n.defaultValue, o = n.onChange, l = n.value, a = Ht(n, [ "defaultValue", "onChange", "value" ]);
+                    var n = this.props, r = n.defaultValue, o = n.onChange, l = n.value, a = Dt(n, [ "defaultValue", "onChange", "value" ]);
                     var u = {
                         onChange: function e(t, n) {
                             var r = n.name, l = n.values;
@@ -2240,19 +2159,19 @@
                         u.defaultValues = this.state.defaultValues;
                     }
                     
-                    return t().createElement(wt, Ft({}, a, u, {
+                    return t().createElement(vt, qt({}, a, u, {
                         multiple: false
                     }));
                 }
             } ]);
             return r;
         }(e.Component);
-        tn(an, "propTypes", on);
-        tn(an, "defaultProps", ln);
-        tn(an, "Option", Nt);
-        tn(an, "Heading", A.Heading);
-        tn(an, "Divider", A.Divider);
-        /* harmony default export */        const un = an;
+        Xt(en, "propTypes", Yt);
+        Xt(en, "defaultProps", Zt);
+        Xt(en, "Option", Mt);
+        Xt(en, "Heading", T.Heading);
+        Xt(en, "Divider", T.Divider);
+        /* harmony default export */        const tn = en;
     }) // CONCATENATED MODULE: ./src/Select/index.ts
     ();
     module.exports = r;