@kaizen/components 1.66.0 → 1.67.0

package/dist/esm/DateRangePicker/DateRangePicker.mjs

@@ -11,10 +11,9 @@ import 'date-fns';
 import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
 import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
 import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { DateStartIcon } from '../Icon/DateStartIcon.mjs';
 import { Label } from '../Label/Label.mjs';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './DateRangePicker.module.scss.mjs';
 
 /**
@@ -117,8 +116,10 @@ const DateRangePicker = /*#__PURE__*/function () {
       "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
     }, inputProps), /*#__PURE__*/React.createElement("div", {
       className: styles.startIconAdornment
-    }, /*#__PURE__*/React.createElement(DateStartIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "today",
+      isPresentational: true,
+      isFilled: true
     })), /*#__PURE__*/React.createElement("span", {
       className: styles.value
     }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && ( /*#__PURE__*/React.createElement(FocusOn, {

package/dist/esm/ErrorPage/ErrorPage.mjs

@@ -3,13 +3,11 @@ import React from 'react';
 import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { BrandMoment } from '../BrandMoment/BrandMoment.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowRightIcon } from '../Icon/ArrowRightIcon.mjs';
-import { EmailIcon } from '../Icon/EmailIcon.mjs';
 import '../Illustration/subcomponents/Base/Base.mjs';
 import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
 import { BrandMomentError } from '../Illustration/Scene/Scene.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { useErrorMessages } from './hooks/useErrorMessages.mjs';
 import styles from './ErrorPage.module.scss.mjs';
 var getMailToHref = function (code) {
@@ -62,9 +60,11 @@ const ErrorPage = /*#__PURE__*/function () {
       }),
       variant: "warning",
       primaryAction: __assign(__assign({}, actions.primary), {
-        icon: /*#__PURE__*/React.createElement(ArrowRightIcon, {
-          role: "presentation"
-        }),
+        icon: ( /*#__PURE__*/React.createElement(Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
+        })),
         iconPosition: "end",
         label: formatMessage({
           id: "kzErrorPage.goToHome",
@@ -73,8 +73,10 @@ const ErrorPage = /*#__PURE__*/function () {
         })
       }),
       secondaryAction: __assign(__assign({}, actions.secondary), {
-        icon: /*#__PURE__*/React.createElement(EmailIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "mail",
+          isPresentational: true,
+          isFilled: true
         }),
         label: formatMessage({
           id: "kzErrorPage",

package/dist/esm/FieldMessage/FieldMessage.mjs

@@ -1,10 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { CautionWhiteIcon } from '../Icon/CautionWhiteIcon.mjs';
-import { ExclamationWhiteIcon } from '../Icon/ExclamationWhiteIcon.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './FieldMessage.module.scss.mjs';
 const FieldMessage = /*#__PURE__*/function () {
   const FieldMessage = function (_a) {
@@ -22,15 +20,11 @@ const FieldMessage = /*#__PURE__*/function () {
       className: classnames(styles.message, styles[status], classNameOverride, reversed && styles.reversed, position === "bottom" && styles.positionBottom, position === "top" && styles.positionTop)
     }, restProps), (status === "error" || status === "caution") && ( /*#__PURE__*/React.createElement("span", {
       className: styles.warningIcon
-    }, status === "error" ? ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-      role: "img",
-      inheritSize: false,
-      "aria-label": "".concat(status, " message")
-    })) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
-      role: "img",
-      inheritSize: false,
-      "aria-label": "".concat(status, " message")
-    })))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: status === "error" ? "error" : "warning",
+      isFilled: true,
+      alt: "".concat(status, " message")
+    }))), /*#__PURE__*/React.createElement("div", {
       className: styles.message
     }, /*#__PURE__*/React.createElement(Text, {
       variant: "small",

package/dist/esm/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.mjs

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
-import 'tslib';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { AddIcon } from '../../../../Icon/AddIcon.mjs';
+import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { Menu } from '../../../../__actions__/Menu/v1/Menu.mjs';
 import { MenuList } from '../../../../__actions__/Menu/v1/subcomponents/MenuList/MenuList.mjs';
@@ -25,8 +23,9 @@ const AddFiltersMenu = /*#__PURE__*/function () {
         label: menuButtonLabel,
         secondary: true,
         disabled: inactiveFilters.length === 0,
-        icon: /*#__PURE__*/React.createElement(AddIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "add",
+          isPresentational: true
         })
       })
     }, /*#__PURE__*/React.createElement(MenuList, null, inactiveFilters.map(function (_a) {

package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.mjs

@@ -1,9 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import styles from './FilterButton.module.scss.mjs';
@@ -29,11 +27,10 @@ const FilterButton = /*#__PURE__*/function () {
       className: styles.hasSelectedValues
     }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", {
       className: styles.labelSeparator
-    }, ":")), /*#__PURE__*/React.createElement("span", null, selectedValuesLabel))) : label), isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    })));
+    }, ":")), /*#__PURE__*/React.createElement("span", null, selectedValuesLabel))) : label), /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true
+    }));
   });
   FilterButton.displayName = "FilterButton";
   return FilterButton;

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ClearIcon } from '../../../Icon/ClearIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButton } from '../FilterButton/FilterButton.mjs';
@@ -33,9 +32,10 @@ const FilterButtonRemovable = /*#__PURE__*/function () {
       position: "below"
     }, /*#__PURE__*/React.createElement(FilterButtonBase, __assign({
       ref: removeButtonRef
-    }, removeButtonProps), /*#__PURE__*/React.createElement(ClearIcon, {
-      role: "img",
-      "aria-label": removeButtonLabel
+    }, removeButtonProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel",
+      alt: removeButtonLabel,
+      isFilled: true
     }))));
   });
   FilterButtonRemovable.displayName = "FilterButtonRemovable";

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

