@kaizen/components 1.33.0 → 1.35.0

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs

@@ -0,0 +1,54 @@
+import { __assign } from 'tslib';
+import React, { useId } from 'react';
+import { useFocusRing } from '@react-aria/focus';
+import { useOption } from '@react-aria/listbox';
+import { mergeProps } from '@react-aria/utils';
+import classnames from 'classnames';
+import { Badge } from '../../../../Badge/Badge.mjs';
+import '../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
+import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
+import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
+import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
+import styles from './MultiSelectOption.module.scss.mjs';
+const MultiSelectOption = /*#__PURE__*/function () {
+  const MultiSelectOption = function (_a) {
+    var _b, _c, _d;
+    var classNameOverride = _a.classNameOverride,
+      item = _a.item;
+    var state = useSelectionContext().selectionState;
+    // Get props for the option element
+    var ref = /*#__PURE__*/React.createRef();
+    var _e = useOption({
+        key: item.key
+      }, state, ref),
+      optionProps = _e.optionProps,
+      isSelected = _e.isSelected,
+      isDisabled = _e.isDisabled;
+    // Determine whether we should show a keyboard
+    // focus ring for accessibility
+    var _f = useFocusRing(),
+      isFocusVisible = _f.isFocusVisible,
+      focusProps = _f.focusProps;
+    var countElementId = useId();
+    return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps), {
+      ref: ref,
+      className: classnames(styles.option, classNameOverride, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.isDisabled),
+      "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label,
+      "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.icon, isSelected && styles.isSelected)
+    }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
+      role: "presentation"
+    })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && /*#__PURE__*/React.createElement("span", {
+      id: countElementId,
+      className: styles.badgeContainer
+    }, /*#__PURE__*/React.createElement(Badge, {
+      classNameOverride: styles.badge
+    }, item.value.count), /*#__PURE__*/React.createElement(VisuallyHidden, null, " available")));
+  };
+  MultiSelectOption.displayName = "FilterMultiSelect.Option";
+  return MultiSelectOption;
+}();
+export { MultiSelectOption };
+//# sourceMappingURL=MultiSelectOption.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOption.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { useFocusRing } from \"@react-aria/focus\"\nimport { useOption } from \"@react-aria/listbox\"\nimport { mergeProps } from \"@react-aria/utils\"\nimport classnames from \"classnames\"\nimport { Badge } from \"~components/Badge\"\nimport { CheckIcon } from \"~components/Icon\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { useSelectionContext } from \"../../context\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./MultiSelectOption.module.scss\"\n\nexport interface MultiSelectOptionProps {\n  classNameOverride?: string\n  item: MultiSelectItem\n}\n\nexport const MultiSelectOption = ({\n  classNameOverride,\n  item,\n}: MultiSelectOptionProps): JSX.Element => {\n  const { selectionState: state } = useSelectionContext()\n  // Get props for the option element\n  const ref = React.createRef<HTMLLIElement>()\n  const { optionProps, isSelected, isDisabled } = useOption(\n    { key: item.key },\n    state,\n    ref\n  )\n\n  // Determine whether we should show a keyboard\n  // focus ring for accessibility\n  const { isFocusVisible, focusProps } = useFocusRing()\n  const countElementId = useId()\n\n  return (\n    <li\n      {...mergeProps(optionProps, focusProps)}\n      ref={ref}\n      className={classnames(\n        styles.option,\n        classNameOverride,\n        isSelected && styles.isSelected,\n        isFocusVisible && styles.isFocusVisible,\n        isDisabled && styles.isDisabled\n      )}\n      aria-label={item.value?.label}\n      aria-describedby={item.value?.count ? countElementId : undefined}\n    >\n      <span\n        className={classnames(styles.icon, isSelected && styles.isSelected)}\n      >\n        {isSelected && <CheckIcon role=\"presentation\" />}\n      </span>\n      {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}\n      {item.rendered}\n      {item.value?.count && (\n        <span id={countElementId} className={styles.badgeContainer}>\n          <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>\n          <VisuallyHidden> available</VisuallyHidden>\n        </span>\n      )}\n    </li>\n  )\n}\n\nMultiSelectOption.displayName = \"FilterMultiSelect.Option\"\n"],"names":["MultiSelectOption","_a","classNameOverride","item","state","useSelectionContext","ref","React","createRef","_e","useOption","key","optionProps","isSelected","isDisabled","_f","useFocusRing","isFocusVisible","focusProps","countElementId","useId","createElement","__assign","mergeProps","className","classnames","styles","option","_b","value","label","_c","count","undefined","icon","CheckIcon","role","rendered","_d","id","badgeContainer","Badge","badge","VisuallyHidden","displayName"],"mappings":";;;;;;;;;;;;;MAiBaA,iBAAiB;EAAA,MAAjBA,iBAAiB,GAAG,SAAAA,CAACC,EAGT,EAAA;;QAFvBC,iBAAiB,GAAAD,EAAA,CAAAC,iBAAA;MACjBC,IAAI,GAAAF,EAAA,CAAAE,IAAA;IAEI,IAAgBC,KAAK,GAAKC,mBAAmB,CAAE,CAAA,eAA1B;;IAE7B,IAAMC,GAAG,gBAAGC,KAAK,CAACC,SAAS,EAAiB;IACtC,IAAAC,EAAA,GAA0CC,SAAS,CACvD;QAAEC,GAAG,EAAER,IAAI,CAACQ;MAAG,CAAE,EACjBP,KAAK,EACLE,GAAG,CACJ;MAJOM,WAAW,GAAAH,EAAA,CAAAG,WAAA;MAAEC,UAAU,GAAAJ,EAAA,CAAAI,UAAA;MAAEC,UAAU,GAAAL,EAAA,CAAAK,UAI1C;;;IAIK,IAAAC,EAAA,GAAiCC,YAAY,CAAA,CAAE;MAA7CC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,UAAU,GAAAH,EAAA,CAAAG,UAAmB;IACrD,IAAMC,cAAc,GAAGC,KAAK,EAAE;IAE9B,oBACEb,KAAA,CAAAc,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA,CAAA,CAAA,EACMC,UAAU,CAACX,WAAW,EAAEM,UAAU,CAAC,EACvC;MAAAZ,GAAG,EAAEA,GAAG;MACRkB,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,MAAM,EACbzB,iBAAiB,EACjBW,UAAU,IAAIa,MAAM,CAACb,UAAU,EAC/BI,cAAc,IAAIS,MAAM,CAACT,cAAc,EACvCH,UAAU,IAAIY,MAAM,CAACZ,UAAU,CAChC;MACW,YAAA,EAAA,CAAAc,EAAA,GAAAzB,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAE,KAAK;MACX,kBAAA,EAAA,CAAA,CAAAC,EAAA,GAAA5B,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAE,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,KAAK,IAAGb,cAAc,GAAGc;IAAS,CAAA,CAAA,eAEhE1B,KACE,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAG,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACQ,IAAI,EAAErB,UAAU,IAAIa,MAAM,CAACb,UAAU;IAAC,CAAA,EAElEA,UAAU,iBAAIN,KAAC,CAAAc,aAAA,CAAAc,SAAS;MAACC,IAAI,EAAC;IAAc,CAAA,CAAG,CAC3C,EAENjC,IAAI,CAACkC,QAAQ,EACb,CAAA,MAAAlC,IAAI,CAAC0B,KAAK,MAAA,IAAA,IAAAS,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEN,KAAK,kBAChBzB,KAAM,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAkB,EAAE,EAAEpB,cAAc;MAAEK,SAAS,EAAEE,MAAM,CAACc;IAAc,CAAA,eACxDjC,KAAA,CAAAc,aAAA,CAACoB,KAAK,EAAA;MAACvC,iBAAiB,EAAEwB,MAAM,CAACgB;KAAK,EAAGvC,IAAI,CAAC0B,KAAK,CAACG,KAAK,CAAS,eAClEzB,KAAA,CAAAc,aAAA,CAACsB,cAAc,EAA4B,IAAA,EAAA,YAAA,CAAA,CAE9C,CACE;EAET,CAAC;EAED3C,iBAAiB,CAAC4C,WAAW,GAAG,0BAA0B;EAAA,OAjD7C5C,iBAAiB;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss.mjs

