@kaizen/components 1.37.0 → 1.38.0

package/dist/cjs/MultiSelect/MultiSelect.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
+var Heading = require('../Heading/Heading.cjs');
+var MultiSelectOptions = require('./subcomponents/MultiSelectOptions/MultiSelectOptions.cjs');
+var MultiSelectToggle = require('./subcomponents/MultiSelectToggle/MultiSelectToggle.cjs');
+var Popover = require('./subcomponents/Popover/Popover.cjs');
+var reactDom = require('@floating-ui/react-dom');
+var MultiSelect_module = require('./MultiSelect.module.scss.cjs');
+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 = tslib.__rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+    var descriptionId = "".concat(id, "-description");
+    var validationId = "".concat(id, "-validation-message");
+    var toggleButtonRef = React.useRef(null);
+    var refs = reactDom.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 React.createElement("div", tslib.__assign({
+      id: id,
+      className: classnames(classNameOverride)
+    }, restProps), React.createElement(Heading.Heading, {
+      tag: "span",
+      variant: "heading-6",
+      id: "".concat(id, "--label")
+    }, label), React.createElement("div", {
+      ref: refs.setReference,
+      className: MultiSelect_module.toggleContainer
+    }, React.createElement(MultiSelectToggle.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.FieldMessage, tslib.__assign({
+      id: validationId
+    }, validationMessage)), description && React.createElement(FieldMessage.FieldMessage, {
+      id: descriptionId,
+      message: description
+    }), isOpen && React.createElement(Popover.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: MultiSelect_module.popover
+    }, React.createElement(MultiSelectOptions.MultiSelectOptions, {
+      id: "".concat(id, "--options"),
+      options: items,
+      onChange: onSelectedValuesChange,
+      selectedValues: selectedValues
+    })));
+  };
+  MultiSelect.displayName = "MultiSelect";
+  return MultiSelect;
+}();
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=MultiSelect.cjs.map

package/dist/cjs/MultiSelect/MultiSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.cjs","sources":["../../../src/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { HTMLAttributes, useRef, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { FieldMessage, FieldMessageProps } from \"~components/FieldMessage\"\nimport { Heading } from \"~components/Heading\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport {\n  MultiSelectOptions,\n  MultiSelectOptionsProps,\n} from \"./subcomponents/MultiSelectOptions\"\nimport { MultiSelectToggle } from \"./subcomponents/MultiSelectToggle\"\nimport { Popover, useFloating } from \"./subcomponents/Popover\"\nimport { MultiSelectOption, ValidationMessage } from \"./types\"\nimport styles from \"./MultiSelect.module.scss\"\n\nexport type MultiSelectProps = {\n  label: string\n  items: MultiSelectOptionsProps[\"options\"]\n  selectedValues: Set<MultiSelectOption[\"value\"]>\n  /**\n   * A description that provides context for the field\n   */\n  description?: FieldMessageProps[\"message\"]\n  onSelectedValuesChange: MultiSelectOptionsProps[\"onChange\"]\n  isOpen: boolean\n  onOpenChange: (isOpen: boolean) => void\n  /** A status and message to provide context to the validation issue  */\n  validationMessage?: ValidationMessage\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const MultiSelect = ({\n  id: propsId,\n  label,\n  items,\n  selectedValues,\n  description,\n  onSelectedValuesChange,\n  isOpen,\n  onOpenChange,\n  classNameOverride,\n  validationMessage,\n  ...restProps\n}: MultiSelectProps): JSX.Element => {\n  const id = propsId ?? useId()\n  const descriptionId = `${id}-description`\n  const validationId = `${id}-validation-message`\n\n  const toggleButtonRef = useRef<HTMLButtonElement>(null)\n  const { refs } = useFloating()\n\n  const handleToggleClick = (): void => onOpenChange(!isOpen)\n  const handleClose = (): void => onOpenChange(false)\n\n  const onClickOutside: ReactFocusOnProps[\"onClickOutside\"] = e => {\n    const toggle = refs.reference.current as Node\n    const isInToggle = toggle.contains(e.target as HTMLElement)\n    if (!isInToggle) {\n      e.stopPropagation()\n      handleClose()\n    }\n  }\n\n  const itemsMap = items.reduce(\n    (acc, item) => {\n      acc[item.value] = item\n      return acc\n    },\n    {} as Record<MultiSelectOption[\"value\"], MultiSelectOption>\n  )\n\n  const handleOnRemoveOption = (\n    optionValue: MultiSelectOption[\"value\"]\n  ): void => {\n    const newValues = new Set(selectedValues.values())\n    newValues.delete(optionValue)\n    onSelectedValuesChange(newValues)\n  }\n\n  const handleRemoveAllOptions = (): void => {\n    const newValues = new Set([])\n    onSelectedValuesChange(newValues)\n  }\n\n  return (\n    <div id={id} className={classnames(classNameOverride)} {...restProps}>\n      <Heading tag=\"span\" variant=\"heading-6\" id={`${id}--label`}>\n        {label}\n      </Heading>\n\n      <div ref={refs.setReference} className={styles.toggleContainer}>\n        <MultiSelectToggle\n          ref={toggleButtonRef}\n          id={`${id}--toggle`}\n          aria-labelledby={`${id}--label`}\n          aria-describedby={`${validationId} ${descriptionId}`}\n          aria-controls={`${id}--popover`}\n          onClick={handleToggleClick}\n          isOpen={isOpen}\n          selectedOptions={Array.from(selectedValues).map(\n            value => itemsMap[value]\n          )}\n          status={validationMessage?.status}\n          onRemoveOption={handleOnRemoveOption}\n          onRemoveAllOptions={handleRemoveAllOptions}\n        />\n      </div>\n\n      {validationMessage && (\n        <FieldMessage id={validationId} {...validationMessage} />\n      )}\n      {description && <FieldMessage id={descriptionId} message={description} />}\n\n      {isOpen && (\n        <Popover\n          refs={refs}\n          id={`${id}--popover`}\n          focusOnProps={{\n            enabled: true,\n            onClickOutside,\n            onEscapeKey: handleClose,\n            shards: [toggleButtonRef],\n            noIsolation: true,\n            onActivation: (): void => refs.floating?.current?.focus(),\n          }}\n          classNameOverride={styles.popover}\n        >\n          <MultiSelectOptions\n            id={`${id}--options`}\n            options={items}\n            onChange={onSelectedValuesChange}\n            selectedValues={selectedValues}\n          />\n        </Popover>\n      )}\n    </div>\n  )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n"],"names":["MultiSelect","_a","propsId","id","label","items","selectedValues","description","onSelectedValuesChange","isOpen","onOpenChange","classNameOverride","validationMessage","restProps","__rest","useId","descriptionId","concat","validationId","toggleButtonRef","useRef","refs","useFloating","handleToggleClick","handleClose","onClickOutside","e","toggle","reference","current","isInToggle","contains","target","stopPropagation","itemsMap","reduce","acc","item","value","handleOnRemoveOption","optionValue","newValues","Set","values","delete","handleRemoveAllOptions","React","createElement","__assign","className","classnames","Heading","tag","variant","ref","setReference","styles","toggleContainer","MultiSelectToggle","onClick","selectedOptions","Array","from","map","status","onRemoveOption","onRemoveAllOptions","FieldMessage","message","Popover","focusOnProps","enabled","onEscapeKey","shards","noIsolation","onActivation","_b","floating","focus","popover","MultiSelectOptions","options","onChange","displayName"],"mappings":"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"}

