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

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs

@@ -3,8 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var DateStartIcon = require('../../Icon/DateStartIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var isRefObject = require('../../utils/isRefObject.cjs');
 var DateInput = require('../DateInput/DateInput.cjs');
 var DateInputWithIconButton_module = require('./DateInputWithIconButton.module.scss.cjs');
@@ -31,8 +30,10 @@ var DateInputWithIconButton = React__default.default.forwardRef(function (_a, re
     "aria-disabled": disabled,
     disabled: disabled,
     className: classnames__default.default(DateInputWithIconButton_module.iconButton, restProps["aria-expanded"] && DateInputWithIconButton_module.calendarActive, disabled && DateInputWithIconButton_module.disabled)
-  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "today",
+    isPresentational: true,
+    isFilled: true
   }));
   return React__default.default.createElement(DateInput.DateInput, tslib.__assign({
     ref: inputRef,

package/dist/cjs/DateRangePicker/DateRangePicker.cjs

@@ -13,10 +13,9 @@ require('date-fns');
 var isDisabledDate = require('../Calendar/utils/isDisabledDate.cjs');
 var CalendarPopover = require('../Calendar/CalendarPopover/CalendarPopover.cjs');
 var LegacyCalendarRange = require('../Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var DateStartIcon = require('../Icon/DateStartIcon.cjs');
 var Label = require('../Label/Label.cjs');
 var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var DateRangePicker_module = require('./DateRangePicker.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -125,8 +124,10 @@ var DateRangePicker = function (_a) {
     "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
   }, inputProps), React__default.default.createElement("div", {
     className: DateRangePicker_module.startIconAdornment
-  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "today",
+    isPresentational: true,
+    isFilled: true
   })), React__default.default.createElement("span", {
     className: DateRangePicker_module.value
   }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && React__default.default.createElement(reactFocusOn.FocusOn, {

package/dist/cjs/ErrorPage/ErrorPage.cjs

@@ -5,13 +5,11 @@ var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var BrandMoment = require('../BrandMoment/BrandMoment.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowRightIcon = require('../Icon/ArrowRightIcon.cjs');
-var EmailIcon = require('../Icon/EmailIcon.cjs');
 require('../Illustration/subcomponents/Base/Base.cjs');
 require('../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.cjs');
 var Scene = require('../Illustration/Scene/Scene.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var useErrorMessages = require('./hooks/useErrorMessages.cjs');
 var ErrorPage_module = require('./ErrorPage.module.scss.cjs');
 function _interopDefault(e) {
@@ -70,8 +68,10 @@ var ErrorPage = function (_a) {
     }),
     variant: "warning",
     primaryAction: tslib.__assign(tslib.__assign({}, actions.primary), {
-      icon: React__default.default.createElement(ArrowRightIcon.ArrowRightIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "arrow_forward",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       }),
       iconPosition: "end",
       label: formatMessage({
@@ -81,8 +81,10 @@ var ErrorPage = function (_a) {
       })
     }),
     secondaryAction: tslib.__assign(tslib.__assign({}, actions.secondary), {
-      icon: React__default.default.createElement(EmailIcon.EmailIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "mail",
+        isPresentational: true,
+        isFilled: true
       }),
       label: formatMessage({
         id: "kzErrorPage",

package/dist/cjs/FieldMessage/FieldMessage.cjs

@@ -3,10 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var CautionWhiteIcon = require('../Icon/CautionWhiteIcon.cjs');
-var ExclamationWhiteIcon = require('../Icon/ExclamationWhiteIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var FieldMessage_module = require('./FieldMessage.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -30,14 +28,10 @@ var FieldMessage = function (_a) {
     className: classnames__default.default(FieldMessage_module.message, FieldMessage_module[status], classNameOverride, reversed && FieldMessage_module.reversed, position === "bottom" && FieldMessage_module.positionBottom, position === "top" && FieldMessage_module.positionTop)
   }, restProps), (status === "error" || status === "caution") && React__default.default.createElement("span", {
     className: FieldMessage_module.warningIcon
-  }, status === "error" ? React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
-    role: "img",
-    inheritSize: false,
-    "aria-label": "".concat(status, " message")
-  }) : React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, {
-    role: "img",
-    inheritSize: false,
-    "aria-label": "".concat(status, " message")
+  }, React__default.default.createElement(Icon.Icon, {
+    name: status === "error" ? "error" : "warning",
+    isFilled: true,
+    alt: "".concat(status, " message")
   })), React__default.default.createElement("div", {
     className: FieldMessage_module.message
   }, React__default.default.createElement(Text.Text, {

package/dist/cjs/Filter/FilterBar/context/FilterBarContext.cjs

@@ -80,16 +80,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.getInactiveFilters(state);
@@ -105,7 +113,14 @@ var FilterBarProvider = function (_a) {
         type: "update_values",
         values: {}
       });
-    }
+    },
+    setFocus: function (id) {
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
+    },
+    focusId: state.focusId
   };
   React.useEffect(function () {
     var shouldUpdate = checkShouldUpdateValues.checkShouldUpdateValues(state, values);

package/dist/cjs/Filter/FilterBar/context/reducer/filterBarStateReducer.cjs

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

package/dist/cjs/Filter/FilterBar/context/reducer/setupFilterBarState.cjs

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

package/dist/cjs/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.cjs

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

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.cjs

@@ -5,6 +5,7 @@ var React = require('react');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var FilterButton = require('../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
+var isRefObject = require('../../../../utils/isRefObject.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -16,7 +17,17 @@ var FilterBarButton = React.forwardRef(function (_a, ref) {
     _b = _a.isRemovable,
     isRemovable = _b === void 0 ? false : _b,
     props = tslib.__rest(_a, ["filterId", "isRemovable"]);
-  var hideFilter = FilterBarContext.useFilterBarContext().hideFilter;
+  var _c = FilterBarContext.useFilterBarContext(),
+    hideFilter = _c.hideFilter,
+    focusId = _c.focusId,
+    setFocus = _c.setFocus;
+  React.useEffect(function () {
+    var _a, _b, _c;
+    if (focusId === filterId && isRefObject.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 ? React__default.default.createElement(FilterButtonRemovable.FilterButtonRemovable, {
     ref: ref,
     triggerButtonProps: props,

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.cjs

@@ -32,10 +32,13 @@ var FilterBarMultiSelect = function (_a) {
     getFilterState = _b.getFilterState,
     setFilterOpenState = _b.setFilterOpenState,
     updateValue = _b.updateValue,
-    hideFilter = _b.hideFilter;
+    hideFilter = _b.hideFilter,
+    focusId = _b.focusId,
+    setFocus = _b.setFocus;
   var _c = React.useState(propsItems),
     items = _c[0],
     setItems = _c[1];
+  var buttonRef = React.useRef(null);
   if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect");
   var filterState = getFilterState(id);
   React.useEffect(function () {
@@ -57,6 +60,13 @@ var FilterBarMultiSelect = function (_a) {
       }
     }
   }, [items]);
+  React.useEffect(function () {
+    var _a;
+    if (focusId === id) {
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      setFocus(undefined);
+    }
+  }, [focusId]);
   return React__default.default.createElement(FilterMultiSelect.FilterMultiSelect, tslib.__assign({
     label: filterState.name,
     // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
@@ -81,7 +91,8 @@ var FilterBarMultiSelect = function (_a) {
           return hideFilter(id);
         }
       })) : React__default.default.createElement(FilterMultiSelect.FilterMultiSelect.TriggerButton, tslib.__assign({}, triggerProps));
-    }
+    },
+    triggerRef: buttonRef
   }, props), children);
 };
 FilterBarMultiSelect.displayName = "FilterBar.MultiSelect";

package/dist/cjs/Filter/FilterButton/FilterButton/FilterButton.cjs

@@ -3,9 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 var FilterButton_module = require('./FilterButton.module.scss.cjs');
@@ -37,10 +35,9 @@ var FilterButton = React.forwardRef(function (_a, ref) {
     className: FilterButton_module.hasSelectedValues
   }, React__default.default.createElement("span", null, label), React__default.default.createElement("span", {
     className: FilterButton_module.labelSeparator
-  }, ":")), React__default.default.createElement("span", null, selectedValuesLabel)) : label), isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation"
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation"
+  }, ":")), React__default.default.createElement("span", null, selectedValuesLabel)) : label), React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true
   }));
 });
 FilterButton.displayName = "FilterButton";

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ClearIcon = require('../../../Icon/ClearIcon.cjs');
+var Icon = require('../../../__future__/Icon/Icon.cjs');
 var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButton = require('../FilterButton/FilterButton.cjs');
