@kaizen/components 1.66.1 → 1.67.0

package/dist/esm/Pagination/subcomponents/DirectionalLink/DirectionalLink.mjs

@@ -1,24 +1,12 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
-import { EndIcon } from '../../../Icon/EndIcon.mjs';
-import { StartIcon } from '../../../Icon/StartIcon.mjs';
 import { GenericButton } from '../../../__actions__/Button/v1/GenericButton/GenericButton.mjs';
-var iconMap = {
-  prev: /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-    role: "presentation"
-  }),
-  next: /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-    role: "presentation"
-  }),
-  start: /*#__PURE__*/React.createElement(StartIcon, {
-    role: "presentation"
-  }),
-  end: /*#__PURE__*/React.createElement(EndIcon, {
-    role: "presentation"
-  })
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
+var iconNameMap = {
+  prev: "arrow_back",
+  next: "arrow_forward",
+  start: "keyboard_tab_rtl",
+  end: "keyboard_tab"
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |
@@ -37,7 +25,11 @@ const DirectionalLink = /*#__PURE__*/function () {
     }, otherProps, {
       iconButton: true,
       directionalLink: true,
-      icon: iconMap[otherProps.direction]
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: iconNameMap[otherProps.direction],
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      })
     }));
   };
   DirectionalLink.displayName = "DirectionalLink";

package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.mjs

@@ -1,14 +1,13 @@
 import React from 'react';
-import 'tslib';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { EllipsisIcon } from '../../../Icon/EllipsisIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from './TruncateIndicator.module.scss.mjs';
 var TruncateIndicator = function () {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.truncateIndicatorWrapper,
     "data-testid": "truncate-indicator"
-  }, /*#__PURE__*/React.createElement(EllipsisIcon, {
-    role: "presentation"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "more_horiz",
+    isPresentational: true
   }));
 };
 export { TruncateIndicator };

package/dist/esm/Popover/Popover.mjs

@@ -3,9 +3,8 @@ import React, { useState, useMemo } from 'react';
 import classnames from 'classnames';
 import { usePopper } from 'react-popper';
 import { Heading } from '../Heading/Heading.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { CloseIcon } from '../Icon/CloseIcon.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { mapSizeToClass, mapVariantToBoxClass, mapVariantToIconClass, mapVariantToIcon, mapLineVariant, mapArrowVariantToClass } from './utils/classMappers.mjs';
 import styles from './Popover.module.scss.mjs';
 
@@ -96,8 +95,10 @@ const Popover = /*#__PURE__*/function () {
       onClick: onClose,
       type: "button",
       "aria-label": "close"
-    }, /*#__PURE__*/React.createElement(CloseIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      isPresentational: true,
+      isFilled: true
     }))))), /*#__PURE__*/React.createElement(Text, {
       tag: "div",
       variant: "small",

package/dist/esm/Popover/utils/classMappers.mjs

@@ -1,10 +1,5 @@
 import React from 'react';
-import 'tslib';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { CautionIcon } from '../../Icon/CautionIcon.mjs';
-import { ExclamationIcon } from '../../Icon/ExclamationIcon.mjs';
-import { InformationIcon } from '../../Icon/InformationIcon.mjs';
-import { SuccessIcon } from '../../Icon/SuccessIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from '../Popover.module.scss.mjs';
 var mapVariantToBoxClass = function (variant) {
   switch (variant) {
@@ -37,24 +32,34 @@ var mapVariantToIconClass = function (variant) {
 var mapVariantToIcon = function (variant) {
   switch (variant) {
     case "informative":
-      return /*#__PURE__*/React.createElement(InformationIcon, {
-        role: "presentation"
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
       });
     case "positive":
-      return /*#__PURE__*/React.createElement(SuccessIcon, {
-        role: "presentation"
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
       });
     case "negative":
-      return /*#__PURE__*/React.createElement(ExclamationIcon, {
-        role: "presentation"
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "error",
+        isPresentational: true,
+        isFilled: true
       });
     case "cautionary":
-      return /*#__PURE__*/React.createElement(CautionIcon, {
-        role: "presentation"
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "warning",
+        isPresentational: true,
+        isFilled: true
       });
     default:
-      return /*#__PURE__*/React.createElement(InformationIcon, {
-        role: "presentation"
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
       });
   }
 };

package/dist/esm/RichTextEditor/RichTextEditor/utils/controlmap.mjs

@@ -1,14 +1,6 @@
 import { __assign } from 'tslib';
 import React from 'react';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { AddLinkIcon } from '../../../Icon/AddLinkIcon.mjs';
-import { BoldIcon } from '../../../Icon/BoldIcon.mjs';
-import { BullettedListIcon } from '../../../Icon/BullettedListIcon.mjs';
-import { DecreaseIndentIcon } from '../../../Icon/DecreaseIndentIcon.mjs';
-import { IncreaseIndentIcon } from '../../../Icon/IncreaseIndentIcon.mjs';
-import { ItalicsIcon } from '../../../Icon/ItalicsIcon.mjs';
-import { NumberedListIcon } from '../../../Icon/NumberedListIcon.mjs';
-import { UnderlineIcon } from '../../../Icon/UnderlineIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { listIsActive } from '../../utils/commands/listIsActive.mjs';
 import { markIsActive } from '../../utils/commands/markIsActive.mjs';
 import 'prosemirror-transform';
@@ -159,8 +151,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Bold",
-      icon: /*#__PURE__*/React.createElement(BoldIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "format_bold",
+        isPresentational: true
       })
     });
   }
@@ -171,8 +164,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Italic",
-      icon: /*#__PURE__*/React.createElement(ItalicsIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "format_italic",
+        isPresentational: true
       })
     });
   }