package/dist/cjs/MultiSelect/MultiSelect.module.scss.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "toggleContainer": "MultiSelect-module_toggleContainer__AxNnf",
+  "popover": "MultiSelect-module_popover__jI13O"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiSelect.module.scss.cjs.map

package/dist/cjs/MultiSelect/MultiSelect.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/MultiSelect/subcomponents/Checkbox/Checkbox.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var CheckIcon = require('../../../Icon/CheckIcon.cjs');
+var MinusIcon = require('../../../Icon/MinusIcon.cjs');
+var Checkbox_module = require('./Checkbox.module.scss.cjs');
+var renderIcon = function (status) {
+  switch (status) {
+    case "indeterminate":
+      return React.createElement(MinusIcon.MinusIcon, {
+        role: "presentation",
+        classNameOverride: Checkbox_module.icon
+      });
+    case "checked":
+      return React.createElement(CheckIcon.CheckIcon, {
+        role: "presentation",
+        classNameOverride: Checkbox_module.icon
+      });
+    default:
+      return null;
+  }
+};
+const Checkbox = /*#__PURE__*/function () {
+  const Checkbox = function (_a) {
+    var checkedStatus = _a.checkedStatus,
+      classNameOverride = _a.classNameOverride,
+      restProps = tslib.__rest(_a, ["checkedStatus", "classNameOverride"]);
+    var checkboxRef = React.useRef(null);
+    React.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 React.createElement("span", {
+      className: classnames(Checkbox_module.checkbox, checkedStatus !== "unchecked" && Checkbox_module.selected, classNameOverride)
+    }, React.createElement("input", tslib.__assign({
+      ref: checkboxRef,
+      type: "checkbox",
+      className: Checkbox_module.nativeCheckbox
+    }, restProps)), React.createElement("span", {
+      className: Checkbox_module.iconContainer
+    }, renderIcon(checkedStatus)));
+  };
+  Checkbox.displayName = "Checkbox";
+  return Checkbox;
+}();
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/cjs/MultiSelect/subcomponents/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../../src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { CheckIcon, MinusIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Checkbox.module.scss\"\n\nexport type CheckedStatus = \"checked\" | \"unchecked\" | \"indeterminate\"\n\ntype ReadOnly = {\n  readOnly: true\n  onChange?: never\n}\n\ntype Controlled = {\n  readOnly?: false\n  onChange: Required<InputHTMLAttributes<HTMLInputElement>[\"onChange\"]>\n}\n\nexport type CheckboxProps = {\n  checkedStatus: CheckedStatus\n} & (ReadOnly | Controlled) &\n  OverrideClassName<\n    // `checked` is omitted as it conflicts with controlled checkboxes\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"checked\">\n  >\n\nconst renderIcon = (status: CheckedStatus): JSX.Element | null => {\n  switch (status) {\n    case \"indeterminate\":\n      return <MinusIcon role=\"presentation\" classNameOverride={styles.icon} />\n    case \"checked\":\n      return <CheckIcon role=\"presentation\" classNameOverride={styles.icon} />\n    default:\n      return null\n  }\n}\n\nexport const Checkbox = ({\n  checkedStatus,\n  classNameOverride,\n  ...restProps\n}: CheckboxProps): JSX.Element => {\n  const checkboxRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (checkboxRef.current) {\n      if (checkedStatus === \"checked\") {\n        checkboxRef.current.checked = true\n        checkboxRef.current.indeterminate = false\n      } else if (checkedStatus === \"unchecked\") {\n        checkboxRef.current.checked = false\n        checkboxRef.current.indeterminate = false\n      } else if (checkedStatus === \"indeterminate\") {\n        checkboxRef.current.checked = false\n        checkboxRef.current.indeterminate = true\n      }\n    }\n  }, [checkedStatus])\n\n  return (\n    <span\n      className={classnames(\n        styles.checkbox,\n        checkedStatus !== \"unchecked\" && styles.selected,\n        classNameOverride\n      )}\n    >\n      <input\n        ref={checkboxRef}\n        type=\"checkbox\"\n        className={styles.nativeCheckbox}\n        {...restProps}\n      />\n      <span className={styles.iconContainer}>{renderIcon(checkedStatus)}</span>\n    </span>\n  )\n}\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":["renderIcon","status","React","createElement","MinusIcon","role","classNameOverride","styles","icon","CheckIcon","Checkbox","_a","checkedStatus","restProps","__rest","checkboxRef","useRef","useEffect","current","checked","indeterminate","className","classnames","checkbox","selected","__assign","ref","type","nativeCheckbox","iconContainer","displayName"],"mappings":";;;;;;;;;AA0BA,IAAMA,UAAU,GAAG,SAAAA,CAACC,MAAqB,EAAA;EACvC,QAAQA,MAAM;IACZ,KAAK,eAAe;MAClB,OAAOC,KAAC,CAAAC,aAAA,CAAAC,SAAAA,CAAAA,SAAS,EAAC;QAAAC,IAAI,EAAC,cAAc;QAACC,iBAAiB,EAAEC,eAAM,CAACC;MAAI,EAAI;IAC1E,KAAK,SAAS;MACZ,OAAON,KAAC,CAAAC,aAAA,CAAAM,SAAAA,CAAAA,SAAS,EAAC;QAAAJ,IAAI,EAAC,cAAc;QAACC,iBAAiB,EAAEC,eAAM,CAACC;MAAI,EAAI;IAC1E;MACE,OAAO,IAAI;EACd;AACH,CAAC;AAAA,MAEYE,QAAQ;EAAA,MAARA,QAAQ,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHd,IAAAC,aAAa,mBAAA;MACbN,iBAAiB,uBAAA;MACdO,SAAS,GAHWC,KAAA,CAAAA,MAAA,CAAAH,EAAA,EAAA,CAAA,eAAA,EAAA,mBAAA,CAIxB,CADa;IAEZ,IAAMI,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;IAElDC,KAAAA,CAAAA,SAAS,CAAC,YAAA;MACR,IAAIF,WAAW,CAACG,OAAO,EAAE;QACvB,IAAIN,aAAa,KAAK,SAAS,EAAE;UAC/BG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,IAAI;UAClCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,KAAK;QAC1C,CAAA,MAAM,IAAIR,aAAa,KAAK,WAAW,EAAE;UACxCG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,KAAK;UACnCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,KAAK;QAC1C,CAAA,MAAM,IAAIR,aAAa,KAAK,eAAe,EAAE;UAC5CG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,KAAK;UACnCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,IAAI;QACzC;MACF;IACH,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;IAEnB,OACEV,KACE,CAAAC,aAAA,CAAA,MAAA,EAAA;MAAAkB,SAAS,EAAEC,UAAU,CACnBf,eAAM,CAACgB,QAAQ,EACfX,aAAa,KAAK,WAAW,IAAIL,eAAM,CAACiB,QAAQ,EAChDlB,iBAAiB;IAClB,CAAA,EAEDJ,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAAsB,KAAAA,CAAAA,QAAA,CAAA;MACEC,GAAG,EAAEX,WAAW;MAChBY,IAAI,EAAC,UAAU;MACfN,SAAS,EAAEd,eAAM,CAACqB;IAAc,CAAA,EAC5Bf,SAAS,CACb,CAAA,EACFX,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;MAAMkB,SAAS,EAAEd,eAAM,CAACsB;IAAa,CAAA,EAAG7B,UAAU,CAACY,aAAa,CAAC,CAAQ,CACpE;EAEX,CAAC;EAEDF,QAAQ,CAACoB,WAAW,GAAG,UAAU;EAAA,OAzCpBpB,QAAQ;AAAA;"}