@@ -0,0 +1,11 @@
+var styles = {
+  "icon": "MultiSelectOption-module_icon__78XCm",
+  "option": "MultiSelectOption-module_option__CSJyR",
+  "badge": "MultiSelectOption-module_badge__QqoyV",
+  "isFocused": "MultiSelectOption-module_isFocused__4WdzT",
+  "isDisabled": "MultiSelectOption-module_isDisabled__l--2z",
+  "badgeContainer": "MultiSelectOption-module_badgeContainer__59fHs",
+  "isSelected": "MultiSelectOption-module_isSelected__IZggh"
+};
+export { styles as default };
+//# sourceMappingURL=MultiSelectOption.module.scss.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.mjs

@@ -0,0 +1,20 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Text } from '../../../../Text/Text.mjs';
+import styles from './NoResults.module.scss.mjs';
+const NoResults = /*#__PURE__*/function () {
+  const NoResults = function (_a) {
+    var children = _a.children,
+      restProps = __rest(_a, ["children"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.container
+    }, restProps), /*#__PURE__*/React.createElement(Text, {
+      variant: "extra-small",
+      color: "dark-reduced-opacity"
+    }, children));
+  };
+  NoResults.displayName = "FilterMultiSelect.NoResults";
+  return NoResults;
+}();
+export { NoResults };
+//# sourceMappingURL=NoResults.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoResults.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { Text } from \"~components/Text\"\nimport styles from \"./NoResults.module.scss\"\n\nexport type NoResultsProps = {\n  children: React.ReactNode\n} & HTMLAttributes<HTMLDivElement>\n\nexport const NoResults = ({\n  children,\n  ...restProps\n}: NoResultsProps): JSX.Element => (\n  <div className={styles.container} {...restProps}>\n    <Text variant=\"extra-small\" color=\"dark-reduced-opacity\">\n      {children}\n    </Text>\n  </div>\n)\n\nNoResults.displayName = \"FilterMultiSelect.NoResults\"\n"],"names":["NoResults","_a","children","restProps","__rest","React","className","styles","container","createElement","Text","variant","color","displayName"],"mappings":";;;;MAQaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAACC,EAGT,EAAA;IAFf,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACLC,SAAS,GAAAC,MAAA,CAAAH,EAAA,EAFY,YAGzB,CADa;IACqB,oBACjCI;MAAKC,SAAS,EAAEC,MAAM,CAACC;OAAeL,SAAS,CAAA,eAC7CE,KAAA,CAAAI,aAAA,CAACC,IAAI,EAAA;MAACC,OAAO,EAAC,aAAa;MAACC,KAAK,EAAC;IAAsB,CACrD,EAAAV,QAAQ,CACJ,CACH;GACP;EAEDF,SAAS,CAACa,WAAW,GAAG,6BAA6B;EAAA,OAXxCb,SAAS;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "container": "NoResults-module_container__2l8Ol"
+};
+export { styles as default };
+//# sourceMappingURL=NoResults.module.scss.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.mjs

@@ -0,0 +1,39 @@
+import React, { useId } from 'react';
+import { InputSearch } from '../../../../Input/InputSearch/InputSearch.mjs';
+import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
+import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
+import styles from './SearchInput.module.scss.mjs';
+const SearchInput = /*#__PURE__*/function () {
+  const SearchInput = function (_a) {
+    var label = _a.label,
+      id = _a.id,
+      isLoading = _a.isLoading;
+    var _b = useSelectionContext(),
+      setSearchQuery = _b.setSearchQuery,
+      searchQuery = _b.searchQuery;
+    var handleChange = function (e) {
+      setSearchQuery(e.target.value);
+    };
+    var handleClear = function () {
+      return setSearchQuery("");
+    };
+    var reactId = useId();
+    var inputId = id !== null && id !== void 0 ? id : reactId;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.inputSearchContainer
+    }, /*#__PURE__*/React.createElement(InputSearch, {
+      id: inputId,
+      "aria-label": label !== null && label !== void 0 ? label : "Filter options by search query",
+      secondary: true,
+      placeholder: "Search\u2026",
+      value: searchQuery,
+      onChange: handleChange,
+      onClear: handleClear,
+      loading: isLoading
+    }));
+  };
+  SearchInput.displayName = "FilterMultiSelect.SearchInput";
+  return SearchInput;
+}();
+export { SearchInput };
+//# sourceMappingURL=SearchInput.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { InputSearch } from \"~components/Input/InputSearch\"\nimport { useSelectionContext } from \"../../context\"\nimport styles from \"./SearchInput.module.scss\"\n\nexport type SearchInputProps = {\n  label?: string\n  id?: string\n  isLoading?: boolean\n}\n\nexport const SearchInput = ({\n  label,\n  id,\n  isLoading,\n}: SearchInputProps): JSX.Element => {\n  const { setSearchQuery, searchQuery } = useSelectionContext()\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n    setSearchQuery(e.target.value)\n  }\n\n  const handleClear = (): void => setSearchQuery(\"\")\n\n  const reactId = useId()\n  const inputId = id ?? reactId\n\n  return (\n    <div className={styles.inputSearchContainer}>\n      <InputSearch\n        id={inputId}\n        aria-label={label ?? \"Filter options by search query\"}\n        secondary\n        placeholder=\"Search…\"\n        value={searchQuery}\n        onChange={handleChange}\n        onClear={handleClear}\n        loading={isLoading}\n      />\n    </div>\n  )\n}\n\nSearchInput.displayName = \"FilterMultiSelect.SearchInput\"\n"],"names":["SearchInput","_a","label","id","isLoading","_b","useSelectionContext","setSearchQuery","searchQuery","handleChange","e","target","value","handleClear","reactId","useId","inputId","React","createElement","className","styles","inputSearchContainer","InputSearch","secondary","placeholder","onChange","onClear","loading","displayName"],"mappings":";;;;;MAWaA,WAAW;EAAA,MAAXA,WAAW,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHjB,IAAAC,KAAK,WAAA;MACLC,EAAE,GAAAF,EAAA,CAAAE,EAAA;MACFC,SAAS,GAAAH,EAAA,CAAAG,SAAA;IAEH,IAAAC,EAAA,GAAkCC,mBAAmB,CAAA,CAAE;MAArDC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,WAAW,GAAAH,EAAA,CAAAG,WAA0B;IAE7D,IAAMC,YAAY,GAA+C,SAAAA,CAAAC,CAAC,EAAA;MAChEH,cAAc,CAACG,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;IAChC,CAAC;IAED,IAAMC,WAAW,GAAG,SAAAA,CAAA,EAAA;MAAY,OAAAN,cAAc,CAAC,EAAE,CAAC;IAAlB,CAAkB;IAElD,IAAMO,OAAO,GAAGC,KAAK,EAAE;IACvB,IAAMC,OAAO,GAAGb,EAAE,KAAA,IAAA,IAAFA,EAAE,KAAF,KAAA,CAAA,GAAAA,EAAE,GAAIW,OAAO;IAE7B,oBACEG,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,MAAM,CAACC;IAAoB,CAAA,eACzCJ,KAAA,CAAAC,aAAA,CAACI,WAAW,EACV;MAAAnB,EAAE,EAAEa,OAAO;oBACCd,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAI,gCAAgC;MACrDqB,SAAS,EAAA,IAAA;MACTC,WAAW,EAAC,cAAS;MACrBZ,KAAK,EAAEJ,WAAW;MAClBiB,QAAQ,EAAEhB,YAAY;MACtBiB,OAAO,EAAEb,WAAW;MACpBc,OAAO,EAAEvB;IAAS,CAClB,CAAA,CACE;EAEV,CAAC;EAEDJ,WAAW,CAAC4B,WAAW,GAAG,+BAA+B;EAAA,OAhC5C5B,WAAW;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "inputSearchContainer": "SearchInput-module_inputSearchContainer__u9K6k"
+};
+export { styles as default };
+//# sourceMappingURL=SearchInput.module.scss.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.mjs

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Divider } from '../../../../Divider/Divider.mjs';
+import styles from './SectionDivider.module.scss.mjs';
+var SectionDivider = function () {
+  return /*#__PURE__*/React.createElement("li", {
+    className: styles.divider,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Divider, {
+    variant: "canvas"
+  }));
+};
+export { SectionDivider };
+//# sourceMappingURL=SectionDivider.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx"],"sourcesContent":["import React from \"react\"\nimport { Divider } from \"~components/Divider\"\nimport styles from \"./SectionDivider.module.scss\"\n\nexport const SectionDivider = (): JSX.Element => (\n  <li className={styles.divider} aria-hidden=\"true\">\n    <Divider variant=\"canvas\" />\n  </li>\n)\n"],"names":["SectionDivider","React","createElement","className","styles","divider","Divider","variant"],"mappings":";;;AAIO,IAAMA,cAAc,GAAG,SAAAA,CAAA;EAAmB,oBAC/CC,KAAI,CAAAC,aAAA,CAAA,IAAA,EAAA;IAAAC,SAAS,EAAEC,MAAM,CAACC,OAAO;mBAAc;EAAM,CAAA,eAC/CJ,KAAC,CAAAC,aAAA,CAAAI,OAAO,EAAC;IAAAC,OAAO,EAAC;IAAW,CACzB;AAH0C,CAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "divider": "SectionDivider-module_divider__G-itP"
+};
+export { styles as default };
+//# sourceMappingURL=SectionDivider.module.scss.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.mjs