@@ -183,8 +177,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Underline",
-      icon: /*#__PURE__*/React.createElement(UnderlineIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "format_underlined",
+        isPresentational: true
       })
     });
   }
@@ -195,9 +190,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Bullet List",
-      icon: /*#__PURE__*/React.createElement(BullettedListIcon, {
-        role: "presentation"
-      })
+      icon: ( /*#__PURE__*/React.createElement(Icon, {
+        name: "format_list_bulleted",
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      }))
     });
   }
   if (schema.nodes.orderedList) {
@@ -207,9 +204,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Numbered List",
-      icon: /*#__PURE__*/React.createElement(NumberedListIcon, {
-        role: "presentation"
-      })
+      icon: ( /*#__PURE__*/React.createElement(Icon, {
+        name: "format_list_numbered",
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      }))
     });
   }
   if (schema.nodes.orderedList || schema.nodes.bulletList) {
@@ -219,17 +218,21 @@ var buildControlMap = function (schema, editorState, controls) {
       disabled: liftListIsDisabled(editorState),
       isActive: false,
       label: "Decrease indent",
-      icon: /*#__PURE__*/React.createElement(DecreaseIndentIcon, {
-        role: "presentation"
-      })
+      icon: ( /*#__PURE__*/React.createElement(Icon, {
+        name: "format_indent_decrease",
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      }))
     }, {
       action: createIndentListCommand(),
       disabled: indentListIsDisabled(editorState),
       isActive: false,
       label: "Increase indent",
-      icon: /*#__PURE__*/React.createElement(IncreaseIndentIcon, {
-        role: "presentation"
-      })
+      icon: ( /*#__PURE__*/React.createElement(Icon, {
+        name: "format_indent_increase",
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      }))
     });
   }
   if (schema.marks.link) {
@@ -240,8 +243,9 @@ var buildControlMap = function (schema, editorState, controls) {
       disabled: editorState.selection.empty,
       isActive: false,
       label: "Link",
-      icon: /*#__PURE__*/React.createElement(AddLinkIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "add_link",
+        isPresentational: true
       })
     });
   }

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.mjs

@@ -1,11 +1,8 @@
 import { __assign } from 'tslib';
 import React from 'react';
-import '../../../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { EditIcon } from '../../../../../../Icon/EditIcon.mjs';
-import { ExternalLinkIcon } from '../../../../../../Icon/ExternalLinkIcon.mjs';
-import { RemoveLinkIcon } from '../../../../../../Icon/RemoveLinkIcon.mjs';
 import { usePopover } from '../../../../../../Popover/Popover.mjs';
 import { Text } from '../../../../../../Text/Text.mjs';
