@kaizen/components 1.66.0 → 1.67.0

package/dist/cjs/TitleBlockZen/subcomponents/MainActions.cjs

@@ -2,9 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
-var MeatballsIcon = require('../../Icon/MeatballsIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var constants = require('../constants.cjs');
 var utils = require('../utils.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -52,8 +50,9 @@ var MainActions = function (_a) {
           label: primaryAction.label,
           primary: true,
           reversed: reversed,
-          icon: React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-            role: "presentation"
+          icon: React__default.default.createElement(Icon.Icon, {
+            name: "keyboard_arrow_down",
+            isPresentational: true
           }),
           iconPosition: "end",
           "data-automation-id": "title-block-primary-action-button",
@@ -94,8 +93,9 @@ var MainActions = function (_a) {
           id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
           label: "Open secondary menu",
           reversed: reversed,
-          icon: React__default.default.createElement(MeatballsIcon.MeatballsIcon, {
-            role: "presentation"
+          icon: React__default.default.createElement(Icon.Icon, {
+            name: "more_horiz",
+            isPresentational: true
           })
         })
       }, React__default.default.createElement(MenuList.MenuList, null, overflowMenuItems.map(function (menuItem, idx) {

package/dist/cjs/TitleBlockZen/subcomponents/MobileActions.cjs

@@ -4,9 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactFocusOn = require('react-focus-on');
-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 constants = require('../constants.cjs');
 var utils = require('../utils.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -200,10 +198,9 @@ var DrawerHandle = function (_a) {
         "aria-expanded": isOpen
       }, primaryAction.label, React__default.default.createElement("span", {
         className: MobileActions_module.mobileActionsChevronSquare
-      }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-        role: "presentation"
-      }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-        role: "presentation"
+      }, React__default.default.createElement(Icon.Icon, {
+        name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+        isPresentational: true
       }))));
     }
     // If the primary action is a button, or has no onClick/href/action
@@ -221,10 +218,9 @@ var DrawerHandle = function (_a) {
       "aria-expanded": isOpen,
       id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
       "aria-label": "Other actions"
-    }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-      role: "presentation"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
     })));
   }
   // if there are default/secondary actions but no primary action
@@ -240,10 +236,9 @@ var DrawerHandle = function (_a) {
       id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
     }, renderDrawerHandleLabel("Other actions"), React__default.default.createElement("span", {
       className: MobileActions_module.mobileActionsChevronSquare
-    }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-      role: "presentation"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
     }))));
   }
   return null;

package/dist/cjs/TitleBlockZen/subcomponents/SecondaryActions.cjs

@@ -2,9 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
-var MeatballsIcon = require('../../Icon/MeatballsIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var TitleBlockZen_module = require('../TitleBlockZen.module.scss.cjs');
 var constants = require('../constants.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -26,8 +24,9 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: React__default.default.createElement(IconButton.IconButton, {
       label: "Open secondary menu",
       reversed: reversed,
-      icon: React__default.default.createElement(MeatballsIcon.MeatballsIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "more_horiz",
+        isPresentational: true
       }),
       id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
     })
@@ -57,8 +56,9 @@ var SecondaryActions = function (_a) {
             secondary: true,
             label: action.label,
             reversed: reversed,
-            icon: React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-              role: "presentation"
+            icon: React__default.default.createElement(Icon.Icon, {
+              name: "keyboard_arrow_down",
+              isPresentational: true
             }),
             iconPosition: "end"
           })

package/dist/cjs/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs

@@ -3,8 +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 Icon = require('../../__future__/Icon/Icon.cjs');
 var ToggleSwitch_module = require('./ToggleSwitch.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -30,9 +29,10 @@ var ToggleSwitch = function (_a) {
     className: ToggleSwitch_module.track
   }, React__default.default.createElement("span", {
     className: ToggleSwitch_module.thumb
-  }, React__default.default.createElement(CheckIcon.CheckIcon, {
-    classNameOverride: ToggleSwitch_module.checkIcon,
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true,
+    className: ToggleSwitch_module.checkIcon
   }))));
 };
 ToggleSwitch.displayName = "ToggleSwitch";

package/dist/cjs/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs

@@ -3,11 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../../../Icon/subcomponents/SVG/SVG.cjs');
-var IndicatorActiveIcon = require('../../../../../Icon/IndicatorActiveIcon.cjs');
-var IndicatorInactiveIcon = require('../../../../../Icon/IndicatorInactiveIcon.cjs');
-var SuccessIcon = require('../../../../../Icon/SuccessIcon.cjs');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../../../../../__future__/Icon/Icon.cjs');
 var ProgressStepper_module = require('./ProgressStepper.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -19,32 +16,30 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var getStepStatus = function (isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
-      icon: React__default.default.createElement(SuccessIcon.SuccessIcon, {
+      icon: React__default.default.createElement(Icon.Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "success"
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
       }),
       accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
     return {
-      icon: React__default.default.createElement(IndicatorActiveIcon.IndicatorActiveIcon, {
+      icon: React__default.default.createElement(Icon.Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "active"
+        name: "radio_button_checked",
+        isPresentational: true
       }),
       accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
-    icon: React__default.default.createElement(IndicatorInactiveIcon.IndicatorInactiveIcon, {
+    icon: React__default.default.createElement(Icon.Icon, {
       key: index,
-      inheritSize: true,
-      classNameOverride: "incomplete",
-      role: "presentation"
+      name: "radio_button_unchecked",
+      isPresentational: true
     }),
     accessibleName: "Not started: ".concat(step.label)
   };
@@ -70,7 +65,7 @@ var ProgressStepper = function (_a) {
     var isCompletedStep = index < currentStepIndex || isComplete;
     var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
       accessibleName = _c.accessibleName,
-      Icon = _c.icon;
+      icon = _c.icon;
     return React__default.default.createElement("li", {
       className: ProgressStepper_module.step,
       key: "".concat(step.id),
@@ -84,7 +79,7 @@ var ProgressStepper = function (_a) {
       className: ProgressStepper_module.stepIndicator
     }, React__default.default.createElement("span", {
       className: classnames__default.default(ProgressStepper_module.stepIcon, (_b = {}, _b[ProgressStepper_module.isCompleted] = isCompletedStep, _b))
-    }, Icon)), index < steps.length - 1 && React__default.default.createElement("div", {
+    }, icon)), index < steps.length - 1 && React__default.default.createElement("div", {
       className: classnames__default.default([ProgressStepper_module.stepDivider, isCompletedStep && ProgressStepper_module.completedStep])
     })));
   })), React__default.default.createElement("span", {

package/dist/cjs/__future__/Icon/Icon.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var constants = require('./constants.cjs');
+var Icon_module = require('./Icon.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var MaterialIcon = function (_a) {
+  var children = _a.children,
+    isFilled = _a.isFilled,
+    isPresentational = _a.isPresentational,
+    alt = _a.alt,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
+  return React__default.default.createElement("span", tslib.__assign({
+    className: classnames__default.default("material-symbols-outlined", Icon_module.icon, isFilled && Icon_module.filled, className),
+    "aria-hidden": isPresentational,
+    role: isPresentational ? undefined : "img",
+    "aria-label": alt
+  }, restProps), children);
+};
+var Icon = function (_a) {
+  var name = _a.name,
+    shouldMirrorInRTL = _a.shouldMirrorInRTL,
+    restProps = tslib.__rest(_a, ["name", "shouldMirrorInRTL"]);
+  if (!shouldMirrorInRTL) {
+    return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps), name);
+  }
+  if (Object.keys(constants.handledRtlIcons).includes(name)) {
+    return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps), React__default.default.createElement("span", {
+      className: Icon_module.iconLTR
+    }, name), React__default.default.createElement("span", {
+      className: Icon_module.iconRTL
+    }, constants.handledRtlIcons[name]));
+  }
+  return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps, {
+    className: classnames__default.default(Icon_module.shouldMirrorInRTL, restProps.className)
+  }), name);
+};
+exports.Icon = Icon;

package/dist/cjs/__future__/Icon/Icon.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styles = {
+  "icon": "Icon-module_icon__CkmHY",
+  "filled": "Icon-module_filled__-VArQ",
+  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__kxncF",
+  "iconLTR": "Icon-module_iconLTR__b3GoB",
+  "iconRTL": "Icon-module_iconRTL__lpVw5"
+};
+module.exports = styles;