@@ -0,0 +1,30 @@
+import React from 'react';
+import classnames from 'classnames';
+import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
+import { useSelectionContext } from '../../../context/SelectionProvider/SelectionProvider.mjs';
+import styles from '../SelectionControlButton.module.scss.mjs';
+const ClearButton = /*#__PURE__*/function () {
+  const ClearButton = function () {
+    var selectionState = useSelectionContext().selectionState;
+    var filteredOptions = Array.from(selectionState.collection.getKeys());
+    var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+    var isDisabled = filteredOptions.length === 0 || !Boolean(filteredOptions.find(function (key) {
+      return selectionState.selectionManager.isSelected(key);
+    }));
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classnames(styles.button, isDisabled && styles.isDisabled),
+      "aria-disabled": isDisabled,
+      onClick: function () {
+        !isDisabled && selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function (option) {
+          return !filteredOptions.includes(option);
+        }));
+      }
+    }, "Clear", /*#__PURE__*/React.createElement(VisuallyHidden, null, " selections"));
+  };
+  ClearButton.displayName = "FilterMultiSelect.ClearButton";
+  return ClearButton;
+}();
+export { ClearButton };
+//# sourceMappingURL=ClearButton.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.mjs","sources":["../../../../../../../src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { useSelectionContext } from \"../../../context\"\nimport styles from \"../SelectionControlButton.module.scss\"\n\nexport const ClearButton = (): JSX.Element => {\n  const { selectionState } = useSelectionContext()\n  const filteredOptions = Array.from(selectionState.collection.getKeys())\n  const selectedOptions = Array.from(\n    selectionState.selectionManager.selectedKeys\n  )\n  const isDisabled =\n    filteredOptions.length === 0 ||\n    !Boolean(\n      filteredOptions.find(key =>\n        selectionState.selectionManager.isSelected(key)\n      )\n    )\n\n  return (\n    <button\n      type=\"button\"\n      className={classnames(styles.button, isDisabled && styles.isDisabled)}\n      aria-disabled={isDisabled}\n      onClick={\n        (): void => {\n          !isDisabled &&\n            selectionState.selectionManager.setSelectedKeys(\n              selectedOptions.filter(\n                option => !filteredOptions.includes(option)\n              )\n            )\n        }\n        // TODO: add announcement here to inform selection cleared\n      }\n    >\n      Clear<VisuallyHidden> selections</VisuallyHidden>\n    </button>\n  )\n}\n\nClearButton.displayName = \"FilterMultiSelect.ClearButton\"\n"],"names":["ClearButton","selectionState","useSelectionContext","filteredOptions","Array","from","collection","getKeys","selectedOptions","selectionManager","selectedKeys","isDisabled","length","Boolean","find","key","isSelected","React","createElement","type","className","classnames","styles","button","onClick","setSelectedKeys","filter","option","includes","VisuallyHidden","displayName"],"mappings":";;;;;;MAMaA,WAAW;EAAA,MAAXA,WAAW,GAAG,SAAAA,CAAA,EAAA;IACjB,IAAAC,cAAc,GAAKC,mBAAmB,CAAE,CAAA,eAA1B;IACtB,IAAMC,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACJ,cAAc,CAACK,UAAU,CAACC,OAAO,CAAA,CAAE,CAAC;IACvE,IAAMC,eAAe,GAAGJ,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACQ,gBAAgB,CAACC,YAAY,CAC7C;IACD,IAAMC,UAAU,GACdR,eAAe,CAACS,MAAM,KAAK,CAAC,IAC5B,CAACC,OAAO,CACNV,eAAe,CAACW,IAAI,CAAC,UAAAC,GAAG,EAAA;MACtB,OAAAd,cAAc,CAACQ,gBAAgB,CAACO,UAAU,CAACD,GAAG,CAAC;IAAA,CAAA,CAChD,CACF;IAEH,oBACEE,KACE,CAAAC,aAAA,CAAA,QAAA,EAAA;MAAAC,IAAI,EAAC,QAAQ;MACbC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,MAAM,EAAEZ,UAAU,IAAIW,MAAM,CAACX,UAAU,CAAC;MACtD,eAAA,EAAAA,UAAU;MACzBa,OAAO,EACL,SAAAA,CAAA,EAAA;QACE,CAACb,UAAU,IACTV,cAAc,CAACQ,gBAAgB,CAACgB,eAAe,CAC7CjB,eAAe,CAACkB,MAAM,CACpB,UAAAC,MAAM,EAAA;UAAI,OAAA,CAACxB,eAAe,CAACyB,QAAQ,CAACD,MAAM,CAAC;QAAjC,CAAiC,CAC5C,CACF;;IACJ,CAAA,wBAIEV,KAAA,CAAAC,aAAA,CAACW,cAAc,EAAA,IAAA,EAAA,aAAA,CAA6B,CAC1C;EAEb,CAAC;EAED7B,WAAW,CAAC8B,WAAW,GAAG,+BAA+B;EAAA,OApC5C9B,WAAW;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAllButton.mjs","sources":["../../../../../../../src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { useSelectionContext } from \"../../../context\"\nimport styles from \"../SelectionControlButton.module.scss\"\n\nexport const SelectAllButton = (): JSX.Element => {\n  const { selectionState } = useSelectionContext()\n  const selectedOptions = Array.from(\n    selectionState.selectionManager.selectedKeys\n  )\n  const disabledOptions = selectionState.disabledKeys\n    ? Array.from(selectionState.disabledKeys)\n    : []\n  const filteredOptions = Array.from(\n    selectionState.collection.getKeys()\n  ).filter(key => !disabledOptions.includes(key))\n\n  return (\n    <button\n      type=\"button\"\n      className={classnames(\n        styles.button,\n        selectionState.selectionManager.isSelectAll && styles.isDisabled\n      )}\n      aria-disabled={selectionState.selectionManager.isSelectAll}\n      onClick={\n        (): false | void =>\n          !selectionState.selectionManager.isSelectAll &&\n          selectionState.selectionManager.setSelectedKeys([\n            ...selectedOptions,\n            ...filteredOptions,\n          ])\n        // TODO: add announcement here to inform all selected\n      }\n    >\n      Select all\n    </button>\n  )\n}\n\nSelectAllButton.displayName = \"FilterMultiSelect.SelectAllButton\"\n"],"names":["SelectAllButton","selectionState","useSelectionContext","selectedOptions","Array","from","selectionManager","selectedKeys","disabledOptions","disabledKeys","filteredOptions","collection","getKeys","filter","key","includes","React","createElement","type","className","classnames","styles","button","isSelectAll","isDisabled","onClick","setSelectedKeys","displayName"],"mappings":";;;;;;MAKaA,eAAe;EAAA,MAAfA,eAAe,GAAG,SAAAA,CAAA,EAAA;IACrB,IAAAC,cAAc,GAAKC,mBAAmB,CAAE,CAAA,eAA1B;IACtB,IAAMC,eAAe,GAAGC,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACK,gBAAgB,CAACC,YAAY,CAC7C;IACD,IAAMC,eAAe,GAAGP,cAAc,CAACQ,YAAY,GAC/CL,KAAK,CAACC,IAAI,CAACJ,cAAc,CAACQ,YAAY,CAAC,GACvC,EAAE;IACN,IAAMC,eAAe,GAAGN,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACU,UAAU,CAACC,OAAO,CAAA,CAAE,CACpC,CAACC,MAAM,CAAC,UAAAC,GAAG,EAAA;MAAI,OAAA,CAACN,eAAe,CAACO,QAAQ,CAACD,GAAG,CAAC;IAA9B,CAA8B,CAAC;IAE/C,oBACEE,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;MACEC,IAAI,EAAC,QAAQ;MACbC,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,MAAM,EACbrB,cAAc,CAACK,gBAAgB,CAACiB,WAAW,IAAIF,MAAM,CAACG,UAAU,CACjE;MAAA,eAAA,EACcvB,cAAc,CAACK,gBAAgB,CAACiB,WAAW;MAC1DE,OAAO,EACL,SAAAA,CAAA,EAAA;QACE,OAAA,CAACxB,cAAc,CAACK,gBAAgB,CAACiB,WAAW,IAC5CtB,cAAc,CAACK,gBAAgB,CAACoB,eAAe,iCAC1CvB,eAAe,EAAA,IAAA,CAAA,EACfO,eAAe,EAClB,IAAA,CAAA,CAAA;;IAAA,CAAA,EAAA,YAAA,CAKC;EAEb,CAAC;EAEDV,eAAe,CAAC2B,WAAW,GAAG,mCAAmC;EAAA,OAnCpD3B,eAAe;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "button": "SelectionControlButton-module_button__u-ysH",
+  "isDisabled": "SelectionControlButton-module_isDisabled__0axMR"
+};
+export { styles as default };
+//# sourceMappingURL=SelectionControlButton.module.scss.mjs.map

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTriggerButton.mjs","sources":["../../../../../../../src/Filter/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx"],"sourcesContent":["import React, { useRef } from \"react\"\nimport { FilterTriggerRef } from \"~components/Filter/Filter\"\nimport { FilterButton } from \"~components/Filter/FilterButton\"\nimport { useMenuTriggerContext } from \"../../../context\"\nimport { getTruncatedLabels } from \"../../../utils\"\n\nexport type FilterTriggerButtonProps = {\n  label: string\n  selectedOptionLabels: string[]\n  /**\n   * Character limit of the button label.\n   * It will always show the first selected label regardless if it exceeds the given character limit.\n   */\n  labelCharacterLimitBeforeTruncate?: number\n  classNameOverride?: string // TODO: migrate it to use OverrideClassName<T> and omit the props controlled by React-Aria\n}\n\nexport const FilterTriggerButton = ({\n  selectedOptionLabels,\n  label,\n  classNameOverride,\n  labelCharacterLimitBeforeTruncate = 50,\n}: FilterTriggerButtonProps): JSX.Element => {\n  const { buttonProps, buttonRef, menuTriggerState } = useMenuTriggerContext()\n  const ref = useRef<FilterTriggerRef>({ triggerRef: buttonRef })\n\n  return (\n    <FilterButton\n      ref={ref}\n      {...buttonProps}\n      label={label}\n      selectedValue={getTruncatedLabels(\n        selectedOptionLabels,\n        labelCharacterLimitBeforeTruncate\n      )}\n      classNameOverride={classNameOverride}\n      isOpen={menuTriggerState.isOpen}\n    />\n  )\n}\n\nFilterTriggerButton.displayName = \"FilterMultiSelect.TriggerButton\"\n"],"names":["FilterTriggerButton","_a","selectedOptionLabels","label","classNameOverride","_b","labelCharacterLimitBeforeTruncate","_c","useMenuTriggerContext","buttonProps","buttonRef","menuTriggerState","ref","useRef","triggerRef","React","createElement","FilterButton","__assign","selectedValue","getTruncatedLabels","isOpen","displayName"],"mappings":";;;;;;;MAiBaA,mBAAmB;EAAA,MAAnBA,mBAAmB,GAAG,SAAAA,CAACC,EAKT,EAAA;IAJzB,IAAAC,oBAAoB,GAAAD,EAAA,CAAAC,oBAAA;MACpBC,KAAK,GAAAF,EAAA,CAAAE,KAAA;MACLC,iBAAiB,GAAAH,EAAA,CAAAG,iBAAA;MACjBC,EAAsC,GAAAJ,EAAA,CAAAK,iCAAA;MAAtCA,iCAAiC,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IAEhC,IAAAE,EAA+C,GAAAC,qBAAqB,EAAE;MAApEC,WAAW,GAAAF,EAAA,CAAAE,WAAA;MAAEC,SAAS,GAAAH,EAAA,CAAAG,SAAA;MAAEC,gBAAgB,GAAAJ,EAAA,CAAAI,gBAA4B;IAC5E,IAAMC,GAAG,GAAGC,MAAM,CAAmB;MAAEC,UAAU,EAAEJ;IAAW,CAAA,CAAC;IAE/D,oBACEK,KAAA,CAAAC,aAAA,CAACC,YAAY,EAAAC,QAAA,CAAA;MACXN,GAAG,EAAEA;IACD,CAAA,EAAAH,WAAW;MACfN,KAAK,EAAEA,KAAK;MACZgB,aAAa,EAAEC,kBAAkB,CAC/BlB,oBAAoB,EACpBI,iCAAiC,CAClC;MACDF,iBAAiB,EAAEA,iBAAiB;MACpCiB,MAAM,EAAEV,gBAAgB,CAACU;IAAM,CAAA,CAAA,CAC/B;EAEN,CAAC;EAEDrB,mBAAmB,CAACsB,WAAW,GAAG,iCAAiC;EAAA,OAxBtDtB,mBAAmB;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemovableFilterTrigger.mjs","sources":["../../../../../../../src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx"],"sourcesContent":["import React, { useRef } from \"react\"\nimport { FilterTriggerRef } from \"~components/Filter/Filter\"\nimport { FilterButtonRemovable } from \"~components/Filter/FilterButton\"\nimport { useMenuTriggerContext } from \"../../../context\"\nimport { getTruncatedLabels } from \"../../../utils\"\nimport { FilterTriggerButtonProps } from \"../FilterTriggerButton\"\n\nexport type RemovableFilterTriggerProps = FilterTriggerButtonProps & {\n  onRemove: () => void\n}\n\nexport const RemovableFilterTrigger = ({\n  label,\n  selectedOptionLabels,\n  labelCharacterLimitBeforeTruncate = 50,\n  classNameOverride,\n  onRemove,\n}: RemovableFilterTriggerProps): JSX.Element => {\n  const { buttonProps, buttonRef, menuTriggerState } = useMenuTriggerContext()\n  const ref = useRef<FilterTriggerRef>({ triggerRef: buttonRef })\n\n  return (\n    <FilterButtonRemovable\n      ref={ref}\n      classNameOverride={classNameOverride}\n      triggerButtonProps={{\n        ...buttonProps,\n        label,\n        selectedValue: getTruncatedLabels(\n          selectedOptionLabels,\n          labelCharacterLimitBeforeTruncate\n        ),\n        isOpen: menuTriggerState.isOpen,\n      }}\n      removeButtonProps={{\n        onClick: onRemove,\n      }}\n    />\n  )\n}\n\nRemovableFilterTrigger.displayName = \"FilterMultiSelect.RemovableTrigger\"\n"],"names":["RemovableFilterTrigger","_a","label","selectedOptionLabels","_b","labelCharacterLimitBeforeTruncate","classNameOverride","onRemove","_c","useMenuTriggerContext","buttonProps","buttonRef","menuTriggerState","ref","useRef","triggerRef","React","createElement","FilterButtonRemovable","triggerButtonProps","__assign","selectedValue","getTruncatedLabels","isOpen","removeButtonProps","onClick","displayName"],"mappings":";;;;;;;MAWaA,sBAAsB;EAAA,MAAtBA,sBAAsB,GAAG,SAAAA,CAACC,EAMT,EAAA;IAL5B,IAAAC,KAAK,WAAA;MACLC,oBAAoB,GAAAF,EAAA,CAAAE,oBAAA;MACpBC,yCAAsC;MAAtCC,iCAAiC,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA;MACtCE,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACjBC,QAAQ,GAAAN,EAAA,CAAAM,QAAA;IAEF,IAAAC,EAA+C,GAAAC,qBAAqB,EAAE;MAApEC,WAAW,GAAAF,EAAA,CAAAE,WAAA;MAAEC,SAAS,GAAAH,EAAA,CAAAG,SAAA;MAAEC,gBAAgB,GAAAJ,EAAA,CAAAI,gBAA4B;IAC5E,IAAMC,GAAG,GAAGC,MAAM,CAAmB;MAAEC,UAAU,EAAEJ;IAAW,CAAA,CAAC;IAE/D,oBACEK,KAAA,CAAAC,aAAA,CAACC,qBAAqB,EAAA;MACpBL,GAAG,EAAEA,GAAG;MACRP,iBAAiB,EAAEA,iBAAiB;MACpCa,kBAAkB,EAAAC,QAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EACbV,WAAW,CACd,EAAA;QAAAR,KAAK,EAAAA,KAAA;QACLmB,aAAa,EAAEC,kBAAkB,CAC/BnB,oBAAoB,EACpBE,iCAAiC,CAClC;QACDkB,MAAM,EAAEX,gBAAgB,CAACW;MAAM,CAAA,CAAA;MAEjCC,iBAAiB,EAAE;QACjBC,OAAO,EAAElB;MACV;IAAA,CAAA,CACD;EAEN,CAAC;EAEDP,sBAAsB,CAAC0B,WAAW,GAAG,oCAAoC;EAAA,OA9B5D1B,sBAAsB;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/utils/getSelectedOptionKeys.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSelectedOptionKeys.mjs","sources":["../../../../../src/Filter/FilterMultiSelect/utils/getSelectedOptionKeys.ts"],"sourcesContent":["import { Key, Selection } from \"@react-types/shared\"\nimport { ItemType } from \"../types\"\n\nexport const getSelectedOptionKeys = (\n  keys?: Selection,\n  items?: ItemType[]\n): Key[] => {\n  if (!keys || !items) {\n    return []\n  }\n\n  if (keys === \"all\") {\n    return items.map(item => item.value)\n  }\n\n  return Array.from(keys)\n}\n"],"names":["getSelectedOptionKeys","keys","items","map","item","value","Array","from"],"mappings":"AAGa,IAAAA,qBAAqB,GAAG,SAAAA,CACnCC,IAAgB,EAChBC,KAAkB,EAAA;EAElB,IAAI,CAACD,IAAI,IAAI,CAACC,KAAK,EAAE;IACnB,OAAO,EAAE;EACV;EAED,IAAID,IAAI,KAAK,KAAK,EAAE;IAClB,OAAOC,KAAK,CAACC,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAI,OAAAA,IAAI,CAACC,KAAK;IAAV,CAAU,CAAC;EACrC;EAED,OAAOC,KAAK,CAACC,IAAI,CAACN,IAAI,CAAC;AACzB,CAAA;"}