+import { Icon } from '../../../../../../__future__/Icon/Icon.mjs';
 import { Positioner } from './Positioner.mjs';
 import styles from './LinkPopover.module.scss.mjs';
 const LinkPopover = /*#__PURE__*/function () {
@@ -23,8 +20,9 @@ const LinkPopover = /*#__PURE__*/function () {
       size: "large"
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.popoverContent
-    }, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "open_in_new",
+      isPresentational: true
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.popoverLinkContainer
     }, /*#__PURE__*/React.createElement(Text, {
@@ -38,14 +36,14 @@ const LinkPopover = /*#__PURE__*/function () {
       rel: "noopener noreferrer"
     }, href))), /*#__PURE__*/React.createElement("div", {
       className: styles.popoverActions
-    }, /*#__PURE__*/React.createElement(EditIcon, {
-      role: "img",
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "edit",
       onClick: onEdit,
-      "aria-label": "Edit link"
-    })), /*#__PURE__*/React.createElement(RemoveLinkIcon, {
-      role: "img",
+      alt: "Edit link"
+    })), /*#__PURE__*/React.createElement(Icon, {
+      name: "link_off",
       onClick: onRemove,
-      "aria-label": "Remove link"
+      alt: "Remove link"
     }))));
   };
   LinkPopover.displayName = "LinkPopover";

package/dist/esm/Select/Select.mjs

@@ -4,12 +4,9 @@ import classnames from 'classnames';
 import ReactSelect, { components } from 'react-select';
 import Async from 'react-select/async';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../Icon/ChevronUpIcon.mjs';
-import { ClearIcon } from '../Icon/ClearIcon.mjs';
 import { Label } from '../Label/Label.mjs';
 import { Tag } from '../Tag/Tag.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './Select.module.scss.mjs';
 
 /**
@@ -118,11 +115,10 @@ var Placeholder = function (props) {
 var DropdownIndicator = function (props) {
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, __assign({}, props, {
     className: styles.dropdownIndicator
-  }), props.selectProps.menuIsOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-    role: "presentation"
-  })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    role: "presentation"
-  })));
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: props.selectProps.menuIsOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
+  }));
 };
 var LoadingMessage = function (props) {
   return /*#__PURE__*/React.createElement(components.LoadingMessage, __assign({}, props, {
@@ -186,8 +182,10 @@ var ValueContainer = function (props) {
 var ClearIndicator = function (props) {
   return /*#__PURE__*/React.createElement(components.ClearIndicator, __assign({}, props, {
     className: styles.clearIndicator
-  }), /*#__PURE__*/React.createElement(ClearIcon, {
-    role: "presentation"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel",
+    isPresentational: true,
+    isFilled: true
   }));
 };
 export { AsyncSelect, Select };

package/dist/esm/SplitButton/subcomponents/DropdownButton/DropdownButton.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { BaseButton } from '../BaseButton/BaseButton.mjs';
 import styles from './DropdownButton.module.scss.mjs';
 const DropdownButton = /*#__PURE__*/function () {
@@ -18,8 +17,9 @@ const DropdownButton = /*#__PURE__*/function () {
         defaultMessage: "Additional actions",
         description: "Label for a dropdown menu holding additional actions"
       }),
-      icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "keyboard_arrow_down",
+        isPresentational: true
       }),
       classNameOverride: classnames(styles.dropdownButton, classNameOverride)
     }, restProps));

package/dist/esm/Table/Table.mjs

@@ -5,10 +5,7 @@ import { Checkbox } from '../Checkbox/Checkbox/Checkbox.mjs';
 import '../Checkbox/CheckboxField/CheckboxField.mjs';
 import '../Checkbox/CheckboxGroup/CheckboxGroup.mjs';
 import { Heading } from '../Heading/Heading.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ExclamationIcon } from '../Icon/ExclamationIcon.mjs';
-import { SortAscendingIcon } from '../Icon/SortAscendingIcon.mjs';
-import { SortDescendingIcon } from '../Icon/SortDescendingIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './Table.module.scss.mjs';
 