package/dist/cjs/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+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"
+};
+module.exports = styles;
+//# sourceMappingURL=Checkbox.module.scss.cjs.map

package/dist/cjs/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Checkbox = require('../Checkbox/Checkbox.cjs');
+var MultiSelectOptionField_module = require('./MultiSelectOptionField.module.scss.cjs');
+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 = tslib.__rest(_a, ["id", "option", "checkedStatus", "onChange", "classNameOverride"]);
+    return React.createElement("div", tslib.__assign({
+      className: classnames(MultiSelectOptionField_module.multiSelectOptionField, classNameOverride)
+    }, restProps), React.createElement(Checkbox.Checkbox, {
+      id: id,
+      checkedStatus: checkedStatus,
+      onChange: onChange,
+      value: option.value,
+      classNameOverride: classnames(MultiSelectOptionField_module.checkbox, [checkedStatus !== "unchecked" && MultiSelectOptionField_module.checked])
+    }), React.createElement("label", {
+      htmlFor: id,
+      className: MultiSelectOptionField_module.label
+    }, option.label));
+  };
+  MultiSelectOptionField.displayName = "MultiSelect.OptionField";
+  return MultiSelectOptionField;
+}();
+exports.MultiSelectOptionField = MultiSelectOptionField;
+//# sourceMappingURL=MultiSelectOptionField.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionField.cjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport { Checkbox, CheckboxProps } from \"../Checkbox\"\nimport styles from \"./MultiSelectOptionField.module.scss\"\n\nexport type MultiSelectOptionFieldProps = {\n  id: string\n  option: MultiSelectOption\n  checkedStatus: CheckboxProps[\"checkedStatus\"]\n  onChange: CheckboxProps[\"onChange\"]\n} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, \"id\" | \"onChange\">>\n\nexport const MultiSelectOptionField = ({\n  id,\n  option,\n  checkedStatus,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: MultiSelectOptionFieldProps): JSX.Element => (\n  <div\n    className={classnames(styles.multiSelectOptionField, classNameOverride)}\n    {...restProps}\n  >\n    <Checkbox\n      id={id}\n      checkedStatus={checkedStatus}\n      onChange={onChange}\n      value={option.value}\n      classNameOverride={classnames(styles.checkbox, [\n        checkedStatus !== \"unchecked\" && styles.checked,\n      ])}\n    />\n    <label htmlFor={id} className={styles.label}>\n      {option.label}\n    </label>\n  </div>\n)\n\nMultiSelectOptionField.displayName = \"MultiSelect.OptionField\"\n"],"names":["MultiSelectOptionField","_a","id","option","checkedStatus","onChange","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","multiSelectOptionField","Checkbox","value","checkbox","checked","htmlFor","label","displayName"],"mappings":";;;;;;;MAcaA,sBAAsB;EAAA,MAAtBA,sBAAsB,GAAG,SAAAA,CAACC,EAOT,EAAA;IAN5B,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAA;MACFC,MAAM,GAAAF,EAAA,CAAAE,MAAA;MACNC,aAAa,GAAAH,EAAA,CAAAG,aAAA;MACbC,QAAQ,GAAAJ,EAAA,CAAAI,QAAA;MACRC,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACdC,SAAS,GAAAC,KAAA,CAAAA,MAAA,CAAAP,EAAA,EANyB,kEAOtC,CADa;IACkC,OAC9CQ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,KAAA,CAAAA,QAAA,CAAA;MACEC,SAAS,EAAEC,UAAU,CAACC,6BAAM,CAACC,sBAAsB,EAAET,iBAAiB;IAAC,GACnEC,SAAS,CAAA,EAEbE,KAAC,CAAAC,aAAA,CAAAM,iBAAQ,EACP;MAAAd,EAAE,EAAEA,EAAE;MACNE,aAAa,EAAEA,aAAa;MAC5BC,QAAQ,EAAEA,QAAQ;MAClBY,KAAK,EAAEd,MAAM,CAACc,KAAK;MACnBX,iBAAiB,EAAEO,UAAU,CAACC,6BAAM,CAACI,QAAQ,EAAE,CAC7Cd,aAAa,KAAK,WAAW,IAAIU,6BAAM,CAACK,OAAO,CAChD;KACD,CAAA,EACFV,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;MAAOU,OAAO,EAAElB,EAAE;MAAEU,SAAS,EAAEE,6BAAM,CAACO;IAAK,CAAA,EACxClB,MAAM,CAACkB,KAAK,CACP,CACJ;GACP;EAEDrB,sBAAsB,CAACsB,WAAW,GAAG,yBAAyB;EAAA,OA3BjDtB,sBAAsB;AAAA;"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styles = {
+  "multiSelectOptionField": "MultiSelectOptionField-module_multiSelectOptionField__-PNh-",
+  "checkbox": "MultiSelectOptionField-module_checkbox__rDOxI",
+  "checked": "MultiSelectOptionField-module_checked__wo-TX",
+  "label": "MultiSelectOptionField-module_label__79KfB"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiSelectOptionField.module.scss.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionField.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Text = require('../../../Text/Text.cjs');
+var VisuallyHidden = require('../../../VisuallyHidden/VisuallyHidden.cjs');
+var MultiSelectOptionField = require('../MultiSelectOptionField/MultiSelectOptionField.cjs');
+var MultiSelectOptions_module = require('./MultiSelectOptions.module.scss.cjs');
+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 = tslib.__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 React.createElement("fieldset", tslib.__assign({
+      id: id,
+      "aria-describedby": optionsCountId,
+      className: classnames(MultiSelectOptions_module.multiSelectOptions, classNameOverride)
+    }, restProps), React.createElement(VisuallyHidden.VisuallyHidden, {
+      id: optionsCountId,
+      "aria-live": "polite"
+    }, "Options available: ", options.length), options.length === 0 ? React.createElement(Text.Text, {
+      tag: "span",
+      variant: "body"
+    }, "No options available") : options.map(function (option) {
+      return React.createElement(MultiSelectOptionField.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;
+}();
+exports.MultiSelectOptions = MultiSelectOptions;
+//# sourceMappingURL=MultiSelectOptions.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptions.cjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { Text } from \"~components/Text\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport { MultiSelectOptionField } from \"../MultiSelectOptionField\"\nimport styles from \"./MultiSelectOptions.module.scss\"\n\nexport type MultiSelectOptionsProps = {\n  id: string\n  options: MultiSelectOption[]\n  selectedValues: Set<MultiSelectOption[\"value\"]>\n  onChange: (selectedValues: Set<MultiSelectOption[\"value\"]>) => void\n} & OverrideClassName<Omit<HTMLAttributes<HTMLFieldSetElement>, \"onChange\">>\n\nexport const MultiSelectOptions = ({\n  id,\n  options,\n  selectedValues,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: MultiSelectOptionsProps): JSX.Element => {\n  const optionsCountId = `${id}--options-count`\n\n  const handleOptionChange = (\n    optionValue: MultiSelectOption[\"value\"]\n  ): void => {\n    const newValues = new Set(selectedValues.values())\n    if (newValues.has(optionValue)) {\n      newValues.delete(optionValue)\n    } else {\n      newValues.add(optionValue)\n    }\n    onChange(newValues)\n  }\n\n  return (\n    <fieldset\n      id={id}\n      aria-describedby={optionsCountId}\n      className={classnames(styles.multiSelectOptions, classNameOverride)}\n      {...restProps}\n    >\n      <VisuallyHidden id={optionsCountId} aria-live=\"polite\">\n        Options available: {options.length}\n      </VisuallyHidden>\n      {options.length === 0 ? (\n        <Text tag=\"span\" variant=\"body\">\n          No options available\n        </Text>\n      ) : (\n        options.map(option => (\n          <MultiSelectOptionField\n            key={option.value}\n            id={`${id}--${option.value}`}\n            onChange={() => handleOptionChange(option.value)}\n            checkedStatus={\n              selectedValues.has(option.value) ? \"checked\" : \"unchecked\"\n            }\n            option={option}\n          />\n        ))\n      )}\n    </fieldset>\n  )\n}\n\nMultiSelectOptions.displayName = \"MultiSelectOptions\"\n"],"names":["MultiSelectOptions","_a","id","options","selectedValues","onChange","classNameOverride","restProps","__rest","optionsCountId","concat","handleOptionChange","optionValue","newValues","Set","values","has","delete","add","React","createElement","__assign","className","classnames","styles","multiSelectOptions","VisuallyHidden","length","Text","tag","variant","map","option","MultiSelectOptionField","key","value","checkedStatus","displayName"],"mappings":";;;;;;;;;MAgBaA,kBAAkB;EAAA,MAAlBA,kBAAkB,GAAG,SAAAA,CAACC,EAOT,EAAA;IANxB,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAA;MACFC,OAAO,GAAAF,EAAA,CAAAE,OAAA;MACPC,cAAc,GAAAH,EAAA,CAAAG,cAAA;MACdC,QAAQ,GAAAJ,EAAA,CAAAI,QAAA;MACRC,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACdC,SAAS,GAAAC,KAAA,CAAAA,MAAA,CAAAP,EAAA,EANqB,oEAOlC,CADa;IAEZ,IAAMQ,cAAc,GAAG,EAAG,CAAAC,MAAA,CAAAR,EAAE,oBAAiB;IAE7C,IAAMS,kBAAkB,GAAG,SAAAA,CACzBC,WAAuC,EAAA;MAEvC,IAAMC,SAAS,GAAG,IAAIC,GAAG,CAACV,cAAc,CAACW,MAAM,CAAE,CAAA,CAAC;MAClD,IAAIF,SAAS,CAACG,GAAG,CAACJ,WAAW,CAAC,EAAE;QAC9BC,SAAS,CAACI,MAAM,CAACL,WAAW,CAAC;MAC9B,CAAA,MAAM;QACLC,SAAS,CAACK,GAAG,CAACN,WAAW,CAAC;MAC3B;MACDP,QAAQ,CAACQ,SAAS,CAAC;IACrB,CAAC;IAED,OACEM,KACE,CAAAC,aAAA,CAAA,UAAA,EAAAC,KAAAA,CAAAA,QAAA,CAAA;MAAAnB,EAAE,EAAEA,EAAE;MAAA,kBAAA,EACYO,cAAc;MAChCa,SAAS,EAAEC,UAAU,CAACC,yBAAM,CAACC,kBAAkB,EAAEnB,iBAAiB;OAC9DC,SAAS,CAAA,EAEbY,KAAA,CAAAC,aAAA,CAACM,6BAAc,EAAC;MAAAxB,EAAE,EAAEO,cAAc;mBAAY;IAAQ,CAAA,yBAChCN,OAAO,CAACwB,MAAM,CACnB,EAChBxB,OAAO,CAACwB,MAAM,KAAK,CAAC,GACnBR,KAAC,CAAAC,aAAA,CAAAQ,IAAAA,CAAAA,IAAI;MAACC,GAAG,EAAC,MAAM;MAACC,OAAO,EAAC;IAAM,CAAA,EAAA,sBAAA,CAExB,GAEP3B,OAAO,CAAC4B,GAAG,CAAC,UAAAC,MAAM,EAAA;MAAI,OACpBb,KAAA,CAAAC,aAAA,CAACa,6CAAsB,EACrB;QAAAC,GAAG,EAAEF,MAAM,CAACG,KAAK;QACjBjC,EAAE,EAAE,EAAA,CAAAQ,MAAA,CAAGR,EAAE,EAAA,IAAA,CAAA,CAAAQ,MAAA,CAAKsB,MAAM,CAACG,KAAK,CAAE;QAC5B9B,QAAQ,EAAE,SAAAA,CAAA,EAAM;UAAA,OAAAM,kBAAkB,CAACqB,MAAM,CAACG,KAAK,CAAC;QAAA,CAAA;QAChDC,aAAa,EACXhC,cAAc,CAACY,GAAG,CAACgB,MAAM,CAACG,KAAK,CAAC,GAAG,SAAS,GAAG,WAAW;QAE5DH,MAAM,EAAEA;QACR;IACH,CAAA,CACF,CACQ;EAEf,CAAC;EAEDhC,kBAAkB,CAACqC,WAAW,GAAG,oBAAoB;EAAA,OArDxCrC,kBAAkB;AAAA;"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "multiSelectOptions": "MultiSelectOptions-module_multiSelectOptions__b8hYg"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiSelectOptions.module.scss.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptions.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var ClearButton = require('../../../ClearButton/ClearButton.cjs');
+require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
+var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
+var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
+require('../../../__future__/Tag/Tag/Tag.cjs');
+var MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
+const MultiSelectToggle = /*#__PURE__*/function () {
+  const MultiSelectToggle = React.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 = tslib.__rest(_a, ["onClick", "aria-labelledby", "aria-describedby", "aria-controls", "isOpen", "classNameOverride", "selectedOptions", "onRemoveOption", "onRemoveAllOptions", "status"]);
+    var clearAllId = React.useId();
+    return React.createElement(React.Fragment, null, React.createElement("div", tslib.__assign({
+      className: classnames(MultiSelectToggle_module.multiSelectToggle, classNameOverride, status && MultiSelectToggle_module[status]),
+      onClick: onClick
+    }, restProps), React.createElement("button", {
+      ref: ref,
+      className: MultiSelectToggle_module.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.ChevronUpIcon, {
+      role: "presentation"
+    }) : React.createElement(ChevronDownIcon.ChevronDownIcon, {
+      role: "presentation"
+    })), React.createElement("div", {
+      className: classnames(MultiSelectToggle_module.selectedItemsContainer, selectedOptions.length && MultiSelectToggle_module.hasSelectedItems)
+    }, selectedOptions.length > 0 && React.createElement(React.Fragment, null, React.createElement("ul", {
+      role: "list",
+      className: MultiSelectToggle_module.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.RemovableTag, {
+          removeButtonProps: {
+            ariaLabel: "Remove option: ".concat(label),
+            onClick: function () {
+              return onRemoveOption(value);
+            }
+          }
+        }, label))
+      );
+    })), React.createElement(ClearButton.ClearButton, {
+      id: clearAllId,
+      "aria-label": "Remove all options from ",
+      "aria-labelledby": "".concat(clearAllId, " ").concat(ariaLabelledBy),
+      classNameOverride: MultiSelectToggle_module.clearAllButton,
+      onClick: function (e) {
+        e.stopPropagation();
+        onRemoveAllOptions();
+      }
+    })))));
+  });
+  MultiSelectToggle.displayName = "MultiSelectToggle";
+  return MultiSelectToggle;
+}();
+exports.MultiSelectToggle = MultiSelectToggle;
+//# sourceMappingURL=MultiSelectToggle.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectToggle.cjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { ClearButton } from \"~components/ClearButton\"\nimport { FieldMessageProps } from \"~components/FieldMessage\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"~components/Icon\"\nimport { RemovableTag } from \"~components/__future__/Tag\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport styles from \"./MultiSelectToggle.module.scss\"\n\nexport type MultiSelectToggleProps = {\n  onClick: React.MouseEventHandler\n  [\"aria-labelledby\"]: string\n  [\"aria-controls\"]: string\n  selectedOptions: MultiSelectOption[]\n  isOpen?: boolean\n  status?: FieldMessageProps[\"status\"]\n  onRemoveOption: (optionValue: MultiSelectOption[\"value\"]) => void\n  onRemoveAllOptions: () => void\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const MultiSelectToggle = forwardRef<\n  HTMLButtonElement,\n  MultiSelectToggleProps\n>(\n  (\n    {\n      onClick,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      isOpen = false,\n      classNameOverride,\n      selectedOptions,\n      onRemoveOption,\n      onRemoveAllOptions,\n      status,\n      ...restProps\n    },\n    ref\n  ): JSX.Element => {\n    const clearAllId = useId()\n    return (\n      <>\n        {/*\n         * The inner <button> is the actual semantic element, and the onClick here\n         * is just a quality-of-life implementation for mouse users.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classnames(\n            styles.multiSelectToggle,\n            classNameOverride,\n            status && styles[status]\n          )}\n          onClick={onClick}\n          {...restProps}\n        >\n          <button\n            ref={ref}\n            className={styles.toggleButton}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            aria-controls={ariaControls}\n            aria-expanded={isOpen}\n            aria-haspopup=\"dialog\"\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation()\n              onClick(e)\n            }}\n          >\n            {isOpen ? (\n              <ChevronUpIcon role=\"presentation\" />\n            ) : (\n              <ChevronDownIcon role=\"presentation\" />\n            )}\n          </button>\n\n          <div\n            className={classnames(\n              styles.selectedItemsContainer,\n              selectedOptions.length && styles.hasSelectedItems\n            )}\n          >\n            {selectedOptions.length > 0 && (\n              <>\n                {/* list-style: none removes role=\"list\" in Safari */}\n                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}\n                <ul role=\"list\" className={styles.selectedItems}>\n                  {selectedOptions.map(({ label, value }) => (\n                    // This stops the underlying toggle collapsing the popover when interactive with Tags\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n                    <li key={value} onClick={e => e.stopPropagation()}>\n                      <RemovableTag\n                        removeButtonProps={{\n                          ariaLabel: `Remove option: ${label}`,\n                          onClick: () => onRemoveOption(value),\n                        }}\n                      >\n                        {label}\n                      </RemovableTag>\n                    </li>\n                  ))}\n                </ul>\n\n                <ClearButton\n                  id={clearAllId}\n                  aria-label=\"Remove all options from \"\n                  aria-labelledby={`${clearAllId} ${ariaLabelledBy}`}\n                  classNameOverride={styles.clearAllButton}\n                  onClick={e => {\n                    e.stopPropagation()\n                    onRemoveAllOptions()\n                  }}\n                />\n              </>\n            )}\n          </div>\n        </div>\n      </>\n    )\n  }\n)\n\nMultiSelectToggle.displayName = \"MultiSelectToggle\"\n"],"names":["MultiSelectToggle","forwardRef","_a","ref","onClick","ariaLabelledBy","ariaDescribedBy","ariaControls","_b","isOpen","classNameOverride","selectedOptions","onRemoveOption","onRemoveAllOptions","status","restProps","__rest","clearAllId","useId","React","createElement","Fragment","__assign","className","classnames","styles","multiSelectToggle","toggleButton","type","e","stopPropagation","ChevronUpIcon","role","ChevronDownIcon","selectedItemsContainer","length","hasSelectedItems","selectedItems","map","label","value","key","RemovableTag","removeButtonProps","ariaLabel","concat","ClearButton","id","clearAllButton","displayName"],"mappings":"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"}

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+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"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiSelectToggle.module.scss.cjs.map

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectToggle.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/MultiSelect/subcomponents/Popover/Popover.cjs