package/dist/esm/Filter/FilterMultiSelect/utils/getSelectedOptionLabels.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSelectedOptionLabels.mjs","sources":["../../../../../src/Filter/FilterMultiSelect/utils/getSelectedOptionLabels.ts"],"sourcesContent":["import { Selection } from \"@react-types/shared\"\nimport { ItemType } from \"../types\"\n\nexport const getSelectedOptionLabels = (\n  keys?: Selection,\n  items?: ItemType[]\n): string[] => {\n  if (!keys || !items) {\n    return []\n  }\n\n  if (keys === \"all\") {\n    return items.map(item => item.label)\n  }\n\n  return Array.from(keys)\n    .map(key => items.find(item => item.value === key)?.label ?? \"\")\n    .filter(item => item !== \"\")\n}\n"],"names":["getSelectedOptionLabels","keys","items","map","item","label","Array","from","key","_a","_b","find","value","filter"],"mappings":"AAGa,IAAAA,uBAAuB,GAAG,SAAAA,CACrCC,IAAgB,EAChBC,KAAkB,EAAA;EAElB,IAAI,CAACD,IAAI,IAAI,CAACC,KAAK,EAAE;IACnB,OAAO,EAAE;EACV;EAED,IAAID,IAAI,KAAK,KAAK,EAAE;IAClB,OAAOC,KAAK,CAACC,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAI,OAAAA,IAAI,CAACC,KAAK;IAAV,CAAU,CAAC;EACrC;EAED,OAAOC,KAAK,CAACC,IAAI,CAACN,IAAI,CAAC,CACpBE,GAAG,CAAC,UAAAK,GAAG,EAAA;IAAA,IAAAC,EAAA,EAAAC,EAAA;IAAI,OAAA,CAAAA,EAAA,GAAA,CAAAD,EAAA,GAAAP,KAAK,CAACS,IAAI,CAAC,UAAAP,IAAI,EAAA;MAAI,OAAAA,IAAI,CAACQ,KAAK,KAAKJ,GAAG;IAAlB,CAAkB,CAAC,MAAA,IAAA,IAAAC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEJ,KAAK,MAAA,IAAA,IAAAK,EAAA,KAAA,KAAA,CAAA,GAAAA,EAAA,GAAI,EAAE;GAAA,CAAC,CAC/DG,MAAM,CAAC,UAAAT,IAAI,EAAI;IAAA,OAAAA,IAAI,KAAK,EAAE;EAAA,CAAA,CAAC;AAChC,CAAA;"}

