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

package/dist/esm/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -2,9 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { enAU } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
@@ -45,13 +43,17 @@ const CalendarSingle = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },

package/dist/esm/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs

@@ -1,9 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
@@ -43,13 +41,17 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },

package/dist/esm/Checkbox/Checkbox/Checkbox.mjs

@@ -1,21 +1,15 @@
 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 { MinusIcon } from '../../Icon/MinusIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import styles from './Checkbox.module.scss.mjs';
 var renderCheckOrMixedIcon = function (status, reversed) {
   if (status === "off") return;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: status === "on" ? "check" : "remove",
+    isPresentational: true,
     className: classnames(styles.icon, reversed && styles.reversed)
-  }, status === "on" ? ( /*#__PURE__*/React.createElement(CheckIcon, {
-    role: "presentation",
-    inheritSize: true
-  })) : ( /*#__PURE__*/React.createElement(MinusIcon, {
-    role: "presentation",
-    inheritSize: true
-  })));
+  });
 };
 var getCheckedFromStatus = function (checkedStatus) {
   return checkedStatus === "on";

package/dist/esm/ClearButton/ClearButton.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 { ClearIcon } from '../Icon/ClearIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './ClearButton.module.scss.mjs';
 const ClearButton = /*#__PURE__*/function () {
   const ClearButton = function (_a) {
@@ -14,8 +13,10 @@ const ClearButton = /*#__PURE__*/function () {
       type: "button",
       "aria-label": "clear",
       className: classnames(styles.clearButton, isReversed ? styles.reversed : styles.default, classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement(ClearIcon, {
-      role: "presentation"
+    }, restProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel",
+      isPresentational: true,
+      isFilled: true
     }));
   };
   ClearButton.displayName = "ClearButton";

package/dist/esm/Collapsible/Collapsible/Collapsible.mjs

@@ -3,9 +3,7 @@ import React, { useState, useId } from 'react';
 import classnames from 'classnames';
 import AnimateHeight from 'react-animate-height';
 import { Heading } from '../../Heading/Heading.mjs';
-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 styles from './Collapsible.module.scss.mjs';
 import { IconButton } from '../../__actions__/Button/v1/IconButton/IconButton.mjs';
 const Collapsible = /*#__PURE__*/function () {
@@ -65,11 +63,10 @@ const Collapsible = /*#__PURE__*/function () {
       tag: "span"
     }, title))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
       label: title,
-      icon: isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-        role: "presentation"
-      })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        role: "presentation"
-      })),
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+        isPresentational: true
+      }),
       type: "button",
       "aria-expanded": isOpen,
       "aria-controls": sectionId,

package/dist/esm/DateInput/DateInputWithIconButton/DateInputWithIconButton.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 { DateStartIcon } from '../../Icon/DateStartIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { isRefObject } from '../../utils/isRefObject.mjs';
 import { DateInput } from '../DateInput/DateInput.mjs';
 import styles from './DateInputWithIconButton.module.scss.mjs';
