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

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { FilterIcon, MeatballsIcon, TrashIcon } from "~components/Icon"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -9,7 +9,7 @@ import {
 import { IconButton, IconButtonProps } from "../index"
 
 export default {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -30,14 +30,14 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Default",
     props: {
       label: "Default label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
     },
   },
   {
     title: "Primary",
     props: {
       label: "Primary label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
       primary: true,
     },
   },
@@ -45,7 +45,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Destructive",
     props: {
       label: "Label",
-      icon: <TrashIcon role="presentation" />,
+      icon: <Icon name="delete" isPresentational isFilled />,
       destructive: true,
     },
   },
@@ -53,7 +53,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Secondary",
     props: {
       label: "Label",
-      icon: <FilterIcon role="presentation" />,
+      icon: <Icon name="tune" isPresentational />,
       secondary: true,
     },
   },
@@ -72,7 +72,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             title: "Secondary Destructive",
             props: {
               label: "Label",
-              icon: <TrashIcon role="presentation" />,
+              icon: <Icon name="delete" isPresentational isFilled />,
               secondary: true,
               destructive: true,
             },

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   component: IconButton,
   argTypes: {
     icon: {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 

package/src/__actions__/Button/v2/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

package/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { ArrowForwardIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v2",
+  title: "Actions/Button/Button (v2)",
   component: Button,
   args: {
     label: "Label",
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, ArrowForwardIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<ArrowForwardIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <ArrowForwardIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }

package/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v2",
+  title: "Actions/IconButton/IconButton (v2)",
   component: IconButton,
   argTypes: {
     icon: {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 

package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -3,7 +3,7 @@ import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/component
 import * as docsStories from "./Button.docs.stories"
 import * as exampleStories from "./Button.stories"
 
-<Meta title="Actions/Button/v3/API Specification" />
+<Meta title="Actions/Button/Button (v3)/API Specification" />
 
 <SbContent>
   # Button API Specification (v3)

package/src/__actions__/Button/v3/_docs/Button.docs.stories.tsx

@@ -5,7 +5,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3/Doc Assets",
+  title: "Actions/Button/Button (v3)/Doc Assets",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Controls } from "@storybook/blocks"
 import { ResourceLinks, SbContent, Installation } from "~storybook/components"
 import * as Button from "./Button.stories"
 
-<Meta title="Actions/Button/v3/Usage Guidelines" />
+<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
 <SbContent>
   # Button (v3)

package/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from "../index"
 const onPressEvent = fn()
 
 const meta = {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Button } from "../index"
 
 export default {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -82,7 +82,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <ArrowForwardIcon role="presentation" />
             </Button>
             <Button size="small" isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+              <LoadingSpinner size="xs" accessibilityLabel="submitting label" />
             </Button>
           </StickerSheet.Row>
           <StickerSheet.Row rowTitle="Icon only small">
@@ -93,7 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <TrashIcon role="img" aria-label="Remove label" />
             </Button>
             <Button size="small" isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="Removing label" />
+              <LoadingSpinner size="xs" accessibilityLabel="Removing label" />
             </Button>
           </StickerSheet.Row>
         </StickerSheet.Body>

package/src/__actions__/Button/v3/_docs/Button.stories.tsx

@@ -6,7 +6,7 @@ import { VisuallyHidden } from "~components/VisuallyHidden"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3",
+  title: "Actions/Button/Button (v3)",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { ChevronDownIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -30,7 +30,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }
@@ -45,7 +45,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }

package/src/__actions__/Menu/v1/_docs/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Menu } from "../index"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
@@ -14,7 +14,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -24,7 +24,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>

package/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { DuplicateIcon, EditIcon, TrashIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
 import { MenuList } from "../subcomponents/MenuList"
@@ -34,7 +34,7 @@ export const MenuContentExample = ({
               alert("Hello")
               e.preventDefault()
             }}
-            icon={<EditIcon role="presentation" />}
+            icon={<Icon name="edit" isPresentational isFilled />}
             label="Menu button"
           />
           <MenuItem
@@ -46,7 +46,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<DuplicateIcon role="presentation" />}
+            icon={<Icon name="content_copy" isPresentational isFilled />}
             label="Menu button but the label is too long"
           />
           <MenuItem
@@ -58,7 +58,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             destructive
             label="Destructive Menu button"
           />
@@ -71,7 +71,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             label="Disabled Menu button"
           />
@@ -84,7 +84,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             destructive
             label="Disabled Destructive Menu button"

package/src/__actions__/Menu/v1/_docs/examples.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
-import { DuplicateIcon, EditIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuItem, MenuList } from "../"
 
 export const exampleActionButtonPropsButton = {
@@ -16,12 +16,12 @@ export const exampleActionButtonPropsAnchor = {
 export const exampleDropdownContentEnabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       onClick={action("clicked")}
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>
@@ -30,12 +30,12 @@ export const exampleDropdownContentEnabled = (
 export const exampleDropdownContentOneDisabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       disabled
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>

package/src/__actions__/Menu/v2/_docs/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
 import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
 
@@ -12,7 +12,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -22,7 +22,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>

package/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx

@@ -42,7 +42,7 @@ import * as exampleStories from "./Menu.stories"
   of={exampleStories.Basic}
   source={{code: `
 <MenuTrigger>
-  <Button><MeatballsIcon aria-label="Actions" /></Button>
+  <Button><Icon name="more_horiz" alt="Actions" /></Button>
   <Popover>
     <Menu>
       <MenuItem href="#">Menu Item</MenuItem>
@@ -94,5 +94,3 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled}  />
-
-

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -2,17 +2,8 @@ import React, { FunctionComponent, ReactNode } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Popover } from "react-aria-components"
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  BookmarkOffIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  EditIcon,
-  MeatballsIcon,
-  TrashIcon,
-} from "~components/Icon"
 import { Button } from "~components/__actions__/v3"
+import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuItem, MenuTrigger } from "../index"
 
 const meta = {
@@ -31,19 +22,27 @@ type Story = StoryObj<typeof meta>
 
 const DefaultMenuItems = (): ReactNode => (
   <>
-    <MenuItem icon={<BookmarkOffIcon role="presentation" />}>Save</MenuItem>
-    <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
-    <MenuItem icon={<ArrowUpIcon role="presentation" />}>Move up</MenuItem>
-    <MenuItem icon={<ArrowDownIcon role="presentation" />}>Move down</MenuItem>
-    <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+    <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
+    <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
+      Edit
+    </MenuItem>
+    <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>
+      Move up
+    </MenuItem>
+    <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
+      Move down
+    </MenuItem>
+    <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+      Delete
+    </MenuItem>
   </>
 )
 
 export const Actions: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -60,8 +59,8 @@ export const Actions: Story = {
 export const ItemsDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -75,12 +74,14 @@ export const ItemsDo: Story = {
 export const ItemsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
-          <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+          <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+            Delete
+          </MenuItem>
         </Menu>
       </Popover>
     </MenuTrigger>
@@ -90,13 +91,13 @@ export const ItemsDont: Story = {
 export const SelectionDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Sort by
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu>
-          <MenuItem icon={<CheckIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="check" isPresentational />}>
             Recommended
           </MenuItem>
           <MenuItem>Most recent</MenuItem>
@@ -110,9 +111,9 @@ export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
+      <Button className="[--icon-size:24]">
         Edit item
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu>
@@ -139,9 +140,9 @@ export const LabelChevronDont: Story = {
 export const LabelDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Actions [visually hidden], conversation with Harper[/visually hidden]
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -155,9 +156,9 @@ export const LabelDo: Story = {
 export const LabelDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Open menu
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -171,15 +172,15 @@ export const LabelDont: Story = {
 export const IconsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
-          <MenuItem icon={<EditIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
             Edit &lsquo;Strengths&rsquo;
           </MenuItem>
-          <MenuItem icon={<EditIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
             Edit &lsquo;Weaknesses&rsquo;
           </MenuItem>
           <MenuItem>Export PDF</MenuItem>
@@ -193,8 +194,8 @@ export const IconsDont: Story = {
 export const MenuItemLabelsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -211,8 +212,8 @@ export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -229,8 +230,8 @@ export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -247,8 +248,8 @@ export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -265,8 +266,8 @@ export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>