@@ -5,9 +5,8 @@ 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 { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
 import styles from './MultiSelectOption.module.scss.mjs';
@@ -38,8 +37,9 @@ const MultiSelectOption = /*#__PURE__*/function () {
       "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"
+    }, isSelected && /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      isPresentational: true
     })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && ( /*#__PURE__*/React.createElement("span", {
       id: countElementId,
       className: styles.badgeContainer

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -3,9 +3,8 @@ import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Media from 'react-media';
 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 { Icon } from '../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
 import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
@@ -127,8 +126,10 @@ const GuidanceBlock = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(WithTooltip, {
         tooltipProps: actions.primary.tooltip
       }, /*#__PURE__*/React.createElement(Button, __assign({
-        icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-          role: "presentation"
+        icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         })) : undefined,
         iconPosition: "end"
       }, actions.primary, {

package/dist/esm/Illustration/utils/usePausePlay.mjs

@@ -1,8 +1,5 @@
 import React, { useState } from 'react';
-import 'tslib';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { LaunchIcon } from '../../Icon/LaunchIcon.mjs';
-import { PauseIcon } from '../../Icon/PauseIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 var usePausePlay = function (videoRef) {
   var _a = useState(false),
     isPaused = _a[0],
@@ -18,10 +15,10 @@ var usePausePlay = function (videoRef) {
         videoRef.current.pause();
       }
     },
-    icon: isPaused ? ( /*#__PURE__*/React.createElement(LaunchIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(PauseIcon, {
-      role: "presentation"
+    icon: ( /*#__PURE__*/React.createElement(Icon, {
+      name: isPaused ? "play_circle" : "pause",
+      isPresentational: true,
+      isFilled: true
     })),
     label: isPaused ? "Play animation" : "Pause animation"
   };

package/dist/esm/Input/InputSearch/InputSearch.mjs

@@ -3,12 +3,12 @@ import React, { useRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { ClearButton } from '../../ClearButton/ClearButton.mjs';
-import { SearchIcon } from '../../Icon/SearchIcon.mjs';
 import '../../Loading/LoadingGraphic/LoadingGraphic.mjs';
 import '../../Loading/LoadingHeading/LoadingHeading.mjs';
 import '../../Loading/LoadingInput/LoadingInput.mjs';
 import '../../Loading/LoadingParagraph/LoadingParagraph.mjs';
 import { LoadingSpinner } from '../../Loading/LoadingSpinner/LoadingSpinner.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from './InputSearch.module.scss.mjs';
 const InputSearch = /*#__PURE__*/function () {
   const InputSearch = function (props) {
@@ -44,8 +44,9 @@ const InputSearch = /*#__PURE__*/function () {
       accessibilityLabel: "",
       size: "sm",
       classNameOverride: styles.loadingSpinner
-    })) : ( /*#__PURE__*/React.createElement(SearchIcon, {
-      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(Icon, {
+      name: "search",
+      isPresentational: true
     }))), /*#__PURE__*/React.createElement("input", __assign({
       ref: inputRef,
       type: "search",

package/dist/esm/LikertScaleLegacy/LikertScaleLegacy.mjs

@@ -1,16 +1,15 @@
 import React, { useState, createRef } from 'react';
 import classnames from 'classnames';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
-import 'tslib';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../Icon/CheckIcon.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import determineSelectionFromKeyPress from './utils/determineSelectionFromKeyPress.mjs';
 import styles from './LikertScaleLegacy.module.scss.mjs';
 var SelectedItemIcon = function () {
-  return /*#__PURE__*/React.createElement(CheckIcon, {
-    role: "presentation",
-    classNameOverride: styles.check
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    isPresentational: true,
+    className: styles.check
   });
 };
 /**

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -2,11 +2,6 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Heading } from '../../Heading/Heading.mjs';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { CautionWhiteIcon } from '../../Icon/CautionWhiteIcon.mjs';
-import { ExclamationWhiteIcon } from '../../Icon/ExclamationWhiteIcon.mjs';
-import { InformationWhiteIcon } from '../../Icon/InformationWhiteIcon.mjs';
-import { SuccessWhiteIcon } from '../../Icon/SuccessWhiteIcon.mjs';
 import { Assertive, Positive, Negative, Informative, Cautionary } from '../../Illustration/Spot/Spot.mjs';
 import '../../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
 import '../../Illustration/Scene/Scene.mjs';
@@ -17,37 +12,47 @@ import { ModalFooter } from '../GenericModal/subcomponents/ModalFooter/ModalFoot
 import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
 import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
 import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from './ConfirmationModal.module.scss.mjs';
-var getIcon = function (variantName, isProminent) {
+var getIconName = function (variantName) {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Cautionary, null)) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "warning";
     case "informative":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Informative, null)) : ( /*#__PURE__*/React.createElement(InformationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "info";
     case "negative":
     case "warning":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Negative, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "error";
     case "positive":
     case "success":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Positive, null)) : ( /*#__PURE__*/React.createElement(SuccessWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "check_circle";
     case "assertive":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Assertive, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "error";
+  }
+};
+var getIcon = function (variantName, isProminent) {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return /*#__PURE__*/React.createElement(Cautionary, null);
+      case "informative":
+        return /*#__PURE__*/React.createElement(Informative, null);
+      case "negative":
+      case "warning":
+        return /*#__PURE__*/React.createElement(Negative, null);
+      case "positive":
+      case "success":
+        return /*#__PURE__*/React.createElement(Positive, null);
+      case "assertive":
+        return /*#__PURE__*/React.createElement(Assertive, null);
+    }
   }
+  var iconName = getIconName(variantName);
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    isPresentational: true,
+    isFilled: true
+  });
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |

package/dist/esm/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.mjs

@@ -1,7 +1,5 @@
 import React from 'react';
-import 'tslib';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CloseIcon } from '../../../../Icon/CloseIcon.mjs';
+import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import { ModalBody } from '../ModalBody/ModalBody.mjs';
 import styles from './ModalHeader.module.scss.mjs';
 import { IconButton } from '../../../../__actions__/Button/v1/IconButton/IconButton.mjs';
@@ -14,8 +12,9 @@ const ModalHeader = /*#__PURE__*/function () {
       className: styles.dismissButton
     }, /*#__PURE__*/React.createElement(IconButton, {
       label: "Dismiss",
-      icon: /*#__PURE__*/React.createElement(CloseIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "close",
+        isPresentational: true
       }),
       reversed: reversed,
       onClick: onDismiss,

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

@@ -1,25 +1,15 @@
 import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../../../Icon/CheckIcon.mjs';
-import { MinusIcon } from '../../../Icon/MinusIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from './Checkbox.module.scss.mjs';
 var renderIcon = function (status) {
-  switch (status) {
-    case "indeterminate":
-      return /*#__PURE__*/React.createElement(MinusIcon, {
-        role: "presentation",
-        classNameOverride: styles.icon
-      });
-    case "checked":
-      return /*#__PURE__*/React.createElement(CheckIcon, {
-        role: "presentation",
-        classNameOverride: styles.icon
-      });
-    default:
-      return null;
-  }
+  if (status === "unchecked") return null;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: status === "checked" ? "check" : "remove",
+    isPresentational: true,
+    className: styles.icon
+  });
 };
 const Checkbox = /*#__PURE__*/function () {
   const Checkbox = function (_a) {

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

@@ -2,11 +2,9 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useId } from 'react';
 import classnames from 'classnames';
 import { ClearButton } from '../../../ClearButton/ClearButton.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
 import styles from './MultiSelectToggle.module.scss.mjs';
 import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 const MultiSelectToggle = /*#__PURE__*/function () {
   const MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
     var onClick = _a.onClick,
@@ -38,11 +36,10 @@ const MultiSelectToggle = /*#__PURE__*/function () {
         e.stopPropagation();
         onClick(e);
       }
-    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    }))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true
+    })), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.selectedItemsContainer, selectedOptions.length && styles.hasSelectedItems)
     }, selectedOptions.length > 0 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
       role: "list",

