@kaizen/components 1.66.1 → 1.67.0

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "notificationIcon": "NotificationIcon-module_notificationIcon__4xH0m"
+};
+module.exports = styles;

package/dist/cjs/Pagination/subcomponents/DirectionalLink/DirectionalLink.cjs

@@ -2,31 +2,19 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowBackwardIcon = require('../../../Icon/ArrowBackwardIcon.cjs');
-var ArrowForwardIcon = require('../../../Icon/ArrowForwardIcon.cjs');
-var EndIcon = require('../../../Icon/EndIcon.cjs');
-var StartIcon = require('../../../Icon/StartIcon.cjs');
 var GenericButton = require('../../../__actions__/Button/v1/GenericButton/GenericButton.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 iconMap = {
-  prev: React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
-    role: "presentation"
-  }),
-  next: React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-    role: "presentation"
-  }),
-  start: React__default.default.createElement(StartIcon.StartIcon, {
-    role: "presentation"
-  }),
-  end: React__default.default.createElement(EndIcon.EndIcon, {
-    role: "presentation"
-  })
+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} |
@@ -44,7 +32,11 @@ var DirectionalLink = function (_a) {
   }, otherProps, {
     iconButton: true,
     directionalLink: true,
-    icon: iconMap[otherProps.direction]
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: iconNameMap[otherProps.direction],
+      isPresentational: true,
+      shouldMirrorInRTL: true
+    })
   }));
 };
 DirectionalLink.displayName = "DirectionalLink";

package/dist/cjs/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var EllipsisIcon = require('../../../Icon/EllipsisIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var TruncateIndicator_module = require('./TruncateIndicator.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -15,8 +13,9 @@ var TruncateIndicator = function () {
   return React__default.default.createElement("div", {
     className: TruncateIndicator_module.truncateIndicatorWrapper,
     "data-testid": "truncate-indicator"
-  }, React__default.default.createElement(EllipsisIcon.EllipsisIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "more_horiz",
+    isPresentational: true
   }));
 };
 exports.TruncateIndicator = TruncateIndicator;

package/dist/cjs/Popover/Popover.cjs

@@ -5,9 +5,8 @@ var React = require('react');
 var classnames = require('classnames');
 var reactPopper = require('react-popper');
 var Heading = require('../Heading/Heading.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var CloseIcon = require('../Icon/CloseIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var classMappers = require('./utils/classMappers.cjs');
 var Popover_module = require('./Popover.module.scss.cjs');
 function _interopDefault(e) {
@@ -104,8 +103,10 @@ var Popover = function (_a) {
     onClick: onClose,
     type: "button",
     "aria-label": "close"
-  }, React__default.default.createElement(CloseIcon.CloseIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "close",
+    isPresentational: true,
+    isFilled: true
   }))), React__default.default.createElement(Text.Text, {
     tag: "div",
     variant: "small",

package/dist/cjs/Popover/utils/classMappers.cjs

@@ -1,12 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var CautionIcon = require('../../Icon/CautionIcon.cjs');
-var ExclamationIcon = require('../../Icon/ExclamationIcon.cjs');
-var InformationIcon = require('../../Icon/InformationIcon.cjs');
-var SuccessIcon = require('../../Icon/SuccessIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var Popover_module = require('../Popover.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -45,24 +40,34 @@ var mapVariantToIconClass = function (variant) {
 var mapVariantToIcon = function (variant) {
   switch (variant) {
     case "informative":
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation"
+      return React__default.default.createElement(Icon.Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
       });
     case "positive":
-      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
-        role: "presentation"
+      return React__default.default.createElement(Icon.Icon, {
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
       });
     case "negative":
-      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-        role: "presentation"
+      return React__default.default.createElement(Icon.Icon, {
+        name: "error",
+        isPresentational: true,
+        isFilled: true
       });
     case "cautionary":
-      return React__default.default.createElement(CautionIcon.CautionIcon, {
-        role: "presentation"
+      return React__default.default.createElement(Icon.Icon, {
+        name: "warning",
+        isPresentational: true,
+        isFilled: true
       });
     default:
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation"
+      return React__default.default.createElement(Icon.Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
       });
   }
 };

package/dist/cjs/RichTextEditor/RichTextEditor/utils/controlmap.cjs

@@ -2,15 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var AddLinkIcon = require('../../../Icon/AddLinkIcon.cjs');
-var BoldIcon = require('../../../Icon/BoldIcon.cjs');
-var BullettedListIcon = require('../../../Icon/BullettedListIcon.cjs');
-var DecreaseIndentIcon = require('../../../Icon/DecreaseIndentIcon.cjs');
-var IncreaseIndentIcon = require('../../../Icon/IncreaseIndentIcon.cjs');
-var ItalicsIcon = require('../../../Icon/ItalicsIcon.cjs');
-var NumberedListIcon = require('../../../Icon/NumberedListIcon.cjs');
-var UnderlineIcon = require('../../../Icon/UnderlineIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var listIsActive = require('../../utils/commands/listIsActive.cjs');
 var markIsActive = require('../../utils/commands/markIsActive.cjs');
 require('prosemirror-transform');
@@ -188,8 +180,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Bold",
-      icon: React__default.default.createElement(BoldIcon.BoldIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_bold",
+        isPresentational: true
       })
     });
   }
@@ -200,8 +193,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Italic",
-      icon: React__default.default.createElement(ItalicsIcon.ItalicsIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_italic",
+        isPresentational: true
       })
     });
   }