@@ -23,8 +22,10 @@ const DateInputWithIconButton = /*#__PURE__*/function () {
       "aria-disabled": disabled,
       disabled: disabled,
       className: classnames(styles.iconButton, restProps["aria-expanded"] && styles.calendarActive, disabled && styles.disabled)
-    }, /*#__PURE__*/React.createElement(DateStartIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "today",
+      isPresentational: true,
+      isFilled: true
     }));
     return /*#__PURE__*/React.createElement(DateInput, __assign({
       ref: inputRef,

package/dist/esm/DateRangePicker/DateRangePicker.mjs

@@ -11,10 +11,9 @@ import 'date-fns';
 import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
 import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
 import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { DateStartIcon } from '../Icon/DateStartIcon.mjs';
 import { Label } from '../Label/Label.mjs';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './DateRangePicker.module.scss.mjs';
 
 /**
@@ -117,8 +116,10 @@ const DateRangePicker = /*#__PURE__*/function () {
       "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
     }, inputProps), /*#__PURE__*/React.createElement("div", {
       className: styles.startIconAdornment
-    }, /*#__PURE__*/React.createElement(DateStartIcon, {
-      role: "presentation"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "today",
+      isPresentational: true,
+      isFilled: true
     })), /*#__PURE__*/React.createElement("span", {
       className: styles.value
     }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && ( /*#__PURE__*/React.createElement(FocusOn, {

package/dist/esm/ErrorPage/ErrorPage.mjs

@@ -3,13 +3,11 @@ import React from 'react';
 import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { BrandMoment } from '../BrandMoment/BrandMoment.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowRightIcon } from '../Icon/ArrowRightIcon.mjs';
-import { EmailIcon } from '../Icon/EmailIcon.mjs';
 import '../Illustration/subcomponents/Base/Base.mjs';
 import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
 import { BrandMomentError } from '../Illustration/Scene/Scene.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { useErrorMessages } from './hooks/useErrorMessages.mjs';
 import styles from './ErrorPage.module.scss.mjs';
 var getMailToHref = function (code) {
@@ -62,9 +60,11 @@ const ErrorPage = /*#__PURE__*/function () {
       }),
       variant: "warning",
       primaryAction: __assign(__assign({}, actions.primary), {
-        icon: /*#__PURE__*/React.createElement(ArrowRightIcon, {
-          role: "presentation"
-        }),
+        icon: ( /*#__PURE__*/React.createElement(Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
+        })),
         iconPosition: "end",
         label: formatMessage({
           id: "kzErrorPage.goToHome",
@@ -73,8 +73,10 @@ const ErrorPage = /*#__PURE__*/function () {
         })
       }),
       secondaryAction: __assign(__assign({}, actions.secondary), {
-        icon: /*#__PURE__*/React.createElement(EmailIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "mail",
+          isPresentational: true,
+          isFilled: true
         }),
         label: formatMessage({
           id: "kzErrorPage",

package/dist/esm/FieldMessage/FieldMessage.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 { CautionWhiteIcon } from '../Icon/CautionWhiteIcon.mjs';
-import { ExclamationWhiteIcon } from '../Icon/ExclamationWhiteIcon.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './FieldMessage.module.scss.mjs';
 const FieldMessage = /*#__PURE__*/function () {
   const FieldMessage = function (_a) {
@@ -22,15 +20,11 @@ const FieldMessage = /*#__PURE__*/function () {
       className: classnames(styles.message, styles[status], classNameOverride, reversed && styles.reversed, position === "bottom" && styles.positionBottom, position === "top" && styles.positionTop)
     }, restProps), (status === "error" || status === "caution") && ( /*#__PURE__*/React.createElement("span", {
       className: styles.warningIcon
-    }, status === "error" ? ( /*#__PURE__*/React.createElement(ExclamationWhiteIcon, {
-      role: "img",
-      inheritSize: false,
-      "aria-label": "".concat(status, " message")
-    })) : ( /*#__PURE__*/React.createElement(CautionWhiteIcon, {
-      role: "img",
-      inheritSize: false,
-      "aria-label": "".concat(status, " message")
-    })))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: status === "error" ? "error" : "warning",
+      isFilled: true,
+      alt: "".concat(status, " message")
+    }))), /*#__PURE__*/React.createElement("div", {
       className: styles.message
     }, /*#__PURE__*/React.createElement(Text, {
       variant: "small",

package/dist/esm/Filter/FilterBar/context/FilterBarContext.mjs

@@ -72,16 +72,24 @@ var FilterBarProvider = function (_a) {
       });
     },
     showFilter: function (id) {
-      return dispatch({
+      dispatch({
         type: "activate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
     },
     hideFilter: function (id) {
       dispatch({
         type: "deactivate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: "add_filter"
+      });
     },
     getInactiveFilters: function () {
       return getInactiveFilters(state);
@@ -97,7 +105,14 @@ var FilterBarProvider = function (_a) {
         type: "update_values",
         values: {}
       });
-    }
+    },
+    setFocus: function (id) {
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
+    },
+    focusId: state.focusId
   };
   useEffect(function () {
     var shouldUpdate = checkShouldUpdateValues(state, values);

package/dist/esm/Filter/FilterBar/context/reducer/filterBarStateReducer.mjs

@@ -4,6 +4,10 @@ import { updateSingleFilter } from './updateSingleFilter.mjs';
 import { updateValues } from './updateValues.mjs';
 var filterBarStateReducer = function (state, action) {
   switch (action.type) {
+    case "set_focus":
+      return __assign(__assign({}, state), {
+        focusId: action.id
+      });
     case "update_values":
       return __assign({}, updateValues(state, action.values));
     case "complete_update_values":

package/dist/esm/Filter/FilterBar/context/reducer/setupFilterBarState.mjs

@@ -26,7 +26,8 @@ var setupFilterBarState = function (filters, values) {
     activeFilterIds: new Set(),
     values: values,
     dependentFilterIds: new Set(),
-    hasUpdatedValues: false
+    hasUpdatedValues: false,
+    focusId: undefined
   });
   return updateDependentFilters(state);
 };

package/dist/esm/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.mjs

@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
-import 'tslib';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { AddIcon } from '../../../../Icon/AddIcon.mjs';
+import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { Menu } from '../../../../__actions__/Menu/v1/Menu.mjs';
 import { MenuList } from '../../../../__actions__/Menu/v1/subcomponents/MenuList/MenuList.mjs';
@@ -11,6 +9,7 @@ import { Button } from '../../../../__actions__/Button/v1/Button/Button.mjs';
 const AddFiltersMenu = /*#__PURE__*/function () {
   const AddFiltersMenu = function () {
     var formatMessage = useIntl().formatMessage;
+    var buttonRef = useRef(null);
     var menuButtonLabel = formatMessage({
       id: "filterBar.addFiltersMenu.buttonLabel",
       defaultMessage: "Add Filters",
@@ -18,15 +17,26 @@ const AddFiltersMenu = /*#__PURE__*/function () {
     });
     var _a = useFilterBarContext(),
       getInactiveFilters = _a.getInactiveFilters,
-      showFilter = _a.showFilter;
+      showFilter = _a.showFilter,
+      focusId = _a.focusId,
+      setFocus = _a.setFocus;
     var inactiveFilters = getInactiveFilters();
+    useEffect(function () {
+      var _a;
+      if (focusId === "add_filter") {
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return /*#__PURE__*/React.createElement(Menu, {
       button: /*#__PURE__*/React.createElement(Button, {
+        ref: buttonRef,
         label: menuButtonLabel,
         secondary: true,
         disabled: inactiveFilters.length === 0,
-        icon: /*#__PURE__*/React.createElement(AddIcon, {
-          role: "presentation"
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "add",
+          isPresentational: true
         })
       })
     }, /*#__PURE__*/React.createElement(MenuList, null, inactiveFilters.map(function (_a) {

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.mjs

@@ -1,15 +1,26 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { FilterButton } from '../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
+import { isRefObject } from '../../../../utils/isRefObject.mjs';
 const FilterBarButton = /*#__PURE__*/function () {
   const FilterBarButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     var filterId = _a.filterId,
       _b = _a.isRemovable,
       isRemovable = _b === void 0 ? false : _b,
       props = __rest(_a, ["filterId", "isRemovable"]);
-    var hideFilter = useFilterBarContext().hideFilter;
+    var _c = useFilterBarContext(),
+      hideFilter = _c.hideFilter,
+      focusId = _c.focusId,
+      setFocus = _c.setFocus;
+    useEffect(function () {
+      var _a, _b, _c;
+      if (focusId === filterId && isRefObject(ref)) {
+        (_c = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.triggerRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return isRemovable ? ( /*#__PURE__*/React.createElement(FilterButtonRemovable, {
       ref: ref,
       triggerButtonProps: props,

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { FilterMultiSelect } from '../../../FilterMultiSelect/FilterMultiSelect.mjs';
 import '../../../FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../../FilterMultiSelect/context/SelectionProvider/SelectionProvider.mjs';
@@ -25,10 +25,13 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
       getFilterState = _b.getFilterState,
       setFilterOpenState = _b.setFilterOpenState,
       updateValue = _b.updateValue,
-      hideFilter = _b.hideFilter;
+      hideFilter = _b.hideFilter,
+      focusId = _b.focusId,
+      setFocus = _b.setFocus;
     var _c = useState(propsItems),
       items = _c[0],
       setItems = _c[1];
+    var buttonRef = useRef(null);
     if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect");
     var filterState = getFilterState(id);
     useEffect(function () {
@@ -50,6 +53,13 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
         }
       }
     }, [items]);
+    useEffect(function () {
+      var _a;
+      if (focusId === id) {
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return /*#__PURE__*/React.createElement(FilterMultiSelect, __assign({
       label: filterState.name,
       // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
@@ -74,7 +84,8 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
             return hideFilter(id);
           }
         }))) : ( /*#__PURE__*/React.createElement(FilterMultiSelect.TriggerButton, __assign({}, triggerProps)));
-      }
+      },
+      triggerRef: buttonRef
     }, props), children);
   };
   FilterBarMultiSelect.displayName = "FilterBar.MultiSelect";

package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.mjs

@@ -1,9 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } 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 { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import styles from './FilterButton.module.scss.mjs';
@@ -29,11 +27,10 @@ const FilterButton = /*#__PURE__*/function () {
       className: styles.hasSelectedValues
     }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", {
       className: styles.labelSeparator
-    }, ":")), /*#__PURE__*/React.createElement("span", null, selectedValuesLabel))) : label), isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation"
-    })));
+    }, ":")), /*#__PURE__*/React.createElement("span", null, selectedValuesLabel))) : label), /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true
+    }));
   });
   FilterButton.displayName = "FilterButton";
   return FilterButton;

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ClearIcon } from '../../../Icon/ClearIcon.mjs';
+import { Icon } from '../../../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButton } from '../FilterButton/FilterButton.mjs';
@@ -33,9 +32,10 @@ const FilterButtonRemovable = /*#__PURE__*/function () {
       position: "below"
     }, /*#__PURE__*/React.createElement(FilterButtonBase, __assign({
       ref: removeButtonRef
-    }, removeButtonProps), /*#__PURE__*/React.createElement(ClearIcon, {
-      role: "img",
-      "aria-label": removeButtonLabel
+    }, removeButtonProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel",
+      alt: removeButtonLabel,
+      isFilled: true
     }))));
   });
   FilterButtonRemovable.displayName = "FilterButtonRemovable";

