@kaizen/components 1.55.2 → 1.56.0

package/dist/types/{Menu → __actions__/Menu/v1}/subcomponents/MenuList/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type MenuListProps = {
     heading?: JSX.Element;
     children: React.ReactNode;

package/dist/types/__actions__/Menu/v2/index.d.ts

@@ -0,0 +1,6 @@
+export * from "../v1/Menu";
+export * from "../v1/subcomponents/MenuList";
+export * from "../v1/subcomponents/MenuDropdown";
+export * from "../v1/subcomponents/MenuItem";
+export * from "../v1/subcomponents/MenuHeading";
+export * from "../v1/subcomponents/StatelessMenu";

package/dist/types/__actions__/Menu/v3/Menu.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MenuProps as RACMenuProps } from "react-aria-components";
+export type MenuProps = Omit<RACMenuProps<HTMLDivElement>, "selectionMode" | "disallowEmptySelection" | "selectedKeys" | "defaultSelectedKeys">;
+/**
+ * A menu displays a list of actions or options that a user can choose.
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/__actions__/Menu/v3/MenuItem.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { MenuItemProps as RACMenuItemProps } from "react-aria-components";
+export type MenuItemProps = RACMenuItemProps & {
+    /**
+     * Provides positioning for an icon to the left of the menu item content
+     */
+    icon?: ReactNode;
+};
+/**
+ * A MenuItem represents an individual action in a Menu.
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<RACMenuItemProps<object> & {
+    /**
+     * Provides positioning for an icon to the left of the menu item content
+     */
+    icon?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/__actions__/Menu/v3/MenuTrigger.d.ts

@@ -0,0 +1,6 @@
+import { MenuTriggerProps as RACMenuTriggerProps } from "react-aria-components";
+export type MenuTriggerProps = Omit<RACMenuTriggerProps, "trigger">;
+/**
+ * A MenuTrigger adds open/close functionality when wrapping a Button and a Popover (with a Menu inside of the Popover)
+ */
+export declare const MenuTrigger: (props: MenuTriggerProps) => JSX.Element;

package/dist/types/__actions__/Menu/v3/SubmenuTrigger.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { SubmenuTriggerProps as RACSubmenuTriggerProps } from "react-aria-components";
+export type SubmenuTriggerProps = RACSubmenuTriggerProps;
+export declare const SubmenuTriggerContext: React.Context<object | null>;
+/**
+ * A SubmenuTrigger creates a nested Menu triggered by a MenuItem
+ */
+export declare const SubmenuTrigger: (props: SubmenuTriggerProps) => JSX.Element;

package/dist/types/__actions__/Menu/v3/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Menu";
+export * from "./MenuItem";
+export * from "./MenuTrigger";

package/dist/types/__actions__/v1.d.ts

@@ -0,0 +1,2 @@
+export * from "./Menu/v1";
+export * from "./Button/v1";

package/dist/types/__actions__/v2.d.ts

@@ -0,0 +1,2 @@
+export * from "./Menu/v2";
+export * from "./Button/v2";

package/dist/types/__actions__/v3.d.ts

@@ -0,0 +1,2 @@
+export * from "./Menu/v3";
+export * from "./Button/v3";

package/dist/types/index.d.ts

@@ -3,7 +3,6 @@ export * from "./AvatarGroup";
 export * from "./Badge";
 export * from "./Brand";
 export * from "./BrandMoment";
-export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Calendar";
 export * from "./Card";
@@ -31,7 +30,6 @@ export * from "./Label";
 export * from "./LabelledMessage";
 export * from "./LikertScaleLegacy";
 export * from "./Loading";
-export * from "./Menu";
 export * from "./Modal";
 export * from "./MultiSelect";
 export * from "./Notification";
@@ -61,3 +59,5 @@ export * from "./VisuallyHidden";
 export * from "./Well";
 export * from "./Workflow";
 export * from "./__overlays__/Tooltip/v1";