package/dist/cjs/__future__/Icon/constants.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+/* eslint-disable camelcase */
+var handledRtlIcons = {
+  checklist: "checklist_rtl",
+  format_list_numbered: "format_list_numbered_rtl"
+};
+exports.handledRtlIcons = handledRtlIcons;

package/dist/cjs/__future__/Select/subcomponents/Option/Option.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactAria = require('react-aria');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
 var Option_module = require('./Option.module.scss.cjs');
 function _interopDefault(e) {
@@ -50,9 +49,9 @@ var Option = function (_a) {
     "aria-label": item.textValue
   }), item.rendered, React__default.default.createElement("span", {
     className: classnames__default.default(Option_module.icon, isSelected && Option_module.isSelected)
-  }, isSelected && React__default.default.createElement(CheckIcon.CheckIcon, {
-    inheritSize: true,
-    role: "presentation"
+  }, isSelected && React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true
   })));
 };
 Option.displayName = "Option";

package/dist/cjs/__future__/Select/subcomponents/SelectToggle/SelectToggle.cjs

@@ -3,10 +3,8 @@
 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 Label = require('../../../../Label/Label.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var SelectToggle_module = require('./SelectToggle.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -41,12 +39,10 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     className: classnames__default.default(SelectToggle_module.selectToggle, (value === null || value === undefined) && SelectToggle_module.placeholder, status === "error" && SelectToggle_module.error, status === "caution" && SelectToggle_module.caution, isDisabled && SelectToggle_module.disabled, isReversed && SelectToggle_module.reversed, classNameOverride)
   }), React__default.default.createElement("span", tslib.__assign({}, valueProps, {
     className: SelectToggle_module.value
-  }), value !== null && value !== void 0 ? value : placeholder), isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation",
-    classNameOverride: SelectToggle_module.icon
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation",
-    classNameOverride: SelectToggle_module.icon
+  }), value !== null && value !== void 0 ? value : placeholder), React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true,
+    className: SelectToggle_module.icon
   })));
 });
 SelectToggle.displayName = "SelectToggle";

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var RemoveTagIcon = require('./RemoveTagIcon.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var RemoveButton_module = require('./RemoveButton.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -23,8 +23,9 @@ var RemoveButton = function (_a) {
     "aria-label": ariaLabel,
     className: classnames__default.default(RemoveButton_module.removeButton, classNameOverride),
     onClick: onClick
-  }, restProps), React__default.default.createElement(RemoveTagIcon.RemoveTagIcon, {
-    role: "presentation"
+  }, restProps), React__default.default.createElement(Icon.Icon, {
+    name: "close",
+    isPresentational: true
   }));
 };
 RemoveButton.displayName = "RemoveButton";

package/dist/cjs/future.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var Icon = require('./__future__/Icon/Icon.cjs');
 var Select = require('./__future__/Select/Select.cjs');
 var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
 var Tag = require('./__future__/Tag/Tag/Tag.cjs');
@@ -7,6 +8,7 @@ var Tabs = require('./__future__/Tabs/Tabs.cjs');
 var Tab = require('./__future__/Tabs/subcomponents/Tab/Tab.cjs');
 var TabList = require('./__future__/Tabs/subcomponents/TabList/TabList.cjs');
 var TabPanel = require('./__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs');
+exports.Icon = Icon.Icon;
 exports.Select = Select.Select;
 exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;