package/dist/esm/Filter/FilterMultiSelect/FilterMultiSelect.mjs

@@ -32,11 +32,13 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       onSelectionChange = _a.onSelectionChange,
       _b = _a.selectionMode,
       selectionMode = _b === void 0 ? "multiple" : _b,
-      onSearchInputChange = _a.onSearchInputChange;
+      onSearchInputChange = _a.onSearchInputChange,
+      triggerRef = _a.triggerRef;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
-      onOpenChange: onOpenChange
+      onOpenChange: onOpenChange,
+      triggerRef: triggerRef
     };
     var menuPopupProps = {
       isLoading: isLoading,

package/dist/esm/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.mjs

@@ -7,7 +7,8 @@ function MenuTriggerProvider(_a) {
   var isOpen = _a.isOpen,
     defaultOpen = _a.defaultOpen,
     onOpenChange = _a.onOpenChange,
-    children = _a.children;
+    children = _a.children,
+    triggerRef = _a.triggerRef;
   // Create state based on the incoming props to manage the open/close
   var state = useMenuTriggerState({
     isOpen: isOpen,
@@ -15,7 +16,8 @@ function MenuTriggerProvider(_a) {
     onOpenChange: onOpenChange
   });
   // Get A11y attributes and events for the menu trigger and menu elements
-  var ref = useRef(null);
+  var fallbackRef = useRef(null);
+  var ref = triggerRef || fallbackRef;
   var _b = useMenuTrigger({}, state, ref),
     menuTriggerProps = _b.menuTriggerProps,
     menuProps = _b.menuProps;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs

@@ -5,9 +5,8 @@ import { useOption } from '@react-aria/listbox';
 import { mergeProps } from '@react-aria/utils';
 import classnames from 'classnames';
 import { Badge } from '../../../../Badge/Badge.mjs';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
 import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
+import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
 import styles from './MultiSelectOption.module.scss.mjs';
@@ -38,8 +37,9 @@ const MultiSelectOption = /*#__PURE__*/function () {
       "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
     }), /*#__PURE__*/React.createElement("span", {
       className: classnames(styles.icon, isSelected && styles.isSelected)
-    }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
-      role: "presentation"
+    }, isSelected && /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      isPresentational: true
     })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && ( /*#__PURE__*/React.createElement("span", {
       id: countElementId,
       className: styles.badgeContainer

package/dist/esm/Filter/FilterSelect/FilterSelect.mjs

@@ -50,7 +50,8 @@ const FilterSelect = /*#__PURE__*/function () {
       triggerProps = _c.triggerProps,
       menuProps = _c.menuProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    // The id is being remapped because the buttonProps id points to nowhere. This should ideally be refactored but will point the aria attributes tot he right components
+    // `aria-labelledby` and `aria-controls` are being remapped because the `buttonProps` ids generated by React Aria point to nothing.
+    // This should ideally be refactored but for now the `aria-controls` is set to the Filter's Listbox (menuProps.id) and the `aria-labelledby` to undefined so the accessible name is derived from the buttons content.
     var renderTriggerButtonProps = __assign(__assign({}, buttonProps), {
       "aria-labelledby": undefined,
       "aria-controls": menuProps.id

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -3,9 +3,8 @@ import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Media from 'react-media';
 import { Heading } from '../Heading/Heading.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
 import { Text } from '../Text/Text.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
 import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
@@ -127,8 +126,10 @@ const GuidanceBlock = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(WithTooltip, {
         tooltipProps: actions.primary.tooltip
       }, /*#__PURE__*/React.createElement(Button, __assign({
-        icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-          role: "presentation"
+        icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         })) : undefined,
         iconPosition: "end"
       }, actions.primary, {

package/dist/esm/Illustration/utils/usePausePlay.mjs

@@ -1,8 +1,5 @@
 import React, { useState } from 'react';
-import 'tslib';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { LaunchIcon } from '../../Icon/LaunchIcon.mjs';
-import { PauseIcon } from '../../Icon/PauseIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 var usePausePlay = function (videoRef) {
   var _a = useState(false),
     isPaused = _a[0],
@@ -18,10 +15,10 @@ var usePausePlay = function (videoRef) {
         videoRef.current.pause();
       }
     },
-    icon: isPaused ? ( /*#__PURE__*/React.createElement(LaunchIcon, {
-      role: "presentation"
-    })) : ( /*#__PURE__*/React.createElement(PauseIcon, {
-      role: "presentation"
+    icon: ( /*#__PURE__*/React.createElement(Icon, {
+      name: isPaused ? "play_circle" : "pause",
+      isPresentational: true,
+      isFilled: true
     })),
     label: isPaused ? "Play animation" : "Pause animation"
   };