@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/esm/MultiSelect/MultiSelect.mjs

@@ -8,53 +8,103 @@ import { MultiSelectToggle } from './subcomponents/MultiSelectToggle/MultiSelect
 import { Popover } from './subcomponents/Popover/Popover.mjs';
 import { useFloating } from '@floating-ui/react-dom';
 import styles from './MultiSelect.module.scss.mjs';
-
-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, restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+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,
+      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
     var id = propsId !== null && propsId !== void 0 ? propsId : useId();
     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 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 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;
+      acc[item.value] = item;
+      return acc;
     }, {});
     var handleOnRemoveOption = function (optionValue) {
-        var newValues = new Set(selectedValues.values());
-        newValues.delete(optionValue);
-        onSelectedValuesChange(newValues);
+      var newValues = new Set(selectedValues.values());
+      newValues.delete(optionValue);
+      onSelectedValuesChange(newValues);
     };
     var handleRemoveAllOptions = function () {
-        var newValues = new Set([]);
-        onSelectedValuesChange(newValues);
+      var newValues = new Set([]);
+      onSelectedValuesChange(newValues);
     };
-    return (React.createElement("div", __assign({ id: id, className: classnames(classNameOverride) }, restProps),
-        React.createElement(Heading, { tag: "span", variant: "heading-6", id: "".concat(id, "--label") }, label),
-        React.createElement("div", { ref: refs.setReference, className: styles.toggleContainer },
-            React.createElement(MultiSelectToggle, { ref: toggleButtonRef, 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 && (React.createElement(FieldMessage, __assign({ id: validationId }, validationMessage))),
-        description && React.createElement(FieldMessage, { id: descriptionId, message: description }),
-        isOpen && (React.createElement(Popover, { refs: refs, id: "".concat(id, "--popover"), 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: styles.popover },
-            React.createElement(MultiSelectOptions, { id: "".concat(id, "--options"), options: items, onChange: onSelectedValuesChange, selectedValues: selectedValues })))));
-};
-MultiSelect.displayName = "MultiSelect";
-
+    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: styles.toggleContainer
+    }, /*#__PURE__*/React.createElement(MultiSelectToggle, {
+      ref: toggleButtonRef,
+      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"),
+      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: styles.popover
+    }, /*#__PURE__*/React.createElement(MultiSelectOptions, {
+      id: "".concat(id, "--options"),
+      options: items,
+      onChange: onSelectedValuesChange,
+      selectedValues: selectedValues
+    }))));
+  };
+  MultiSelect.displayName = "MultiSelect";
+  return MultiSelect;
+}();
 export { MultiSelect };

package/dist/esm/MultiSelect/MultiSelect.module.scss.mjs

@@ -1,3 +1,5 @@
-var styles = {"toggleContainer":"MultiSelect-module_toggleContainer__AxNnf","popover":"MultiSelect-module_popover__jI13O"};
-
+var styles = {
+  "toggleContainer": "MultiSelect-module_toggleContainer__AxNnf",
+  "popover": "MultiSelect-module_popover__jI13O"
+};
 export { styles as default };

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

@@ -5,40 +5,53 @@ import '../../../Icon/subcomponents/SVG/SVG.mjs';
 import { CheckIcon } from '../../../Icon/CheckIcon.mjs';
 import { MinusIcon } from '../../../Icon/MinusIcon.mjs';
 import styles from './Checkbox.module.scss.mjs';
-
 var renderIcon = function (status) {
-    switch (status) {
-        case "indeterminate":
-            return React.createElement(MinusIcon, { role: "presentation", classNameOverride: styles.icon });
-        case "checked":
-            return React.createElement(CheckIcon, { role: "presentation", classNameOverride: styles.icon });
-        default:
-            return null;
-    }
+  switch (status) {
+    case "indeterminate":
+      return /*#__PURE__*/React.createElement(MinusIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    case "checked":
+      return /*#__PURE__*/React.createElement(CheckIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    default:
+      return null;
+  }
 };
-var Checkbox = function (_a) {
-    var checkedStatus = _a.checkedStatus, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["checkedStatus", "classNameOverride"]);
+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;
-            }
+      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 (React.createElement("span", { className: classnames(styles.checkbox, checkedStatus !== "unchecked" && styles.selected, classNameOverride) },
-        React.createElement("input", __assign({ ref: checkboxRef, type: "checkbox", className: styles.nativeCheckbox }, restProps)),
-        React.createElement("span", { className: styles.iconContainer }, renderIcon(checkedStatus))));
-};
-Checkbox.displayName = "Checkbox";
-
+    return /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.checkbox, checkedStatus !== "unchecked" && styles.selected, classNameOverride)
+    }, /*#__PURE__*/React.createElement("input", __assign({
+      ref: checkboxRef,
+      type: "checkbox",
+      className: styles.nativeCheckbox
+    }, restProps)), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconContainer
+    }, renderIcon(checkedStatus)));
+  };
+  Checkbox.displayName = "Checkbox";
+  return Checkbox;
+}();
 export { Checkbox };

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.mjs