package/dist/esm/Avatar/Avatar.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { Textfit } from 'react-textfit';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { UserIcon } from '../Icon/UserIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './Avatar.module.scss.mjs';
 var getInitials = function (fullName, max2Characters) {
   if (max2Characters === void 0) {
@@ -19,17 +18,21 @@ var getMaxFontSizePixels = function (size) {
   if (size === "xlarge" || size === "xxlarge") return 34;
   return 22;
 };
-var fallbackIcon = function (alt) {
+var FallbackIcon = function (_a) {
+  var alt = _a.alt;
   if (alt) {
-    return /*#__PURE__*/React.createElement(UserIcon, {
-      inheritSize: true,
-      role: "img",
-      "aria-label": alt
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "person",
+      alt: alt,
+      isFilled: true,
+      className: styles.fallbackIcon
     });
   }
-  return /*#__PURE__*/React.createElement(UserIcon, {
-    inheritSize: true,
-    role: "presentation"
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "person",
+    isPresentational: true,
+    isFilled: true,
+    className: styles.fallbackIcon
   });
 };
 var renderInitials = function (fullName, alt, size, disableInitials) {
@@ -42,9 +45,9 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== "small";
   var renderFallback = disableInitials || initials === "";
-  return renderFallback ? ( /*#__PURE__*/React.createElement("span", {
-    className: styles.fallbackIcon
-  }, fallbackIcon(alt))) : ( /*#__PURE__*/React.createElement("abbr", {
+  return renderFallback ? ( /*#__PURE__*/React.createElement(FallbackIcon, {
+    alt: alt
+  })) : ( /*#__PURE__*/React.createElement("abbr", {
     className: classnames(styles.initials, isLongName && styles.longName),
     title: alt
   }, isLongName ? (

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs

@@ -2,9 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { enAU } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
@@ -48,13 +46,17 @@ const CalendarRange = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },

package/dist/esm/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -2,9 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { enAU } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
@@ -45,13 +43,17 @@ const CalendarSingle = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },

package/dist/esm/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs

@@ -1,9 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
@@ -43,13 +41,17 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },

package/dist/esm/Checkbox/Checkbox/Checkbox.mjs

@@ -1,21 +1,15 @@
 import { __rest, __assign } from 'tslib';
 import React 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 renderCheckOrMixedIcon = function (status, reversed) {
   if (status === "off") return;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: status === "on" ? "check" : "remove",
+    isPresentational: true,
     className: classnames(styles.icon, reversed && styles.reversed)
-  }, status === "on" ? ( /*#__PURE__*/React.createElement(CheckIcon, {
-    role: "presentation",
-    inheritSize: true
-  })) : ( /*#__PURE__*/React.createElement(MinusIcon, {
-    role: "presentation",
-    inheritSize: true
-  })));
+  });
 };
 var getCheckedFromStatus = function (checkedStatus) {
   return checkedStatus === "on";

package/dist/esm/ClearButton/ClearButton.mjs

@@ -1,8 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ClearIcon } from '../Icon/ClearIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './ClearButton.module.scss.mjs';
 const ClearButton = /*#__PURE__*/function () {
   const ClearButton = function (_a) {
@@ -14,8 +13,10 @@ const ClearButton = /*#__PURE__*/function () {
       type: "button",
       "aria-label": "clear",
       className: classnames(styles.clearButton, isReversed ? styles.reversed : styles.default, classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement(ClearIcon, {
-      role: "presentation"
+    }, restProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel",
+      isPresentational: true,
+      isFilled: true
     }));
   };
   ClearButton.displayName = "ClearButton";

package/dist/esm/Collapsible/Collapsible/Collapsible.mjs

@@ -3,9 +3,7 @@ import React, { useState, useId } from 'react';
 import classnames from 'classnames';
 import AnimateHeight from 'react-animate-height';
 import { Heading } from '../../Heading/Heading.mjs';
-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 styles from './Collapsible.module.scss.mjs';
 import { IconButton } from '../../__actions__/Button/v1/IconButton/IconButton.mjs';
 const Collapsible = /*#__PURE__*/function () {
@@ -65,11 +63,10 @@ const Collapsible = /*#__PURE__*/function () {
       tag: "span"
     }, title))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
       label: title,
-      icon: isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-        role: "presentation"
-      })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        role: "presentation"
-      })),
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+        isPresentational: true
+      }),
       type: "button",
       "aria-expanded": isOpen,
       "aria-controls": sectionId,

package/dist/esm/DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs

@@ -1,8 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { DateStartIcon } from '../../Icon/DateStartIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { isRefObject } from '../../utils/isRefObject.mjs';
 import { DateInput } from '../DateInput/DateInput.mjs';
 import styles from './DateInputWithIconButton.module.scss.mjs';
@@ -23,8 +22,10 @@ const DateInputWithIconButton = /*#__PURE__*/function () {
       "aria-disabled": disabled,
       disabled: disabled,
       className: classnames(styles.iconButton, restProps["aria-expanded"] && styles.calendarActive, disabled && styles.disabled)
-    }, /*#__PURE__*/React.createElement(DateStartIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "today",
+      isPresentational: true,
+      isFilled: true
     }));
     return /*#__PURE__*/React.createElement(DateInput, __assign({
       ref: inputRef,