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

package/dist/cjs/Loading/LoadingSpinner/subcomponents/SpinnerIcon.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var React = require('react');
+var LoadingSpinner_module = require('../LoadingSpinner.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var SmallSpinnerIcon = function () {
+  return React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeOpacity: "0.3"
+  }), React__default.default.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 React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "22.5",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeOpacity: "0.3"
+  }), React__default.default.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 React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    opacity: "0.3",
+    cx: "8",
+    cy: "8",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), React__default.default.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 React__default.default.createElement(ExtraSmallSpinnerIcon, null);
+  if (size === "sm") return React__default.default.createElement(SmallSpinnerIcon, null);
+  return React__default.default.createElement(MediumSpinnerIcon, null);
+};
+exports.SpinnerIcon = SpinnerIcon;

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -4,11 +4,6 @@ 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 CautionWhiteIcon = require('../../Icon/CautionWhiteIcon.cjs');
-var ExclamationWhiteIcon = require('../../Icon/ExclamationWhiteIcon.cjs');
-var InformationWhiteIcon = require('../../Icon/InformationWhiteIcon.cjs');
-var SuccessWhiteIcon = require('../../Icon/SuccessWhiteIcon.cjs');
 var Spot = require('../../Illustration/Spot/Spot.cjs');
 require('../../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.cjs');
 require('../../Illustration/Scene/Scene.cjs');
@@ -19,6 +14,7 @@ var ModalFooter = require('../GenericModal/subcomponents/ModalFooter/ModalFooter
 var ModalHeader = require('../GenericModal/subcomponents/ModalHeader/ModalHeader.cjs');
 var ModalAccessibleLabel = require('../GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.cjs');
 var ModalBody = require('../GenericModal/subcomponents/ModalBody/ModalBody.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var ConfirmationModal_module = require('./ConfirmationModal.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -27,37 +23,46 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var getIcon = function (variantName, isProminent) {
+var getIconName = function (variantName) {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? React__default.default.createElement(Spot.Cautionary, null) : React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "warning";
     case "informative":
-      return isProminent ? React__default.default.createElement(Spot.Informative, null) : React__default.default.createElement(InformationWhiteIcon.InformationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "info";
     case "negative":
     case "warning":
-      return isProminent ? React__default.default.createElement(Spot.Negative, null) : React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "error";
     case "positive":
     case "success":
-      return isProminent ? React__default.default.createElement(Spot.Positive, null) : React__default.default.createElement(SuccessWhiteIcon.SuccessWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "check_circle";
     case "assertive":
-      return isProminent ? React__default.default.createElement(Spot.Assertive, null) : React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-        inheritSize: true,
-        role: "presentation"
-      });
+      return "error";
   }
 };
+var getIcon = function (variantName, isProminent) {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return React__default.default.createElement(Spot.Cautionary, null);
+      case "informative":
+        return React__default.default.createElement(Spot.Informative, null);
+      case "negative":
+      case "warning":
+        return React__default.default.createElement(Spot.Negative, null);
+      case "positive":
+      case "success":
+        return React__default.default.createElement(Spot.Positive, null);
+      case "assertive":
+        return React__default.default.createElement(Spot.Assertive, null);
+    }
+  }
+  var iconName = getIconName(variantName);
+  return React__default.default.createElement(Icon.Icon, {
+    name: iconName,
+    isPresentational: true,
+    isFilled: true
+  });
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}

package/dist/cjs/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CloseIcon = require('../../../../Icon/CloseIcon.cjs');
+var Icon = require('../../../../__future__/Icon/Icon.cjs');
 var ModalBody = require('../ModalBody/ModalBody.cjs');
 var ModalHeader_module = require('./ModalHeader.module.scss.cjs');
 var IconButton = require('../../../../__actions__/Button/v1/IconButton/IconButton.cjs');