@@ -1,3 +1,8 @@
-var styles = {"checkbox":"Checkbox-module_checkbox__0LHj5","selected":"Checkbox-module_selected__-Nd6E","nativeCheckbox":"Checkbox-module_nativeCheckbox__BauKG","iconContainer":"Checkbox-module_iconContainer__Nsip6","icon":"Checkbox-module_icon__2b48e"};
-
+var styles = {
+  "checkbox": "Checkbox-module_checkbox__0LHj5",
+  "selected": "Checkbox-module_selected__-Nd6E",
+  "nativeCheckbox": "Checkbox-module_nativeCheckbox__BauKG",
+  "iconContainer": "Checkbox-module_iconContainer__Nsip6",
+  "icon": "Checkbox-module_icon__2b48e"
+};
 export { styles as default };

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

@@ -3,15 +3,28 @@ import React from 'react';
 import classnames from 'classnames';
 import { Checkbox } from '../Checkbox/Checkbox.mjs';
 import styles from './MultiSelectOptionField.module.scss.mjs';
-
-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 (React.createElement("div", __assign({ className: classnames(styles.multiSelectOptionField, classNameOverride) }, restProps),
-        React.createElement(Checkbox, { id: id, checkedStatus: checkedStatus, onChange: onChange, value: option.value, classNameOverride: classnames(styles.checkbox, [
-                checkedStatus !== "unchecked" && styles.checked,
-            ]) }),
-        React.createElement("label", { htmlFor: id, className: styles.label }, option.label)));
-};
-MultiSelectOptionField.displayName = "MultiSelect.OptionField";
-
+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(styles.multiSelectOptionField, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(Checkbox, {
+      id: id,
+      checkedStatus: checkedStatus,
+      onChange: onChange,
+      value: option.value,
+      classNameOverride: classnames(styles.checkbox, [checkedStatus !== "unchecked" && styles.checked])
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      className: styles.label
+    }, option.label));
+  };
+  MultiSelectOptionField.displayName = "MultiSelect.OptionField";
+  return MultiSelectOptionField;
+}();
 export { MultiSelectOptionField };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.mjs

@@ -1,3 +1,7 @@
-var styles = {"multiSelectOptionField":"MultiSelectOptionField-module_multiSelectOptionField__-PNh-","checkbox":"MultiSelectOptionField-module_checkbox__rDOxI","checked":"MultiSelectOptionField-module_checked__wo-TX","label":"MultiSelectOptionField-module_label__79KfB"};
-
+var styles = {
+  "multiSelectOptionField": "MultiSelectOptionField-module_multiSelectOptionField__-PNh-",
+  "checkbox": "MultiSelectOptionField-module_checkbox__rDOxI",
+  "checked": "MultiSelectOptionField-module_checked__wo-TX",
+  "label": "MultiSelectOptionField-module_label__79KfB"
+};
 export { styles as default };

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

@@ -5,26 +5,47 @@ import { Text } from '../../../Text/Text.mjs';
 import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
 import { MultiSelectOptionField } from '../MultiSelectOptionField/MultiSelectOptionField.mjs';
 import styles from './MultiSelectOptions.module.scss.mjs';
-
-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"]);
+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);
+      var newValues = new Set(selectedValues.values());
+      if (newValues.has(optionValue)) {
+        newValues.delete(optionValue);
+      } else {
+        newValues.add(optionValue);
+      }
+      onChange(newValues);
     };
-    return (React.createElement("fieldset", __assign({ id: id, "aria-describedby": optionsCountId, className: classnames(styles.multiSelectOptions, classNameOverride) }, restProps),
-        React.createElement(VisuallyHidden, { id: optionsCountId, "aria-live": "polite" },
-            "Options available: ",
-            options.length),
-        options.length === 0 ? (React.createElement(Text, { tag: "span", variant: "body" }, "No options available")) : (options.map(function (option) { return (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 })); }))));
-};
-MultiSelectOptions.displayName = "MultiSelectOptions";
-
+    return /*#__PURE__*/React.createElement("fieldset", __assign({
+      id: id,
+      "aria-describedby": optionsCountId,
+      className: classnames(styles.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
+      });
+    }));
+  };
+  MultiSelectOptions.displayName = "MultiSelectOptions";
+  return MultiSelectOptions;
+}();
 export { MultiSelectOptions };

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.mjs