@@ -100,8 +97,10 @@ var TableHeaderRowCell = function (_a) {
     "aria-label": checkboxLabel
   }))), tooltipInfo != null && !isTooltipIconHidden ? ( /*#__PURE__*/React.createElement("div", {
     className: styles.headerRowCellTooltipIcon
-  }, /*#__PURE__*/React.createElement(ExclamationIcon, {
-    role: "presentation"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "error",
+    isPresentational: true,
+    isFilled: true
   }))) : null, !icon ? ( /*#__PURE__*/React.createElement(Heading, {
     tag: "div",
     variant: "heading-6",
@@ -109,10 +108,12 @@ var TableHeaderRowCell = function (_a) {
     classNameOverride: styles.headerRowCellLabel
   }, labelText)) : null, (sorting || isHovered && sortingArrowsOnHover) && ( /*#__PURE__*/React.createElement("div", {
     className: classnames(align === "center" && styles.headerRowCellIconAlignCenter, align === "end" && styles.headerRowCellIconAlignEnd, reversed && styles.whiteText)
-  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? ( /*#__PURE__*/React.createElement(SortAscendingIcon, {
-    role: "presentation"
-  })) : ( /*#__PURE__*/React.createElement(SortDescendingIcon, {
-    role: "presentation"
+  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? ( /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow_drop_up",
+    isPresentational: true
+  })) : ( /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow_drop_down",
+    isPresentational: true
   })))));
   cellContents = href ? ( /*#__PURE__*/React.createElement("a", {
     className: classnames(styles.headerRowCellButton, reversed && styles.headerRowCellButtonReversed),

package/dist/esm/Tag/Tag.mjs

@@ -3,12 +3,8 @@ import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import '../Icon/subcomponents/SVG/SVG.mjs';
-import { CautionIcon } from '../Icon/CautionIcon.mjs';
-import { ClearIcon } from '../Icon/ClearIcon.mjs';
-import { ExclamationIcon } from '../Icon/ExclamationIcon.mjs';
-import { InformationIcon } from '../Icon/InformationIcon.mjs';
 import { LiveIcon } from '../Icon/LiveIcon.mjs';
-import { SuccessIcon } from '../Icon/SuccessIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './Tag.module.scss.mjs';
 var isJSXElement = function (imageElementOrAvatarProps) {
   return "props" in imageElementOrAvatarProps;
@@ -48,26 +44,34 @@ const Tag = /*#__PURE__*/function () {
         case "validationPositive":
           return /*#__PURE__*/React.createElement("span", {
             className: styles.validationIcon
-          }, /*#__PURE__*/React.createElement(SuccessIcon, {
-            role: "presentation"
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "check_circle",
+            isPresentational: true,
+            isFilled: true
           }));
         case "validationNegative":
           return /*#__PURE__*/React.createElement("span", {
             className: styles.validationIcon
-          }, /*#__PURE__*/React.createElement(ExclamationIcon, {
-            role: "presentation"
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "error",
+            isPresentational: true,
+            isFilled: true
           }));
         case "validationCautionary":
           return /*#__PURE__*/React.createElement("span", {
             className: styles.validationIcon
-          }, /*#__PURE__*/React.createElement(CautionIcon, {
-            role: "presentation"
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "warning",
+            isPresentational: true,
+            isFilled: true
           }));
         case "validationInformative":
           return /*#__PURE__*/React.createElement("span", {
             className: styles.validationIcon
-          }, /*#__PURE__*/React.createElement(InformationIcon, {
-            role: "presentation"
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "info",
+            isPresentational: true,
+            isFilled: true
           }));
         case "profile":
           return /*#__PURE__*/React.createElement("span", {
@@ -89,10 +93,10 @@ const Tag = /*#__PURE__*/function () {
       onMouseLeave: onMouseLeave
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(ClearIcon, {
-      inheritSize: true,
-      role: "img",
-      "aria-label": "Dismiss"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel",
+      alt: "Dismiss",
+      isFilled: true
     }))))), variant === "statusLive" && ( /*#__PURE__*/React.createElement("span", {
       className: styles.liveIcon
     }, /*#__PURE__*/React.createElement(LiveIcon, {

package/dist/esm/TextField/TextField.mjs

@@ -3,12 +3,11 @@ import React, { useId } from 'react';
 import classnames from 'classnames';
 import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { SuccessIcon } from '../Icon/SuccessIcon.mjs';
 import { Input } from '../Input/Input/Input.mjs';
 import '../Input/InputRange/InputRange.mjs';
 import '../Input/InputSearch/InputSearch.mjs';
 import { Label } from '../Label/Label.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './TextField.module.scss.mjs';
 
 /**
@@ -58,8 +57,10 @@ const TextField = /*#__PURE__*/function () {
       startIconAdornment: icon,
       endIconAdornment: status === "success" && ( /*#__PURE__*/React.createElement("div", {
         className: classnames(styles.success, disabled && styles.disabled)
-      }, /*#__PURE__*/React.createElement(SuccessIcon, {
-        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
       })))
     }, restProps)), validationMessage && ( /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.message, disabled && styles.disabled)

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -2,10 +2,8 @@ import { __rest, __assign } from 'tslib';
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import { Heading } from '../../../Heading/Heading.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../../Icon/ArrowBackwardIcon.mjs';
-import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
 import { Text } from '../../../Text/Text.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from './GenericTile.module.scss.mjs';
 import { IconButton } from '../../../__actions__/Button/v1/IconButton/IconButton.mjs';
 import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
@@ -46,8 +44,10 @@ const GenericTile = /*#__PURE__*/function () {
         className: styles.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {
         label: "Information",
-        icon: /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "info",
+          isPresentational: true,
+          isFilled: true
         }),
         onClick: function () {
           return setIsFlipped(true);
@@ -85,8 +85,9 @@ const GenericTile = /*#__PURE__*/function () {
         className: styles.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {
         label: "Information",
-        icon: /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "arrow_back",
+          isPresentational: true
         }),
         onClick: function () {
           return setIsFlipped(false);

package/dist/esm/TitleBlockZen/TitleBlockZen.mjs

@@ -3,12 +3,9 @@ import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import { Heading } from '../Heading/Heading.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowLeftIcon } from '../Icon/ArrowLeftIcon.mjs';
-import { ArrowRightIcon } from '../Icon/ArrowRightIcon.mjs';
-import { HamburgerIcon } from '../Icon/HamburgerIcon.mjs';
 import { Select } from '../Select/Select.mjs';
 import { Tag } from '../Tag/Tag.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import { MainActions } from './subcomponents/MainActions.mjs';
 import { MobileActions } from './subcomponents/MobileActions.mjs';
@@ -103,15 +100,14 @@ var Breadcrumb = function (_a) {
     handleClick = breadcrumb.handleClick,
     text = breadcrumb.text,
     render = breadcrumb.render;
-  var icon = textDirection === "rtl" ? ( /*#__PURE__*/React.createElement(ArrowRightIcon, {
-    role: "presentation"
-  })) : ( /*#__PURE__*/React.createElement(ArrowLeftIcon, {
-    role: "presentation"
-  }));
   var InnerContents = function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: styles.circle
-    }, icon), /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow_back",
+      isPresentational: true,
+      shouldMirrorInRTL: true
+    })), /*#__PURE__*/React.createElement("span", {
       className: styles.breadcrumbTextLink,
       "data-automation-id": textAutomationId,
       "data-testid": textAutomationId
@@ -231,8 +227,9 @@ const TitleBlockZen = /*#__PURE__*/function () {
       className: styles.hamburger
     }, /*#__PURE__*/React.createElement(IconButton, {
       onClick: handleHamburgerClick,
-      icon: /*#__PURE__*/React.createElement(HamburgerIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "menu",
+        isPresentational: true
       }),
       label: "Open menu",
       reversed: isReversed(variant)

package/dist/esm/TitleBlockZen/subcomponents/MainActions.mjs

@@ -1,8 +1,6 @@
 import { __assign, __spreadArray } from 'tslib';
 import React from 'react';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../Icon/ChevronDownIcon.mjs';
-import { MeatballsIcon } from '../../Icon/MeatballsIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
 import { isMenuGroupNotButton } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
@@ -45,8 +43,9 @@ const MainActions = /*#__PURE__*/function () {
             label: primaryAction.label,
             primary: true,
             reversed: reversed,
-            icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
-              role: "presentation"
+            icon: /*#__PURE__*/React.createElement(Icon, {
+              name: "keyboard_arrow_down",
+              isPresentational: true
             }),
             iconPosition: "end",
             "data-automation-id": "title-block-primary-action-button",
@@ -87,8 +86,9 @@ const MainActions = /*#__PURE__*/function () {
             id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
             label: "Open secondary menu",
             reversed: reversed,
-            icon: /*#__PURE__*/React.createElement(MeatballsIcon, {
-              role: "presentation"
+            icon: /*#__PURE__*/React.createElement(Icon, {
+              name: "more_horiz",
+              isPresentational: true
             })
           })
         }, /*#__PURE__*/React.createElement(MenuList, null, overflowMenuItems.map(function (menuItem, idx) {