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

package/dist/esm/Loading/LoadingSpinner/subcomponents/SpinnerIcon.mjs

@@ -0,0 +1,72 @@
+import React from 'react';
+import styles from '../LoadingSpinner.module.css.mjs';
+var SmallSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeOpacity: "0.3"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+  }));
+};
+var MediumSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "22.5",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeOpacity: "0.3"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+  }));
+};
+var ExtraSmallSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    opacity: "0.3",
+    cx: "8",
+    cy: "8",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 8C14 4.68629 11.3137 2 8 2",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+var SpinnerIcon = function (_a) {
+  var size = _a.size;
+  if (size === "xs") return /*#__PURE__*/React.createElement(ExtraSmallSpinnerIcon, null);
+  if (size === "sm") return /*#__PURE__*/React.createElement(SmallSpinnerIcon, null);
+  return /*#__PURE__*/React.createElement(MediumSpinnerIcon, null);
+};
+export { SpinnerIcon };

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -2,11 +2,6 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Heading } from '../../Heading/Heading.mjs';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { CautionWhiteIcon } from '../../Icon/CautionWhiteIcon.mjs';
-import { ExclamationWhiteIcon } from '../../Icon/ExclamationWhiteIcon.mjs';
-import { InformationWhiteIcon } from '../../Icon/InformationWhiteIcon.mjs';
-import { SuccessWhiteIcon } from '../../Icon/SuccessWhiteIcon.mjs';
 import { Assertive, Positive, Negative, Informative, Cautionary } from '../../Illustration/Spot/Spot.mjs';
 import '../../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
 import '../../Illustration/Scene/Scene.mjs';
@@ -17,37 +12,47 @@ import { ModalFooter } from '../GenericModal/subcomponents/ModalFooter/ModalFoot
 import { ModalHeader } from '../GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
 import { ModalAccessibleLabel } from '../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
 import { ModalBody } from '../GenericModal/subcomponents/ModalBody/ModalBody.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from './ConfirmationModal.module.scss.mjs';
-var getIcon = function (variantName, isProminent) {
+var getIconName = function (variantName) {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Cautionary, null)) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "warning";
     case "informative":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Informative, null)) : ( /*#__PURE__*/React.createElement(InformationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "info";
     case "negative":
     case "warning":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Negative, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "error";
     case "positive":
     case "success":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Positive, null)) : ( /*#__PURE__*/React.createElement(SuccessWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "check_circle";
     case "assertive":
-      return isProminent ? ( /*#__PURE__*/React.createElement(Assertive, null)) : ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      }));
+      return "error";
+  }
+};
+var getIcon = function (variantName, isProminent) {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return /*#__PURE__*/React.createElement(Cautionary, null);
+      case "informative":
+        return /*#__PURE__*/React.createElement(Informative, null);
+      case "negative":
+      case "warning":
+        return /*#__PURE__*/React.createElement(Negative, null);
+      case "positive":
+      case "success":
+        return /*#__PURE__*/React.createElement(Positive, null);
+      case "assertive":
+        return /*#__PURE__*/React.createElement(Assertive, null);
+    }
   }
+  var iconName = getIconName(variantName);
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    isPresentational: true,
+    isFilled: true
+  });
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |

package/dist/esm/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.mjs

@@ -1,7 +1,5 @@
 import React from 'react';
-import 'tslib';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CloseIcon } from '../../../../Icon/CloseIcon.mjs';
+import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import { ModalBody } from '../ModalBody/ModalBody.mjs';
 import styles from './ModalHeader.module.scss.mjs';
 import { IconButton } from '../../../../__actions__/Button/v1/IconButton/IconButton.mjs';