package/dist/esm/Filter/FilterMultiSelect/utils/getTruncatedLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTruncatedLabel.mjs","sources":["../../../../../src/Filter/FilterMultiSelect/utils/getTruncatedLabel.ts"],"sourcesContent":["const CONNECTOR = \", \"\n\nconst truncateByCharacterLimit = (\n  labels: string[],\n  limit: number,\n  labelsTruncatedCount = 0\n): string => {\n  if (labels.length === 1 || labels.join(\"\").replace(/,/g, \"\").length < limit) {\n    const moreIndicator =\n      labelsTruncatedCount > 0 ? ` + ${labelsTruncatedCount} more` : \"\"\n    return `${labels.join(CONNECTOR)}${moreIndicator}`\n  }\n\n  const newLabels = labels.slice(0, labels.length - 1)\n  return truncateByCharacterLimit(newLabels, limit, labelsTruncatedCount + 1)\n}\n\nexport const getTruncatedLabels = (labels: string[], limit: number): string =>\n  truncateByCharacterLimit(labels, limit)\n"],"names":["CONNECTOR","truncateByCharacterLimit","labels","limit","labelsTruncatedCount","length","join","replace","moreIndicator","concat","newLabels","slice","getTruncatedLabels"],"mappings":"AAAA,IAAMA,SAAS,GAAG,IAAI;AAEtB,IAAMC,wBAAwB,GAAG,SAAAA,CAC/BC,MAAgB,EAChBC,KAAa,EACbC,oBAAwB,EAAA;EAAxB,IAAAA,oBAAA,KAAA,KAAA,CAAA,EAAA;IAAAA,oBAAwB,GAAA,CAAA;EAAA;EAExB,IAAIF,MAAM,CAACG,MAAM,KAAK,CAAC,IAAIH,MAAM,CAACI,IAAI,CAAC,EAAE,CAAC,CAACC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAACF,MAAM,GAAGF,KAAK,EAAE;IAC3E,IAAMK,aAAa,GACjBJ,oBAAoB,GAAG,CAAC,GAAG,KAAA,CAAAK,MAAA,CAAML,oBAAoB,EAAO,OAAA,CAAA,GAAG,EAAE;IACnE,OAAO,EAAA,CAAAK,MAAA,CAAGP,MAAM,CAACI,IAAI,CAACN,SAAS,CAAC,CAAA,CAAAS,MAAA,CAAGD,aAAa,CAAE;EACnD;EAED,IAAME,SAAS,GAAGR,MAAM,CAACS,KAAK,CAAC,CAAC,EAAET,MAAM,CAACG,MAAM,GAAG,CAAC,CAAC;EACpD,OAAOJ,wBAAwB,CAACS,SAAS,EAAEP,KAAK,EAAEC,oBAAoB,GAAG,CAAC,CAAC;AAC7E,CAAC;AAEY,IAAAQ,kBAAkB,GAAG,SAAAA,CAACV,MAAgB,EAAEC,KAAa,EAAA;EAChE,OAAAF,wBAAwB,CAACC,MAAM,EAAEC,KAAK,CAAC;AAAvC,CAAA;"}