@@ -40,9 +39,10 @@ var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
     position: "below"
   }, React__default.default.createElement(FilterButtonBase.FilterButtonBase, tslib.__assign({
     ref: removeButtonRef
-  }, removeButtonProps), React__default.default.createElement(ClearIcon.ClearIcon, {
-    role: "img",
-    "aria-label": removeButtonLabel
+  }, removeButtonProps), React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    alt: removeButtonLabel,
+    isFilled: true
   }))));
 });
 FilterButtonRemovable.displayName = "FilterButtonRemovable";

package/dist/cjs/Filter/FilterMultiSelect/FilterMultiSelect.cjs

@@ -39,11 +39,13 @@ var FilterMultiSelect = function (_a) {
     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/cjs/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.cjs

@@ -15,7 +15,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 = menu.useMenuTriggerState({
     isOpen: isOpen,
@@ -23,7 +24,8 @@ function MenuTriggerProvider(_a) {
     onOpenChange: onOpenChange
   });
   // Get A11y attributes and events for the menu trigger and menu elements
-  var ref = React.useRef(null);
+  var fallbackRef = React.useRef(null);
+  var ref = triggerRef || fallbackRef;
   var _b = menu$1.useMenuTrigger({}, state, ref),
     menuTriggerProps = _b.menuTriggerProps,
     menuProps = _b.menuProps;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs

@@ -7,9 +7,8 @@ var listbox = require('@react-aria/listbox');
 var utils = require('@react-aria/utils');
 var classnames = require('classnames');
 var Badge = require('../../../../Badge/Badge.cjs');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
 var VisuallyHidden = require('../../../../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../../../../__future__/Icon/Icon.cjs');
 require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
 var MultiSelectOption_module = require('./MultiSelectOption.module.scss.cjs');
@@ -46,8 +45,9 @@ var MultiSelectOption = function (_a) {
     "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
   }), React__default.default.createElement("span", {
     className: classnames__default.default(MultiSelectOption_module.icon, isSelected && MultiSelectOption_module.isSelected)
-  }, isSelected && React__default.default.createElement(CheckIcon.CheckIcon, {
-    role: "presentation"
+  }, isSelected && React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true
   })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React__default.default.createElement("span", {
     id: countElementId,
     className: MultiSelectOption_module.badgeContainer

package/dist/cjs/Filter/FilterSelect/FilterSelect.cjs

@@ -57,7 +57,8 @@ var FilterSelect = function (_a) {
     triggerProps = _c.triggerProps,
     menuProps = _c.menuProps;
   var buttonProps = button.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 = tslib.__assign(tslib.__assign({}, buttonProps), {
     "aria-labelledby": undefined,
     "aria-controls": menuProps.id

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -5,9 +5,8 @@ var React = require('react');
 var classnames = require('classnames');
 var Media = require('react-media');
 var Heading = require('../Heading/Heading.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowForwardIcon = require('../Icon/ArrowForwardIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
 var Button = require('../__actions__/Button/v1/Button/Button.cjs');
@@ -136,8 +135,10 @@ var GuidanceBlock = function (_a) {
     }, React__default.default.createElement(WithTooltip, {
       tooltipProps: actions.primary.tooltip
     }, React__default.default.createElement(Button.Button, tslib.__assign({
-      icon: withActionButtonArrow ? React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-        role: "presentation"
+      icon: withActionButtonArrow ? React__default.default.createElement(Icon.Icon, {
+        name: "arrow_forward",
+        isPresentational: true,
+        shouldMirrorInRTL: true
       }) : undefined,
       iconPosition: "end"
     }, actions.primary, {

package/dist/cjs/Illustration/utils/usePausePlay.cjs

@@ -1,10 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('tslib');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var LaunchIcon = require('../../Icon/LaunchIcon.cjs');
-var PauseIcon = require('../../Icon/PauseIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -26,10 +23,10 @@ var usePausePlay = function (videoRef) {
         videoRef.current.pause();
       }
     },
-    icon: isPaused ? React__default.default.createElement(LaunchIcon.LaunchIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(PauseIcon.PauseIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: isPaused ? "play_circle" : "pause",
+      isPresentational: true,
+      isFilled: true
     }),
     label: isPaused ? "Play animation" : "Pause animation"
   };

package/dist/cjs/Input/InputSearch/InputSearch.cjs

@@ -5,12 +5,12 @@ var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var ClearButton = require('../../ClearButton/ClearButton.cjs');
-var SearchIcon = require('../../Icon/SearchIcon.cjs');
 require('../../Loading/LoadingGraphic/LoadingGraphic.cjs');
 require('../../Loading/LoadingHeading/LoadingHeading.cjs');
 require('../../Loading/LoadingInput/LoadingInput.cjs');
 require('../../Loading/LoadingParagraph/LoadingParagraph.cjs');
 var LoadingSpinner = require('../../Loading/LoadingSpinner/LoadingSpinner.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var InputSearch_module = require('./InputSearch.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -52,8 +52,9 @@ var InputSearch = function (props) {
     accessibilityLabel: "",
     size: "sm",
     classNameOverride: InputSearch_module.loadingSpinner
-  }) : React__default.default.createElement(SearchIcon.SearchIcon, {
-    role: "presentation"
+  }) : React__default.default.createElement(Icon.Icon, {
+    name: "search",
+    isPresentational: true
   })), React__default.default.createElement("input", tslib.__assign({
     ref: inputRef,
     type: "search",

package/dist/cjs/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -3,10 +3,8 @@
 var React = require('react');
 var classnames = require('classnames');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
-require('tslib');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../Icon/CheckIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var determineSelectionFromKeyPress = require('./utils/determineSelectionFromKeyPress.cjs');
 var LikertScaleLegacy_module = require('./LikertScaleLegacy.module.scss.cjs');
 function _interopDefault(e) {
@@ -17,9 +15,10 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var SelectedItemIcon = function () {
-  return React__default.default.createElement(CheckIcon.CheckIcon, {
-    role: "presentation",
-    classNameOverride: LikertScaleLegacy_module.check
+  return React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true,
+    className: LikertScaleLegacy_module.check
   });
 };
 /**

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.cjs

@@ -4,7 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.cjs');
-var LoadingSpinner_module = require('./LoadingSpinner.module.scss.cjs');
+var SpinnerIcon = require('./subcomponents/SpinnerIcon.cjs');
+var LoadingSpinner_module = require('./LoadingSpinner.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -25,48 +26,11 @@ var LoadingSpinner = function (_a) {
     classNameOverride = _a.classNameOverride,
     props = tslib.__rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
   return React__default.default.createElement("div", tslib.__assign({
-    "data-automation-id": "loading-spinner",
-    className: classnames__default.default(LoadingSpinner_module.loadingSpinner, classNameOverride),
+    className: classnames__default.default(LoadingSpinner_module.loadingSpinner, LoadingSpinner_module[size], classNameOverride),
     role: "status"
-  }, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel), size === "md" ? React__default.default.createElement("svg", {
-    className: LoadingSpinner_module.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 48 48",
-    width: 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"
-  })) : React__default.default.createElement("svg", {
-    className: LoadingSpinner_module.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 24 24",
-    width: 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"
-  })));
+  }, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel), React__default.default.createElement(SpinnerIcon.SpinnerIcon, {
+    size: size
+  }));
 };
 LoadingSpinner.displayName = "LoadingSpinner";
 exports.LoadingSpinner = LoadingSpinner;

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styles = {
+  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
+  "xs": "LoadingSpinner-module_xs__y46OT",
+  "sm": "LoadingSpinner-module_sm__nkmIa",
+  "md": "LoadingSpinner-module_md__OWP2-",
+  "spinner": "LoadingSpinner-module_spinner__BKrX0"
+};
+module.exports = styles;