@kaizen/components 0.0.0-canary-fix-select-focus-add-small-delay-20241013230007 → 0.0.0-canary-tsx-codemod-20241029235345

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

@@ -1,80 +1,48 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
-import styles from './TextArea.module.scss.mjs';
+import styles from './TextArea.module.css.mjs';
 const TextArea = /*#__PURE__*/function () {
   const 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 = __rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-    var _f = useState("auto"),
-      textAreaHeight = _f[0],
-      setTextAreaHeight = _f[1];
-    var _g = useState("auto"),
-      parentHeight = _g[0],
-      setParentHeight = _g[1];
-    var _h = useState(autogrow ? defaultValue : undefined),
+    var _h = 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 || useRef(null);
-    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 /*#__PURE__*/React.createElement("div", {
-      className: styles.wrapper,
-      style: getWrapperStyle()
+      className: classnames(styles.wrapper, (_b = {}, _b[styles.wrapperAutogrow] = autogrow, _b)),
+      "data-value": autogrow ? controlledValue : undefined
     }, /*#__PURE__*/React.createElement("textarea", __assign({
-      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, disabled && styles.disabled),
+      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, (_c = {}, _c[styles.disabled] = disabled, _c[styles.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)), /*#__PURE__*/React.createElement("div", {
-      className: styles.focusRing
-    }));
+    }, restProps)));
   };
   TextArea.displayName = "TextArea";
   return TextArea;

package/dist/esm/TextArea/TextArea.module.css.mjs

@@ -0,0 +1,12 @@
+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"
+};
+export { styles as default };

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';
 
 /**
@@ -39,7 +38,7 @@ const TextField = /*#__PURE__*/function () {
       id: "".concat(id, "-field-group"),
       "data-testid": "".concat(id, "-field-group"),
       inline: inline,
-      classNameOverride: classnames(styles.withLabel, disabled && styles.withDisabled)
+      classNameOverride: classnames(reversed && styles.reversed)
     }, /*#__PURE__*/React.createElement(Label, {
       id: "".concat(id, "-field-label"),
       "data-testid": "".concat(id, "-field-label"),
@@ -57,9 +56,11 @@ const TextField = /*#__PURE__*/function () {
       status: status,
       startIconAdornment: icon,
       endIconAdornment: status === "success" && ( /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles.success, disabled && styles.disabled)
-      }, /*#__PURE__*/React.createElement(SuccessIcon, {
-        role: "presentation"
+        className: classnames(styles.icon, styles.success, disabled && styles.disabled)
+      }, /*#__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/TextField/TextField.module.scss.mjs

@@ -1,11 +1,9 @@
 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"
 };
 export { styles as default };

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

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

@@ -2,9 +2,7 @@ import { __assign } from 'tslib';
 import React, { useState, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
-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 { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from '../constants.mjs';
 import { isMenuGroupNotButton, convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
@@ -191,11 +189,10 @@ var DrawerHandle = function (_a) {
         "aria-expanded": isOpen
       }, primaryAction.label, /*#__PURE__*/React.createElement("span", {
         className: styles.mobileActionsChevronSquare
-      }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        role: "presentation"
-      })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-        role: "presentation"
-      })))));
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+        isPresentational: true
+      }))));
     }
     // If the primary action is a button, or has no onClick/href/action
     return /*#__PURE__*/React.createElement("div", {
@@ -212,11 +209,10 @@ var DrawerHandle = function (_a) {
       "aria-expanded": isOpen,
       id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
       "aria-label": "Other actions"
-    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })))));
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
+    }))));
   }
   // if there are default/secondary actions but no primary action
   if (showDrawer) {
@@ -231,11 +227,10 @@ var DrawerHandle = function (_a) {
       id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
     }, renderDrawerHandleLabel("Other actions"), /*#__PURE__*/React.createElement("span", {
       className: styles.mobileActionsChevronSquare
-    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })))));
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
+    }))));
   }
   return null;
 };

package/dist/esm/TitleBlockZen/subcomponents/SecondaryActions.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 styles from '../TitleBlockZen.module.scss.mjs';
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
@@ -18,8 +16,9 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: /*#__PURE__*/React.createElement(IconButton, {
       label: "Open secondary menu",
       reversed: reversed,
-      icon: /*#__PURE__*/React.createElement(MeatballsIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "more_horiz",
+        isPresentational: true
       }),
       id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
     })
@@ -50,8 +49,9 @@ const SecondaryActions = /*#__PURE__*/function () {
               secondary: true,
               label: action.label,
               reversed: reversed,
-              icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
-                role: "presentation"
+              icon: /*#__PURE__*/React.createElement(Icon, {
+                name: "keyboard_arrow_down",
+                isPresentational: true
               }),
               iconPosition: "end"
             })

package/dist/esm/ToggleSwitch/ToggleSwitch/ToggleSwitch.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 { CheckIcon } from '../../Icon/CheckIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from './ToggleSwitch.module.scss.mjs';
 const ToggleSwitch = /*#__PURE__*/function () {
   const ToggleSwitch = function (_a) {
@@ -22,9 +21,10 @@ const ToggleSwitch = /*#__PURE__*/function () {
       className: styles.track
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.thumb
-    }, /*#__PURE__*/React.createElement(CheckIcon, {
-      classNameOverride: styles.checkIcon,
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      isPresentational: true,
+      className: styles.checkIcon
     }))));
   };
   ToggleSwitch.displayName = "ToggleSwitch";