@@ -212,8 +206,9 @@ var buildControlMap = function (schema, editorState, controls) {
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Underline",
-      icon: React__default.default.createElement(UnderlineIcon.UnderlineIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_underlined",
+        isPresentational: true
       })
     });
   }
@@ -224,8 +219,10 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleListCommand(type),
       isActive: listIsActive.listIsActive(editorState, type, listNodes),
       label: "Bullet List",
-      icon: React__default.default.createElement(BullettedListIcon.BullettedListIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_list_bulleted",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       })
     });
   }
@@ -236,8 +233,10 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleListCommand(type),
       isActive: listIsActive.listIsActive(editorState, type, listNodes),
       label: "Numbered List",
-      icon: React__default.default.createElement(NumberedListIcon.NumberedListIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_list_numbered",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       })
     });
   }
@@ -248,16 +247,20 @@ var buildControlMap = function (schema, editorState, controls) {
       disabled: liftListIsDisabled(editorState),
       isActive: false,
       label: "Decrease indent",
-      icon: React__default.default.createElement(DecreaseIndentIcon.DecreaseIndentIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_indent_decrease",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       })
     }, {
       action: createIndentListCommand(),
       disabled: indentListIsDisabled(editorState),
       isActive: false,
       label: "Increase indent",
-      icon: React__default.default.createElement(IncreaseIndentIcon.IncreaseIndentIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "format_indent_increase",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       })
     });
   }
@@ -269,8 +272,9 @@ var buildControlMap = function (schema, editorState, controls) {
       disabled: editorState.selection.empty,
       isActive: false,
       label: "Link",
-      icon: React__default.default.createElement(AddLinkIcon.AddLinkIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "add_link",
+        isPresentational: true
       })
     });
   }

package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.cjs

@@ -2,12 +2,9 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../../../../../Icon/subcomponents/SVG/SVG.cjs');
-var EditIcon = require('../../../../../../Icon/EditIcon.cjs');
-var ExternalLinkIcon = require('../../../../../../Icon/ExternalLinkIcon.cjs');
-var RemoveLinkIcon = require('../../../../../../Icon/RemoveLinkIcon.cjs');
 var Popover = require('../../../../../../Popover/Popover.cjs');
 var Text = require('../../../../../../Text/Text.cjs');