package/dist/esm/Filter/FilterSelect/FilterSelect.mjs

@@ -0,0 +1,86 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState } from 'react';
+import { useButton } from '@react-aria/button';
+import { useSelect, HiddenSelect } from '@react-aria/select';
+import { useSelectState } from '@react-stately/select';
+import { Filter } from '../Filter/Filter.mjs';
+import { FilterContents } from '../Filter/subcomponents/FilterContents/FilterContents.mjs';
+import { SelectProvider } from '../../__future__/Select/context/SelectContext.mjs';
+import '../../__future__/Select/subcomponents/ListBox/ListBox.mjs';
+import { ListBoxSection } from '../../__future__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs';
+import { ListItem } from '../../__future__/Select/subcomponents/ListItem/ListItem.mjs';
+import '../../__future__/Select/subcomponents/ListItems/ListItems.mjs';
+import { Option } from '../../__future__/Select/subcomponents/Option/Option.mjs';
+import '../../__future__/Select/subcomponents/Overlay/Overlay.mjs';
+import { SectionDivider } from '../../__future__/Select/subcomponents/SectionDivider/SectionDivider.mjs';
+import { SelectPopoverContents } from '../../__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs';
+import '../../__future__/Select/subcomponents/SelectToggle/SelectToggle.mjs';
+import { getDisabledKeysFromItems } from '../../__future__/Select/utils/getDisabledKeysFromItems.mjs';
+import { transformSelectItemToCollectionElement } from '../../__future__/Select/utils/transformSelectItemToCollectionElement.mjs';
+import styles from './FilterSelect.module.scss.mjs';
+const FilterSelect = /*#__PURE__*/function () {
+  const FilterSelect = function (_a) {
+    var isOpen = _a.isOpen,
+      setIsOpen = _a.setIsOpen,
+      renderTrigger = _a.renderTrigger,
+      label = _a.label,
+      children = _a.children,
+      items = _a.items,
+      classNameOverride = _a.classNameOverride,
+      selectedKey = _a.selectedKey,
+      restProps = __rest(_a, ["isOpen", "setIsOpen", "renderTrigger", "label", "children", "items", "classNameOverride", "selectedKey"]);
+    // Ref will be populated by Filter
+    var _b = useState({
+        current: null
+      }),
+      triggerRef = _b[0],
+      setTriggerRef = _b[1];
+    var disabledKeys = getDisabledKeysFromItems(items);
+    var ariaSelectProps = __assign({
+      label: label,
+      items: items,
+      children: transformSelectItemToCollectionElement,
+      isOpen: isOpen,
+      onOpenChange: setIsOpen,
+      disabledKeys: disabledKeys,
+      selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey
+    }, restProps);
+    var state = useSelectState(ariaSelectProps);
+    var _c = useSelect(ariaSelectProps, state, triggerRef),
+      triggerProps = _c.triggerProps,
+      menuProps = _c.menuProps;
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenSelect, {
+      label: label,
+      state: state,
+      triggerRef: triggerRef
+    }), /*#__PURE__*/React.createElement(Filter, {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
+      renderTrigger: function () {
+        var _a;
+        return renderTrigger(__assign({
+          selectedValue: ((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.textValue) || undefined,
+          label: label,
+          isOpen: isOpen
+        }, buttonProps));
+      },
+      onMount: setTriggerRef,
+      classNameOverride: classNameOverride
+    }, /*#__PURE__*/React.createElement(FilterContents, {
+      classNameOverride: styles.filterContents
+    }, /*#__PURE__*/React.createElement(SelectProvider, {
+      state: state
+    }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
+      menuProps: menuProps
+    }, children)))));
+  };
+  FilterSelect.displayName = "FilterSelect";
+  FilterSelect.Section = ListBoxSection;
+  FilterSelect.SectionDivider = SectionDivider;
+  FilterSelect.Option = Option;
+  FilterSelect.ItemDefaultRender = ListItem;
+  return FilterSelect;
+}();
+export { FilterSelect };
+//# sourceMappingURL=FilterSelect.mjs.map

package/dist/esm/Filter/FilterSelect/FilterSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSelect.mjs","sources":["../../../../src/Filter/FilterSelect/FilterSelect.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { useButton } from \"@react-aria/button\"\nimport { HiddenSelect, useSelect } from \"@react-aria/select\"\nimport {\n  useSelectState,\n  SelectProps as AriaSelectProps,\n} from \"@react-stately/select\"\nimport { Filter, FilterContents } from \"~components/Filter/Filter\"\nimport { FilterButtonProps } from \"~components/Filter/FilterButton\"\nimport { SelectProvider } from \"~components/__future__/Select/context\"\nimport {\n  ListBoxSection,\n  ListItem,\n  Option,\n  SectionDivider,\n  SelectPopoverContents,\n  SelectPopoverContentsProps,\n} from \"~components/__future__/Select/subcomponents\"\nimport { getDisabledKeysFromItems } from \"~components/__future__/Select/utils/getDisabledKeysFromItems\"\nimport { transformSelectItemToCollectionElement } from \"~components/__future__/Select/utils/transformSelectItemToCollectionElement\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { SelectItem, SelectOption } from \"./types\"\nimport styles from \"./FilterSelect.module.scss\"\n\ntype OmittedAriaSelectProps =\n  | \"label\"\n  | \"children\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"defaultOpen\"\n  | \"items\"\n\nexport type FilterSelectProps<Option extends SelectOption = SelectOption> = {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  renderTrigger: (triggerButtonProps: FilterButtonProps) => JSX.Element\n  label: string\n  children?: SelectPopoverContentsProps<Option>[\"children\"]\n  items: Array<SelectItem<Option>>\n} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>\n\nexport const FilterSelect = <Option extends SelectOption = SelectOption>({\n  isOpen,\n  setIsOpen,\n  renderTrigger,\n  label,\n  children,\n  items,\n  classNameOverride,\n  selectedKey,\n  ...restProps\n}: FilterSelectProps<Option>): JSX.Element => {\n  // Ref will be populated by Filter\n  const [triggerRef, setTriggerRef] = useState<\n    React.RefObject<HTMLButtonElement>\n  >({ current: null })\n\n  const disabledKeys = getDisabledKeysFromItems(items)\n\n  const ariaSelectProps: AriaSelectProps<SelectItem<Option>> = {\n    label,\n    items,\n    children: transformSelectItemToCollectionElement,\n    isOpen,\n    onOpenChange: setIsOpen,\n    disabledKeys,\n    selectedKey:\n      typeof selectedKey === \"number\" ? selectedKey.toString() : selectedKey,\n    ...restProps,\n  }\n\n  const state = useSelectState(ariaSelectProps)\n\n  const { triggerProps, menuProps } = useSelect(\n    ariaSelectProps,\n    state,\n    triggerRef\n  )\n\n  const { buttonProps } = useButton(triggerProps, triggerRef)\n\n  return (\n    <>\n      <HiddenSelect label={label} state={state} triggerRef={triggerRef} />\n      <Filter\n        isOpen={isOpen}\n        setIsOpen={setIsOpen}\n        renderTrigger={(): JSX.Element =>\n          renderTrigger({\n            selectedValue: state.selectedItem?.textValue || undefined,\n            label,\n            isOpen,\n            ...buttonProps,\n          })\n        }\n        onMount={setTriggerRef}\n        classNameOverride={classNameOverride}\n      >\n        <FilterContents classNameOverride={styles.filterContents}>\n          <SelectProvider<Option> state={state}>\n            <SelectPopoverContents menuProps={menuProps}>\n              {children}\n            </SelectPopoverContents>\n          </SelectProvider>\n        </FilterContents>\n      </Filter>\n    </>\n  )\n}\n\nFilterSelect.displayName = \"FilterSelect\"\n\nFilterSelect.Section = ListBoxSection\nFilterSelect.SectionDivider = SectionDivider\nFilterSelect.Option = Option\nFilterSelect.ItemDefaultRender = ListItem\n"],"names":["FilterSelect","_a","isOpen","setIsOpen","renderTrigger","label","children","items","classNameOverride","selectedKey","restProps","__rest","_b","useState","current","triggerRef","setTriggerRef","disabledKeys","getDisabledKeysFromItems","ariaSelectProps","__assign","transformSelectItemToCollectionElement","onOpenChange","toString","state","useSelectState","_c","useSelect","triggerProps","menuProps","buttonProps","useButton","React","createElement","Fragment","HiddenSelect","Filter","selectedValue","selectedItem","textValue","undefined","onMount","FilterContents","styles","filterContents","SelectProvider","SelectPopoverContents","displayName","Section","ListBoxSection","SectionDivider","Option","ItemDefaultRender","ListItem"],"mappings":"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"}