@@ -21,8 +19,9 @@ var ModalHeader = function (_a) {
     className: ModalHeader_module.dismissButton
   }, React__default.default.createElement(IconButton.IconButton, {
     label: "Dismiss",
-    icon: React__default.default.createElement(CloseIcon.CloseIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: "close",
+      isPresentational: true
     }),
     reversed: reversed,
     onClick: onDismiss,

package/dist/cjs/MultiSelect/subcomponents/Checkbox/Checkbox.cjs

@@ -3,9 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../../Icon/CheckIcon.cjs');
-var MinusIcon = require('../../../Icon/MinusIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var Checkbox_module = require('./Checkbox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -15,20 +13,12 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var renderIcon = function (status) {
-  switch (status) {
-    case "indeterminate":
-      return React__default.default.createElement(MinusIcon.MinusIcon, {
-        role: "presentation",
-        classNameOverride: Checkbox_module.icon
-      });
-    case "checked":
-      return React__default.default.createElement(CheckIcon.CheckIcon, {
-        role: "presentation",
-        classNameOverride: Checkbox_module.icon
-      });
-    default:
-      return null;
-  }
+  if (status === "unchecked") return null;
+  return React__default.default.createElement(Icon.Icon, {
+    name: status === "checked" ? "check" : "remove",
+    isPresentational: true,
+    className: Checkbox_module.icon
+  });
 };
 var Checkbox = function (_a) {
   var checkedStatus = _a.checkedStatus,

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.cjs

@@ -4,11 +4,9 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var ClearButton = require('../../../ClearButton/ClearButton.cjs');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
 var MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
 var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -46,10 +44,9 @@ var MultiSelectToggle = React.forwardRef(function (_a, ref) {
       e.stopPropagation();
       onClick(e);
     }
-  }, isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
   })), React__default.default.createElement("div", {
     className: classnames__default.default(MultiSelectToggle_module.selectedItemsContainer, selectedOptions.length && MultiSelectToggle_module.hasSelectedItems)
   }, selectedOptions.length > 0 && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("ul", {

package/dist/cjs/Notification/subcomponents/CancelButton/CancelButton.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var CloseIcon = require('../../../Icon/CloseIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -17,8 +17,9 @@ var CancelButton = function (_a) {
     onClick: onClick,
     "data-testid": "close-button",
     "aria-label": "Close notification"
-  }, React__default.default.createElement(CloseIcon.CloseIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "close",
+    isPresentational: true
   }));
 };
 CancelButton.displayName = "CancelButton";

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

@@ -1,49 +1,49 @@
 'use strict';
 
 var React = require('react');
-var CautionIcon = require('../../../Icon/CautionIcon.cjs');
-var ExclamationIcon = require('../../../Icon/ExclamationIcon.cjs');
-var InformationIcon = require('../../../Icon/InformationIcon.cjs');
-var SecurityTipIcon = require('../../../Icon/SecurityTipIcon.cjs');
-var SuccessIcon = require('../../../Icon/SuccessIcon.cjs');
+var NotificationIcon_module = require('./NotificationIcon.module.css.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 NotificationIcon = function (_a) {
+  var name = _a.name;
+  return React__default.default.createElement(Icon.Icon, {
+    name: name,
+    isFilled: true,
+    isPresentational: true,
+    className: NotificationIcon_module.notificationIcon
+  });
+};
 var NotificationIconType = function (_a) {
   var type = _a.type;
   switch (type) {
     case "positive":
-      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "check_circle"
       });
     case "negative":
-      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "error"
       });
     case "cautionary":
-      return React__default.default.createElement(CautionIcon.CautionIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "warning"
       });
     case "informative":
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
     case "security":
-      return React__default.default.createElement(SecurityTipIcon.SecurityTipIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "privacy_tip"
       });
     default:
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
   }
 };
@@ -52,29 +52,24 @@ var NotificationIconVariant = function (_a) {
   var variant = _a.variant;
   switch (variant) {
     case "success":
-      return React__default.default.createElement(SuccessIcon.SuccessIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "check_circle"
       });
     case "warning":
-      return React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "error"
       });
     case "cautionary":
-      return React__default.default.createElement(CautionIcon.CautionIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "warning"
       });
     case "informative":
-      return React__default.default.createElement(InformationIcon.InformationIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "info"
       });
     case "security":
-      return React__default.default.createElement(SecurityTipIcon.SecurityTipIcon, {
-        role: "presentation",
-        inheritSize: true
+      return React__default.default.createElement(NotificationIcon, {
+        name: "privacy_tip"
       });
   }
 };

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