@@ -14,8 +12,9 @@ const ModalHeader = /*#__PURE__*/function () {
       className: styles.dismissButton
     }, /*#__PURE__*/React.createElement(IconButton, {
       label: "Dismiss",
-      icon: /*#__PURE__*/React.createElement(CloseIcon, {
-        role: "presentation"
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "close",
+        isPresentational: true
       }),
       reversed: reversed,
       onClick: onDismiss,

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.mjs

@@ -1,25 +1,15 @@
 import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../../../Icon/CheckIcon.mjs';
-import { MinusIcon } from '../../../Icon/MinusIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from './Checkbox.module.scss.mjs';
 var renderIcon = function (status) {
-  switch (status) {
-    case "indeterminate":
-      return /*#__PURE__*/React.createElement(MinusIcon, {
-        role: "presentation",
-        classNameOverride: styles.icon
-      });
-    case "checked":
-      return /*#__PURE__*/React.createElement(CheckIcon, {
-        role: "presentation",
-        classNameOverride: styles.icon
-      });
-    default:
-      return null;
-  }
+  if (status === "unchecked") return null;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: status === "checked" ? "check" : "remove",
+    isPresentational: true,
+    className: styles.icon
+  });
 };
 const Checkbox = /*#__PURE__*/function () {
   const Checkbox = function (_a) {

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs

@@ -2,11 +2,9 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useId } from 'react';
 import classnames from 'classnames';
 import { ClearButton } from '../../../ClearButton/ClearButton.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
 import styles from './MultiSelectToggle.module.scss.mjs';
 import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 const MultiSelectToggle = /*#__PURE__*/function () {
   const MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
     var onClick = _a.onClick,
@@ -38,11 +36,10 @@ const MultiSelectToggle = /*#__PURE__*/function () {
         e.stopPropagation();
         onClick(e);
       }
-    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    }))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true
+    })), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.selectedItemsContainer, selectedOptions.length && styles.hasSelectedItems)
     }, selectedOptions.length > 0 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
       role: "list",

package/dist/esm/Notification/subcomponents/CancelButton/CancelButton.mjs

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseIcon } from '../../../Icon/CloseIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import styles from '../GenericNotification/GenericNotification.module.scss.mjs';
 const CancelButton = /*#__PURE__*/function () {
   const CancelButton = function (_a) {
@@ -10,8 +10,9 @@ const CancelButton = /*#__PURE__*/function () {
       onClick: onClick,
       "data-testid": "close-button",
       "aria-label": "Close notification"
-    }, /*#__PURE__*/React.createElement(CloseIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      isPresentational: true
     }));
   };
   CancelButton.displayName = "CancelButton";

package/dist/esm/Notification/subcomponents/NotificationIcon/NotificationIcon.mjs

@@ -1,42 +1,42 @@
 import React from 'react';
-import { CautionIcon } from '../../../Icon/CautionIcon.mjs';
-import { ExclamationIcon } from '../../../Icon/ExclamationIcon.mjs';
-import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
-import { SecurityTipIcon } from '../../../Icon/SecurityTipIcon.mjs';
-import { SuccessIcon } from '../../../Icon/SuccessIcon.mjs';
+import styles from './NotificationIcon.module.css.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
+var NotificationIcon = function (_a) {
+  var name = _a.name;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: name,
+    isFilled: true,
+    isPresentational: true,
+    className: styles.notificationIcon
+  });
+};
 const NotificationIconType = /*#__PURE__*/function () {
   const NotificationIconType = function (_a) {
     var type = _a.type;
     switch (type) {
       case "positive":
-        return /*#__PURE__*/React.createElement(SuccessIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "check_circle"
         });
       case "negative":
-        return /*#__PURE__*/React.createElement(ExclamationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "error"
         });
       case "cautionary":
-        return /*#__PURE__*/React.createElement(CautionIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "warning"
         });
       case "informative":
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
       case "security":
-        return /*#__PURE__*/React.createElement(SecurityTipIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "privacy_tip"
         });
       default:
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
     }
   };
@@ -48,29 +48,24 @@ const NotificationIconVariant = /*#__PURE__*/function () {
     var variant = _a.variant;
     switch (variant) {
       case "success":
-        return /*#__PURE__*/React.createElement(SuccessIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "check_circle"
         });
       case "warning":
-        return /*#__PURE__*/React.createElement(ExclamationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "error"
         });
       case "cautionary":
-        return /*#__PURE__*/React.createElement(CautionIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "warning"
         });
       case "informative":
-        return /*#__PURE__*/React.createElement(InformationIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "info"
         });
       case "security":
-        return /*#__PURE__*/React.createElement(SecurityTipIcon, {
-          role: "presentation",
-          inheritSize: true
+        return /*#__PURE__*/React.createElement(NotificationIcon, {
+          name: "privacy_tip"
         });
     }
   };

package/dist/esm/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "notificationIcon": "NotificationIcon-module_notificationIcon__4xH0m"
+};
+export { styles as default };

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
       })
     });
   }