@kaizen/components 3.3.1 → 3.3.3

package/dist/esm/src/MultiSelect/MultiSelect.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useId, useRef } from 'react';
+import React__default, { useId, useRef } from 'react';
 import { mergeRefs } from '@react-aria/utils';
 import classnames from 'classnames';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
@@ -9,108 +9,105 @@ import { MultiSelectToggle } from './subcomponents/MultiSelectToggle/MultiSelect
 import { Popover } from './subcomponents/Popover/Popover.mjs';
 import { useFloating } from '@floating-ui/react-dom';
 import modules_66f395c3 from './MultiSelect.module.scss.mjs';
-const MultiSelect = /*#__PURE__*/function () {
-  const MultiSelect = function (_a) {
-    var propsId = _a.id,
-      label = _a.label,
-      items = _a.items,
-      selectedValues = _a.selectedValues,
-      description = _a.description,
-      onSelectedValuesChange = _a.onSelectedValuesChange,
-      isOpen = _a.isOpen,
-      onOpenChange = _a.onOpenChange,
-      classNameOverride = _a.classNameOverride,
-      validationMessage = _a.validationMessage,
-      inputRef = _a.inputRef,
-      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage", "inputRef"]);
-    var fallbackId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
-    var descriptionId = "".concat(id, "-description");
-    var validationId = "".concat(id, "-validation-message");
-    var toggleButtonRef = useRef(null);
-    var refs = useFloating().refs;
-    var handleToggleClick = function () {
-      return onOpenChange(!isOpen);
-    };
-    var handleClose = function () {
-      return onOpenChange(false);
-    };
-    var onClickOutside = function (e) {
-      var toggle = refs.reference.current;
-      var isInToggle = toggle.contains(e.target);
-      if (!isInToggle) {
-        e.stopPropagation();
-        handleClose();
-      }
-    };
-    var itemsMap = items.reduce(function (acc, item) {
-      acc[item.value] = item;
-      return acc;
-    }, {});
-    var handleOnRemoveOption = function (optionValue) {
-      var newValues = new Set(selectedValues.values());
-      newValues.delete(optionValue);
-      onSelectedValuesChange(newValues);
-    };
-    var handleRemoveAllOptions = function () {
-      var newValues = new Set([]);
-      onSelectedValuesChange(newValues);
-    };
-    return /*#__PURE__*/React.createElement("div", __assign({
-      id: id,
-      className: classnames(classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement(Heading, {
-      tag: "span",
-      variant: "heading-6",
-      id: "".concat(id, "--label")
-    }, label), /*#__PURE__*/React.createElement("div", {
-      ref: refs.setReference,
-      className: modules_66f395c3.toggleContainer
-    }, /*#__PURE__*/React.createElement(MultiSelectToggle, {
-      ref: mergeRefs(toggleButtonRef, inputRef),
-      id: "".concat(id, "--toggle"),
-      "aria-labelledby": "".concat(id, "--label"),
-      "aria-describedby": "".concat(validationId, " ").concat(descriptionId),
-      "aria-controls": "".concat(id, "--popover"),
-      onClick: handleToggleClick,
-      isOpen: isOpen,
-      selectedOptions: Array.from(selectedValues).map(function (value) {
-        return itemsMap[value];
-      }),
-      status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status,
-      onRemoveOption: handleOnRemoveOption,
-      onRemoveAllOptions: handleRemoveAllOptions
-    })), validationMessage && /*#__PURE__*/React.createElement(FieldMessage, __assign({
-      id: validationId
-    }, validationMessage)), description && /*#__PURE__*/React.createElement(FieldMessage, {
-      id: descriptionId,
-      message: description
-    }), isOpen && (/*#__PURE__*/React.createElement(Popover, {
-      refs: refs,
-      id: "".concat(id, "--popover"),
-      role: "dialog",
-      "aria-modal": "true",
-      tabIndex: -1,
-      focusOnProps: {
-        enabled: true,
-        onClickOutside: onClickOutside,
-        onEscapeKey: handleClose,
-        shards: [toggleButtonRef],
-        noIsolation: true,
-        onActivation: function () {
-          var _a, _b;
-          return (_b = (_a = refs.floating) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      },
-      classNameOverride: modules_66f395c3.popover
-    }, /*#__PURE__*/React.createElement(MultiSelectOptions, {
-      id: "".concat(id, "--options"),
-      options: items,
-      onChange: onSelectedValuesChange,
-      selectedValues: selectedValues
-    }))));
+var MultiSelect = function (_a) {
+  var propsId = _a.id,
+    label = _a.label,
+    items = _a.items,
+    selectedValues = _a.selectedValues,
+    description = _a.description,
+    onSelectedValuesChange = _a.onSelectedValuesChange,
+    isOpen = _a.isOpen,
+    onOpenChange = _a.onOpenChange,
+    classNameOverride = _a.classNameOverride,
+    validationMessage = _a.validationMessage,
+    inputRef = _a.inputRef,
+    restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage", "inputRef"]);
+  var fallbackId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+  var descriptionId = "".concat(id, "-description");
+  var validationId = "".concat(id, "-validation-message");
+  var toggleButtonRef = useRef(null);
+  var refs = useFloating().refs;
+  var handleToggleClick = function () {
+    return onOpenChange(!isOpen);
+  };
+  var handleClose = function () {
+    return onOpenChange(false);
+  };
+  var onClickOutside = function (e) {
+    var toggle = refs.reference.current;
+    var isInToggle = toggle.contains(e.target);
+    if (!isInToggle) {
+      e.stopPropagation();
+      handleClose();
+    }
   };
-  MultiSelect.displayName = 'MultiSelect';
-  return MultiSelect;
-}();
+  var itemsMap = items.reduce(function (acc, item) {
+    acc[item.value] = item;
+    return acc;
+  }, {});
+  var handleOnRemoveOption = function (optionValue) {
+    var newValues = new Set(selectedValues.values());
+    newValues.delete(optionValue);
+    onSelectedValuesChange(newValues);
+  };
+  var handleRemoveAllOptions = function () {
+    var newValues = new Set([]);
+    onSelectedValuesChange(newValues);
+  };
+  return /*#__PURE__*/React__default.createElement("div", __assign({
+    id: id,
+    className: classnames(classNameOverride)
+  }, restProps), /*#__PURE__*/React__default.createElement(Heading, {
+    tag: "span",
+    variant: "heading-6",
+    id: "".concat(id, "--label")
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    ref: refs.setReference,
+    className: modules_66f395c3.toggleContainer
+  }, /*#__PURE__*/React__default.createElement(MultiSelectToggle, {
+    ref: mergeRefs(toggleButtonRef, inputRef),
+    id: "".concat(id, "--toggle"),
+    "aria-labelledby": "".concat(id, "--label"),
+    "aria-describedby": "".concat(validationId, " ").concat(descriptionId),
+    "aria-controls": "".concat(id, "--popover"),
+    onClick: handleToggleClick,
+    isOpen: isOpen,
+    selectedOptions: Array.from(selectedValues).map(function (value) {
+      return itemsMap[value];
+    }),
+    status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status,
+    onRemoveOption: handleOnRemoveOption,
+    onRemoveAllOptions: handleRemoveAllOptions
+  })), validationMessage && /*#__PURE__*/React__default.createElement(FieldMessage, __assign({
+    id: validationId
+  }, validationMessage)), description && /*#__PURE__*/React__default.createElement(FieldMessage, {
+    id: descriptionId,
+    message: description
+  }), isOpen && (/*#__PURE__*/React__default.createElement(Popover, {
+    refs: refs,
+    id: "".concat(id, "--popover"),
+    role: "dialog",
+    "aria-modal": "true",
+    tabIndex: -1,
+    focusOnProps: {
+      enabled: true,
+      onClickOutside: onClickOutside,
+      onEscapeKey: handleClose,
+      shards: [toggleButtonRef],
+      noIsolation: true,
+      onActivation: function () {
+        var _a, _b;
+        return (_b = (_a = refs.floating) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    },
+    classNameOverride: modules_66f395c3.popover
+  }, /*#__PURE__*/React__default.createElement(MultiSelectOptions, {
+    id: "".concat(id, "--options"),
+    options: items,
+    onChange: onSelectedValuesChange,
+    selectedValues: selectedValues
+  }))));
+};
+MultiSelect.displayName = 'MultiSelect';
 export { MultiSelect };

package/dist/esm/src/MultiSelect/subcomponents/Checkbox/Checkbox.mjs

@@ -1,47 +1,44 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useEffect } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../../Icon/Icon.mjs';
 import modules_6238daf1 from './Checkbox.module.scss.mjs';
 var renderIcon = function (status) {
   if (status === 'unchecked') return null;
-  return /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/React__default.createElement(Icon, {
     name: status === 'checked' ? 'check' : 'remove',
     isPresentational: true,
     className: modules_6238daf1.icon
   });
 };
-const Checkbox = /*#__PURE__*/function () {
-  const Checkbox = function (_a) {
-    var checkedStatus = _a.checkedStatus,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["checkedStatus", "classNameOverride"]);
-    var checkboxRef = useRef(null);
-    useEffect(function () {
-      if (checkboxRef.current) {
-        if (checkedStatus === 'checked') {
-          checkboxRef.current.checked = true;
-          checkboxRef.current.indeterminate = false;
-        } else if (checkedStatus === 'unchecked') {
-          checkboxRef.current.checked = false;
-          checkboxRef.current.indeterminate = false;
-        } else if (checkedStatus === 'indeterminate') {
-          checkboxRef.current.checked = false;
-          checkboxRef.current.indeterminate = true;
-        }
+var Checkbox = function (_a) {
+  var checkedStatus = _a.checkedStatus,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["checkedStatus", "classNameOverride"]);
+  var checkboxRef = useRef(null);
+  useEffect(function () {
+    if (checkboxRef.current) {
+      if (checkedStatus === 'checked') {
+        checkboxRef.current.checked = true;
+        checkboxRef.current.indeterminate = false;
+      } else if (checkedStatus === 'unchecked') {
+        checkboxRef.current.checked = false;
+        checkboxRef.current.indeterminate = false;
+      } else if (checkedStatus === 'indeterminate') {
+        checkboxRef.current.checked = false;
+        checkboxRef.current.indeterminate = true;
       }
-    }, [checkedStatus]);
-    return /*#__PURE__*/React.createElement("span", {
-      className: classnames(modules_6238daf1.checkbox, checkedStatus !== 'unchecked' && modules_6238daf1.selected, classNameOverride)
-    }, /*#__PURE__*/React.createElement("input", __assign({
-      ref: checkboxRef,
-      type: "checkbox",
-      className: modules_6238daf1.nativeCheckbox
-    }, restProps)), /*#__PURE__*/React.createElement("span", {
-      className: modules_6238daf1.iconContainer
-    }, renderIcon(checkedStatus)));
-  };
-  Checkbox.displayName = 'Checkbox';
-  return Checkbox;
-}();
+    }
+  }, [checkedStatus]);
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: classnames(modules_6238daf1.checkbox, checkedStatus !== 'unchecked' && modules_6238daf1.selected, classNameOverride)
+  }, /*#__PURE__*/React__default.createElement("input", __assign({
+    ref: checkboxRef,
+    type: "checkbox",
+    className: modules_6238daf1.nativeCheckbox
+  }, restProps)), /*#__PURE__*/React__default.createElement("span", {
+    className: modules_6238daf1.iconContainer
+  }, renderIcon(checkedStatus)));
+};
+Checkbox.displayName = 'Checkbox';
 export { Checkbox };

package/dist/esm/src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.mjs

@@ -1,30 +1,27 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { Checkbox } from '../Checkbox/Checkbox.mjs';
 import modules_831455bd from './MultiSelectOptionField.module.scss.mjs';
-const MultiSelectOptionField = /*#__PURE__*/function () {
-  const MultiSelectOptionField = function (_a) {
-    var id = _a.id,
-      option = _a.option,
-      checkedStatus = _a.checkedStatus,
-      onChange = _a.onChange,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["id", "option", "checkedStatus", "onChange", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(modules_831455bd.multiSelectOptionField, classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement(Checkbox, {
-      id: id,
-      checkedStatus: checkedStatus,
-      onChange: onChange,
-      value: option.value,
-      classNameOverride: classnames(modules_831455bd.checkbox, [checkedStatus !== 'unchecked' && modules_831455bd.checked])
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      className: modules_831455bd.label
-    }, option.label));
-  };
-  MultiSelectOptionField.displayName = 'MultiSelect.OptionField';
-  return MultiSelectOptionField;
-}();
+var MultiSelectOptionField = function (_a) {
+  var id = _a.id,
+    option = _a.option,
+    checkedStatus = _a.checkedStatus,
+    onChange = _a.onChange,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["id", "option", "checkedStatus", "onChange", "classNameOverride"]);
+  return /*#__PURE__*/React__default.createElement("div", __assign({
+    className: classnames(modules_831455bd.multiSelectOptionField, classNameOverride)
+  }, restProps), /*#__PURE__*/React__default.createElement(Checkbox, {
+    id: id,
+    checkedStatus: checkedStatus,
+    onChange: onChange,
+    value: option.value,
+    classNameOverride: classnames(modules_831455bd.checkbox, [checkedStatus !== 'unchecked' && modules_831455bd.checked])
+  }), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: modules_831455bd.label
+  }, option.label));
+};
+MultiSelectOptionField.displayName = 'MultiSelect.OptionField';
 export { MultiSelectOptionField };

package/dist/esm/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs

@@ -1,51 +1,48 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { Text } from '../../../Text/Text.mjs';
 import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
 import { MultiSelectOptionField } from '../MultiSelectOptionField/MultiSelectOptionField.mjs';
 import modules_108515e5 from './MultiSelectOptions.module.scss.mjs';
-const MultiSelectOptions = /*#__PURE__*/function () {
-  const MultiSelectOptions = function (_a) {
-    var id = _a.id,
-      options = _a.options,
-      selectedValues = _a.selectedValues,
-      onChange = _a.onChange,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["id", "options", "selectedValues", "onChange", "classNameOverride"]);
-    var optionsCountId = "".concat(id, "--options-count");
-    var handleOptionChange = function (optionValue) {
-      var newValues = new Set(selectedValues.values());
-      if (newValues.has(optionValue)) {
-        newValues.delete(optionValue);
-      } else {
-        newValues.add(optionValue);
-      }
-      onChange(newValues);
-    };
-    return /*#__PURE__*/React.createElement("fieldset", __assign({
-      id: id,
-      "aria-describedby": optionsCountId,
-      className: classnames(modules_108515e5.multiSelectOptions, classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement(VisuallyHidden, {
-      id: optionsCountId,
-      "aria-live": "polite"
-    }, "Options available: ", options.length), options.length === 0 ? (/*#__PURE__*/React.createElement(Text, {
-      tag: "span",
-      variant: "body"
-    }, "No options available")) : options.map(function (option) {
-      return /*#__PURE__*/React.createElement(MultiSelectOptionField, {
-        key: option.value,
-        id: "".concat(id, "--").concat(option.value),
-        onChange: function () {
-          return handleOptionChange(option.value);
-        },
-        checkedStatus: selectedValues.has(option.value) ? 'checked' : 'unchecked',
-        option: option
-      });
-    }));
+var MultiSelectOptions = function (_a) {
+  var id = _a.id,
+    options = _a.options,
+    selectedValues = _a.selectedValues,
+    onChange = _a.onChange,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["id", "options", "selectedValues", "onChange", "classNameOverride"]);
+  var optionsCountId = "".concat(id, "--options-count");
+  var handleOptionChange = function (optionValue) {
+    var newValues = new Set(selectedValues.values());
+    if (newValues.has(optionValue)) {
+      newValues.delete(optionValue);
+    } else {
+      newValues.add(optionValue);
+    }
+    onChange(newValues);
   };
-  MultiSelectOptions.displayName = 'MultiSelectOptions';
-  return MultiSelectOptions;
-}();
+  return /*#__PURE__*/React__default.createElement("fieldset", __assign({
+    id: id,
+    "aria-describedby": optionsCountId,
+    className: classnames(modules_108515e5.multiSelectOptions, classNameOverride)
+  }, restProps), /*#__PURE__*/React__default.createElement(VisuallyHidden, {
+    id: optionsCountId,
+    "aria-live": "polite"
+  }, "Options available: ", options.length), options.length === 0 ? (/*#__PURE__*/React__default.createElement(Text, {
+    tag: "span",
+    variant: "body"
+  }, "No options available")) : options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(MultiSelectOptionField, {
+      key: option.value,
+      id: "".concat(id, "--").concat(option.value),
+      onChange: function () {
+        return handleOptionChange(option.value);
+      },
+      checkedStatus: selectedValues.has(option.value) ? 'checked' : 'unchecked',
+      option: option
+    });
+  }));
+};
+MultiSelectOptions.displayName = 'MultiSelectOptions';
 export { MultiSelectOptions };

package/dist/esm/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs

@@ -1,82 +1,79 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useId } from 'react';
+import React__default, { forwardRef, useId } from 'react';
 import classnames from 'classnames';
 import { ClearButton } from '../../../ClearButton/ClearButton.mjs';
 import { Icon } from '../../../Icon/Icon.mjs';
 import modules_b0d6496f from './MultiSelectToggle.module.scss.mjs';
 import { RemovableTag } from '../../../__next__/Tag/RemovableTag/RemovableTag.mjs';
-const MultiSelectToggle = /*#__PURE__*/function () {
-  const MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var onClick = _a.onClick,
-      ariaLabelledBy = _a["aria-labelledby"],
-      ariaDescribedBy = _a["aria-describedby"],
-      ariaControls = _a["aria-controls"],
-      _b = _a.isOpen,
-      isOpen = _b === void 0 ? false : _b,
-      classNameOverride = _a.classNameOverride,
-      selectedOptions = _a.selectedOptions,
-      onRemoveOption = _a.onRemoveOption,
-      onRemoveAllOptions = _a.onRemoveAllOptions,
-      status = _a.status,
-      restProps = __rest(_a, ["onClick", 'aria-labelledby', 'aria-describedby', 'aria-controls', "isOpen", "classNameOverride", "selectedOptions", "onRemoveOption", "onRemoveAllOptions", "status"]);
-    var clearAllId = useId();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(modules_b0d6496f.multiSelectToggle, classNameOverride, status && modules_b0d6496f[status]),
-      onClick: onClick
-    }, restProps), /*#__PURE__*/React.createElement("button", {
-      ref: ref,
-      className: modules_b0d6496f.toggleButton,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-controls": ariaControls,
-      "aria-expanded": isOpen,
-      "aria-haspopup": "dialog",
-      type: "button",
-      onClick: function (e) {
-        e.stopPropagation();
-        onClick(e);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
-      isPresentational: true
-    })), /*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_b0d6496f.selectedItemsContainer, selectedOptions.length && modules_b0d6496f.hasSelectedItems)
-    }, selectedOptions.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
-      role: "list",
-      className: modules_b0d6496f.selectedItems
-    }, selectedOptions.map(function (_a) {
-      var label = _a.label,
-        value = _a.value;
-      return (
-        /*#__PURE__*/
-        // This stops the underlying toggle collapsing the popover when interactive with Tags
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("li", {
-          key: value,
-          onClick: function (e) {
-            return e.stopPropagation();
+var MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var onClick = _a.onClick,
+    ariaLabelledBy = _a["aria-labelledby"],
+    ariaDescribedBy = _a["aria-describedby"],
+    ariaControls = _a["aria-controls"],
+    _b = _a.isOpen,
+    isOpen = _b === void 0 ? false : _b,
+    classNameOverride = _a.classNameOverride,
+    selectedOptions = _a.selectedOptions,
+    onRemoveOption = _a.onRemoveOption,
+    onRemoveAllOptions = _a.onRemoveAllOptions,
+    status = _a.status,
+    restProps = __rest(_a, ["onClick", 'aria-labelledby', 'aria-describedby', 'aria-controls', "isOpen", "classNameOverride", "selectedOptions", "onRemoveOption", "onRemoveAllOptions", "status"]);
+  var clearAllId = useId();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", __assign({
+    className: classnames(modules_b0d6496f.multiSelectToggle, classNameOverride, status && modules_b0d6496f[status]),
+    onClick: onClick
+  }, restProps), /*#__PURE__*/React__default.createElement("button", {
+    ref: ref,
+    className: modules_b0d6496f.toggleButton,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-controls": ariaControls,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "dialog",
+    type: "button",
+    onClick: function (e) {
+      e.stopPropagation();
+      onClick(e);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
+    isPresentational: true
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(modules_b0d6496f.selectedItemsContainer, selectedOptions.length && modules_b0d6496f.hasSelectedItems)
+  }, selectedOptions.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("ul", {
+    role: "list",
+    className: modules_b0d6496f.selectedItems
+  }, selectedOptions.map(function (_a) {
+    var label = _a.label,
+      value = _a.value;
+    return (
+      /*#__PURE__*/
+      // This stops the underlying toggle collapsing the popover when interactive with Tags
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+      React__default.createElement("li", {
+        key: value,
+        onClick: function (e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React__default.createElement(RemovableTag, {
+        removeButtonProps: {
+          ariaLabel: "Remove option: ".concat(label),
+          onClick: function () {
+            return onRemoveOption(value);
           }
-        }, /*#__PURE__*/React.createElement(RemovableTag, {
-          removeButtonProps: {
-            ariaLabel: "Remove option: ".concat(label),
-            onClick: function () {
-              return onRemoveOption(value);
-            }
-          }
-        }, label))
-      );
-    })), /*#__PURE__*/React.createElement(ClearButton, {
-      id: clearAllId,
-      "aria-label": "Remove all options from ",
-      "aria-labelledby": "".concat(clearAllId, " ").concat(ariaLabelledBy),
-      classNameOverride: modules_b0d6496f.clearAllButton,
-      onClick: function (e) {
-        e.stopPropagation();
-        onRemoveAllOptions();
-      }
-    }))))));
-  });
-  MultiSelectToggle.displayName = 'MultiSelectToggle';
-  return MultiSelectToggle;
-}();
+        }
+      }, label))
+    );
+  })), /*#__PURE__*/React__default.createElement(ClearButton, {
+    id: clearAllId,
+    "aria-label": "Remove all options from ",
+    "aria-labelledby": "".concat(clearAllId, " ").concat(ariaLabelledBy),
+    classNameOverride: modules_b0d6496f.clearAllButton,
+    onClick: function (e) {
+      e.stopPropagation();
+      onRemoveAllOptions();
+    }
+  }))))));
+});
+MultiSelectToggle.displayName = 'MultiSelectToggle';
 export { MultiSelectToggle };