@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

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/TextArea/TextArea.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var TextArea_module = require('./TextArea.module.scss.cjs');
+var TextArea_module = require('./TextArea.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -12,77 +12,45 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var TextArea = function (_a) {
+  var _b, _c;
   var propsTextAreaRef = _a.textAreaRef,
-    _b = _a.status,
-    status = _b === void 0 ? "default" : _b,
-    _c = _a.autogrow,
-    autogrow = _c === void 0 ? false : _c,
-    _d = _a.reversed,
-    reversed = _d === void 0 ? false : _d,
-    _e = _a.rows,
-    rows = _e === void 0 ? 3 : _e,
+    _d = _a.status,
+    status = _d === void 0 ? "default" : _d,
+    _e = _a.autogrow,
+    autogrow = _e === void 0 ? false : _e,
+    _f = _a.reversed,
+    reversed = _f === void 0 ? false : _f,
+    _g = _a.rows,
+    rows = _g === void 0 ? 3 : _g,
     defaultValue = _a.defaultValue,
     value = _a.value,
     disabled = _a.disabled,
     propsOnChange = _a.onChange,
     restProps = tslib.__rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-  var _f = React.useState("auto"),
-    textAreaHeight = _f[0],
-    setTextAreaHeight = _f[1];
-  var _g = React.useState("auto"),
-    parentHeight = _g[0],
-    setParentHeight = _g[1];
-  var _h = React.useState(autogrow ? defaultValue : undefined),
+  var _h = React.useState(autogrow && !value ? defaultValue : undefined),
     internalValue = _h[0],
     setInternalValue = _h[1];
   // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true
+  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+  var controlledValue = value || internalValue;
   var textAreaRef = propsTextAreaRef || React.useRef(null);
-  React.useEffect(function () {
-    if (!autogrow) return;
-    var scrollHeight = textAreaRef.current.scrollHeight;
-    if (scrollHeight < 1) return;
-    var borderWidth = textAreaRef.current ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10) : 0;
-    var newHeight = scrollHeight + borderWidth * 2;
-    setParentHeight("".concat(newHeight, "px"));
-    setTextAreaHeight("".concat(newHeight, "px"));
-  }, [internalValue]);
-  var onChange = !autogrow ? undefined : function (event) {
-    setTextAreaHeight("auto");
-    // ^ this is required to avoid the textarea height from building up indefinitely
-    // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
+  var onChange = function (event) {
+    propsOnChange && propsOnChange(event);
     setInternalValue(event.target.value);
-    if (propsOnChange) {
-      propsOnChange(event);
-    }
-  };
-  var getWrapperStyle = function () {
-    return autogrow ? {
-      minHeight: parentHeight
-    } : undefined;
   };
-  var getTextAreaStyle = function () {
-    return autogrow ? {
-      height: textAreaHeight
-    } : undefined;
-  };
-  var controlledValue = value || internalValue;
   return React__default.default.createElement("div", {
-    className: TextArea_module.wrapper,
-    style: getWrapperStyle()
+    className: classnames__default.default(TextArea_module.wrapper, (_b = {}, _b[TextArea_module.wrapperAutogrow] = autogrow, _b)),
+    "data-value": autogrow ? controlledValue : undefined
   }, React__default.default.createElement("textarea", tslib.__assign({
-    className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, disabled && TextArea_module.disabled),
+    className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, (_c = {}, _c[TextArea_module.disabled] = disabled, _c[TextArea_module.textareaAutogrow] = autogrow, _c)),
     rows: rows,
-    onChange: onChange || propsOnChange,
+    onChange: onChange,
     value: controlledValue,
     defaultValue: controlledValue ? undefined : defaultValue,
     // ^ React throws a warning if you specify both a value and a defaultValue
     ref: textAreaRef,
-    style: getTextAreaStyle(),
     disabled: disabled
-  }, restProps)), React__default.default.createElement("div", {
-    className: TextArea_module.focusRing
-  }));
+  }, restProps)));
 };
 TextArea.displayName = "TextArea";
 exports.TextArea = TextArea;

package/dist/cjs/TextArea/TextArea.module.css.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var styles = {
+  "wrapper": "TextArea-module_wrapper__FHfMG",
+  "wrapperAutogrow": "TextArea-module_wrapperAutogrow__f46bL",
+  "textarea": "TextArea-module_textarea__Ht-1a",
+  "textareaAutogrow": "TextArea-module_textareaAutogrow__ReEar",
+  "default": "TextArea-module_default__e1cis",
+  "error": "TextArea-module_error__bBmvS",
+  "caution": "TextArea-module_caution__aj4nR",
+  "disabled": "TextArea-module_disabled__XY39a",
+  "reversed": "TextArea-module_reversed__r-W3e"
+};
+module.exports = styles;

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 : {
@@ -47,7 +46,7 @@ var TextField = function (_a) {
     id: "".concat(id, "-field-group"),
     "data-testid": "".concat(id, "-field-group"),
     inline: inline,
-    classNameOverride: classnames__default.default(TextField_module.withLabel, disabled && TextField_module.withDisabled)
+    classNameOverride: classnames__default.default(reversed && TextField_module.reversed)
   }, React__default.default.createElement(Label.Label, {
     id: "".concat(id, "-field-label"),
     "data-testid": "".concat(id, "-field-label"),
@@ -65,9 +64,11 @@ var TextField = function (_a) {
     status: status,
     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"
+      className: classnames__default.default(TextField_module.icon, TextField_module.success, disabled && TextField_module.disabled)
+    }, 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/TextField/TextField.module.scss.cjs

@@ -2,12 +2,10 @@
 
 var styles = {
   "input": "TextField-module_input__CEokl",
-  "success": "TextField-module_success__pMLcV",
+  "icon": "TextField-module_icon__wFK4Q",
   "fade-0-to-1": "TextField-module_fade-0-to-1__Ac-99",
-  "withReversed": "TextField-module_withReversed__agi-Q",
-  "disabled": "TextField-module_disabled__gS8tk",
-  "error": "TextField-module_error__7S-f2",
-  "caution": "TextField-module_caution__3gzHk",
-  "message": "TextField-module_message__bQOgK"
+  "success": "TextField-module_success__pMLcV",
+  "reversed": "TextField-module_reversed__qW9r1",
+  "disabled": "TextField-module_disabled__gS8tk"
 };
 module.exports = styles;

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)

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) {