+export * from "./__actions__/Menu/v1";
+export * from "./__actions__/Button/v1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.55.2",
+  "version": "1.56.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -31,24 +31,24 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.4",
+    "@internationalized/date": "^3.5.5",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.5",
-    "@react-aria/datepicker": "^3.10.1",
-    "@react-aria/focus": "^3.17.1",
-    "@react-aria/i18n": "^3.11.1",
-    "@react-aria/listbox": "^3.12.1",
-    "@react-aria/menu": "^3.14.1",
-    "@react-aria/overlays": "^3.22.1",
-    "@react-aria/select": "^3.14.5",
-    "@react-aria/utils": "^3.24.1",
-    "@react-stately/collections": "^3.10.7",
-    "@react-stately/datepicker": "^3.9.4",
-    "@react-stately/list": "^3.10.5",
-    "@react-stately/menu": "^3.7.1",
-    "@react-stately/select": "^3.6.4",
-    "@react-types/shared": "^3.23.1",
+    "@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",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "lodash.debounce": "^4.0.8",
@@ -57,17 +57,17 @@
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.22.1",
+    "prosemirror-model": "^1.22.2",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-schema-list": "^1.4.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.9.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.33.8",
+    "prosemirror-view": "^1.33.9",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.33.1",
-    "react-aria-components": "^1.2.1",
-    "react-day-picker": "^8.10.1",
+    "react-aria": "^3.34.1",
+    "react-aria-components": "^1.3.1",
+    "react-day-picker": "8.10.1",
     "react-focus-lock": "^2.12.1",
     "react-focus-on": "^3.9.3",
     "react-media": "^1.10.0",
@@ -83,25 +83,25 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^9.6.0",
-    "@cultureamp/i18n-react-intl": "^2.5.8",
+    "@cultureamp/frontend-apis": "^9.7.0",
+    "@cultureamp/i18n-react-intl": "^2.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.19",
     "concat-cli": "^4.0.0",
-    "query-string": "^9.0.0",
+    "query-string": "^9.1.0",
     "react-intl": "^6.6.8",
-    "rollup": "^4.18.1",
+    "rollup": "^4.19.0",
     "sass": "^1.77.8",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.2.2",
+    "ts-jest": "^29.2.3",
     "tslib": "^2.6.3",
     "tsx": "^4.16.2",
     "@kaizen/design-tokens": "10.5.0",
-    "@kaizen/package-bundler": "1.1.2"
+    "@kaizen/package-bundler": "1.1.3"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",
@@ -109,7 +109,7 @@
     "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.8",
+    "@cultureamp/i18n-react-intl": "^2.5.9",
     "react": "^18.3.1",
     "react-intl": "^6.6.8"
   },