+var Icon = require('../../../../../../__future__/Icon/Icon.cjs');
 var Positioner = require('./Positioner.cjs');
 var LinkPopover_module = require('./LinkPopover.module.scss.cjs');
 function _interopDefault(e) {
@@ -30,8 +27,9 @@ var LinkPopover = function (_a) {
     size: "large"
   }, React__default.default.createElement("div", {
     className: LinkPopover_module.popoverContent
-  }, React__default.default.createElement(ExternalLinkIcon.ExternalLinkIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "open_in_new",
+    isPresentational: true
   }), React__default.default.createElement("div", {
     className: LinkPopover_module.popoverLinkContainer
   }, React__default.default.createElement(Text.Text, {
@@ -45,14 +43,14 @@ var LinkPopover = function (_a) {
     rel: "noopener noreferrer"
   }, href))), React__default.default.createElement("div", {
     className: LinkPopover_module.popoverActions
-  }, React__default.default.createElement(EditIcon.EditIcon, {
-    role: "img",
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "edit",
     onClick: onEdit,
-    "aria-label": "Edit link"
-  })), React__default.default.createElement(RemoveLinkIcon.RemoveLinkIcon, {
-    role: "img",
+    alt: "Edit link"
+  })), React__default.default.createElement(Icon.Icon, {
+    name: "link_off",
     onClick: onRemove,
-    "aria-label": "Remove link"
+    alt: "Remove link"
   }))));
 };
 LinkPopover.displayName = "LinkPopover";

package/dist/cjs/Select/Select.cjs

@@ -6,12 +6,9 @@ var classnames = require('classnames');
 var ReactSelect = require('react-select');
 var Async = require('react-select/async');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../Icon/ChevronUpIcon.cjs');
-var ClearIcon = require('../Icon/ClearIcon.cjs');
 var Label = require('../Label/Label.cjs');
 var Tag = require('../Tag/Tag.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var Select_module = require('./Select.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -123,10 +120,9 @@ var Placeholder = function (props) {
 var DropdownIndicator = function (props) {
   return React__default.default.createElement(ReactSelect.components.DropdownIndicator, tslib.__assign({}, props, {
     className: Select_module.dropdownIndicator
-  }), props.selectProps.menuIsOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation"
+  }), React__default.default.createElement(Icon.Icon, {
+    name: props.selectProps.menuIsOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
   }));
 };
 var LoadingMessage = function (props) {
@@ -191,8 +187,10 @@ var ValueContainer = function (props) {
 var ClearIndicator = function (props) {
   return React__default.default.createElement(ReactSelect.components.ClearIndicator, tslib.__assign({}, props, {
     className: Select_module.clearIndicator
-  }), React__default.default.createElement(ClearIcon.ClearIcon, {
-    role: "presentation"
+  }), React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    isPresentational: true,
+    isFilled: true
   }));
 };
 exports.AsyncSelect = AsyncSelect;

package/dist/cjs/SplitButton/subcomponents/DropdownButton/DropdownButton.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var BaseButton = require('../BaseButton/BaseButton.cjs');
 var DropdownButton_module = require('./DropdownButton.module.scss.cjs');
 function _interopDefault(e) {
@@ -26,8 +25,9 @@ var DropdownButton = function (_a) {
       defaultMessage: "Additional actions",
       description: "Label for a dropdown menu holding additional actions"
     }),
-    icon: React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: "keyboard_arrow_down",
+      isPresentational: true
     }),
     classNameOverride: classnames__default.default(DropdownButton_module.dropdownButton, classNameOverride)
   }, restProps));

package/dist/cjs/Table/Table.cjs

