@splunk/react-ui 4.32.0 → 4.34.0

package/Select.js

@@ -64,7 +64,7 @@
         Divider: () => /* reexport */ T.Divider,
         Heading: () => /* reexport */ T.Heading,
         Option: () => /* reexport */ nn,
-        default: () => /* reexport */ wn
+        default: () => /* reexport */ xn
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -76,10 +76,10 @@
     const a = require("lodash/has");
     var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const c = require("@splunk/ui-utils/i18n");
+    const s = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "lodash/castArray"
-    const s = require("lodash/castArray");
-    var u =  e.n(s);
+    const c = require("lodash/castArray");
+    var u =  e.n(c);
     // CONCATENATED MODULE: external "lodash/find"
     const p = require("lodash/find");
     var f =  e.n(p);
@@ -97,13 +97,13 @@
     var O =  e.n(g);
     // CONCATENATED MODULE: external "lodash/memoize"
     const S = require("lodash/memoize");
-    var w =  e.n(S);
+    var x =  e.n(S);
     // CONCATENATED MODULE: external "lodash/omit"
-    const x = require("lodash/omit");
-    var k =  e.n(x);
+    const w = require("lodash/omit");
+    var C =  e.n(w);
     // CONCATENATED MODULE: external "lodash/pick"
-    const C = require("lodash/pick");
-    var I =  e.n(C);
+    const k = require("lodash/pick");
+    var I =  e.n(k);
     // CONCATENATED MODULE: external "lodash/uniq"
     const _ = require("lodash/uniq");
     var A =  e.n(_);
@@ -122,8 +122,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
     const D = require("@splunk/ui-utils/filter");
     // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-    const q = require("@splunk/react-ui/Link");
-    var L =  e.n(q);
+    const L = require("@splunk/react-ui/Link");
+    var q =  e.n(L);
     // CONCATENATED MODULE: external "@splunk/react-ui/ResultsMenu"
     const N = require("@splunk/react-ui/ResultsMenu");
     var B =  e.n(N);
@@ -150,17 +150,17 @@
     };
     /* harmony default export */    const J = G;
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Search"
-    const Q = require("@splunk/react-icons/enterprise/Search");
-    var X =  e.n(Q);
+    const X = require("@splunk/react-icons/enterprise/Search");
+    var Y =  e.n(X);
     // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
