@kaizen/components 1.66.1 → 1.67.0

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs

@@ -3,8 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var DateStartIcon = require('../../Icon/DateStartIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var isRefObject = require('../../utils/isRefObject.cjs');
 var DateInput = require('../DateInput/DateInput.cjs');
 var DateInputWithIconButton_module = require('./DateInputWithIconButton.module.scss.cjs');
@@ -31,8 +30,10 @@ var DateInputWithIconButton = React__default.default.forwardRef(function (_a, re
     "aria-disabled": disabled,
     disabled: disabled,
     className: classnames__default.default(DateInputWithIconButton_module.iconButton, restProps["aria-expanded"] && DateInputWithIconButton_module.calendarActive, disabled && DateInputWithIconButton_module.disabled)
-  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "today",
+    isPresentational: true,
+    isFilled: true
   }));
   return React__default.default.createElement(DateInput.DateInput, tslib.__assign({
     ref: inputRef,

package/dist/cjs/DateRangePicker/DateRangePicker.cjs

@@ -13,10 +13,9 @@ require('date-fns');
 var isDisabledDate = require('../Calendar/utils/isDisabledDate.cjs');
 var CalendarPopover = require('../Calendar/CalendarPopover/CalendarPopover.cjs');
 var LegacyCalendarRange = require('../Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var DateStartIcon = require('../Icon/DateStartIcon.cjs');
 var Label = require('../Label/Label.cjs');
 var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var DateRangePicker_module = require('./DateRangePicker.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -125,8 +124,10 @@ var DateRangePicker = function (_a) {
     "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
   }, inputProps), React__default.default.createElement("div", {
     className: DateRangePicker_module.startIconAdornment
-  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "today",
+    isPresentational: true,
+    isFilled: true
   })), React__default.default.createElement("span", {
     className: DateRangePicker_module.value
   }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && React__default.default.createElement(reactFocusOn.FocusOn, {

package/dist/cjs/ErrorPage/ErrorPage.cjs

@@ -5,13 +5,11 @@ var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var BrandMoment = require('../BrandMoment/BrandMoment.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowRightIcon = require('../Icon/ArrowRightIcon.cjs');
-var EmailIcon = require('../Icon/EmailIcon.cjs');
 require('../Illustration/subcomponents/Base/Base.cjs');
 require('../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.cjs');
 var Scene = require('../Illustration/Scene/Scene.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var useErrorMessages = require('./hooks/useErrorMessages.cjs');
 var ErrorPage_module = require('./ErrorPage.module.scss.cjs');
 function _interopDefault(e) {
@@ -70,8 +68,10 @@ var ErrorPage = function (_a) {
     }),
     variant: "warning",
     primaryAction: tslib.__assign(tslib.__assign({}, actions.primary), {
-      icon: React__default.default.createElement(ArrowRightIcon.ArrowRightIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "arrow_forward",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       }),
       iconPosition: "end",
       label: formatMessage({
@@ -81,8 +81,10 @@ var ErrorPage = function (_a) {
       })
     }),
     secondaryAction: tslib.__assign(tslib.__assign({}, actions.secondary), {
-      icon: React__default.default.createElement(EmailIcon.EmailIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "mail",
+        isPresentational: true,
+        isFilled: true
       }),
       label: formatMessage({
         id: "kzErrorPage",

package/dist/cjs/FieldMessage/FieldMessage.cjs

@@ -3,10 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var CautionWhiteIcon = require('../Icon/CautionWhiteIcon.cjs');
-var ExclamationWhiteIcon = require('../Icon/ExclamationWhiteIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var FieldMessage_module = require('./FieldMessage.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -30,14 +28,10 @@ var FieldMessage = function (_a) {
     className: classnames__default.default(FieldMessage_module.message, FieldMessage_module[status], classNameOverride, reversed && FieldMessage_module.reversed, position === "bottom" && FieldMessage_module.positionBottom, position === "top" && FieldMessage_module.positionTop)
   }, restProps), (status === "error" || status === "caution") && React__default.default.createElement("span", {
     className: FieldMessage_module.warningIcon
-  }, status === "error" ? React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-    role: "img",
-    inheritSize: false,
-    "aria-label": "".concat(status, " message")
-  }) : React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, {
-    role: "img",
-    inheritSize: false,
-    "aria-label": "".concat(status, " message")
+  }, React__default.default.createElement(Icon.Icon, {
+    name: status === "error" ? "error" : "warning",
+    isFilled: true,
+    alt: "".concat(status, " message")
   })), React__default.default.createElement("div", {
     className: FieldMessage_module.message
   }, React__default.default.createElement(Text.Text, {

package/dist/cjs/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.cjs

@@ -2,9 +2,7 @@
 
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
-require('tslib');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var AddIcon = require('../../../../Icon/AddIcon.cjs');
+var Icon = require('../../../../__future__/Icon/Icon.cjs');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var Menu = require('../../../../__actions__/Menu/v1/Menu.cjs');
 var MenuList = require('../../../../__actions__/Menu/v1/subcomponents/MenuList/MenuList.cjs');
@@ -32,8 +30,9 @@ var AddFiltersMenu = function () {
       label: menuButtonLabel,
       secondary: true,
       disabled: inactiveFilters.length === 0,
-      icon: React__default.default.createElement(AddIcon.AddIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "add",
+        isPresentational: true
       })
     })
   }, React__default.default.createElement(MenuList.MenuList, null, inactiveFilters.map(function (_a) {

package/dist/cjs/Filter/FilterButton/FilterButton/FilterButton.cjs

@@ -3,9 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 var FilterButton_module = require('./FilterButton.module.scss.cjs');
@@ -37,10 +35,9 @@ var FilterButton = React.forwardRef(function (_a, ref) {
     className: FilterButton_module.hasSelectedValues
   }, React__default.default.createElement("span", null, label), React__default.default.createElement("span", {
     className: FilterButton_module.labelSeparator
-  }, ":")), React__default.default.createElement("span", null, selectedValuesLabel)) : label), isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation"
+  }, ":")), React__default.default.createElement("span", null, selectedValuesLabel)) : label), React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
   }));
 });
 FilterButton.displayName = "FilterButton";

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ClearIcon = require('../../../Icon/ClearIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButton = require('../FilterButton/FilterButton.cjs');
@@ -40,9 +39,10 @@ var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
     position: "below"
   }, React__default.default.createElement(FilterButtonBase.FilterButtonBase, tslib.__assign({
     ref: removeButtonRef
-  }, removeButtonProps), React__default.default.createElement(ClearIcon.ClearIcon, {
-    role: "img",
-    "aria-label": removeButtonLabel
+  }, removeButtonProps), React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    alt: removeButtonLabel,
+    isFilled: true
   }))));
 });
 FilterButtonRemovable.displayName = "FilterButtonRemovable";

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs

@@ -7,9 +7,8 @@ var listbox = require('@react-aria/listbox');
 var utils = require('@react-aria/utils');
 var classnames = require('classnames');
 var Badge = require('../../../../Badge/Badge.cjs');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
 var VisuallyHidden = require('../../../../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../../../../__future__/Icon/Icon.cjs');
 require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
 var MultiSelectOption_module = require('./MultiSelectOption.module.scss.cjs');
@@ -46,8 +45,9 @@ var MultiSelectOption = function (_a) {
     "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
   }), React__default.default.createElement("span", {
     className: classnames__default.default(MultiSelectOption_module.icon, isSelected && MultiSelectOption_module.isSelected)
-  }, isSelected && React__default.default.createElement(CheckIcon.CheckIcon, {
-    role: "presentation"
+  }, isSelected && React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true
   })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React__default.default.createElement("span", {
     id: countElementId,
     className: MultiSelectOption_module.badgeContainer

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -5,9 +5,8 @@ var React = require('react');
 var classnames = require('classnames');
 var Media = require('react-media');
 var Heading = require('../Heading/Heading.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowForwardIcon = require('../Icon/ArrowForwardIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
 var Button = require('../__actions__/Button/v1/Button/Button.cjs');
@@ -136,8 +135,10 @@ var GuidanceBlock = function (_a) {
     }, React__default.default.createElement(WithTooltip, {
       tooltipProps: actions.primary.tooltip
     }, React__default.default.createElement(Button.Button, tslib.__assign({
-      icon: withActionButtonArrow ? React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-        role: "presentation"
+      icon: withActionButtonArrow ? React__default.default.createElement(Icon.Icon, {
+        name: "arrow_forward",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       }) : undefined,
       iconPosition: "end"
     }, actions.primary, {

package/dist/cjs/Illustration/utils/usePausePlay.cjs

@@ -1,10 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var LaunchIcon = require('../../Icon/LaunchIcon.cjs');
-var PauseIcon = require('../../Icon/PauseIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -26,10 +23,10 @@ var usePausePlay = function (videoRef) {
         videoRef.current.pause();
       }
     },
-    icon: isPaused ? React__default.default.createElement(LaunchIcon.LaunchIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(PauseIcon.PauseIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: isPaused ? "play_circle" : "pause",
+      isPresentational: true,
+      isFilled: true
     }),
     label: isPaused ? "Play animation" : "Pause animation"
   };

package/dist/cjs/Input/InputSearch/InputSearch.cjs

@@ -5,12 +5,12 @@ var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var ClearButton = require('../../ClearButton/ClearButton.cjs');
-var SearchIcon = require('../../Icon/SearchIcon.cjs');
 require('../../Loading/LoadingGraphic/LoadingGraphic.cjs');
 require('../../Loading/LoadingHeading/LoadingHeading.cjs');
 require('../../Loading/LoadingInput/LoadingInput.cjs');
 require('../../Loading/LoadingParagraph/LoadingParagraph.cjs');
 var LoadingSpinner = require('../../Loading/LoadingSpinner/LoadingSpinner.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var InputSearch_module = require('./InputSearch.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -52,8 +52,9 @@ var InputSearch = function (props) {
     accessibilityLabel: "",
     size: "sm",
     classNameOverride: InputSearch_module.loadingSpinner
-  }) : React__default.default.createElement(SearchIcon.SearchIcon, {
-    role: "presentation"
+  }) : React__default.default.createElement(Icon.Icon, {
+    name: "search",
+    isPresentational: true
   })), React__default.default.createElement("input", tslib.__assign({
     ref: inputRef,
     type: "search",

package/dist/cjs/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -3,10 +3,8 @@
 var React = require('react');
 var classnames = require('classnames');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
-require('tslib');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../Icon/CheckIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var determineSelectionFromKeyPress = require('./utils/determineSelectionFromKeyPress.cjs');
 var LikertScaleLegacy_module = require('./LikertScaleLegacy.module.scss.cjs');
 function _interopDefault(e) {
@@ -17,9 +15,10 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var SelectedItemIcon = function () {
-  return React__default.default.createElement(CheckIcon.CheckIcon, {
-    role: "presentation",
-    classNameOverride: LikertScaleLegacy_module.check
+  return React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true,
+    className: LikertScaleLegacy_module.check
   });
 };
 /**

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -4,11 +4,6 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Heading = require('../../Heading/Heading.cjs');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var CautionWhiteIcon = require('../../Icon/CautionWhiteIcon.cjs');
-var ExclamationWhiteIcon = require('../../Icon/ExclamationWhiteIcon.cjs');
-var InformationWhiteIcon = require('../../Icon/InformationWhiteIcon.cjs');
-var SuccessWhiteIcon = require('../../Icon/SuccessWhiteIcon.cjs');
 var Spot = require('../../Illustration/Spot/Spot.cjs');
 require('../../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.cjs');
 require('../../Illustration/Scene/Scene.cjs');
@@ -19,6 +14,7 @@ var ModalFooter = require('../GenericModal/subcomponents/ModalFooter/ModalFooter
 var ModalHeader = require('../GenericModal/subcomponents/ModalHeader/ModalHeader.cjs');
 var ModalAccessibleLabel = require('../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.cjs');
 var ModalBody = require('../GenericModal/subcomponents/ModalBody/ModalBody.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var ConfirmationModal_module = require('./ConfirmationModal.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -27,37 +23,46 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var getIcon = function (variantName, isProminent) {
+var getIconName = function (variantName) {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? React__default.default.createElement(Spot.Cautionary, null) : React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "warning";
     case "informative":
-      return isProminent ? React__default.default.createElement(Spot.Informative, null) : React__default.default.createElement(InformationWhiteIcon.InformationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "info";
     case "negative":
     case "warning":
-      return isProminent ? React__default.default.createElement(Spot.Negative, null) : React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "error";
     case "positive":
     case "success":
-      return isProminent ? React__default.default.createElement(Spot.Positive, null) : React__default.default.createElement(SuccessWhiteIcon.SuccessWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "check_circle";
     case "assertive":
-      return isProminent ? React__default.default.createElement(Spot.Assertive, null) : React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "error";
   }
 };
+var getIcon = function (variantName, isProminent) {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return React__default.default.createElement(Spot.Cautionary, null);
+      case "informative":
+        return React__default.default.createElement(Spot.Informative, null);
+      case "negative":
+      case "warning":
+        return React__default.default.createElement(Spot.Negative, null);
+      case "positive":
+      case "success":
+        return React__default.default.createElement(Spot.Positive, null);
+      case "assertive":
+        return React__default.default.createElement(Spot.Assertive, null);
+    }
+  }
+  var iconName = getIconName(variantName);
+  return React__default.default.createElement(Icon.Icon, {
+    name: iconName,
+    isPresentational: true,
+    isFilled: true
+  });
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}

package/dist/cjs/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CloseIcon = require('../../../../Icon/CloseIcon.cjs');
+var Icon = require('../../../../__future__/Icon/Icon.cjs');
 var ModalBody = require('../ModalBody/ModalBody.cjs');
 var ModalHeader_module = require('./ModalHeader.module.scss.cjs');
 var IconButton = require('../../../../__actions__/Button/v1/IconButton/IconButton.cjs');
@@ -21,8 +19,9 @@ var ModalHeader = function (_a) {
     className: ModalHeader_module.dismissButton
   }, React__default.default.createElement(IconButton.IconButton, {
     label: "Dismiss",
-    icon: React__default.default.createElement(CloseIcon.CloseIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: "close",
+      isPresentational: true
     }),
     reversed: reversed,
     onClick: onDismiss,

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

@@ -3,9 +3,7 @@
 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 Icon = require('../../../__future__/Icon/Icon.cjs');
 var Checkbox_module = require('./Checkbox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -15,20 +13,12 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var renderIcon = function (status) {
-  switch (status) {
-    case "indeterminate":
-      return React__default.default.createElement(MinusIcon.MinusIcon, {
-        role: "presentation",
-        classNameOverride: Checkbox_module.icon
-      });
-    case "checked":
-      return React__default.default.createElement(CheckIcon.CheckIcon, {
-        role: "presentation",
-        classNameOverride: Checkbox_module.icon
-      });
-    default:
-      return null;
-  }
+  if (status === "unchecked") return null;
+  return React__default.default.createElement(Icon.Icon, {
+    name: status === "checked" ? "check" : "remove",
+    isPresentational: true,
+    className: Checkbox_module.icon
+  });
 };
 var Checkbox = function (_a) {
   var checkedStatus = _a.checkedStatus,

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

@@ -4,11 +4,9 @@ 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 MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
 var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -46,10 +44,9 @@ var MultiSelectToggle = React.forwardRef(function (_a, ref) {
       e.stopPropagation();
       onClick(e);
     }
-  }, isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
   })), React__default.default.createElement("div", {
     className: classnames__default.default(MultiSelectToggle_module.selectedItemsContainer, selectedOptions.length && MultiSelectToggle_module.hasSelectedItems)
   }, selectedOptions.length > 0 && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("ul", {

package/dist/cjs/Notification/subcomponents/CancelButton/CancelButton.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var CloseIcon = require('../../../Icon/CloseIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -17,8 +17,9 @@ var CancelButton = function (_a) {
     onClick: onClick,
     "data-testid": "close-button",
     "aria-label": "Close notification"
-  }, React__default.default.createElement(CloseIcon.CloseIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "close",
+    isPresentational: true
   }));
 };
 CancelButton.displayName = "CancelButton";

package/dist/cjs/Notification/subcomponents/NotificationIcon/NotificationIcon.cjs

@@ -1,49 +1,49 @@
 'use strict';
 
 var React = require('react');
-var CautionIcon = require('../../../Icon/CautionIcon.cjs');
-var ExclamationIcon = require('../../../Icon/ExclamationIcon.cjs');
-var InformationIcon = require('../../../Icon/InformationIcon.cjs');
-var SecurityTipIcon = require('../../../Icon/SecurityTipIcon.cjs');
-var SuccessIcon = require('../../../Icon/SuccessIcon.cjs');
+var NotificationIcon_module = require('./NotificationIcon.module.css.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var NotificationIcon = function (_a) {
+  var name = _a.name;
+  return React__default.default.createElement(Icon.Icon, {
+    name: name,
+    isFilled: true,
+    isPresentational: true,
+    className: NotificationIcon_module.notificationIcon
+  });
+};
 var NotificationIconType = function (_a) {
   var type = _a.type;
   switch (type) {
     case "positive":
-      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "check_circle"
       });
     case "negative":
-      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "error"
       });
     case "cautionary":
-      return React__default.default.createElement(CautionIcon.CautionIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "warning"
       });
     case "informative":
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
     case "security":
-      return React__default.default.createElement(SecurityTipIcon.SecurityTipIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "privacy_tip"
       });
     default:
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
   }
 };
@@ -52,29 +52,24 @@ var NotificationIconVariant = function (_a) {
   var variant = _a.variant;
   switch (variant) {
     case "success":
-      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "check_circle"
       });
     case "warning":
-      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "error"
       });
     case "cautionary":
-      return React__default.default.createElement(CautionIcon.CautionIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "warning"
       });
     case "informative":
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
     case "security":
-      return React__default.default.createElement(SecurityTipIcon.SecurityTipIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "privacy_tip"
       });
   }
 };