@@ -7,10 +7,7 @@ var Checkbox = require('../Checkbox/Checkbox/Checkbox.cjs');
 require('../Checkbox/CheckboxField/CheckboxField.cjs');
 require('../Checkbox/CheckboxGroup/CheckboxGroup.cjs');
 var Heading = require('../Heading/Heading.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
-var SortAscendingIcon = require('../Icon/SortAscendingIcon.cjs');
-var SortDescendingIcon = require('../Icon/SortDescendingIcon.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var Table_module = require('./Table.module.scss.cjs');
 function _interopDefault(e) {
@@ -109,8 +106,10 @@ var TableHeaderRowCell = function (_a) {
     "aria-label": checkboxLabel
   })), tooltipInfo != null && !isTooltipIconHidden ? React__default.default.createElement("div", {
     className: Table_module.headerRowCellTooltipIcon
-  }, React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "error",
+    isPresentational: true,
+    isFilled: true
   })) : null, !icon ? React__default.default.createElement(Heading.Heading, {
     tag: "div",
     variant: "heading-6",
@@ -118,10 +117,12 @@ var TableHeaderRowCell = function (_a) {
     classNameOverride: Table_module.headerRowCellLabel
   }, labelText) : null, (sorting || isHovered && sortingArrowsOnHover) && React__default.default.createElement("div", {
     className: classnames__default.default(align === "center" && Table_module.headerRowCellIconAlignCenter, align === "end" && Table_module.headerRowCellIconAlignEnd, reversed && Table_module.whiteText)
-  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? React__default.default.createElement(SortAscendingIcon.SortAscendingIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(SortDescendingIcon.SortDescendingIcon, {
-    role: "presentation"
+  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? React__default.default.createElement(Icon.Icon, {
+    name: "arrow_drop_up",
+    isPresentational: true
+  }) : React__default.default.createElement(Icon.Icon, {
+    name: "arrow_drop_down",
+    isPresentational: true
   })));
   cellContents = href ? React__default.default.createElement("a", {
     className: classnames__default.default(Table_module.headerRowCellButton, reversed && Table_module.headerRowCellButtonReversed),

package/dist/cjs/Tag/Tag.cjs

@@ -5,12 +5,8 @@ var React = require('react');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
 require('../Icon/subcomponents/SVG/SVG.cjs');
-var CautionIcon = require('../Icon/CautionIcon.cjs');
-var ClearIcon = require('../Icon/ClearIcon.cjs');
-var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
-var InformationIcon = require('../Icon/InformationIcon.cjs');
 var LiveIcon = require('../Icon/LiveIcon.cjs');
-var SuccessIcon = require('../Icon/SuccessIcon.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var Tag_module = require('./Tag.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -56,26 +52,34 @@ var Tag = function (props) {
       case "validationPositive":
         return React__default.default.createElement("span", {
           className: Tag_module.validationIcon
-        }, React__default.default.createElement(SuccessIcon.SuccessIcon, {
-          role: "presentation"
+        }, React__default.default.createElement(Icon.Icon, {
+          name: "check_circle",
+          isPresentational: true,
+          isFilled: true
         }));
       case "validationNegative":
         return React__default.default.createElement("span", {
           className: Tag_module.validationIcon
-        }, React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-          role: "presentation"
+        }, React__default.default.createElement(Icon.Icon, {
+          name: "error",
+          isPresentational: true,
+          isFilled: true
         }));
       case "validationCautionary":
         return React__default.default.createElement("span", {
           className: Tag_module.validationIcon
-        }, React__default.default.createElement(CautionIcon.CautionIcon, {
-          role: "presentation"
+        }, React__default.default.createElement(Icon.Icon, {
+          name: "warning",
+          isPresentational: true,
+          isFilled: true
         }));
       case "validationInformative":
         return React__default.default.createElement("span", {
           className: Tag_module.validationIcon
-        }, React__default.default.createElement(InformationIcon.InformationIcon, {
-          role: "presentation"
+        }, React__default.default.createElement(Icon.Icon, {
+          name: "info",
+          isPresentational: true,
+          isFilled: true
         }));
       case "profile":
         return React__default.default.createElement("span", {
@@ -97,10 +101,10 @@ var Tag = function (props) {
     onMouseLeave: onMouseLeave
   }, React__default.default.createElement("div", {
     className: Tag_module.iconWrapper
-  }, React__default.default.createElement(ClearIcon.ClearIcon, {
-    inheritSize: true,
-    role: "img",
-    "aria-label": "Dismiss"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    alt: "Dismiss",
+    isFilled: true
   })))), variant === "statusLive" && React__default.default.createElement("span", {
     className: Tag_module.liveIcon
   }, React__default.default.createElement(LiveIcon.LiveIcon, {

package/dist/cjs/TextField/TextField.cjs

@@ -5,12 +5,11 @@ var React = require('react');
 var classnames = require('classnames');
 var FieldGroup = require('../FieldGroup/FieldGroup.cjs');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var SuccessIcon = require('../Icon/SuccessIcon.cjs');
 var Input = require('../Input/Input/Input.cjs');
 require('../Input/InputRange/InputRange.cjs');
 require('../Input/InputSearch/InputSearch.cjs');
 var Label = require('../Label/Label.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var TextField_module = require('./TextField.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -66,8 +65,10 @@ var TextField = function (_a) {
     startIconAdornment: icon,
     endIconAdornment: status === "success" && React__default.default.createElement("div", {
       className: classnames__default.default(TextField_module.success, disabled && TextField_module.disabled)
-    }, React__default.default.createElement(SuccessIcon.SuccessIcon, {
-      role: "presentation"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: "check_circle",
+      isPresentational: true,
+      isFilled: true
     }))
   }, restProps)), validationMessage && React__default.default.createElement("div", {
     className: classnames__default.default(TextField_module.message, disabled && TextField_module.disabled)

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -4,10 +4,8 @@ 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 ArrowBackwardIcon = require('../../../Icon/ArrowBackwardIcon.cjs');
-var InformationIcon = require('../../../Icon/InformationIcon.cjs');
 var Text = require('../../../Text/Text.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var GenericTile_module = require('./GenericTile.module.scss.cjs');
 var IconButton = require('../../../__actions__/Button/v1/IconButton/IconButton.cjs');
 var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
@@ -54,8 +52,10 @@ var GenericTile = function (_a) {
       className: GenericTile_module.informationBtn
     }, React__default.default.createElement(IconButton.IconButton, {
       label: "Information",
-      icon: React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
       }),
       onClick: function () {
         return setIsFlipped(true);
@@ -93,8 +93,9 @@ var GenericTile = function (_a) {
       className: GenericTile_module.informationBtn
     }, React__default.default.createElement(IconButton.IconButton, {
       label: "Information",
-      icon: React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "arrow_back",
+        isPresentational: true
       }),
       onClick: function () {
         return setIsFlipped(false);

package/dist/cjs/TitleBlockZen/TitleBlockZen.cjs

@@ -5,12 +5,9 @@ var React = require('react');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
 var Heading = require('../Heading/Heading.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowLeftIcon = require('../Icon/ArrowLeftIcon.cjs');
-var ArrowRightIcon = require('../Icon/ArrowRightIcon.cjs');
-var HamburgerIcon = require('../Icon/HamburgerIcon.cjs');
 var Select = require('../Select/Select.cjs');
 var Tag = require('../Tag/Tag.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var MainActions = require('./subcomponents/MainActions.cjs');
 var MobileActions = require('./subcomponents/MobileActions.cjs');
@@ -112,15 +109,14 @@ var Breadcrumb = function (_a) {
     handleClick = breadcrumb.handleClick,
     text = breadcrumb.text,
     render = breadcrumb.render;
-  var icon = textDirection === "rtl" ? React__default.default.createElement(ArrowRightIcon.ArrowRightIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ArrowLeftIcon.ArrowLeftIcon, {
-    role: "presentation"
-  });
   var InnerContents = function () {
     return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
       className: TitleBlockZen_module.circle
-    }, icon), React__default.default.createElement("span", {
+    }, React__default.default.createElement(Icon.Icon, {
+      name: "arrow_back",
+      isPresentational: true,
+      shouldMirrorInRTL: true
+    })), React__default.default.createElement("span", {
       className: TitleBlockZen_module.breadcrumbTextLink,
       "data-automation-id": textAutomationId,
       "data-testid": textAutomationId
@@ -239,8 +235,9 @@ var TitleBlockZen = function (_a) {
     className: TitleBlockZen_module.hamburger
   }, React__default.default.createElement(IconButton.IconButton, {
     onClick: handleHamburgerClick,
-    icon: React__default.default.createElement(HamburgerIcon.HamburgerIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: "menu",
+      isPresentational: true
     }),
     label: "Open menu",
     reversed: utils.isReversed(variant)