-    const Y = require("@splunk/react-icons/Magnifier");
-    var Z =  e.n(Y);
+    const Q = require("@splunk/react-icons/Magnifier");
+    var Z =  e.n(Q);
     // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
     var ee = function e() {
         var t = (0, U.useSplunkTheme)(), n = t.isEnterprise, o = t.isCompact;
-        var i = (0, c._)("Search");
+        var i = (0, s._)("Search");
         var a = o ? "20px" : "24px";
-        var l = n ?  r().createElement(X(), {
+        var l = n ?  r().createElement(Y(), {
             role: "presentation",
             size: "16px",
             screenReaderText: i,
@@ -243,12 +243,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function ce(e, t, n) {
+    function se(e, t, n) {
         if (t) le(e.prototype, t);
         if (n) le(e, n);
         return e;
     }
-    function se(e, t) {
+    function ce(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -360,7 +360,7 @@
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
  */    var ge =  function(e) {
-        se(n, e);
+        ce(n, e);
         var t = pe(n);
         function n() {
             var e;
@@ -383,7 +383,7 @@
             }));
             return e;
         }
-        ce(n, [ {
+        se(n, [ {
             key: "scrollIntoViewIfNeeded",
             value: function e() {
                 var t;
@@ -424,13 +424,13 @@
     /* harmony default export */    const Oe = ge;
     // CONCATENATED MODULE: external "styled-components"
     const Se = require("styled-components");
-    var we =  e.n(Se);
+    var xe =  e.n(Se);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const xe = require("@splunk/react-ui/Clickable");
-    var ke =  e.n(xe);
+    const we = require("@splunk/react-ui/Clickable");
+    var Ce =  e.n(we);
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
-    const Ce = require("@splunk/react-ui/Switch");
-    var Ie =  e.n(Ce);
+    const ke = require("@splunk/react-ui/Switch");
+    var Ie =  e.n(ke);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
     var _e = (0, Se.css)([ "color:", ";font-size:", ";line-height:", ";overflow:inherit;white-space:inherit;text-overflow:inherit;" ], (0, 
     U.pick)({
@@ -439,15 +439,18 @@
     }), U.variables.fontSizeSmall, (0, U.pick)({
         prisma: "16px"
     }));
-    var Ae = we().span.withConfig({
+    var Ae = xe().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionBottom",
         componentId: "sc-4kc053-0"
     })([ "", ";display:block;" ], _e);
-    var je = we().span.withConfig({
+    var je = xe().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionRight",
         componentId: "sc-4kc053-1"
-    })([ "", ";float:right;padding-left:", ";max-width:50%;text-align:right;box-sizing:border-box;" ], _e, U.variables.spacing);
-    var Ee = we().div.withConfig({
+    })([ "", ";float:right;", " max-width:50%;text-align:right;box-sizing:border-box;" ], _e, (0, 
+    U.pick)({
+        enterprise: (0, Se.css)([ "padding-left:", ";" ], U.variables.spacingLarge)
+    }));
+    var Ee = xe().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedIcon",
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, U.pick)({
@@ -457,7 +460,7 @@
         prisma: U.variables.contentColorActive,
         enterprise: U.variables.accentColorL10
     }));
-    var Me = we().span.withConfig({
+    var Me = xe().span.withConfig({
         displayName: "ItemStyles__StyledItemIcon",
         componentId: "sc-4kc053-3"
     })([ "flex:0 0 auto;padding-right:", ";min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0, 
@@ -471,7 +474,7 @@
         prisma: (0, Se.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], U.variables.contentColorMuted),
         enterprise: (0, Se.css)([ "transform:translateY(-1px);" ])
     }));
-    var Te = we()(ke()).withConfig({
+    var Te = xe()(Ce()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
     })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
@@ -553,7 +556,7 @@
             Me, U.variables.contentColorActive)
         });
     }));
-    var Pe = we()(Ie()).withConfig({
+    var Pe = xe()(Ie()).withConfig({
         displayName: "ItemStyles__StyledSwitch",
         componentId: "sc-4kc053-5"
     })([ "position:absolute;left:", ";top:", ";" ], (0, U.pick)({
@@ -566,25 +569,25 @@
             compact: "2px"
         }
     }));
-    var Ve = we().span.withConfig({
+    var Ve = xe().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var Re = we().span.withConfig({
+    var Re = xe().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
     })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Se.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var De = we().div.withConfig({
+    var De = xe().div.withConfig({
         displayName: "ItemStyles__StyledLabel",
         componentId: "sc-4kc053-8"
     })([ "overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Se.css)([ "display:block;clear:both;" ]);
     }));
-    var qe = we().span.withConfig({
+    var Le = xe().span.withConfig({
         displayName: "ItemStyles__StyledMatch",
         componentId: "sc-4kc053-9"
     })([ "border-bottom:1px solid ", ";" ], (0, U.pick)({
@@ -594,7 +597,7 @@
             light: U.variables.gray45
         }
     }));
-    var Le = we().span.withConfig({
+    var qe = xe().span.withConfig({
         displayName: "ItemStyles__StyledSubmenu",
         componentId: "sc-4kc053-10"
     })([ "float:right;padding-left:", ";color:", ";", "" ], U.variables.spacingSmall, (0, 
@@ -605,11 +608,11 @@
         prisma: (0, Se.css)([ "& > svg{width:20px;height:20px;}" ])
     }));
     // CONCATENATED MODULE: ./src/Select/SelectAllOptionStyles.ts
-    var Ne = we()(De).withConfig({
+    var Ne = xe()(De).withConfig({
         displayName: "SelectAllOptionStyles__StyledSelectAllLabel",
         componentId: "y6bn08-0"
     })([ "font-weight:", ";" ], U.variables.fontWeightBold);
-    var Be = we()(Oe).withConfig({
+    var Be = xe()(Oe).withConfig({
         displayName: "SelectAllOptionStyles__StyledSelectAllOption",
         componentId: "y6bn08-1"
     })([ "padding-inline-start:", ";box-shadow:none;" ], (0, U.pick)({
@@ -628,9 +631,9 @@
         selected: i().oneOf([ false, true, "some" ])
     };
     var Fe =  r().forwardRef((function(e, t) {
-        var n = e.active, o = e.id, i = e.onClick, a = e.selectAllLabel, l = e.totalCount, s = e.changedToggle, u = e.selected;
+        var n = e.active, o = e.id, i = e.onClick, a = e.selectAllLabel, l = e.totalCount, c = e.changedToggle, u = e.selected;
         // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
-                var p = s ? " (".concat(l === null || l === void 0 ? void 0 : l.toString(), ")") : "";
+                var p = c ? " (".concat(l === null || l === void 0 ? void 0 : l.toString(), ")") : "";
         
         return r().createElement(Be, {
             label: a,
@@ -649,12 +652,12 @@
             key: "main-checkbox",
             value: "main-checkbox",
             appearance: "checkbox",
-            "aria-label": !u && (0, c._)("No options selected") || u === "some" && (0, c._)("Some options selected") || (0, 
-            c._)("All options selected"),
+            "aria-label": !u && (0, s._)("No options selected") || u === "some" && (0, s._)("Some options selected") || (0, 
+            s._)("All options selected"),
             "data-test": "select-all-switch",
-            selectedLabel: u === true ? (0, c._)("All options selected") : (0, c._)("Option selected"),
-            unselectedLabel: u === true ? (0, c._)("No options selected") : (0, c._)("Option unselected"),
-            someSelectedLabel: (0, c._)("Some options selected")
+            selectedLabel: u === true ? (0, s._)("All options selected") : (0, s._)("Option selected"),
+            unselectedLabel: u === true ? (0, s._)("No options selected") : (0, s._)("Option unselected"),
+            someSelectedLabel: (0, s._)("Some options selected")
         }),  r().createElement(je, {
             "data-test": "description"
         }, "".concat(p, " Ctrl-a")),  r().createElement(Ve, null,  r().createElement(Re, {
@@ -669,7 +672,7 @@
     const $e = require("@splunk/react-ui/Button");
     var ze =  e.n($e);
     // CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
-    var We = we()(ze()).withConfig({
+    var We = xe()(ze()).withConfig({
         displayName: "SelectBaseStyles__StyledButton",
         componentId: "sc-16cj7sk-0"
     })([ "&[data-inline]{width:", ";}", "" ], (function(e) {
@@ -679,22 +682,22 @@
         var t = e.$multiple;
         return !t && "flex-grow: 0;";
     }));
-    var Ue = we().span.withConfig({
+    var Ue = xe().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkIcon",
         componentId: "sc-16cj7sk-1"
     })([ "padding-right:2px;" ]);
-    var Ge = we().span.withConfig({
+    var Ge = xe().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkCaret",
         componentId: "sc-16cj7sk-2"
     })([ "padding-left:2px;" ]);
-    var Je = we().div.withConfig({
+    var Je = xe().div.withConfig({
         displayName: "SelectBaseStyles__StyledFilter",
         componentId: "sc-16cj7sk-3"
     })([ "padding:", ";min-width:160px;" ], (0, U.pick)({
         enterprise: "8px",
         prisma: "10px 16px"
     }));
-    var Qe = we().span.withConfig({
+    var Xe = xe().span.withConfig({
         displayName: "SelectBaseStyles__StyledSearchIconWrapper",
         componentId: "sc-16cj7sk-4"
     })([ "color:", ";pointer-events:none;padding:", ";" ], (0, U.pick)({
@@ -707,21 +710,18 @@
         comfortable: "0 8px",
         compact: "0 6px"
     }));
-    var Xe = we().span.withConfig({
+    var Ye = xe().span.withConfig({
         displayName: "SelectBaseStyles__StyledCount",
         componentId: "sc-16cj7sk-5"
-    })([ "padding-right:", ";" ], (0, U.pick)({
-        enterprise: U.variables.spacingQuarter,
-        prisma: U.variables.spacingXSmall
-    }));
-    var Ye = we()(L()).withConfig({
+    })([ "padding-right:", ";" ], U.variables.spacingXSmall);
+    var Qe = xe()(q()).withConfig({
         displayName: "SelectBaseStyles__StyledControlsLink",
         componentId: "sc-16cj7sk-6"
     })([ "margin-right:20px;", ";" ], (function(e) {
         var t = e.$disabled;
         return t && (0, Se.css)([ "color:", ";" ], U.variables.contentColorDisabled);
     }));
-    var Ze = we().div.withConfig({
+    var Ze = xe().div.withConfig({
         displayName: "SelectBaseStyles__StyledToggleAllControls",
         componentId: "sc-16cj7sk-7"
     })([ "padding:", ";", "" ], (0, U.pick)({
@@ -911,12 +911,12 @@
         return at.apply(this, arguments);
     }
     function lt(e, t) {
-        return ut(e) || st(e, t) || dt(e, t) || ct();
+        return ut(e) || ct(e, t) || dt(e, t) || st();
     }
-    function ct() {
+    function st() {
         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 st(e, t) {
+    function ct(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var n = [];
         var r = true;
@@ -1008,8 +1008,8 @@
         };
         return St(e, t);
     }
-    function wt(e) {
-        var t = Ct();
+    function xt(e) {
+        var t = kt();
         return function n() {
             var r = It(e), o;
             if (t) {
@@ -1018,22 +1018,22 @@
             } else {
                 o = r.apply(this, arguments);
             }
-            return xt(this, o);
+            return wt(this, o);
         };
     }
-    function xt(e, t) {
+    function wt(e, t) {
         if (t && (_t(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return kt(e);
+        return Ct(e);
     }
-    function kt(e) {
+    function Ct(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Ct() {
+    function kt() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -1108,7 +1108,7 @@
         allowKeyMatching: i().bool,
         allowNewValues: i().bool,
         animateLoading: i().bool,
-        appearance: i().oneOf([ "default", "link", "primary", "pill", "toggle", "flat" ]),
+        appearance: i().oneOf([ "default", "link", "primary", "pill", "toggle", "flat", "subtle" ]),
         append: i().bool,
         children: i().node,
         defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
@@ -1146,6 +1146,7 @@
         showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
         suffixLabel: i().string,
         tabConfirmsNewValue: i().bool,
+        toggleContent: i().oneOf([ "optionChildren", "optionLabel" ]),
         values: i().array,
         /** @private. */
         virtualization: i().number
@@ -1163,18 +1164,19 @@
         isLoadingOptions: false,
         menuStyle: {},
         multiple: false,
-        noOptionsMessage: (0, c._)("No matches"),
-        placeholder: (0, c._)("Select..."),
+        noOptionsMessage: (0, s._)("No matches"),
+        placeholder: (0, s._)("Select..."),
         prepend: false,
         repositionMode: "flip",
         selectAllAppearance: "buttongroup",
-        tabConfirmsNewValue: false
+        tabConfirmsNewValue: false,
+        toggleContent: "optionChildren"
     };
-    var Pt = w()((function(e) {
+    var Pt = x()((function(e) {
         return [ e ];
     }));
  // preserve separate widths for single vs. multi mode
-        var Vt = w()((function(e) {
+        var Vt = x()((function(e) {
         var t = e.anchorWidth, n = e.isMultiple, r = e.maxHeight, o = e.menuStyle;
         return n ? jt({
             width: Math.max(t !== null && t !== void 0 ? t : 0, 200),
@@ -1189,12 +1191,12 @@
     function Dt(e) {
         return e && l()(e.props, "value");
     }
-    function qt(e, t) {
+    function Lt(e, t) {
         return "".concat(_t(e), "-").concat(e, "-").concat(t);
     }
-    var Lt =  function(e) {
+    var qt =  function(e) {
         Ot(o, e);
-        var t = wt(o);
+        var t = xt(o);
         gt(o, null, [ {
             key: "validateAppearance",
             // @docs-props-type CompactPropsBase
@@ -1206,41 +1208,41 @@
             var i;
             mt(this, o);
             i = t.call(this, e);
-            Et(kt(i), "activeItemId", void 0);
-            Et(kt(i), "activeValue", void 0);
-            Et(kt(i), "availableOptionCount", void 0);
-            Et(kt(i), "controlledExternally", void 0);
-            Et(kt(i), "displayedValues", void 0);
-            Et(kt(i), "dropdown", null);
-            Et(kt(i), "firstSelectedEnabledOption", null);
-            Et(kt(i), "firstSelectedOptionIndex", void 0);
-            Et(kt(i), "menuId", void 0);
-            Et(kt(i), "menuListboxId", void 0);
-            Et(kt(i), "previousActiveIndex", null);
-            Et(kt(i), "selectedOptionCount", void 0);
-            Et(kt(i), "optionRefsByKey", void 0);
-            Et(kt(i), "matchCharacter", void 0);
-            Et(kt(i), "matchTimeout", void 0);
-            Et(kt(i), "currentMatchOptions", void 0);
-            Et(kt(i), "availableMatchOptions", void 0);
-            Et(kt(i), "optionSelection", void 0);
-            Et(kt(i), "resetMatches", (function() {
+            Et(Ct(i), "activeItemId", void 0);
+            Et(Ct(i), "activeValue", void 0);
+            Et(Ct(i), "availableOptionCount", void 0);
+            Et(Ct(i), "controlledExternally", void 0);
+            Et(Ct(i), "displayedValues", void 0);
+            Et(Ct(i), "dropdown", null);
+            Et(Ct(i), "firstSelectedEnabledOption", null);
+            Et(Ct(i), "firstSelectedOptionIndex", void 0);
+            Et(Ct(i), "menuId", void 0);
+            Et(Ct(i), "menuListboxId", void 0);
+            Et(Ct(i), "previousActiveIndex", null);
+            Et(Ct(i), "selectedOptionCount", void 0);
+            Et(Ct(i), "optionRefsByKey", void 0);
+            Et(Ct(i), "matchCharacter", void 0);
+            Et(Ct(i), "matchTimeout", void 0);
+            Et(Ct(i), "currentMatchOptions", void 0);
+            Et(Ct(i), "availableMatchOptions", void 0);
+            Et(Ct(i), "optionSelection", void 0);
+            Et(Ct(i), "resetMatches", (function() {
                 i.matchCharacter = null;
                 i.currentMatchOptions = [];
                 if (i.matchTimeout) {
                     clearTimeout(i.matchTimeout);
                 }
             }));
-            Et(kt(i), "handleSelectAll", (function(e) {
+            Et(Ct(i), "handleSelectAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, c = a.children, s = a.multiple;
+                var a = i.props, l = a.name, s = a.children, c = a.multiple;
  // this doesn't make sense if we can't select multiple values
-                                if (!s) {
+                                if (!c) {
                     return;
                 }
                 var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var p = A()(u.concat(i.displayedValues));
-                p = r().Children.toArray(c).filter((function(e) {
+                p = r().Children.toArray(s).filter((function(e) {
                     return Dt(e) && b()(p, e.props.value) && (!e.props.disabled || b()(u, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1256,17 +1258,17 @@
                     reason: "selectAll"
                 });
             }));
-            Et(kt(i), "handleClearAll", (function(e) {
+            Et(Ct(i), "handleClearAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, c = a.children, s = a.multiple;
+                var a = i.props, l = a.name, s = a.children, c = a.multiple;
  // this doesn't make sense if we can't select multiple values
-                                if (!s) {
+                                if (!c) {
                     return;
                 }
                 var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var p = E().apply(void 0, [ u ].concat(pt(i.displayedValues)));
  // this will unselect all selected values unless those values are disabled or hidden by the filter
-                                var f = r().Children.toArray(c).filter((function(e) {
+                                var f = r().Children.toArray(s).filter((function(e) {
                     return Dt(e) && (b()(u, e.props.value) && e.props.disabled || b()(p, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
@@ -1282,7 +1284,7 @@
                     reason: "clearAll"
                 });
             }));
-            Et(kt(i), "handleTextKeyDown", (function(e) {
+            Et(Ct(i), "handleTextKeyDown", (function(e) {
                 var t = i.props, r = t.children, o = t.onScrollBottom, a = t.tabConfirmsNewValue;
                 var l = (0, R.keycode)(e.nativeEvent);
                 if (l === "tab") {
@@ -1310,9 +1312,9 @@
                         };
                     }));
                     if (r && o) {
-                        var c;
-                        var s = n.Children.toArray(r).length - (2 + ((c = i.getCurrentValues()) !== null && c !== void 0 ? c : []).length);
-                        if (i.state.activeIndex === s) {
+                        var s;
+                        var c = n.Children.toArray(r).length - (2 + ((s = i.getCurrentValues()) !== null && s !== void 0 ? s : []).length);
+                        if (i.state.activeIndex === c) {
                             i.handleScrollBottom(e);
                         }
                     }
@@ -1338,7 +1340,7 @@
                     }
                 }
             }));
-            Et(kt(i), "handleMenuOptionClick", (function(e, t) {
+            Et(Ct(i), "handleMenuOptionClick", (function(e, t) {
                 var n = t.value;
                 e.preventDefault();
                 if (!i.state.open) {
@@ -1346,7 +1348,7 @@
                 }
                 i.toggleValue(e, n);
             }));
-            Et(kt(i), "handleMenuOptionKeyDown", (function(e, t) {
+            Et(Ct(i), "handleMenuOptionKeyDown", (function(e, t) {
                 var n = e.nativeEvent.key;
  // Checking for a single character to avoid complications from double-byte languages and emojis.
                                 if (n.length === 1) {
@@ -1374,11 +1376,11 @@
                                 a = l === r.length - 1 ? 0 : l + 1;
                             }
                         }
-                        var c = r[a];
-                        var s = i.optionRefsByKey[qt(c.value, c.label)];
-                        if (s != null) {
+                        var s = r[a];
+                        var c = i.optionRefsByKey[Lt(s.value, s.label)];
+                        if (c != null) {
                             var u;
-                            (u = s.focus) === null || u === void 0 ? void 0 : u.call(s);
+                            (u = c.focus) === null || u === void 0 ? void 0 : u.call(c);
                         }
                     }
                     i.currentMatchOptions = r;
@@ -1391,7 +1393,7 @@
                     e.stopPropagation();
                 }
             }));
-            Et(kt(i), "handleTextChange", (function(e, t) {
+            Et(Ct(i), "handleTextChange", (function(e, t) {
                 var n, r;
                 var o = t.value;
                 i.setState({
@@ -1403,17 +1405,17 @@
                     keyword: o
                 });
             }));
-            Et(kt(i), "handleTextFocus", (function() {
+            Et(Ct(i), "handleTextFocus", (function() {
                 i.setState({
                     textHasFocus: true
                 });
             }));
-            Et(kt(i), "handleTextBlur", (function() {
+            Et(Ct(i), "handleTextBlur", (function() {
                 i.setState({
                     textHasFocus: false
                 });
             }));
-            Et(kt(i), "handleRequestOpen", (function(e) {
+            Et(Ct(i), "handleRequestOpen", (function(e) {
                 var t = {
                     open: true,
                     topValues: i.getTopValues()
@@ -1442,7 +1444,7 @@
                     }
                 }));
             }));
-            Et(kt(i), "handleRequestClose", (function() {
+            Et(Ct(i), "handleRequestClose", (function() {
                 i.setState({
                     open: false,
                     activeIndex: 0
@@ -1452,18 +1454,18 @@
                     (e = (t = i.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
                 }));
             }));
-            Et(kt(i), "handleScrollBottom", (function(e) {
+            Et(Ct(i), "handleScrollBottom", (function(e) {
                 if (i.state.open && !i.props.isLoadingOptions) {
                     var t, n;
                     (t = (n = i.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
                 }
             }));
-            Et(kt(i), "handleActiveOptionMount", (function(e) {
+            Et(Ct(i), "handleActiveOptionMount", (function(e) {
                 if (i.previousActiveIndex !== i.state.activeIndex) {
                     e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
                 }
             }));
-            Et(kt(i), "handleOptionMount", (function(e, t, n) {
+            Et(Ct(i), "handleOptionMount", (function(e, t, n) {
                 if (n) {
                     i.firstSelectedEnabledOption = e;
                 }
@@ -1473,105 +1475,117 @@
                     i.optionRefsByKey[t] = e;
                 }
             }));
-            Et(kt(i), "createToggle", (function() {
+            Et(Ct(i), "createToggle", (function() {
                 var e;
-                var t = i.props, a = t.toggle, l = t.appearance, s = t.children, u = t.describedBy, p = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, m = t.labelText, y = t.multiple, g = t.placeholder, S = t.prefixLabel, w = t.required, x = t.suffixLabel;
-                var C;
+                var t = i.props, a = t.toggle, l = t.appearance, c = t.children, u = t.describedBy, p = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, m = t.labelText, y = t.multiple, g = t.placeholder, S = t.prefixLabel, x = t.required, w = t.suffixLabel, k = t.toggleContent;
                 var _;
+                var A;
+                var j = [];
  // Generate buttonLabels
-                                var A = (e = i.getCurrentValues()) !== null && e !== void 0 ? e : [];
-                var j = n.Children.toArray(s);
-                var E = A.reduce((function(e, t, n, r) {
-                    var o = f()(j, (function(e) {
+                                var E = (e = i.getCurrentValues()) !== null && e !== void 0 ? e : [];
+                var M = n.Children.toArray(c);
+                var T = E.reduce((function(e, t, n, r) {
+                    var o = f()(M, (function(e) {
                         return Dt(e) && e.props.value === t;
                     }));
                     if (o) {
-                        e.push(o.props.children || o.props.label);
+                        var i = k !== "optionLabel" && o.props.children ? o.props.children : o.props.label;
+                        e.push(i);
+                        j.push(o.props.label);
  // if not in multiple mode, add the icon
-                                                if (!y && A.length === 1) {
-                            C = o.props.icon;
+                                                if (!y && E.length === 1) {
+                            _ = o.props.icon;
                         }
                     } else if (y) {
                         // only add values that don't match an option in "multiple" mode to preserve old behaviour
                         e.push(t);
+                        j.push(t.toString());
                     }
                     if (n < r.length - 1) {
-                        e.push((0, c._)(", "));
+                        e.push((0, s._)(", "));
+                        j.push((0, s._)(", "));
                     }
                     return e;
                 }), []);
-                _ = E;
+                A = T;
  // only apply prefix / suffix if the label is not empty
-                                if (_.length > 0) {
-                    _ = i.wrapLabel({
+                                if (A.length > 0) {
+                    A = i.wrapLabel({
                         prefixLabel: S,
-                        label: _,
-                        suffixLabel: x
+                        label: A,
+                        suffixLabel: w
                     });
                 }
  // single <Select> behaviour is to show the placeholder if all parts of the the label
                 // are empty strings so we replicate this behaviour here
-                                if (_.length === 0 || !y && _.every((function(e) {
+                                if (A.length === 0 || !y && A.every((function(e) {
                     return e === "";
                 }))) {
-                    _ = Pt(g);
+                    A = Pt(g);
+ // placeholder has a default value so will not be undefined
+                                        j = Pt(g);
                 }
-                var M = _;
  // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
-                                if (_.length > 1) {
-                    M = i.wrapLabel({
+                                if (A.length > 1) {
+                    j = i.wrapLabel({
+                        prefixLabel: S,
+                        label: [ "".concat(E.length, " items selected") ],
+                        suffixLabel: w
+                    });
+                } else {
+                    j = i.wrapLabel({
                         prefixLabel: S,
-                        label: [ "".concat(A.length, " items selected") ],
-                        suffixLabel: x
+                        label: j,
+                        suffixLabel: w
                     });
                 }
-                var T = jt({
+                var P = jt({
                     "aria-describedby": u,
-                    "aria-label": "".concat(m ? "".concat(m, ", ") : "").concat(M),
+                    "aria-label": "".concat(m ? "".concat(m, ", ") : "").concat(j.join("")),
                     "aria-labelledby": m ? undefined : b,
-                    "aria-required": w,
+                    "aria-required": x,
                     "data-select-appearance": l,
                     "data-test": y ? "multiselect" : "select",
                     disabled: p,
                     elementRef: d,
                     error: v
-                }, k()(i.props, O()(o.propTypes)));
+                }, C()(i.props, O()(o.propTypes)));
                 if (y) {
-                    T["data-test-values"] = JSON.stringify(A);
+                    P["data-test-values"] = JSON.stringify(E);
                 } else {
-                    var P = lt(A, 1), V = P[0];
-                    T["data-test-value"] = V;
+                    var V = lt(E, 1), R = V[0];
+                    P["data-test-value"] = R;
                 }
                 if (a) {
                     
-                    return (0, n.cloneElement)(a, T);
+                    return (0, n.cloneElement)(a, P);
                 }
                 if (l === "link") {
                     
-                    return r().createElement(L(), at({}, T, {
+                    return r().createElement(q(), at({}, P, {
                         "data-select-appearance": "link"
-                    }), !!C &&  r().createElement(Ue, null, C), _ || g,  r().createElement(Ge, null,  r().createElement(J, null)));
+                    }), !!_ &&  r().createElement(Ue, null, _), A || g,  r().createElement(Ge, null,  r().createElement(J, null)));
                 }
                 
-                return r().createElement(We, at({}, T, {
+                return r().createElement(We, at({}, P, {
                     $multiple: y,
                     appearance: l,
-                    label: _,
+                    label: A,
                     error: v,
-                    icon: C,
+                    icon: _,
                     inline: h,
                     isMenu: true,
                     "aria-haspopup": "listbox",
                     "aria-owns": i.menuId,
                     onClick: i.props.onClick
-                }, I()(i.props, o.invalidLinkAppearanceProps)), !!A.length && y &&  r().createElement(Xe, {
+                }, I()(i.props, o.invalidLinkAppearanceProps)), !!E.length && y &&  r().createElement(Ye, {
                     "data-role": "count"
-                }, "(", A.length, ")"));
+                }, "(", E.length, ")"));
             }));
-            Et(kt(i), "createChildren", (function() {
+            Et(Ct(i), "createChildren", (function() {
                 var e = i.state, t = e.filterKeyword, o = e.textHasFocus, a = e.topValues;
-                var l = i.props, s = l.allowKeyMatching, u = l.allowNewValues, p = l.filter, d = l.multiple, h = l.selectAllAppearance, b = l.showSelectedValuesFirst, m = l.isLoadingOptions, y = l.onScrollBottom;
+                var l = i.props, c = l.allowKeyMatching, u = l.allowNewValues, p = l.filter, d = l.multiple, h = l.selectAllAppearance, b = l.showSelectedValuesFirst, m = l.isLoadingOptions, y = l.onScrollBottom;
                 var g = i.getCurrentValues();
                 i.availableOptionCount = 0;
                 i.firstSelectedOptionIndex = undefined;
@@ -1580,11 +1594,11 @@
                 i.availableMatchOptions = [];
                 var O;
                 var S = 0;
-                var w = false;
+                var x = false;
  // used to avoid overwriting the selected item ref in multiple mode
-                                var x;
-                var k = b === "immediately" ? i.getTopValues() : a;
-                var C = n.Children.toArray(i.props.children).reduce((function(e, t, o) {
+                                var w;
+                var C = b === "immediately" ? i.getTopValues() : a;
+                var k = n.Children.toArray(i.props.children).reduce((function(e, t, o) {
                     // ignore Headings and Dividers
                     if (!Dt(t)) {
                         e.push(t);
@@ -1595,11 +1609,11 @@
                         O = true;
                     }
                     var a = g && g.indexOf(t.props.value) >= 0;
-                    var l = !!a && !t.props.disabled && !x;
-                    var c = s && !d && !p && !m && !y;
-                    var u = qt(t.props.value, t.props.label);
+                    var l = !!a && !t.props.disabled && !w;
+                    var s = c && !d && !p && !m && !y;
+                    var u = Lt(t.props.value, t.props.label);
                     var f = -1;
-                    if (c && !t.props.disabled && !t.props.hidden) {
+                    if (s && !t.props.disabled && !t.props.hidden) {
                         i.availableMatchOptions.push({
                             label: t.props.label,
                             value: t.props.value
@@ -1610,7 +1624,7 @@
                                         var v =  (0, n.cloneElement)(t, {
                         key: t.key || o,
                         onClick: i.handleMenuOptionClick,
-                        onKeyDown: c ? function(e) {
+                        onKeyDown: s ? function(e) {
                             return i.handleMenuOptionKeyDown(e, f);
                         } : undefined,
                         selected: a,
@@ -1621,14 +1635,14 @@
                         }
                     });
                     if (l) {
-                        x = true;
+                        w = true;
                     }
-                    if (k && k.indexOf(t.props.value) >= 0) {
+                    if (C && C.indexOf(t.props.value) >= 0) {
                         if (S === 0) {
                             e.splice(S, 0,  r().createElement(T.Divider, {
                                 key: "topDivider"
                             }));
-                            w = true;
+                            x = true;
                         }
                         e.splice(S, 0, v);
                         S += 1;
@@ -1640,23 +1654,23 @@
  // In multiple mode, add missing items
                                 if (d) {
                     v()(g, (function(e) {
-                        var t = f()(C, (function(t) {
+                        var t = f()(k, (function(t) {
                             return Dt(t) && t.props && t.props.value === e;
                         }));
                         if (!t) {
                             if (e === i.state.filterKeyword) {
                                 O = true;
                             }
-                            var n = k && k.indexOf(e) >= 0;
-                            var o = k.length;
+                            var n = C && C.indexOf(e) >= 0;
+                            var o = C.length;
                             if (S === 0) {
-                                C.splice(0, 0,  r().createElement(T.Divider, {
+                                k.splice(0, 0,  r().createElement(T.Divider, {
                                     key: "topDivider"
                                 }));
                                 S += 1;
-                                w = true;
+                                x = true;
                             }
-                            C.splice(n ? 0 : o + 1, 0,  r().createElement(Oe, {
+                            k.splice(n ? 0 : o + 1, 0,  r().createElement(Oe, {
                                 label: String(e),
                                 value: e,
                                 key: "missing-value-".concat(e),
@@ -1673,7 +1687,7 @@
                 var I = p === "controlled";
  // Filter the items
                                 var _ = (0, D.stringToKeywords)(t);
-                C = I ? C : C.filter((function(e) {
+                k = I ? k : k.filter((function(e) {
                     if (Dt(e)) {
                         return (0, D.testPhrase)(e.props.label, _);
                     }
@@ -1692,8 +1706,8 @@
                 }));
  // Add the option to add the new value
                                 if (u && !O && t) {
-                    var A = w ? S + 1 : S;
-                    C.splice(A, 0,  r().createElement(Oe, {
+                    var A = x ? S + 1 : S;
+                    k.splice(A, 0,  r().createElement(Oe, {
                         label: "".concat(t, " (new value)"),
                         value: t,
                         key: "newValue",
@@ -1702,10 +1716,10 @@
                     }));
                 }
  // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
-                                var j = h === "checkbox" && d && C.length > 1 ? 1 : 0;
+                                var j = h === "checkbox" && d && k.length > 1 ? 1 : 0;
                 var E = true;
  // Highlight the selected Items and remove hidden
-                                C = C.reduce((function(e, t) {
+                                k = k.reduce((function(e, t) {
                     // ignore Dividers & Headings
                     if (!Dt(t)) {
                         e.push(t);
@@ -1747,19 +1761,19 @@
                     var P;
                     if (i.optionSelection === "all") {
                         if (t === "") {
-                            P = (0, c._)("Clear all");
+                            P = (0, s._)("Clear all");
                         } else {
-                            P = (0, c._)("Clear all matches");
+                            P = (0, s._)("Clear all matches");
                         }
                     } else if (t === "") {
-                        P = (0, c._)("Select all");
+                        P = (0, s._)("Select all");
                     } else {
-                        P = (0, c._)("Select all matches");
+                        P = (0, s._)("Select all matches");
                     }
                     if (i.state.activeIndex === 0 && o) {
                         i.activeValue = "selectAll";
                     }
-                    C.unshift( r().createElement(He, {
+                    k.unshift( r().createElement(He, {
                         key: "selectAllOption",
                         selected: i.optionSelection === "all" || i.optionSelection !== "none" && "some",
                         selectAllLabel: P,
@@ -1774,15 +1788,15 @@
                         key: "selectAllDivider"
                     }));
                 }
-                i.displayedValues = C.reduce((function(e, t) {
+                i.displayedValues = k.reduce((function(e, t) {
                     if (Dt(t)) {
                         e.push(t.props.value);
                     }
                     return e;
                 }), []);
-                return C;
+                return k;
             }));
-            Et(kt(i), "wrapLabel", (function(e) {
+            Et(Ct(i), "wrapLabel", (function(e) {
                 var t = e.prefixLabel, n = e.label, r = e.suffixLabel;
                 var o = n;
                 if (t) {
@@ -1793,7 +1807,7 @@
                 }
                 return o;
             }));
-            Et(kt(i), "handleDropdownMount", (function(e) {
+            Et(Ct(i), "handleDropdownMount", (function(e) {
                 i.dropdown = e;
             }));
             i.state = {
@@ -1860,7 +1874,7 @@
                 var r, o, i;
                 var a = (r = this.getCurrentValues()) !== null && r !== void 0 ? r : [];
                 var l = a.indexOf(n);
-                var c = this.props, s = c.name, u = c.multiple;
+                var s = this.props, c = s.name, u = s.multiple;
                 var p;
                 if (u) {
                     if (l >= 0) {
@@ -1895,7 +1909,7 @@
                 }
                 (o = (i = this.props).onChange) === null || o === void 0 ? void 0 : o.call(i, t, {
                     values: p,
-                    name: s,
+                    name: c,
                     reason: "valueToggle"
                 });
             }
@@ -1912,24 +1926,24 @@
             value: function e(t) {
                 var n = t.hasChildren, o = t.placement;
                 var i = this.state.filterKeyword;
-                var a = this.props, l = a.inputId, s = a.inputRef, u = a.multiple, p = a.selectAllAppearance;
-                var f = (0, c._)("Select all options".concat(this.optionSelection === "all" ? " disabled" : ""));
-                var d = (0, c._)("Clear all options".concat(this.optionSelection === "none" ? " disabled" : ""));
+                var a = this.props, l = a.inputId, c = a.inputRef, u = a.multiple, p = a.selectAllAppearance;
+                var f = (0, s._)("Select all options".concat(this.optionSelection === "all" ? " disabled" : ""));
+                var d = (0, s._)("Clear all options".concat(this.optionSelection === "none" ? " disabled" : ""));
  // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
                                 var v =  r().createElement(Ze, {
                     $placement: o,
                     key: "selectAll"
-                },  r().createElement(Ye, {
+                },  r().createElement(Qe, {
                     $disabled: this.optionSelection === "all",
                     "aria-label": f,
                     onClick: this.handleSelectAll,
                     "data-test": "select-all"
-                }, i ? (0, c._)("Select all Matches") : (0, c._)("Select all")),  r().createElement(Ye, {
+                }, i ? (0, s._)("Select all Matches") : (0, s._)("Select all")),  r().createElement(Qe, {
                     $disabled: this.optionSelection === "none",
                     "aria-label": d,
                     onClick: this.handleClearAll,
                     "data-test": "clear-all"
-                }, i ? (0, c._)("Clear all Matches") : (0, c._)("Clear all")));
+                }, i ? (0, s._)("Clear all Matches") : (0, s._)("Clear all")));
                 return this.hasFilter() &&  r().createElement("div", {
                     key: "controls"
                 },  r().createElement(Je, {
@@ -1945,23 +1959,23 @@
                     onKeyDown: this.handleTextKeyDown,
                     onFocus: this.handleTextFocus,
                     onBlur: this.handleTextBlur,
-                    placeholder: (0, c._)("filter"),
+                    placeholder: (0, s._)("filter"),
                     role: "combobox",
                     "aria-expanded": "true",
                     "aria-controls": this.menuListboxId,
-                    "aria-label": (0, c._)("Filter"),
+                    "aria-label": (0, s._)("Filter"),
                     "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
-                    inputRef: s,
+                    inputRef: c,
                     inputId: l,
                     canClear: true,
-                    startAdornment:  r().createElement(Qe, null,  r().createElement(te, null))
+                    startAdornment:  r().createElement(Xe, null,  r().createElement(te, null))
                 })), u && n && p === "buttongroup" && v);
             }
         }, {
             key: "render",
             value: function e() {
                 var t, o = this;
-                var i = this.props, a = i.children, l = i.defaultPlacement, c = i.inputId, s = i.multiple, u = i.repositionMode, p = i.virtualization;
+                var i = this.props, a = i.children, l = i.defaultPlacement, s = i.inputId, c = i.multiple, u = i.repositionMode, p = i.virtualization;
                 var d = this.hasFilter();
                 var v = (t = this.getCurrentValues()) !== null && t !== void 0 ? t : [];
                 var h = n.Children.toArray(a);
@@ -1981,9 +1995,9 @@
                         maxHeight: i,
                         menuStyle: o.props.menuStyle
                     });
-                    var c = v.length > 0 && !b && !o.hasFilter() ? 0 : undefined;
+                    var s = v.length > 0 && !b && !o.hasFilter() ? 0 : undefined;
                     var u = jt(jt({
-                        "aria-multiselectable": s || undefined,
+                        "aria-multiselectable": c || undefined,
                         childrenStart: o.renderControls({
                             placement: a,
                             hasChildren: !!m.length
@@ -1997,7 +2011,7 @@
                         menuId: o.menuListboxId
                     }, I()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
-                        tabIndex: c
+                        tabIndex: s
                     });
                     if (p) {
                         
@@ -2011,7 +2025,7 @@
                 
                 return r().createElement(V(), {
                     closeReasons: Rt,
-                    inputId: c,
+                    inputId: s,
                     toggle: y,
                     onRequestOpen: this.handleRequestOpen,
                     onRequestClose: this.handleRequestClose,
@@ -2028,13 +2042,13 @@
         } ]);
         return o;
     }(n.Component);
-    Et(Lt, "propTypes", Mt);
-    Et(Lt, "defaultProps", Tt);
-    Et(Lt, "Option", Oe);
-    Et(Lt, "Divider", T.Divider);
-    Et(Lt, "Heading", T.Heading);
-    Et(Lt, "invalidLinkAppearanceProps", [ "append", "error", "prepend" ]);
-    /* harmony default export */    const Nt = Lt;
+    Et(qt, "propTypes", Mt);
+    Et(qt, "defaultProps", Tt);
+    Et(qt, "Option", Oe);
+    Et(qt, "Divider", T.Divider);
+    Et(qt, "Heading", T.Heading);
+    Et(qt, "invalidLinkAppearanceProps", [ "append", "error", "prepend" ]);
+    /* harmony default export */    const Nt = qt;
     // CONCATENATED MODULE: ./src/Select/Option.tsx
     function Bt(e) {
         "@babel/helpers - typeof";
@@ -2103,11 +2117,11 @@
         return Wt(e, t);
     }
     function Ut(e) {
-        var t = Qt();
+        var t = Xt();
         return function n() {
-            var r = Xt(e), o;
+            var r = Yt(e), o;
             if (t) {
-                var i = Xt(this).constructor;
+                var i = Yt(this).constructor;
                 o = Reflect.construct(r, arguments, i);
             } else {
                 o = r.apply(this, arguments);
@@ -2127,7 +2141,7 @@
         }
         return e;
     }
-    function Qt() {
+    function Xt() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -2138,13 +2152,13 @@
             return false;
         }
     }
-    function Xt(e) {
-        Xt = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function Yt(e) {
+        Yt = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Xt(e);
+        return Yt(e);
     }
-    function Yt(e, t, n) {
+    function Qt(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -2200,8 +2214,8 @@
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            Yt(Jt(e), "c", null);
-            Yt(Jt(e), "handleMount", (function(t) {
+            Qt(Jt(e), "c", null);
+            Qt(Jt(e), "handleMount", (function(t) {
                 e.c = t;
             }));
             return e;
@@ -2232,8 +2246,8 @@
         } ]);
         return n;
     }(n.PureComponent);
-    Yt(tn, "propTypes", Zt);
-    Yt(tn, "defaultProps", en);
+    Qt(tn, "propTypes", Zt);
+    Qt(tn, "defaultProps", en);
     /* harmony default export */    const nn = tn;
     // CONCATENATED MODULE: ./src/Select/Select.tsx
     function rn(e) {
@@ -2290,12 +2304,12 @@
         }
         return n;
     }
-    function cn(e, t) {
+    function sn(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function sn(e, t) {
+    function cn(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -2305,8 +2319,8 @@
         }
     }
     function un(e, t, n) {
-        if (t) sn(e.prototype, t);
-        if (n) sn(e, n);
+        if (t) cn(e.prototype, t);
+        if (n) cn(e, n);
         return e;
     }
     function pn(e, t) {
@@ -2388,7 +2402,7 @@
     /** @public */    var gn = {
         allowKeyMatching: i().bool,
         animateLoading: i().bool,
-        appearance: i().oneOf([ "default", "link", "primary", "pill", "toggle", "flat" ]),
+        appearance: i().oneOf([ "default", "link", "primary", "pill", "toggle", "flat", "subtle" ]),
         append: i().bool,
         children: i().node,
         defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
@@ -2419,6 +2433,7 @@
         prefixLabel: i().string,
         prepend: i().bool,
         suffixLabel: i().string,
+        toggleContent: i().oneOf([ "optionChildren", "optionLabel" ]),
         /** @private. */
         toggle: i().node,
         value: i().oneOfType([ i().string, i().number, i().bool ]),
@@ -2438,9 +2453,10 @@
         inline: true,
         isLoadingOptions: false,
         menuStyle: {},
-        noOptionsMessage: (0, c._)("No matches"),
-        placeholder: (0, c._)("Select..."),
-        prepend: false
+        noOptionsMessage: (0, s._)("No matches"),
+        placeholder: (0, s._)("Select..."),
+        prepend: false,
+        toggleContent: "optionChildren"
     };
     var Sn =  function(e) {
         pn(n, e);
@@ -2448,7 +2464,7 @@
         // @docs-props-type SelectPropsBase
                 function n(e) {
             var r;
-            cn(this, n);
+            sn(this, n);
             r = t.call(this, e);
             var o = {};
  // wrap defaultValue in an array once to avoid failing <SelectBase>'s defaultValues comparison check
@@ -2461,6 +2477,9 @@
                 }
             }
             r.state = o;
+ // `this.props.appearance === 'toggle'` is not included here because it is the default value.
+            // Including it would trigger a warning for every instance of using `Select`.
+                        if (false) {}
             return r;
         }
         un(n, [ {
@@ -2472,7 +2491,7 @@
             key: "render",
             value: function e() {
                 var t = this.props, n = t.defaultValue, o = t.onChange, i = t.value, a = an(t, [ "defaultValue", "onChange", "value" ]);
-                var c = {
+                var s = {
                     onChange: function e(t, n) {
                         var r = n.name, i = n.values;
                         o === null || o === void 0 ? void 0 : o(t, {
@@ -2484,16 +2503,16 @@
  // using "has" as opposed to a null check to match SelectBase
                                 if (l()(this.props, "value")) {
                     if (i != null) {
-                        c.values = [ i ];
+                        s.values = [ i ];
                     } else {
-                        c.values = [];
+                        s.values = [];
                     }
                 } else if (this.state.defaultValues != null) {
                     // using defaultValues from state in order to avoid wrapping defaultValue here
-                    c.defaultValues = this.state.defaultValues;
+                    s.defaultValues = this.state.defaultValues;
                 }
                 
-                return r().createElement(Nt, on({}, a, c, {
+                return r().createElement(Nt, on({}, a, s, {
                     multiple: false
                 }));
             }
@@ -2505,7 +2524,7 @@
     yn(Sn, "Option", nn);
     yn(Sn, "Heading", T.Heading);
     yn(Sn, "Divider", T.Divider);
-    /* harmony default export */    const wn = Sn;
+    /* harmony default export */    const xn = Sn;
     // CONCATENATED MODULE: ./src/Select/index.ts
     module.exports = t;
     /******/})();