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

package/dist/types/Filter/FilterBar/context/FilterBarContext.d.ts

@@ -14,6 +14,8 @@ export type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Recor
     hideFilter: <Id extends keyof ValuesMap>(id: Id) => void;
     getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>;
     clearAllFilters: () => void;
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void;
+    focusId?: keyof ValuesMap;
 };
 export declare const useFilterBarContext: <Value, Values extends FiltersValues = Record<string, Value>>() => FilterBarContextValue<Value, Values>;
 export type FilterBarProviderProps<ValuesMap extends FiltersValues> = {

package/dist/types/Filter/FilterBar/context/reducer/filterBarStateReducer.d.ts

@@ -18,6 +18,9 @@ type Actions<ValuesMap extends FiltersValues> = {
 } | {
     type: "update_filter_labels";
     data: Filters<ValuesMap>;
+} | {
+    type: "set_focus";
+    id: keyof ValuesMap | undefined;
 };
 export declare const filterBarStateReducer: <ValuesMap extends FiltersValues>(state: FilterBarState<ValuesMap>, action: Actions<ValuesMap>) => FilterBarState<ValuesMap>;
 export {};

package/dist/types/Filter/FilterBar/context/types.d.ts

@@ -24,5 +24,6 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
     activeFilterIds: Set<keyof ValuesMap>;
     values: Partial<ValuesMap>;
     dependentFilterIds: Set<keyof ValuesMap>;
+    focusId?: keyof ValuesMap;
 };
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>;

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -15,9 +15,10 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
     trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode;
     children: (value?: SelectionProviderContextType) => React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 } & Omit<MenuPopupProps, "children"> & Omit<MenuTriggerProviderProps, "children"> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/dist/types/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.d.ts

@@ -7,6 +7,7 @@ export type MenuTriggerProviderProps = {
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     children: React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 };
 export type MenuTriggerProviderContextType = {
     menuTriggerProps: HTMLAttributes<HTMLElement>;
@@ -15,6 +16,6 @@ export type MenuTriggerProviderContextType = {
     menuTriggerState: MenuTriggerState;
     buttonRef: React.RefObject<HTMLButtonElement>;
 };
-export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, }: MenuTriggerProviderProps): JSX.Element;
+export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, triggerRef, }: MenuTriggerProviderProps): JSX.Element;
 export declare const useMenuTriggerContext: () => MenuTriggerProviderContextType;
 export declare const MenuTriggerConsumer: ({ children, }: React.ConsumerProps<MenuTriggerProviderContextType>) => JSX.Element;

package/dist/types/Loading/LoadingSpinner/LoadingSpinner.d.ts

@@ -3,9 +3,9 @@ import { OverrideClassName } from "../../types/OverrideClassName";
 export type LoadingSpinnerProps = {
     accessibilityLabel: string;
     /**
-     * Generally use "md" unless spinner is inside a form field
+     * Generally use "md" unless spinner is inside a form field.  @default "md"
      */
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
 } & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |

package/dist/types/Loading/LoadingSpinner/subcomponents/SpinnerIcon.d.ts

@@ -0,0 +1,5 @@
+type SpinnerIconProps = {
+    size: "xs" | "sm" | "md";
+};
+export declare const SpinnerIcon: ({ size }: SpinnerIconProps) => JSX.Element;
+export {};

package/dist/types/Loading/LoadingSpinner/subcomponents/index.d.ts

@@ -0,0 +1 @@
+export * from "./SpinnerIcon";

package/dist/types/TextArea/TextArea.d.ts

@@ -3,6 +3,10 @@ import { OverrideClassName } from "../types/OverrideClassName";
 export type TextAreaProps = {
     textAreaRef?: React.RefObject<HTMLTextAreaElement>;
     status?: "default" | "error" | "caution";
+    /**
+     * Grows the input height as more content is added
+     * Replace with CSS field-sizing once it's supported by all major browsers
+     */
     autogrow?: boolean;
     reversed?: boolean;
     /**

package/dist/types/__future__/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+import { StringSuggestions } from "../../types/StringSuggestions";
+import { IconNames } from "./types";
+type PresentationalIcon = {
+    isPresentational: true;
+    alt?: never;
+};
+type MeaningfulIcon = {
+    isPresentational?: false;
+    alt: string;
+};
+type BaseIconProps = {
+    isFilled?: boolean;
+} & HTMLAttributes<HTMLSpanElement> & (PresentationalIcon | MeaningfulIcon);
+export type IconProps = BaseIconProps & {
+    /** Options available at https://fonts.google.com/icons */
+    name: StringSuggestions<IconNames>;
+    shouldMirrorInRTL?: boolean;
+};
+export declare const Icon: ({ name, shouldMirrorInRTL, ...restProps }: IconProps) => JSX.Element;
+export {};