@@ -37,13 +37,15 @@ const Popover = /*#__PURE__*/function () {
       whileElementsMounted: reactDom.autoUpdate
     }, floatingOptions)).floatingStyles;
     return ReactDOM.createPortal(React.createElement(reactFocusOn.FocusOn, tslib.__assign({
+      enabled: false,
       scrollLock: false
     }, focusOnProps), React.createElement("div", tslib.__assign({
       ref: refs.setFloating,
       style: floatingStyles,
       className: classnames(Popover_module.popover, classNameOverride),
       role: "dialog",
-      "aria-modal": "true"
+      "aria-modal": "true",
+      tabIndex: -1
     }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
   };
   Popover.displayName = "Popover";

package/dist/cjs/MultiSelect/subcomponents/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":["../../../../../src/MultiSelect/subcomponents/Popover/Popover.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  ReferenceType,\n  useFloating,\n  UseFloatingReturn,\n  UseFloatingOptions,\n  size,\n} from \"@floating-ui/react-dom\"\nimport classnames from \"classnames\"\nimport { FocusOn } from \"react-focus-on\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Popover.module.scss\"\n\nexport type PopoverProps<RT extends ReferenceType = ReferenceType> = {\n  children: React.ReactNode\n  refs: UseFloatingReturn<RT>[\"refs\"]\n  /**\n   * passes in additional options / override for https://floating-ui.com/docs/tooltip#usefloating-hook\n   */\n  floatingOptions?: Omit<UseFloatingOptions, \"elements\">\n  focusOnProps?: Omit<ReactFocusOnProps, \"children\">\n  portalContainer?: Element | DocumentFragment\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const Popover = <RT extends ReferenceType>({\n  children,\n  refs,\n  floatingOptions,\n  focusOnProps,\n  portalContainer,\n  classNameOverride,\n  ...restProps\n}: PopoverProps<RT>): JSX.Element => {\n  const { floatingStyles } = useFloating({\n    elements: {\n      reference: refs.reference.current,\n      floating: refs.floating.current,\n    },\n    placement: \"bottom-start\",\n    middleware: [\n      offset(6),\n      flip(),\n      size({\n        apply({ availableWidth, availableHeight, elements }) {\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(availableWidth, 400)}px`,\n            minWidth: `${Math.min(availableWidth, 196)}px`,\n            maxHeight: `${Math.min(availableHeight, 352)}px`,\n          })\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    ...floatingOptions,\n  })\n\n  return createPortal(\n    <FocusOn scrollLock={false} {...focusOnProps}>\n      <div\n        ref={refs.setFloating}\n        style={floatingStyles}\n        className={classnames(styles.popover, classNameOverride)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        {...restProps}\n      >\n        {children}\n      </div>\n    </FocusOn>,\n    portalContainer ?? document.body\n  )\n}\n\nPopover.displayName = \"Popover\"\n"],"names":["Popover","_a","children","refs","floatingOptions","focusOnProps","portalContainer","classNameOverride","restProps","__rest","floatingStyles","useFloating","__assign","elements","reference","current","floating","placement","middleware","offset","flip","size","apply","availableWidth","availableHeight","Object","assign","style","maxWidth","concat","Math","min","minWidth","maxHeight","whileElementsMounted","autoUpdate","createPortal","React","createElement","FocusOn","scrollLock","ref","setFloating","className","classnames","styles","popover","role","document","body","displayName"],"mappings":";;;;;;;;;MA6BaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA2BC,EAQ/B,EAAA;IAPjB,IAAAC,QAAQ,cAAA;MACRC,IAAI,UAAA;MACJC,eAAe,qBAAA;MACfC,YAAY,kBAAA;MACZC,eAAe,qBAAA;MACfC,iBAAiB,uBAAA;MACdC,SAAS,GAPoCC,KAAA,CAAAA,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,CAQjD,CADa;IAEJ,IAAAS,cAAc,GAAKC,QAAAA,CAAAA,WAAW,CAAAC,KAAA,CAAAA,QAAA,CAAA;MACpCC,QAAQ,EAAE;QACRC,SAAS,EAAEX,IAAI,CAACW,SAAS,CAACC,OAAO;QACjCC,QAAQ,EAAEb,IAAI,CAACa,QAAQ,CAACD;MACzB,CAAA;MACDE,SAAS,EAAE,cAAc;MACzBC,UAAU,EAAE,CACVC,QAAAA,CAAAA,MAAM,CAAC,CAAC,CAAC,EACTC,aAAI,CAAE,CAAA,EACNC,aAAI,CAAC;QACHC,KAAK,YAACrB,EAA6C,EAAA;UAA3C,IAAAsB,cAAc,oBAAA;YAAEC,eAAe,GAAAvB,EAAA,CAAAuB,eAAA;YAAEX,QAAQ,GAAAZ,EAAA,CAAAY,QAAA;UAC/CY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACG,QAAQ,CAACW,KAAK,EAAE;YACrCC,QAAQ,EAAE,EAAG,CAAAC,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CS,QAAQ,EAAE,EAAG,CAAAH,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CU,SAAS,EAAE,EAAG,CAAAJ,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACP,eAAe,EAAE,GAAG,CAAC,EAAI,IAAA;UACjD,CAAA,CAAC;QACH;OACF,CAAC,CACH;MACDU,oBAAoB,EAAEC,QAAU,CAAAA;IAAA,GAC7B/B,eAAe,CAAA,CAClB,eArBoB;IAuBtB,OAAOgC,QAAY,CAAAA,YAAA,CACjBC,KAAC,CAAAC,aAAA,CAAAC,YAAO,CAAAA,OAAA;MAACC,UAAU,EAAE;IAAK,CAAA,EAAMnC,YAAY,CAAA,EAC1CgC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA1B,KAAA,CAAAA,QAAA,CAAA;MACE6B,GAAG,EAAEtC,IAAI,CAACuC,WAAW;MACrBf,KAAK,EAAEjB,cAAc;MACrBiC,SAAS,EAAEC,UAAU,CAACC,cAAM,CAACC,OAAO,EAAEvC,iBAAiB,CAAC;MACxDwC,IAAI,EAAC,QAAQ;oBACF;IAAM,CAAA,EACbvC,SAAS,CAEZ,EAAAN,QAAQ,CACL,CACE,EACVI,eAAe,KAAf,IAAA,IAAAA,eAAe,cAAfA,eAAe,GAAI0C,QAAQ,CAACC,IAAI,CACjC;EACH,CAAC;EAEDjD,OAAO,CAACkD,WAAW,GAAG,SAAS;EAAA,OAjDlBlD,OAAO;AAAA;"}
+{"version":3,"file":"Popover.cjs","sources":["../../../../../src/MultiSelect/subcomponents/Popover/Popover.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  ReferenceType,\n  useFloating,\n  UseFloatingReturn,\n  UseFloatingOptions,\n  size,\n} from \"@floating-ui/react-dom\"\nimport classnames from \"classnames\"\nimport { FocusOn } from \"react-focus-on\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Popover.module.scss\"\n\nexport type PopoverProps<RT extends ReferenceType = ReferenceType> = {\n  children: React.ReactNode\n  refs: UseFloatingReturn<RT>[\"refs\"]\n  /**\n   * passes in additional options / override for https://floating-ui.com/docs/tooltip#usefloating-hook\n   */\n  floatingOptions?: Omit<UseFloatingOptions, \"elements\">\n  focusOnProps?: Omit<ReactFocusOnProps, \"children\">\n  portalContainer?: Element | DocumentFragment\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const Popover = <RT extends ReferenceType>({\n  children,\n  refs,\n  floatingOptions,\n  focusOnProps,\n  portalContainer,\n  classNameOverride,\n  ...restProps\n}: PopoverProps<RT>): JSX.Element => {\n  const { floatingStyles } = useFloating({\n    elements: {\n      reference: refs.reference.current,\n      floating: refs.floating.current,\n    },\n    placement: \"bottom-start\",\n    middleware: [\n      offset(6),\n      flip(),\n      size({\n        apply({ availableWidth, availableHeight, elements }) {\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(availableWidth, 400)}px`,\n            minWidth: `${Math.min(availableWidth, 196)}px`,\n            maxHeight: `${Math.min(availableHeight, 352)}px`,\n          })\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    ...floatingOptions,\n  })\n\n  return createPortal(\n    <FocusOn enabled={false} scrollLock={false} {...focusOnProps}>\n      <div\n        ref={refs.setFloating}\n        style={floatingStyles}\n        className={classnames(styles.popover, classNameOverride)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...restProps}\n      >\n        {children}\n      </div>\n    </FocusOn>,\n    portalContainer ?? document.body\n  )\n}\n\nPopover.displayName = \"Popover\"\n"],"names":["Popover","_a","children","refs","floatingOptions","focusOnProps","portalContainer","classNameOverride","restProps","__rest","floatingStyles","useFloating","__assign","elements","reference","current","floating","placement","middleware","offset","flip","size","apply","availableWidth","availableHeight","Object","assign","style","maxWidth","concat","Math","min","minWidth","maxHeight","whileElementsMounted","autoUpdate","createPortal","React","createElement","FocusOn","enabled","scrollLock","ref","setFloating","className","classnames","styles","popover","role","tabIndex","document","body","displayName"],"mappings":";;;;;;;;;MA6BaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA2BC,EAQ/B,EAAA;IAPjB,IAAAC,QAAQ,cAAA;MACRC,IAAI,UAAA;MACJC,eAAe,qBAAA;MACfC,YAAY,kBAAA;MACZC,eAAe,qBAAA;MACfC,iBAAiB,uBAAA;MACdC,SAAS,GAPoCC,KAAA,CAAAA,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,CAQjD,CADa;IAEJ,IAAAS,cAAc,GAAKC,QAAAA,CAAAA,WAAW,CAAAC,KAAA,CAAAA,QAAA,CAAA;MACpCC,QAAQ,EAAE;QACRC,SAAS,EAAEX,IAAI,CAACW,SAAS,CAACC,OAAO;QACjCC,QAAQ,EAAEb,IAAI,CAACa,QAAQ,CAACD;MACzB,CAAA;MACDE,SAAS,EAAE,cAAc;MACzBC,UAAU,EAAE,CACVC,QAAAA,CAAAA,MAAM,CAAC,CAAC,CAAC,EACTC,aAAI,CAAE,CAAA,EACNC,aAAI,CAAC;QACHC,KAAK,YAACrB,EAA6C,EAAA;UAA3C,IAAAsB,cAAc,oBAAA;YAAEC,eAAe,GAAAvB,EAAA,CAAAuB,eAAA;YAAEX,QAAQ,GAAAZ,EAAA,CAAAY,QAAA;UAC/CY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACG,QAAQ,CAACW,KAAK,EAAE;YACrCC,QAAQ,EAAE,EAAG,CAAAC,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CS,QAAQ,EAAE,EAAG,CAAAH,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CU,SAAS,EAAE,EAAG,CAAAJ,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACP,eAAe,EAAE,GAAG,CAAC,EAAI,IAAA;UACjD,CAAA,CAAC;QACH;OACF,CAAC,CACH;MACDU,oBAAoB,EAAEC,QAAU,CAAAA;IAAA,GAC7B/B,eAAe,CAAA,CAClB,eArBoB;IAuBtB,OAAOgC,qBAAY,CACjBC,KAAC,CAAAC,aAAA,CAAAC,YAAO,CAAAA,OAAA,EAAC3B,KAAA,CAAAA,QAAA,CAAA;MAAA4B,OAAO,EAAE,KAAK;MAAEC,UAAU,EAAE;IAAK,GAAMpC,YAAY,CAAA,EAC1DgC,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA1B,KAAA,CAAAA,QAAA,CAAA;MAAA8B,GAAG,EAAEvC,IAAI,CAACwC,WAAW;MACrBhB,KAAK,EAAEjB,cAAc;MACrBkC,SAAS,EAAEC,UAAU,CAACC,cAAM,CAACC,OAAO,EAAExC,iBAAiB,CAAC;MACxDyC,IAAI,EAAC,QAAQ;oBACF,MAAM;MACjBC,QAAQ,EAAE,CAAC;IAAC,CACR,EAAAzC,SAAS,CAEZ,EAAAN,QAAQ,CACL,CACE,EACVI,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAf,KAAA,CAAA,GAAAA,eAAe,GAAI4C,QAAQ,CAACC,IAAI,CACjC;EACH,CAAC;EAEDnD,OAAO,CAACoD,WAAW,GAAG,SAAS;EAAA,OAlDlBpD,OAAO;AAAA;"}

package/dist/cjs/Popover/Popover.cjs

@@ -101,6 +101,7 @@ const Popover = /*#__PURE__*/function () {
     }, React.createElement(CloseIcon.CloseIcon, {
       role: "presentation"
     }))), React.createElement(Text.Text, {
+      tag: "div",
       variant: "small",
       classNameOverride: classnames(Popover_module.container, classMappers.mapLineVariant(singleLine))
     }, children)), React.createElement("div", {