@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/src/{__containers__/GuidanceBlock/v2 → GuidanceBlock}/_docs/GuidanceBlock.mdx

@@ -4,7 +4,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 <Meta of={GuidanceBlockStories} />
 
-# GuidanceBlock (V2)
+# GuidanceBlock
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/GuidanceBlock"
@@ -13,7 +13,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 />
 
-<KAIOInstallation exportNames="GuidanceBlock" version="2" family="containers" />
+<KAIOInstallation exportNames="GuidanceBlock" />
 
 ## Overview
 

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stickersheet.stories.tsx

@@ -12,7 +12,7 @@ import { GuidanceBlock, GuidanceBlockProps } from "../index"
 import { variantsMap } from "../types"
 
 export default {
-  title: "Containers/GuidanceBlock/v1",
+  title: "Containers/GuidanceBlock",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stories.tsx

@@ -29,7 +29,7 @@ const defaultText = {
 }
 
 const meta = {
-  title: "Containers/GuidanceBlock/v1",
+  title: "Containers/GuidanceBlock",
   component: GuidanceBlock,
   args: {
     layout: "default",

package/src/Heading/Heading.module.scss

@@ -1,6 +1,6 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/typography";
-@import "../../styles/foundation/_layers.css";
+@import "../../styles/foundation/layers";
 
 @layer reset {
   .heading {

package/src/Heading/Heading.spec.tsx

@@ -1,37 +1,8 @@
 import * as React from "react"
 import { render } from "@testing-library/react"
-import { AllowedHeadingTags, Heading, HeadingVariants } from "./"
+import { AllowedHeadingTags, Heading, HeadingVariants } from "."
 
 describe("<Heading />", () => {
-  it("renders the correct classes", () => {
-    const headingMock = render(<Heading variant="display-0">Example</Heading>)
-    const headingClasslist = headingMock.getByText("Example").classList
-    expect(headingClasslist).toContain("heading")
-    expect(headingClasslist).toContain("display-0")
-    expect(headingClasslist).toContain("large")
-  })
-
-  it("adds a .small class instead of .large if a Heading 3 is used", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" tag="div">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain("small")
-    expect(headingMock.getByText("Example").classList).not.toContain("large")
-  })
-
-  it("adds a .dark-reduced-opacity class if the color prop is set to that", () => {
-    const headingMock = render(
-      <Heading variant="heading-3" color="dark-reduced-opacity">
-        Example
-      </Heading>
-    )
-    expect(headingMock.getByText("Example").classList).toContain(
-      "dark-reduced-opacity"
-    )
-  })
-
   it("changes rendered HTML element when passed tag", () => {
     const headingMock = render(
       <Heading variant="display-0" tag="div">
@@ -66,7 +37,6 @@ describe("<Heading />", () => {
       it(`renders the correct element for <Heading variant={${variant}} />`, () => {
         const headingMock = render(<Heading variant={variant}>Example</Heading>)
         expect(headingMock.getByText("Example").tagName.toLowerCase()).toBe(el)
-        expect(headingMock.baseElement).toMatchSnapshot()
       })
     })
   })

package/src/Heading/Heading.tsx

@@ -1,6 +1,6 @@
 import { createElement, HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Heading.module.scss"
 
 const VARIANTS_24PX_OR_GREATER = ["display-0", "heading-1", "heading-2"]

package/src/Icon/_docs/Icon.stories.tsx

@@ -4,7 +4,7 @@ import * as ICONS from "~components/Icon"
 import { Text } from "~components/Text"
 import { Tag } from "~components/__future__/Tag"
 import { AddIcon } from "../index"
-import styles from "./icon.stories.scss"
+import styles from "./icon.module.scss"
 
 const meta = {
   title: "Components/Icons",

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

@@ -1,6 +1,6 @@
 import React, { ReactNode, SVGAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./SVG.module.scss"
 
 type MeaningfulIcon = {

package/src/Illustration/subcomponents/Base/Base.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { assetUrl } from "@kaizen/hosted-assets"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import { assetUrl } from "~components/utils/hostedAssets"
 import styles from "./Base.module.scss"
 
 export type BaseProps = {

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

@@ -1,15 +1,15 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { VideoPlayer } from "./VideoPlayer"
 
 const matchMedia = {
   media: "",
   onchange: null,
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
-  addEventListener: jest.fn(),
-  removeEventListener: jest.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
 }
 const mockPrefersReducedMotion = {
   matches: true,
@@ -19,35 +19,36 @@ const mockDoesNotPreferReducedMotion = {
   matches: false,
   ...matchMedia,
 }
-const mockPlay = jest.fn().mockResolvedValue(undefined)
-const mockLoad = jest.fn()
-const mockPause = jest.fn()
+const mockPlay = vi.fn().mockResolvedValue(undefined)
+const mockLoad = vi.fn()
+const mockPause = vi.fn()
 
 describe("<VideoPlayer />", () => {
   beforeEach(() => {
     window.HTMLMediaElement.prototype.load = mockLoad
     window.HTMLMediaElement.prototype.play = mockPlay
     window.HTMLMediaElement.prototype.pause = mockPause
-    window.matchMedia = jest
+    window.matchMedia = vi
       .fn()
       .mockImplementation(() => mockDoesNotPreferReducedMotion)
     // this will stop throwing the unstable_flushDiscreteUpdates console error cause by react bug
     // https://stackoverflow.com/a/65338472/18285270
     Object.defineProperty(HTMLMediaElement.prototype, "muted", {
-      set: jest.fn(),
+      set: vi.fn(),
     })
   })
 
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
-  it("renders a video player in the document and autoplay", async () => {
+  it("renders a video player in the document and autoplay", () => {
     render(
       <VideoPlayer
         autoplay
         fallback="illustrations/heart/spot/moods-cautionary.svg"
         source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
       />
     )
     const videoPlayer = screen.getByTestId("kz-video-player")
@@ -55,92 +56,37 @@ describe("<VideoPlayer />", () => {
     expect(mockPlay).toHaveBeenCalled()
   })
 
-  describe("use-reduced-motion", () => {
-    it("respects the use-reduced-motion preferences of the user", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockPrefersReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).not.toHaveAttribute("autoplay")
-      expect(mockPause).toHaveBeenCalled()
-    })
-
-    it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).toHaveAttribute("autoplay")
-      expect(mockPlay).toHaveBeenCalled()
-    })
-  })
-
-  describe("when the aspect ratio is set as a prop", () => {
-    it("has aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          aspectRatio="landscape"
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeTruthy()
-      expect(container.querySelector(".landscape")).toBeTruthy()
-    })
-  })
-
-  describe("when the aspect ratio is not set as a prop", () => {
-    it("does not have aspect ratio class", () => {
-      window.matchMedia = jest
-        .fn()
-        .mockImplementation(() => mockDoesNotPreferReducedMotion)
-      const { container } = render(
-        <VideoPlayer
-          autoplay
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-      expect(container.querySelector(".aspectRatioWrapper")).toBeFalsy()
-      expect(container.querySelector(".landscape")).toBeFalsy()
-    })
+  it("respects the use-reduced-motion preferences of the user", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockPrefersReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).not.toHaveAttribute("autoplay")
+    expect(mockPause).toHaveBeenCalled()
   })
 
-  describe("Pausing/Playing animations", () => {
-    it("restarts the animation when pause button is clicked", () => {
-      const { container, getByRole } = render(
-        <VideoPlayer
-          fallback="illustrations/heart/spot/moods-cautionary.svg"
-          source="illustrations/heart/spot/moods-cautionary.webm"
-        />
-      )
-
-      const videoElement = container.querySelector("video")!
-
-      expect(videoElement.paused).toEqual(true)
-
-      const button = getByRole("button")
-      userEvent.click(button)
-
-      expect(mockPlay).toHaveBeenCalled()
-    })
+  it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toHaveAttribute("autoplay")
+    expect(mockPlay).toHaveBeenCalled()
   })
 })

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

@@ -0,0 +1,68 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { VideoPlayer } from "./index"
+
+export default {
+  title: "Components/Illustrations/VideoPlayer",
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disable: false },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed} title="Aspect Ratio">
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="default">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="landscape">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="landscape"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="portrait">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="portrait"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="square">
+          <div className="border border-dashed border-grey-500">
+            <VideoPlayer
+              autoplay={false}
+              aspectRatio="square"
+              fallback="illustrations/heart/scene/brand-moments-positive-outro"
+              source="illustrations/heart/scene/brand-moments-positive-outro"
+            />
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}

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

@@ -0,0 +1,37 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect, waitFor } from "@storybook/test"
+import { VideoPlayer } from "./index"
+
+const meta = {
+  title: "Components/Illustrations/VideoPlayer",
+  component: VideoPlayer,
+  args: {
+    autoplay: false,
+    fallback: "illustrations/heart/scene/brand-moments-positive-outro",
+    source: "illustrations/heart/scene/brand-moments-positive-outro",
+  },
+} satisfies Meta<typeof VideoPlayer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const PausePlay: Story = {
+  render: args => <VideoPlayer {...args} />,
+  name: "VideoPlayer: Pause/Play",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByRole("button")
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Pause animation")
+    })
+
+    waitFor(() => {
+      userEvent.click(element)
+      expect(element).toHaveAttribute("aria-label", "Play animation")
+    })
+  },
+}

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/__actions__/v2"
+import { assetUrl } from "~components/utils/hostedAssets"
 import { canPlayWebm } from "../../utils/canPlayWebm"
 import { usePausePlay } from "../../utils/usePausePlay"
 import styles from "../Base/Base.module.scss"

package/src/Input/Input/Input.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { InputStatus, InputTypes } from "./types"
 import styles from "./Input.module.scss"
 

package/src/Input/InputRange/InputRange.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { vi } from "vitest"
 import { InputRange } from "./index"
-
 describe("<InputRange />", () => {
   it("fires onChange after interaction", async () => {
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <InputRange
         id="unique-3"

package/src/Input/InputRange/InputRange.tsx

@@ -2,7 +2,7 @@ import React, { InputHTMLAttributes, ReactNode, useState } from "react"
 import classnames from "classnames"
 import { Text } from "~components/Text"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./InputRange.module.scss"
 
 export type InputRangeProps = {

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { InputSearchProps } from "./InputSearch"
 import { InputSearch } from "."
 
@@ -10,7 +10,7 @@ const user = userEvent.setup()
 const defaultInputProps = {
   id: "someInputId",
   value: "somevalue",
-  onChange: jest.fn(),
+  onChange: vi.fn(),
 }
 
 const renderInput = (
@@ -18,9 +18,7 @@ const renderInput = (
 ): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return renderWithIntl(
-    <InputSearch {...mergedInputProps} data-testid="someInputId" />
-  )
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {

package/src/Input/InputSearch/InputSearch.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { SearchIcon } from "~components/Icon/SearchIcon"
 import { LoadingSpinner } from "~components/Loading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./InputSearch.module.scss"
 
 export type InputSearchProps = {

package/src/KaizenProvider/KaizenProvider.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import { vi } from "vitest"
 import { KaizenProvider, KaizenProviderProps } from "./KaizenProvider"
-
 const KaizenProviderWrapper = ({
   children,
   ...restProps
@@ -9,7 +9,7 @@ const KaizenProviderWrapper = ({
   <KaizenProvider {...restProps}>{children}</KaizenProvider>
 )
 
-jest.mock("./subcomponents/OptionalIntlProvider", () => ({
+vi.mock("./subcomponents/OptionalIntlProvider", () => ({
   OptionalIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div>{children}</div>
   ),

package/src/KaizenProvider/_docs/KaizenProvider.mdx

@@ -1,9 +1,9 @@
 import { Meta } from "@storybook/blocks"
 import Highlight from "react-highlight"
-import migrationBonus from "!!raw-loader!./code-diffs/migration-bonus.diff"
-import migrationFETBonus from "!!raw-loader!./code-diffs/migration-fe-template-bonus.diff"
-import migrationFETToV1 from "!!raw-loader!./code-diffs/migration-fe-template-to-v1.diff"
-import migrationToV1 from "!!raw-loader!./code-diffs/migration-to-v1.diff"
+import migrationBonus from "./code-diffs/migration-bonus.diff?raw"
+import migrationFETBonus from "./code-diffs/migration-fe-template-bonus.diff?raw"
+import migrationFETToV1 from "./code-diffs/migration-fe-template-to-v1.diff?raw"
+import migrationToV1 from "./code-diffs/migration-to-v1.diff?raw"
 
 <Meta title="Components/Kaizen Provider/Installation" />
 

package/src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.spec.tsx

@@ -1,9 +1,10 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { IntlProvider } from "react-intl"
+import { vi } from "vitest"
 import { OptionalIntlProvider } from "."
 
-jest.mock("@cultureamp/i18n-react-intl", () => ({
+vi.mock("@cultureamp/i18n-react-intl", () => ({
   StaticIntlProvider: ({ children }: { children: React.ReactElement }) => (
     <div data-testid="mockedIntlProvider">{children}</div>
   ),
@@ -35,5 +36,3 @@ describe("<OptionalIntlProvider>", () => {
     expect(childrenResult).toBeInTheDocument()
   })
 })
-
-/* eslint-enable jest/expect-expect */

package/src/Label/Label.tsx

@@ -1,6 +1,6 @@
 import React, { LabelHTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Label.module.scss"
 
 type LabelType = "text" | "checkbox" | "toggle" | "radio"

package/src/LabelledMessage/LabelledMessage.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LabelledMessage.module.scss"
 
 export type LabelledMessageProps = {

package/src/LikertScaleLegacy/index.ts

@@ -1 +1,2 @@
 export * from "./LikertScaleLegacy"
+export * from "./types"

package/src/Loading/LoadingGraphic/LoadingGraphic.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LoadingGraphic.module.scss"
 
 export type LoadingGraphicSize =

package/src/Loading/LoadingHeading/LoadingHeading.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { HeadingVariants } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LoadingHeading.module.scss"
 
 export type LoadingHeadingProps = {

package/src/Loading/LoadingInput/LoadingInput.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LoadingInput.module.scss"
 
 export type LoadingInputProps = {

package/src/Loading/LoadingParagraph/LoadingParagraph.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LoadingParagraph.module.scss"
 
 export type LoadingParagraphProps = {

package/src/Loading/LoadingSpinner/LoadingSpinner.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./LoadingSpinner.module.scss"
 
 export type LoadingSpinnerProps = {