@kaizen/components 1.66.0 → 1.67.0

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";

package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -1,42 +1,37 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { IndicatorActiveIcon } from '../../../../../Icon/IndicatorActiveIcon.mjs';
-import { IndicatorInactiveIcon } from '../../../../../Icon/IndicatorInactiveIcon.mjs';
-import { SuccessIcon } from '../../../../../Icon/SuccessIcon.mjs';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import { Icon } from '../../../../../__future__/Icon/Icon.mjs';
 import styles from './ProgressStepper.module.css.mjs';
 var getStepStatus = function (isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
-      icon: ( /*#__PURE__*/React.createElement(SuccessIcon, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "success"
-      })),
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
+      }),
       accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
     return {
-      icon: ( /*#__PURE__*/React.createElement(IndicatorActiveIcon, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "active"
-      })),
+        name: "radio_button_checked",
+        isPresentational: true
+      }),
       accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
-    icon: ( /*#__PURE__*/React.createElement(IndicatorInactiveIcon, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
       key: index,
-      inheritSize: true,
-      classNameOverride: "incomplete",
-      role: "presentation"
-    })),
+      name: "radio_button_unchecked",
+      isPresentational: true
+    }),
     accessibleName: "Not started: ".concat(step.label)
   };
 };
@@ -62,7 +57,7 @@ const ProgressStepper = /*#__PURE__*/function () {
       var isCompletedStep = index < currentStepIndex || isComplete;
       var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
         accessibleName = _c.accessibleName,
-        Icon = _c.icon;
+        icon = _c.icon;
       return /*#__PURE__*/React.createElement("li", {
         className: styles.step,
         key: "".concat(step.id),
@@ -76,7 +71,7 @@ const ProgressStepper = /*#__PURE__*/function () {
         className: styles.stepIndicator
       }, /*#__PURE__*/React.createElement("span", {
         className: classnames(styles.stepIcon, (_b = {}, _b[styles.isCompleted] = isCompletedStep, _b))
-      }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
+      }, icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
         className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
       }))));
     })), /*#__PURE__*/React.createElement("span", {

package/dist/esm/__future__/Icon/Icon.mjs

@@ -0,0 +1,38 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { handledRtlIcons } from './constants.mjs';
+import styles from './Icon.module.css.mjs';
+var MaterialIcon = function (_a) {
+  var children = _a.children,
+    isFilled = _a.isFilled,
+    isPresentational = _a.isPresentational,
+    alt = _a.alt,
+    className = _a.className,
+    restProps = __rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
+  return /*#__PURE__*/React.createElement("span", __assign({
+    className: classnames("material-symbols-outlined", styles.icon, isFilled && styles.filled, className),
+    "aria-hidden": isPresentational,
+    role: isPresentational ? undefined : "img",
+    "aria-label": alt
+  }, restProps), children);
+};
+var Icon = function (_a) {
+  var name = _a.name,
+    shouldMirrorInRTL = _a.shouldMirrorInRTL,
+    restProps = __rest(_a, ["name", "shouldMirrorInRTL"]);
+  if (!shouldMirrorInRTL) {
+    return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), name);
+  }
+  if (Object.keys(handledRtlIcons).includes(name)) {
+    return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconLTR
+    }, name), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconRTL
+    }, handledRtlIcons[name]));
+  }
+  return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps, {
+    className: classnames(styles.shouldMirrorInRTL, restProps.className)
+  }), name);
+};
+export { Icon };

package/dist/esm/__future__/Icon/Icon.module.css.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  "icon": "Icon-module_icon__CkmHY",
+  "filled": "Icon-module_filled__-VArQ",
+  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__kxncF",
+  "iconLTR": "Icon-module_iconLTR__b3GoB",
+  "iconRTL": "Icon-module_iconRTL__lpVw5"
+};
+export { styles as default };

package/dist/esm/__future__/Icon/constants.mjs

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+var handledRtlIcons = {
+  checklist: "checklist_rtl",
+  format_list_numbered: "format_list_numbered_rtl"
+};
+export { handledRtlIcons };

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { useOption, useFocusRing, mergeProps } from 'react-aria';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
 import styles from './Option.module.scss.mjs';
 const Option = /*#__PURE__*/function () {
@@ -42,9 +41,9 @@ const Option = /*#__PURE__*/function () {
       "aria-label": item.textValue
     }), item.rendered, /*#__PURE__*/React.createElement("span", {
       className: classnames(styles.icon, isSelected && styles.isSelected)
-    }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
-      inheritSize: true,
-      role: "presentation"
+    }, isSelected && /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      isPresentational: true
     })));
   };
   Option.displayName = "Option";

package/dist/esm/__future__/Select/subcomponents/SelectToggle/SelectToggle.mjs

@@ -1,10 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../../../../Icon/ChevronUpIcon.mjs';
 import { Label } from '../../../../Label/Label.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import styles from './SelectToggle.module.scss.mjs';
 const SelectToggle = /*#__PURE__*/function () {
   const SelectToggle = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -33,13 +31,11 @@ const SelectToggle = /*#__PURE__*/function () {
       className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === "error" && styles.error, status === "caution" && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
     }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
       className: styles.value
-    }), value !== null && value !== void 0 ? value : placeholder), isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation",
-      classNameOverride: styles.icon
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation",
-      classNameOverride: styles.icon
-    }))));
+    }), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true,
+      className: styles.icon
+    })));
   });
   SelectToggle.displayName = "SelectToggle";
   return SelectToggle;

package/dist/esm/__future__/Tag/RemovableTag/subcomponents/RemoveButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { RemoveTagIcon } from './RemoveTagIcon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import styles from './RemoveButton.module.scss.mjs';
 const RemoveButton = /*#__PURE__*/function () {
   const RemoveButton = function (_a) {
@@ -15,8 +15,9 @@ const RemoveButton = /*#__PURE__*/function () {
       "aria-label": ariaLabel,
       className: classnames(styles.removeButton, classNameOverride),
       onClick: onClick
-    }, restProps), /*#__PURE__*/React.createElement(RemoveTagIcon, {
-      role: "presentation"
+    }, restProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      isPresentational: true
     }));
   };
   RemoveButton.displayName = "RemoveButton";

package/dist/esm/future.mjs

@@ -1,3 +1,4 @@
+export { Icon } from './__future__/Icon/Icon.mjs';
 export { Select } from './__future__/Select/Select.mjs';
 export { RemovableTag } from './__future__/Tag/RemovableTag/RemovableTag.mjs';
 export { Tag } from './__future__/Tag/Tag/Tag.mjs';