@@ -1,3 +1,4 @@
-var styles = {"multiSelectOptions":"MultiSelectOptions-module_multiSelectOptions__b8hYg"};
-
+var styles = {
+  "multiSelectOptions": "MultiSelectOptions-module_multiSelectOptions__b8hYg"
+};
 export { styles as default };

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

@@ -8,33 +8,79 @@ import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
 import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
 import '../../../__future__/Tag/Tag/Tag.mjs';
 import styles from './MultiSelectToggle.module.scss.mjs';
-
-var MultiSelectToggle = 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"]);
+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 (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ className: classnames(styles.multiSelectToggle, classNameOverride, status && styles[status]), onClick: onClick }, restProps),
-            React.createElement("button", { ref: ref, className: styles.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);
-                } }, isOpen ? (React.createElement(ChevronUpIcon, { role: "presentation" })) : (React.createElement(ChevronDownIcon, { role: "presentation" }))),
-            React.createElement("div", { className: classnames(styles.selectedItemsContainer, selectedOptions.length && styles.hasSelectedItems) }, selectedOptions.length > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("ul", { role: "list", className: styles.selectedItems }, selectedOptions.map(function (_a) {
-                    var label = _a.label, value = _a.value;
-                    return (
-                    // 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(); } },
-                        React.createElement(RemovableTag, { removeButtonProps: {
-                                ariaLabel: "Remove option: ".concat(label),
-                                onClick: function () { return onRemoveOption(value); },
-                            } }, label)));
-                })),
-                React.createElement(ClearButton, { id: clearAllId, "aria-label": "Remove all options from ", "aria-labelledby": "".concat(clearAllId, " ").concat(ariaLabelledBy), classNameOverride: styles.clearAllButton, onClick: function (e) {
-                        e.stopPropagation();
-                        onRemoveAllOptions();
-                    } })))))));
-});
-MultiSelectToggle.displayName = "MultiSelectToggle";
-
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.multiSelectToggle, classNameOverride, status && styles[status]),
+      onClick: onClick
+    }, restProps), /*#__PURE__*/React.createElement("button", {
+      ref: ref,
+      className: styles.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);
+      }
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.selectedItemsContainer, selectedOptions.length && styles.hasSelectedItems)
+    }, selectedOptions.length > 0 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
+      role: "list",
+      className: styles.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();
+          }
+        }, /*#__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: styles.clearAllButton,
+      onClick: function (e) {
+        e.stopPropagation();
+        onRemoveAllOptions();
+      }
+    }))))));
+  });
+  MultiSelectToggle.displayName = "MultiSelectToggle";
+  return MultiSelectToggle;
+}();
 export { MultiSelectToggle };

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss.mjs

@@ -1,3 +1,11 @@
-var styles = {"multiSelectToggle":"MultiSelectToggle-module_multiSelectToggle__CeR4G","error":"MultiSelectToggle-module_error__LJZKT","caution":"MultiSelectToggle-module_caution__hFOzy","toggleButton":"MultiSelectToggle-module_toggleButton__38-Qi","selectedItemsContainer":"MultiSelectToggle-module_selectedItemsContainer__OawF7","hasSelectedItems":"MultiSelectToggle-module_hasSelectedItems__S7KXg","selectedItems":"MultiSelectToggle-module_selectedItems__R-byj","clearAllButton":"MultiSelectToggle-module_clearAllButton__yWNQi"};
-
+var styles = {
+  "multiSelectToggle": "MultiSelectToggle-module_multiSelectToggle__CeR4G",
+  "error": "MultiSelectToggle-module_error__LJZKT",
+  "caution": "MultiSelectToggle-module_caution__hFOzy",
+  "toggleButton": "MultiSelectToggle-module_toggleButton__38-Qi",
+  "selectedItemsContainer": "MultiSelectToggle-module_selectedItemsContainer__OawF7",
+  "hasSelectedItems": "MultiSelectToggle-module_hasSelectedItems__S7KXg",
+  "selectedItems": "MultiSelectToggle-module_selectedItems__R-byj",
+  "clearAllButton": "MultiSelectToggle-module_clearAllButton__yWNQi"
+};
 export { styles as default };

package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs

@@ -5,29 +5,48 @@ import { useFloating, offset, flip, size, autoUpdate } from '@floating-ui/react-
 import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import styles from './Popover.module.scss.mjs';
-
-var Popover = function (_a) {
-    var children = _a.children, refs = _a.refs, floatingOptions = _a.floatingOptions, focusOnProps = _a.focusOnProps, portalContainer = _a.portalContainer, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "refs", "floatingOptions", "focusOnProps", "portalContainer", "classNameOverride"]);
-    var floatingStyles = useFloating(__assign({ elements: {
-            reference: refs.reference.current,
-            floating: refs.floating.current,
-        }, placement: "bottom-start", middleware: [
-            offset(6),
-            flip(),
-            size({
-                apply: function (_a) {
-                    var availableWidth = _a.availableWidth, availableHeight = _a.availableHeight, elements = _a.elements;
-                    Object.assign(elements.floating.style, {
-                        maxWidth: "".concat(Math.min(availableWidth, 400), "px"),
-                        minWidth: "".concat(Math.min(availableWidth, 196), "px"),
-                        maxHeight: "".concat(Math.min(availableHeight, 352), "px"),
-                    });
-                },
-            }),
-        ], whileElementsMounted: autoUpdate }, floatingOptions)).floatingStyles;
-    return createPortal(React.createElement(FocusOn, __assign({ enabled: false, scrollLock: false }, focusOnProps),
-        React.createElement("div", __assign({ ref: refs.setFloating, style: floatingStyles, className: classnames(styles.popover, classNameOverride), role: "dialog", "aria-modal": "true", tabIndex: -1 }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
-};
-Popover.displayName = "Popover";
-
+const Popover = /*#__PURE__*/function () {
+  const Popover = function (_a) {
+    var children = _a.children,
+      refs = _a.refs,
+      floatingOptions = _a.floatingOptions,
+      focusOnProps = _a.focusOnProps,
+      portalContainer = _a.portalContainer,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "refs", "floatingOptions", "focusOnProps", "portalContainer", "classNameOverride"]);
+    var floatingStyles = useFloating(__assign({
+      elements: {
+        reference: refs.reference.current,
+        floating: refs.floating.current
+      },
+      placement: "bottom-start",
+      middleware: [offset(6), flip(), size({
+        apply: function (_a) {
+          var availableWidth = _a.availableWidth,
+            availableHeight = _a.availableHeight,
+            elements = _a.elements;
+          Object.assign(elements.floating.style, {
+            maxWidth: "".concat(Math.min(availableWidth, 400), "px"),
+            minWidth: "".concat(Math.min(availableWidth, 196), "px"),
+            maxHeight: "".concat(Math.min(availableHeight, 352), "px")
+          });
+        }
+      })],
+      whileElementsMounted: autoUpdate
+    }, floatingOptions)).floatingStyles;
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(FocusOn, __assign({
+      enabled: false,
+      scrollLock: false
+    }, focusOnProps), /*#__PURE__*/React.createElement("div", __assign({
+      ref: refs.setFloating,
+      style: floatingStyles,
+      className: classnames(styles.popover, classNameOverride),
+      role: "dialog",
+      "aria-modal": "true",
+      tabIndex: -1
+    }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+  };
+  Popover.displayName = "Popover";
+  return Popover;
+}();
 export { Popover };

package/dist/esm/MultiSelect/subcomponents/Popover/Popover.module.scss.mjs

@@ -1,3 +1,4 @@
-var styles = {"popover":"Popover-module_popover__B7k5I"};
-
+var styles = {
+  "popover": "Popover-module_popover__B7k5I"
+};
 export { styles as default };

package/dist/esm/Notification/GlobalNotification/GlobalNotification.mjs

@@ -6,10 +6,17 @@ import { GenericNotification } from '../subcomponents/GenericNotification/Generi
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060757/Global+Notification Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-notifications-global-notification--docs Storybook}
  */
-var GlobalNotification = function (_a) {
-    var _b = _a.persistent, persistent = _b === void 0 ? false : _b, props = __rest(_a, ["persistent"]);
-    return (React.createElement(GenericNotification, __assign({ persistent: persistent, style: "global" }, props)));
-};
-GlobalNotification.displayName = "GlobalNotification";
-
+const GlobalNotification = /*#__PURE__*/function () {
+  const GlobalNotification = function (_a) {
+    var _b = _a.persistent,
+      persistent = _b === void 0 ? false : _b,
+      props = __rest(_a, ["persistent"]);
+    return /*#__PURE__*/React.createElement(GenericNotification, __assign({
+      persistent: persistent,
+      style: "global"
+    }, props));
+  };
+  GlobalNotification.displayName = "GlobalNotification";
+  return GlobalNotification;
+}();
 export { GlobalNotification };