package/src/BrandMoment/BrandMoment.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode, ReactElement, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { assetUrl } from "@kaizen/hosted-assets"
-import { Button, ButtonProps } from "~components/Button"
 import { Heading } from "~components/Heading"
 import { SceneProps } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Button, ButtonProps } from "~components/__actions__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { useMediaQueries } from "~utils/useMediaQueries"
 import styles from "./BrandMoment.module.scss"

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { assetUrl } from "@kaizen/hosted-assets"
-import { Button } from "~components/Button"
 import { CloseIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import styles from "./ExampleHeaders.scss"
 
 export const MinimalBasic = (): JSX.Element => (

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -1,9 +1,9 @@
 import React, { HTMLAttributes, useId, useState } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
-import { IconButton } from "~components/Button"
 import { Heading } from "~components/Heading"
 import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
+import { IconButton } from "~components/__actions__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -3,11 +3,11 @@ import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
 import { userEvent, within, expect } from "@storybook/test"
 import Highlight from "react-highlight"
-import { Button } from "~components/Button"
 import { defaultMonthControls } from "~components/Calendar/_docs/controls/defaultMonthControls"
 import { weekStartsOnControls } from "~components/Calendar/_docs/controls/weekStartsOnControls"
 import { FieldMessageStatus } from "~components/FieldMessage"
 import { Text } from "~components/Text"
+import { Button } from "~components/__actions__/v2"
 import { DatePicker, ValidationResponse } from "../index"
 import { datePickerLocaleControls } from "./controls/datePickerLocaleControls"
 import { disabledDayMatchersControls } from "./controls/disabledDayMatchersControls"

package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import isChromatic from "chromatic"
-import { Button } from "~components/Button"
 import { ChevronRightIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { ChevronRightIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import { EmptyState } from "../index"
 import styles from "./EmptyState.stories.module.scss"
 

package/src/ErrorPage/ErrorPage.spec.tsx

@@ -0,0 +1,142 @@
+import React from "react"
+import { screen, waitFor } from "@testing-library/react"
+import { renderWithIntl } from "~tests"
+import { ErrorPage } from "./ErrorPage"
+
+describe("<ErrorPage />", () => {
+  beforeAll(() => {
+    window.HTMLMediaElement.prototype.load = jest.fn()
+    window.HTMLMediaElement.prototype.play = jest
+      .fn()
+      .mockResolvedValue(undefined)
+    window.HTMLMediaElement.prototype.pause = jest.fn()
+    window.matchMedia = jest.fn().mockImplementation(() => ({
+      media: "",
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      matches: false,
+    }))
+  })
+
+  it("shows the correct content for error 400", async () => {
+    renderWithIntl(<ErrorPage code="400" />)
+    await waitFor(() => {
+      expect(screen.getByText("Problem loading page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Problem loading page right now. Try again or head home."
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 400")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 401", async () => {
+    renderWithIntl(<ErrorPage code="401" />)
+    await waitFor(() => {
+      expect(screen.getByText("You can't view this page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home"
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 401")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 403", async () => {
+    renderWithIntl(<ErrorPage code="403" />)
+    await waitFor(() => {
+      expect(screen.getByText("You can't view this page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home"
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 403")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 404", async () => {
+    renderWithIntl(<ErrorPage code="404" />)
+    await waitFor(() => {
+      expect(screen.getByText("Page not found")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home"
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 404")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 422", async () => {
+    renderWithIntl(<ErrorPage code="422" />)
+    await waitFor(() => {
+      expect(screen.getByText("Change couldn't be made")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry but your change couldn't be made. Go back and try again, or head to Home"
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 422")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 500", async () => {
+    renderWithIntl(<ErrorPage code="500" />)
+    await waitFor(() => {
+      expect(
+        screen.getByText("Something's gone wrong on our side")
+      ).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 500")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 502", async () => {
+    renderWithIntl(<ErrorPage code="502" />)
+    await waitFor(() => {
+      expect(screen.getByText("You can't view this page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry about this. The best thing to do is go back and try again."
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 502")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 503", async () => {
+    renderWithIntl(<ErrorPage code="503" />)
+    await waitFor(() => {
+      expect(screen.getByText("You can't view this page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry about this. The best thing to do is go back and try again."
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 503")).toBeVisible()
+    })
+  })
+
+  it("shows the correct content for error 504", async () => {
+    renderWithIntl(<ErrorPage code="504" />)
+    await waitFor(() => {
+      expect(screen.getByText("You can't view this page")).toBeVisible()
+      expect(
+        screen.getByText(
+          "Sorry about this. The best thing to do is go back and try again."
+        )
+      ).toBeVisible()
+      expect(screen.getByText("Error code 504")).toBeVisible()
+    })
+  })
+})

package/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { ErrorPage, ErrorPageProps } from "../ErrorPage"
+import { ErrorPage } from "../ErrorPage"
 
 export default {
   title: "Pages/Error Page",
@@ -30,34 +30,16 @@ export default {
   },
 } satisfies Meta
 
-const ERROR_CODES = [
-  "400",
-  "401",
-  "403",
-  "404",
-  "422",
-  "500",
-  "502",
-  "503",
-  "504",
-] satisfies Array<ErrorPageProps["code"]>
-
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      {ERROR_CODES.map(code => (
-        <StickerSheet
-          key={code}
-          heading={`Error ${code}`}
-          isReversed={isReversed}
-        >
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <ErrorPage code={code} />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
-        </StickerSheet>
-      ))}
+      <StickerSheet heading="ErrorPage" isReversed={isReversed}>
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <ErrorPage code="400" />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
 
       <StickerSheet heading="Custom error" isReversed={isReversed}>
         <StickerSheet.Body>

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { Button } from "~components/Button"
 import { AddIcon } from "~components/Icon"
-import { Menu, MenuList, MenuItem } from "~components/Menu"
+import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import styles from "./ClearAllButton.module.scss"
 

package/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button, ButtonProps } from "~components/Button"
+import { Button, ButtonProps } from "~components/__actions__/v2"
 import styles from "./LoadMoreButton.module.scss"
 
 export type LoadMoreButtonProps = ButtonProps

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import Media from "react-media"
-import { Button, ButtonProps } from "~components/Button"
 import { Heading, HeadingProps } from "~components/Heading"
 import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Button, ButtonProps } from "~components/__actions__/v2"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"

package/src/Icon/subcomponents/SVG/SVG.tsx

@@ -15,6 +15,7 @@ type DecorativeIcon = {
 
 export type BaseSVGProps = {
   inheritSize?: boolean
+  shouldFlipOnRtl?: boolean
 } & OverrideClassName<SVGAttributes<SVGElement>> &
   (MeaningfulIcon | DecorativeIcon)
 
@@ -31,12 +32,14 @@ export const SVG = ({
   viewBox = "0 0 20 20",
   classNameOverride,
   children,
+  shouldFlipOnRtl,
   ...restProps
 }: SVGProps): JSX.Element => {
   const classes = classnames(
     styles.icon,
     classNameOverride,
-    inheritSize && styles.inheritSize
+    inheritSize && styles.inheritSize,
+    shouldFlipOnRtl && styles.flipOnRtl
   )
 
   if (role === "presentation") {

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import classnames from "classnames"
 import { assetUrl } from "@kaizen/hosted-assets"
-import { IconButton } from "~components/Button"
+import { IconButton } from "~components/__actions__/v2"
 import { canPlayWebm } from "../../utils/canPlayWebm"
 import { usePausePlay } from "../../utils/usePausePlay"
 import styles from "../Base/Base.module.scss"

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { ButtonProps } from "~components/Button"
 import { Heading } from "~components/Heading"
 import {
   CautionWhiteIcon,
@@ -23,6 +22,7 @@ import {
   ModalAccessibleLabel,
   ModalBody,
 } from "~components/Modal/GenericModal"
+import { ButtonProps } from "~components/__actions__/v2"
 import styles from "./ConfirmationModal.module.scss"
 
 export type ConfirmationModalProps = {

package/src/Modal/ContextModal/ContextModal.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { ButtonProps } from "~components/Button"
 import { Heading } from "~components/Heading"
 import {
   GenericModal,
@@ -9,6 +8,7 @@ import {
   ModalAccessibleLabel,
   ModalBody,
 } from "~components/Modal/GenericModal"
+import { ButtonProps } from "~components/__actions__/v2"
 import styles from "./ContextModal.module.scss"
 
 export type ContextModalSecondaryActionProps =

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { Button, ButtonProps } from "~components/Button"
+import { Button, ButtonProps } from "~components/__actions__/v2"
 import { useMediaQueries } from "~utils/useMediaQueries"
 import { ModalBody } from "../ModalBody/ModalBody"
 import styles from "./ModalFooter.module.scss"

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { IconButton } from "~components/Button"
 import { CloseIcon } from "~components/Icon"
+import { IconButton } from "~components/__actions__/v2"
 import { ModalBody } from "../ModalBody"
 import styles from "./ModalHeader.module.scss"
 

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { ButtonProps } from "~components/Button"
 import { Heading } from "~components/Heading"
 import {
   GenericModal,
@@ -9,6 +8,7 @@ import {
   ModalAccessibleLabel,
   ModalBody,
 } from "~components/Modal/GenericModal"
+import { ButtonProps } from "~components/__actions__/v2"
 import styles from "./InputEditModal.module.scss"
 
 export type InputEditModalProps = {

package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { ToastNotification, useToastNotification } from "../index"
 
 const meta = {

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss

@@ -1,7 +1,7 @@
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/color";
-@import "../../../Button/utils/mixins";
-@import "../../../Button/utils/variables";
+@import "../../../__actions__/Button/v1/utils/mixins";
+@import "../../../__actions__/Button/v1/utils/variables";
 
 %directional-link {
   [dir="rtl"] & {