package/dist/esm/Notification/subcomponents/CancelButton/CancelButton.mjs

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseIcon } from '../../../Icon/CloseIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from '../GenericNotification/GenericNotification.module.scss.mjs';
 const CancelButton = /*#__PURE__*/function () {
   const CancelButton = function (_a) {
@@ -10,8 +10,9 @@ const CancelButton = /*#__PURE__*/function () {
       onClick: onClick,
       "data-testid": "close-button",
       "aria-label": "Close notification"
-    }, /*#__PURE__*/React.createElement(CloseIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      isPresentational: true
     }));
   };
   CancelButton.displayName = "CancelButton";

package/dist/esm/Notification/subcomponents/NotificationIcon/NotificationIcon.mjs

@@ -1,42 +1,42 @@
 import React from 'react';
-import { CautionIcon } from '../../../Icon/CautionIcon.mjs';
-import { ExclamationIcon } from '../../../Icon/ExclamationIcon.mjs';
-import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
-import { SecurityTipIcon } from '../../../Icon/SecurityTipIcon.mjs';
-import { SuccessIcon } from '../../../Icon/SuccessIcon.mjs';
+import styles from './NotificationIcon.module.css.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
+var NotificationIcon = function (_a) {
+  var name = _a.name;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: name,
+    isFilled: true,
+    isPresentational: true,
+    className: styles.notificationIcon
+  });
+};
 const NotificationIconType = /*#__PURE__*/function () {
   const NotificationIconType = function (_a) {
     var type = _a.type;
     switch (type) {
       case "positive":
-        return /*#__PURE__*/React.createElement(SuccessIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "check_circle"
         });
       case "negative":
-        return /*#__PURE__*/React.createElement(ExclamationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "error"
         });
       case "cautionary":
-        return /*#__PURE__*/React.createElement(CautionIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "warning"
         });
       case "informative":
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
       case "security":
-        return /*#__PURE__*/React.createElement(SecurityTipIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "privacy_tip"
         });
       default:
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
     }
   };
@@ -48,29 +48,24 @@ const NotificationIconVariant = /*#__PURE__*/function () {
     var variant = _a.variant;
     switch (variant) {
       case "success":
-        return /*#__PURE__*/React.createElement(SuccessIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "check_circle"
         });
       case "warning":
-        return /*#__PURE__*/React.createElement(ExclamationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "error"
         });
       case "cautionary":
-        return /*#__PURE__*/React.createElement(CautionIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "warning"
         });
       case "informative":
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
       case "security":
-        return /*#__PURE__*/React.createElement(SecurityTipIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "privacy_tip"
         });
     }
   };

package/dist/esm/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "notificationIcon": "NotificationIcon-module_notificationIcon__4xH0m"
+};
+export { styles as default };