package/dist/esm/Filter/FilterSelect/FilterSelect.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "filterContents": "FilterSelect-module_filterContents__p7Kgc"
+};
+export { styles as default };
+//# sourceMappingURL=FilterSelect.module.scss.mjs.map

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -0,0 +1,155 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Media from 'react-media';
+import { Button } from '../Button/Button/Button.mjs';
+import '../Button/IconButton/IconButton.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
+import { Text } from '../Text/Text.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import styles from './GuidanceBlock.module.scss.mjs';
+var WithTooltip = function (_a) {
+  var tooltipProps = _a.tooltipProps,
+    children = _a.children;
+  return !!tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
+ */
+const GuidanceBlock = /*#__PURE__*/function () {
+  const GuidanceBlock = function (_a) {
+    var _b, _c, _d, _e;
+    var _f = _a.layout,
+      layout = _f === void 0 ? "default" : _f,
+      _g = _a.variant,
+      variant = _g === void 0 ? "default" : _g,
+      _h = _a.withActionButtonArrow,
+      withActionButtonArrow = _h === void 0 ? true : _h,
+      _j = _a.noMaxWidth,
+      noMaxWidth = _j === void 0 ? false : _j,
+      _k = _a.illustrationType,
+      illustrationType = _k === void 0 ? "spot" : _k,
+      _l = _a.smallScreenTextAlignment,
+      smallScreenTextAlignment = _l === void 0 ? "center" : _l,
+      actions = _a.actions,
+      illustration = _a.illustration,
+      secondaryDismiss = _a.secondaryDismiss,
+      restProps = __rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
+    var _m = useState(false),
+      hidden = _m[0],
+      setHidden = _m[1];
+    var _o = useState(false),
+      removed = _o[0],
+      setRemoved = _o[1];
+    var _p = useState(""),
+      mediaQueryLayout = _p[0],
+      setMediaQueryLayout = _p[1];
+    var containerRef = /*#__PURE__*/React.createRef();
+    useEffect(function () {
+      if (layout === "inline" || layout === "stacked") {
+        containerQuery();
+      }
+    }, []);
+    var handleDismissBanner = function () {
+      var _a;
+      setHidden(true);
+      (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
+    };
+    var onTransitionEnd = function (e) {
+      // Be careful: this assumes the final CSS property to be animated is "margin-top".
+      if (hidden && e.propertyName === "margin-top") {
+        setRemoved(true);
+      }
+    };
+    var containerQuery = function () {
+      var resizeObserver = new ResizeObserver(function (entries) {
+        if (entries.length === 1) {
+          handleMediaQueryLayout(entries[0].contentRect.width);
+        }
+      });
+      resizeObserver.observe(containerRef.current);
+    };
+    var handleMediaQueryLayout = function (width) {
+      if (width <= 320) {
+        setMediaQueryLayout("centerContent");
+      } else {
+        setMediaQueryLayout("");
+      }
+    };
+    var marginTop = function () {
+      if (hidden && containerRef.current) {
+        return -containerRef.current.clientHeight + "px";
+      }
+      return "0";
+    };
+    if (removed) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    var componentIsMobile = mediaQueryLayout.includes("centerContent");
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], hidden && styles.hidden, mediaQueryLayout === "centerContent" && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === "scene" && styles.hasSceneIllustration, smallScreenTextAlignment === "left" && styles.smallScreenTextAlignment),
+      style: {
+        marginTop: marginTop()
+      },
+      ref: containerRef,
+      onTransitionEnd: onTransitionEnd
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.illustrationWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.illustration
+    }, illustrationType === "scene" ? /*#__PURE__*/React.cloneElement(illustration, {
+      enableAspectRatio: true
+    }) : illustration)), /*#__PURE__*/React.createElement("div", {
+      className: styles.descriptionAndActions
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.descriptionContainer
+    }, "content" in restProps && restProps.content, "text" in restProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.headingWrapper
+    }, /*#__PURE__*/React.createElement(Heading, {
+      tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
+      variant: "heading-3"
+    }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), /*#__PURE__*/React.createElement(Text, {
+      tag: "p",
+      variant: "body"
+    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) && /*#__PURE__*/React.createElement(Media, {
+      query: "(max-width: 767px)"
+    }, function (isMobile) {
+      var _a;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames({
+          noRightMargin: isMobile || componentIsMobile,
+          rightMargin: !(isMobile || componentIsMobile) && layout === "default"
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && styles.secondaryAction)
+      }, /*#__PURE__*/React.createElement(WithTooltip, {
+        tooltipProps: actions.primary.tooltip
+      }, /*#__PURE__*/React.createElement(Button, __assign({
+        icon: withActionButtonArrow ? /*#__PURE__*/React.createElement(ArrowForwardIcon, {
+          role: "presentation"
+        }) : undefined,
+        iconPosition: "end"
+      }, actions.primary, {
+        fullWidth: isMobile || componentIsMobile
+      }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && /*#__PURE__*/React.createElement(WithTooltip, {
+        tooltipProps: actions.secondary.tooltip
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.secondaryAction
+      }, /*#__PURE__*/React.createElement(Button, __assign({
+        secondary: true
+      }, actions.secondary, {
+        onClick: secondaryDismiss ? function () {
+          return handleDismissBanner();
+        } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
+        fullWidth: isMobile || componentIsMobile
+      }))))));
+    })));
+  };
+  GuidanceBlock.displayName = "GuidanceBlock";
+  return GuidanceBlock;
+}();
+export { GuidanceBlock };
+//# sourceMappingURL=GuidanceBlock.mjs.map

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuidanceBlock.mjs","sources":["../../../src/GuidanceBlock/GuidanceBlock.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport classNames from \"classnames\"\nimport Media from \"react-media\"\nimport { Button, ButtonProps } from \"~components/Button\"\nimport { Heading, HeadingProps } from \"~components/Heading\"\nimport { ArrowForwardIcon } from \"~components/Icon\"\nimport { SceneProps, SpotProps } from \"~components/Illustration\"\nimport { Text } from \"~components/Text\"\nimport { Tooltip, TooltipProps } from \"~components/Tooltip\"\nimport { VariantType } from \"./types\"\nimport styles from \"./GuidanceBlock.module.scss\"\n\nexport type ActionProps = ButtonProps & {\n  tooltip?: TooltipProps\n}\n\ntype LayoutType = \"default\" | \"inline\" | \"stacked\"\n\ntype IllustrationType = \"spot\" | \"scene\"\n\ntype TextAlignment = \"center\" | \"left\"\n\ntype GuidanceBlockActions = {\n  primary: ActionProps\n  secondary?: ActionProps\n  dismiss?: {\n    onClick: () => void\n  }\n}\n\ntype BaseGuidanceBlockProps = {\n  layout?: LayoutType\n  illustration: React.ReactElement<SpotProps | SceneProps>\n  /*\n   * Sets how the width and aspect ratio will respond to the Illustration passed in.\n   */\n  illustrationType?: IllustrationType\n\n  smallScreenTextAlignment?: TextAlignment\n  actions?: GuidanceBlockActions\n  /*\n   * This will still require the secondary object to be passed into the actions ie: {secondary: { label: \"Dismiss action\" }}`\n   */\n  secondaryDismiss?: boolean\n  variant?: VariantType\n  withActionButtonArrow?: boolean\n  noMaxWidth?: boolean\n}\n\ntype GuidanceBlockWithText = {\n  text: {\n    title: string\n    titleTag?: HeadingProps[\"tag\"]\n    description: string | React.ReactNode\n  }\n} & BaseGuidanceBlockProps\n\ntype GuidanceBlockPropsWithContent = {\n  content: React.ReactElement\n} & BaseGuidanceBlockProps\n\nexport type GuidanceBlockProps =\n  | GuidanceBlockWithText\n  | GuidanceBlockPropsWithContent\n\nexport type GuidanceBlockState = {\n  hidden: boolean\n  removed: boolean\n  mediaQueryLayout: string\n}\n\ntype WithTooltipProps = {\n  children: React.ReactNode\n  tooltipProps?: TooltipProps\n}\n\nconst WithTooltip = ({\n  tooltipProps,\n  children,\n}: WithTooltipProps): JSX.Element =>\n  !!tooltipProps ? (\n    <Tooltip {...tooltipProps}>{children}</Tooltip>\n  ) : (\n    <>{children}</>\n  )\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}\n */\nexport const GuidanceBlock = ({\n  layout = \"default\",\n  variant = \"default\",\n  withActionButtonArrow = true,\n  noMaxWidth = false,\n  illustrationType = \"spot\",\n  smallScreenTextAlignment = \"center\",\n  actions,\n  illustration,\n  secondaryDismiss,\n  ...restProps\n}: GuidanceBlockProps): JSX.Element => {\n  const [hidden, setHidden] = useState<boolean>(false)\n  const [removed, setRemoved] = useState<boolean>(false)\n  const [mediaQueryLayout, setMediaQueryLayout] = useState<string>(\"\")\n\n  const containerRef = React.createRef<HTMLDivElement>()\n\n  useEffect(() => {\n    if (layout === \"inline\" || layout === \"stacked\") {\n      containerQuery()\n    }\n  }, [])\n\n  const handleDismissBanner = (): void => {\n    setHidden(true)\n    actions?.dismiss?.onClick()\n  }\n\n  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {\n    // Be careful: this assumes the final CSS property to be animated is \"margin-top\".\n    if (hidden && e.propertyName === \"margin-top\") {\n      setRemoved(true)\n    }\n  }\n\n  const containerQuery = (): void => {\n    const resizeObserver = new ResizeObserver(entries => {\n      if (entries.length === 1) {\n        handleMediaQueryLayout(entries[0].contentRect.width)\n      }\n    })\n\n    resizeObserver.observe(containerRef.current as HTMLElement)\n  }\n\n  const handleMediaQueryLayout = (width: number): void => {\n    if (width <= 320) {\n      setMediaQueryLayout(\"centerContent\")\n    } else {\n      setMediaQueryLayout(\"\")\n    }\n  }\n\n  const marginTop = (): string => {\n    if (hidden && containerRef.current) {\n      return -containerRef.current.clientHeight + \"px\"\n    }\n\n    return \"0\"\n  }\n\n  if (removed) {\n    return <></>\n  }\n\n  const componentIsMobile = mediaQueryLayout.includes(\"centerContent\")\n\n  return (\n    <div\n      className={classNames(\n        styles.banner,\n        variant && styles[variant],\n        layout && styles[layout],\n        hidden && styles.hidden,\n        mediaQueryLayout === \"centerContent\" && styles.centerContent,\n        noMaxWidth && styles.noMaxWidth,\n        illustrationType === \"scene\" && styles.hasSceneIllustration,\n        smallScreenTextAlignment === \"left\" && styles.smallScreenTextAlignment\n      )}\n      style={{\n        marginTop: marginTop(),\n      }}\n      ref={containerRef}\n      onTransitionEnd={onTransitionEnd}\n    >\n      <div className={styles.illustrationWrapper}>\n        <div className={styles.illustration}>\n          {illustrationType === \"scene\"\n            ? React.cloneElement(illustration, { enableAspectRatio: true })\n            : illustration}\n        </div>\n      </div>\n      <div className={styles.descriptionAndActions}>\n        <div className={styles.descriptionContainer}>\n          {\"content\" in restProps && restProps.content}\n          {\"text\" in restProps && (\n            <>\n              <div className={styles.headingWrapper}>\n                <Heading\n                  tag={restProps?.text?.titleTag ?? \"h3\"}\n                  variant=\"heading-3\"\n                >\n                  {restProps?.text?.title}\n                </Heading>\n              </div>\n              <Text tag=\"p\" variant=\"body\">\n                {restProps?.text?.description}\n              </Text>\n            </>\n          )}\n        </div>\n        {actions?.primary && (\n          <Media query=\"(max-width: 767px)\">\n            {(isMobile: boolean): JSX.Element => (\n              <div\n                className={classNames({\n                  noRightMargin: isMobile || componentIsMobile,\n                  rightMargin:\n                    !(isMobile || componentIsMobile) && layout === \"default\",\n                })}\n              >\n                <div\n                  className={classNames(\n                    styles.buttonContainer,\n                    actions?.secondary && styles.secondaryAction\n                  )}\n                >\n                  <WithTooltip tooltipProps={actions.primary.tooltip}>\n                    <Button\n                      icon={\n                        withActionButtonArrow ? (\n                          <ArrowForwardIcon role=\"presentation\" />\n                        ) : undefined\n                      }\n                      iconPosition=\"end\"\n                      {...actions.primary}\n                      fullWidth={isMobile || componentIsMobile}\n                    />\n                  </WithTooltip>\n\n                  {actions?.secondary && (\n                    <WithTooltip tooltipProps={actions.secondary.tooltip}>\n                      <div className={styles.secondaryAction}>\n                        <Button\n                          secondary\n                          {...actions.secondary}\n                          onClick={\n                            secondaryDismiss\n                              ? (): void => handleDismissBanner()\n                              : actions?.secondary?.onClick\n                          }\n                          fullWidth={isMobile || componentIsMobile}\n                        />\n                      </div>\n                    </WithTooltip>\n                  )}\n                </div>\n              </div>\n            )}\n          </Media>\n        )}\n      </div>\n    </div>\n  )\n}\n\nGuidanceBlock.displayName = \"GuidanceBlock\"\n"],"names":["WithTooltip","_a","tooltipProps","children","React","createElement","Tooltip","__assign","Fragment","GuidanceBlock","_f","layout","_g","variant","_h","withActionButtonArrow","_j","noMaxWidth","_k","illustrationType","_l","smallScreenTextAlignment","actions","illustration","secondaryDismiss","restProps","__rest","_m","useState","hidden","setHidden","_o","removed","setRemoved","_p","mediaQueryLayout","setMediaQueryLayout","containerRef","createRef","useEffect","containerQuery","handleDismissBanner","dismiss","onClick","onTransitionEnd","e","propertyName","resizeObserver","ResizeObserver","entries","length","handleMediaQueryLayout","contentRect","width","observe","current","marginTop","clientHeight","componentIsMobile","includes","className","classNames","styles","banner","centerContent","hasSceneIllustration","style","ref","illustrationWrapper","cloneElement","enableAspectRatio","descriptionAndActions","descriptionContainer","content","headingWrapper","Heading","tag","_b","text","titleTag","_c","_d","title","Text","_e","description","primary","Media","query","isMobile","noRightMargin","rightMargin","buttonContainer","secondary","secondaryAction","tooltip","Button","icon","ArrowForwardIcon","role","undefined","iconPosition","fullWidth","displayName"],"mappings":"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"}