package/dist/types/__future__/Icon/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const handledRtlIcons: {
+    checklist: "checklist_rtl";
+    format_list_numbered: "format_list_numbered_rtl";
+};
+export declare const iconDefaultSet: ("add" | "add_a_photo" | "add_comment" | "add_link" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_upward" | "assignment" | "assignment_add" | "assignment_ind" | "assignment_returned" | "assignment_turned_in" | "backup" | "bar_chart" | "bookmark" | "brush" | "build" | "cached" | "cancel" | "chat_apps_script" | "chat_error" | "chat_paste_go" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "close" | "close_fullscreen" | "cloud_download" | "comment_bank" | "content_copy" | "dashboard" | "date_range" | "delete" | "domain" | "draft" | "drag_indicator" | "edit" | "error" | "event" | "favorite" | "find_in_page" | "flag" | "flash_on" | "format_bold" | "format_indent_decrease" | "format_indent_increase" | "format_italic" | "format_list_bulleted" | "format_list_numbered" | "format_underlined" | "forum" | "forward" | "front_hand" | "grade" | "group" | "groups" | "help" | "history" | "home" | "horizontal_rule" | "info" | "key" | "keyboard_arrow_down" | "keyboard_arrow_up" | "keyboard_tab" | "keyboard_tab_rtl" | "label" | "lan" | "lightbulb" | "link_off" | "list" | "local_fire_department" | "lock" | "logout" | "mail" | "manage_accounts" | "menu" | "mms" | "more_horiz" | "more_vert" | "north_east" | "note_alt" | "notifications_active" | "open_in_full" | "open_in_new" | "pause" | "percent" | "person" | "person_add" | "person_cancel" | "person_check" | "play_circle" | "playlist_add_check" | "potted_plant" | "power" | "power_settings_new" | "print" | "privacy_tip" | "psychology_alt" | "radio_button_checked" | "radio_button_unchecked" | "rate_review" | "redo" | "reduce_capacity" | "refresh" | "remove" | "reviews" | "schedule" | "school" | "search" | "send" | "sensors" | "sentiment_dissatisfied" | "sentiment_neutral" | "sentiment_satisfied" | "sentiment_very_satisfied" | "settings" | "sms" | "south_east" | "star" | "support" | "thumb_down" | "thumb_up" | "today" | "translate" | "tune" | "undo" | "user_attributes" | "visibility" | "visibility_off" | "warning" | "zoom_in" | "zoom_out" | "auto_awesome")[];

package/dist/types/__future__/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Icon";

package/dist/types/__future__/Icon/types.d.ts

@@ -0,0 +1,4 @@
+import iconsMetadata from "./material-symbols-metadata.json";
+type MaterialIconNames = keyof typeof iconsMetadata;
+export type IconNames = MaterialIconNames | "auto_awesome";
+export {};

package/dist/types/__future__/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./Icon";
 export * from "./Select";
 export * from "./Tag";
 export * from "./Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-fix-select-focus-add-small-delay-20241013230007",
+  "version": "0.0.0-canary-tsx-codemod-20241029235345",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -36,52 +36,51 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.5",
+    "@internationalized/date": "^3.5.6",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.7",
-    "@react-aria/datepicker": "^3.11.1",
-    "@react-aria/focus": "^3.18.1",
-    "@react-aria/i18n": "^3.12.1",
-    "@react-aria/listbox": "^3.13.1",
-    "@react-aria/menu": "^3.15.1",
-    "@react-aria/overlays": "^3.23.1",
-    "@react-aria/select": "^3.14.7",
-    "@react-aria/utils": "^3.25.1",
-    "@react-stately/collections": "^3.10.9",
-    "@react-stately/datepicker": "^3.10.1",
-    "@react-stately/list": "^3.10.7",
-    "@react-stately/menu": "^3.8.1",
-    "@react-stately/select": "^3.6.6",
-    "@react-types/shared": "^3.24.1",
+    "@react-aria/button": "^3.10.1",
+    "@react-aria/datepicker": "^3.11.4",
+    "@react-aria/focus": "^3.18.4",
+    "@react-aria/i18n": "^3.12.3",
+    "@react-aria/listbox": "^3.13.5",
+    "@react-aria/menu": "^3.15.5",
+    "@react-aria/overlays": "^3.23.4",
+    "@react-aria/select": "^3.14.11",
+    "@react-aria/utils": "^3.25.3",
+    "@react-stately/collections": "^3.11.0",
+    "@react-stately/datepicker": "^3.10.3",
+    "@react-stately/list": "^3.11.0",
+    "@react-stately/menu": "^3.8.3",
+    "@react-stately/select": "^3.6.8",
+    "@react-types/shared": "^3.25.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
-    "prosemirror-commands": "^1.6.0",
+    "prosemirror-commands": "^1.6.2",
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.22.3",
+    "prosemirror-model": "^1.23.0",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-schema-list": "^1.4.1",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.10.0",
+    "prosemirror-transform": "^1.10.2",
     "prosemirror-utils": "^1.2.2",
     "prosemirror-view": "^1.34.3",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.34.1",
-    "react-aria-components": "^1.3.1",
+    "react-aria": "^3.35.1",
+    "react-aria-components": "^1.4.1",
     "react-day-picker": "8.10.1",
     "react-focus-lock": "^2.13.2",
     "react-focus-on": "^3.9.4",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.8.1",
+    "react-select": "^5.8.2",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "tsx": "^4.19.1",
-    "use-debounce": "^10.0.3",
+    "use-debounce": "^10.0.4",
     "uuid": "^10.0.0"
   },
   "dependenciesComments": {
@@ -89,8 +88,8 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "^10.0.0",
-    "@cultureamp/i18n-react-intl": "^2.6.3",
-    "@tanstack/react-query": "^5.59.0",
+    "@cultureamp/i18n-react-intl": "^2.7.1",
+    "@tanstack/react-query": "^5.59.16",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -106,21 +105,21 @@
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.0.6",
+    "postcss-preset-env": "^10.0.8",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.1.0",
+    "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^6.7.0",
-    "rollup": "^4.24.0",
+    "react-intl": "^6.8.4",
+    "rollup": "^4.24.2",
     "sass": "^1.77.8",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "tslib": "^2.7.0",
-    "tsx": "^4.19.1",
-    "@kaizen/design-tokens": "10.7.0",
-    "@kaizen/package-bundler": "1.1.7"
+    "tslib": "^2.8.0",
+    "tsx": "^4.19.2",
+    "@kaizen/design-tokens": "0.0.0-canary-tsx-codemod-20241029235345",
+    "@kaizen/package-bundler": "1.1.8"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/src/Avatar/Avatar.module.scss

@@ -89,13 +89,13 @@ $avatar-xxl: 7.75rem;
 }
 
 .avatarImage {
-  .loading & {
-    display: none;
-  }
-
   width: 100%;
   height: 100%;
   object-fit: cover;
+
+  .loading & {
+    display: none;
+  }
 }
 
 .companyAvatarImage {
@@ -106,28 +106,26 @@ $avatar-xxl: 7.75rem;
 
 .fallbackIcon {
   color: rgba($color-purple-800-rgb, 0.7);
-  width: 28px;
+  font-size: var(--avatar-fallback-icon-size);
 
   .xxlarge & {
-    width: 75px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
   }
 
   .xlarge & {
-    width: 60px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
   }
 
   .large & {
-    width: 35px;
+    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
   }
 
   .medium & {
-    width: 25px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
   }
 
   .small & {
-    width: 10px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
   }
 }
 

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Textfit } from "react-textfit"
-import { UserIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Avatar.module.scss"
 
@@ -76,12 +76,21 @@ const getMaxFontSizePixels: (size: AvatarSizes) => number = size => {
   return 22
 }
 
-const fallbackIcon = (alt: string): JSX.Element => {
+const FallbackIcon = ({ alt }: { alt: string }): JSX.Element => {
   if (alt) {
-    return <UserIcon inheritSize role="img" aria-label={alt} />
+    return (
+      <Icon name="person" alt={alt} isFilled className={styles.fallbackIcon} />
+    )
   }
 
-  return <UserIcon inheritSize role="presentation" />
+  return (
+    <Icon
+      name="person"
+      isPresentational
+      isFilled
+      className={styles.fallbackIcon}
+    />
+  )
 }
 
 const renderInitials = (
@@ -95,7 +104,7 @@ const renderInitials = (
   const renderFallback = disableInitials || initials === ""
 
   return renderFallback ? (
-    <span className={styles.fallbackIcon}>{fallbackIcon(alt)}</span>
+    <FallbackIcon alt={alt} />
   ) : (
     <abbr
       className={classnames(styles.initials, isLongName && styles.longName)}

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -2,11 +2,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
-import {
-  ArrowRightIcon,
-  EmailIcon,
-  FeedbackClassifyIcon,
-} from "~components/Icon"
 import {
   BrandMomentCaptureIntro,
   BrandMomentPositiveOutro,
@@ -14,6 +9,7 @@ import {
   AnimatedSceneProps,
 } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { BrandMoment } from "../index"
 import {
   MinimalBasic,
@@ -65,7 +61,7 @@ export const Informative: Story = {
     primaryAction: {
       label: "Get started",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
   },
@@ -98,12 +94,12 @@ export const Success: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Rate this survey",
-      icon: <FeedbackClassifyIcon role="presentation" />,
+      icon: <Icon name="reviews" isPresentational isFilled />,
     },
   },
 }
@@ -132,12 +128,12 @@ export const Warning: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Contact support",
-      icon: <EmailIcon role="presentation" />,
+      icon: <Icon name="mail" isPresentational isFilled />,
     },
   },
 }

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { assetUrl } from "~components/utils/hostedAssets"
 import styles from "./ExampleHeaders.module.scss"
 
@@ -18,7 +18,7 @@ export const MinimalBasic = (): JSX.Element => (
       <Button
         href="#"
         label="Exit"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
       />
       <div className={styles.logoContainer}>

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerRangeProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate } from "../utils"
@@ -55,8 +55,12 @@ export const CalendarRange = ({
         defaultMonth={selectedMonth}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         numberOfMonths={2}
         locale={locale}

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerSingleProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -53,8 +53,12 @@ export const CalendarSingle = ({
         }
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
         {...restProps}

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   Matcher,
   DayPickerRangeProps,
 } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { DayOfWeek } from "../enums"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -62,8 +62,12 @@ export const LegacyCalendarRange = ({
         onDayClick={onDayChange}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
       />

package/src/Calendar/baseCalendarClassNames.module.scss

@@ -99,10 +99,6 @@ $rdp-cell-size: 40px;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  [dir="rtl"] & {
-    transform: scale(-1, 1);
-  }
 }
 
 .table {

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -4,18 +4,17 @@
 @import "../../../styles/utils/form-variables";
 
 $checkbox-size: 24px;
-$icon-size: 24px;
 $focus-ring-offset: 2px;
 
 $dt-color-checkbox-background-color-checked: $color-gray-500;
 
 // override bootstrap styles
 .checkbox.checkbox {
-  @include form-input-visually-hidden;
-
   width: $checkbox-size;
   height: $checkbox-size;
   margin: 0;
+
+  @include form-input-visually-hidden;
 }
 
 .checkbox:disabled {
@@ -23,14 +22,7 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
   color: $color-white;
 }
 

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -22,13 +22,11 @@ const renderCheckOrMixedIcon = (
   if (status === "off") return
 
   return (
-    <span className={classnames(styles.icon, reversed && styles.reversed)}>
-      {status === "on" ? (
-        <CheckIcon role="presentation" inheritSize />
-      ) : (
-        <MinusIcon role="presentation" inheritSize />
-      )}
-    </span>
+    <Icon
+      name={status === "on" ? "check" : "remove"}
+      isPresentational
+      className={classnames(styles.icon, reversed && styles.reversed)}
+    />
   )
 }
 

package/src/ClearButton/ClearButton.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ClearButton.module.scss"
 
@@ -23,7 +23,7 @@ export const ClearButton = ({
     )}
     {...restProps}
   >
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </button>
 )
 

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useId, useState } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
 import { Heading } from "~components/Heading"
-import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"
@@ -117,11 +117,10 @@ export const Collapsible = ({
           <IconButton
             label={title}
             icon={
-              isOpen ? (
-                <ChevronUpIcon role="presentation" />
-              ) : (
-                <ChevronDownIcon role="presentation" />
-              )
+              <Icon
+                name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                isPresentational
+              />
             }
             type="button"
             aria-expanded={isOpen}