@kaizen/components 1.59.0 → 1.60.0

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.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/Illustration/utils/usePausePlay.spec.tsx

@@ -1,6 +1,5 @@
 import React, { RefObject, act } from "react"
-import { render } from "@testing-library/react"
-import { renderHook } from "@testing-library/react-hooks"
+import { render, renderHook } from "@testing-library/react"
 import { LaunchIcon, PauseIcon } from "~components/Icon"
 import { usePausePlay, usePausePlayHook } from "./usePausePlay"
 

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.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.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/_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/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 = {

package/src/Modal/ConfirmationModal/ConfirmationModal.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 { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ConfirmationModal, ConfirmationModalProps } from "./ConfirmationModal"
 
 const user = userEvent.setup()

package/src/Modal/ContextModal/ContextModal.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 { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ContextModal, ContextModalProps } from "./ContextModal"
 
 const user = userEvent.setup()

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

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

package/src/Modal/InputEditModal/InputEditModal.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 { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { InputEditModal, InputEditModalProps } from "./InputEditModal"
 
 const user = userEvent.setup()

package/src/MultiSelect/MultiSelect.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { ReactFocusOnProps } from "react-focus-on/dist/es5/types"
 import { FieldMessage, FieldMessageProps } from "~components/FieldMessage"
 import { Heading } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   MultiSelectOptions,
   MultiSelectOptionsProps,

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, InputHTMLAttributes } from "react"
 import classnames from "classnames"
 import { CheckIcon, MinusIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
 export type CheckedStatus = "checked" | "unchecked" | "indeterminate"

package/src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.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 { MultiSelectOption } from "../../types"
 import { Checkbox, CheckboxProps } from "../Checkbox"
 import styles from "./MultiSelectOptionField.module.scss"

package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } 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 { MultiSelectOption } from "../../types"
 import { MultiSelectOptionField } from "../MultiSelectOptionField"
 import styles from "./MultiSelectOptions.module.scss"

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -4,7 +4,7 @@ import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { RemovableTag } from "~components/__future__"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"
 

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import {
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { ReactFocusOnProps } from "react-focus-on/dist/es5/types"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Popover.module.scss"
 
 export type PopoverProps<RT extends ReferenceType = ReferenceType> = {

package/src/Notification/GlobalNotification/GlobalNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   GenericNotification,
   GenericNotificationType,

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import classnames from "classnames"
 import { HeadingProps } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   GenericNotification,
   GenericNotificationType,

package/src/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { createPortal } from "react-dom"
 import { GenericNotification } from "~components/Notification/subcomponents/GenericNotification"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ToastNotificationObj } from "../../../types"
 
 export type ToastNotificationsMapProps = {

package/src/Notification/ToastNotification/types.ts

@@ -1,4 +1,4 @@
-import { DataAttributes } from "~types/DataAttributes"
+import { DataAttributes } from "~components/types/DataAttributes"
 import {
   GenericNotificationType,
   GenericNotificationVariant,

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -5,7 +5,7 @@ import {
   NotificationType,
   NotificationVariant,
 } from "~components/Notification/types"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { CancelButton } from "../CancelButton"
 import { NotificationHeading } from "../NotificationHeading"
 import {

package/src/Pagination/Pagination.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 { DirectionalLink } from "./subcomponents/DirectionalLink"
 import { PaginationLink } from "./subcomponents/PaginationLink"
 import { TruncateIndicator } from "./subcomponents/TruncateIndicator"

package/src/Popover/Popover.module.scss

@@ -1,6 +1,5 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
 @import "../../styles/utils/button-reset";
 
 // Sync with PopoverModern.tsx
@@ -50,7 +49,7 @@ $large-width: 450px;
   filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
   border-radius: $border-solid-border-radius;
   color: $color-purple-800;
-  text-align: left;
+  text-align: start;
   padding-block: calc(var(--spacing-12) - var(--border-width))
     calc(var(--spacing-16) - var(--border-width));
   padding-inline: calc(var(--spacing-16) - var(--border-width));
@@ -123,11 +122,11 @@ $cautionary-box-border-color: var(--color-yellow-700);
 
 .header {
   position: relative;
-  margin-bottom: $spacing-xs;
+  margin-bottom: var(--spacing-6);
   display: flex;
   align-items: center;
   white-space: nowrap;
-  padding-right: $spacing-md;
+  padding-inline-end: var(--spacing-24);
 }
 
 .container {
@@ -137,7 +136,7 @@ $cautionary-box-border-color: var(--color-yellow-700);
 
 .icon {
   display: inherit;
-  margin-right: $spacing-xs;
+  margin-inline-end: var(--spacing-6);
 }
 
 .informativeIcon {
@@ -205,7 +204,6 @@ $cautionary-box-border-color: var(--color-yellow-700);
  * Hence, the confusion below.
  */
 
-.arrowSideTop,
 [data-popper-placement^="bottom"] .arrowWrapper {
   bottom: 100%;
   left: 50%;
@@ -216,7 +214,6 @@ $cautionary-box-border-color: var(--color-yellow-700);
   }
 }
 
-.arrowSideLeft,
 [data-popper-placement^="left"] .arrowWrapper {
   right: 0;
   margin-right: -10px;
@@ -226,7 +223,6 @@ $cautionary-box-border-color: var(--color-yellow-700);
   }
 }
 
-.arrowSideRight,
 [data-popper-placement^="right"] .arrowWrapper {
   left: 0;
   margin-left: -10px;
@@ -236,29 +232,11 @@ $cautionary-box-border-color: var(--color-yellow-700);
   }
 }
 
-.arrowSideBottom,
 [data-popper-placement^="top"] .arrowWrapper {
   top: 100%;
   left: 50%;
 }
 
-// Legacy component only
-.arrowPositionCenter {
-  transform: translateX(-50%);
-}
-
-// Legacy component only
-.arrowPositionStart {
-  left: $spacing-md;
-  right: auto;
-}
-
-// Legacy component only
-.arrowPositionEnd {
-  right: $spacing-md;
-  left: auto;
-}
-
 .large {
   width: auto;
   max-width: $large-width;

package/src/Popover/Popover.tsx

@@ -4,7 +4,7 @@ import { usePopper } from "react-popper"
 import { Heading } from "~components/Heading"
 import { CloseIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Placement, PopoverSize, PopoverVariant } from "./types"
 import {
   mapArrowVariantToClass,
@@ -18,6 +18,9 @@ import styles from "./Popover.module.scss"
 
 export type PopoverProps = {
   children: React.ReactNode
+  /**
+   * @deprecated We are no longer supporting different variants for Popover, instead there will only be a single default variant.
+   */
   variant?: PopoverVariant
   placement?: Placement
   size?: PopoverSize
@@ -26,8 +29,7 @@ export type PopoverProps = {
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void
   singleLine?: boolean
   /**
-   * For almost all intents and purposes, you should be using a pre-defined variant.
-   * Please avoid using a custom icon unless you have a very good reason to do so.
+   * @deprecated This was for customising the icon provided with variants.
    */
   customIcon?: JSX.Element
   referenceElement: HTMLElement | null

package/src/Popover/_docs/Popover.mdx

@@ -44,6 +44,3 @@ of `useRef`, which may not be immediately intuitive.
 
 The popper documentation to help provide more context:
   https://popper.js.org/react-popper/v2/hook/
-
-## Variants
-<Canvas of={PopoverStories.Variants} />

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

@@ -58,7 +58,7 @@ const StickerSheetTemplate: StickerSheetStory = {
         hasVerticalHeadings
       />
       <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Variants">
+        <StickerSheet.Row rowTitle="Variants (deprecated)">
           <StickerSheet.Cell style={cellStyle}>
             <PopoverWrapper />
           </StickerSheet.Cell>

package/src/Popover/_docs/Popover.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
-import { Popover as PopoverComponent, PopoverProps, usePopover } from "../index"
+import { Popover as PopoverComponent, usePopover } from "../index"
 
 const meta = {
   title: "Components/Popover",
@@ -11,15 +10,8 @@ const meta = {
     referenceElement: undefined,
   },
   argTypes: {
-    customIcon: {
-      options: ["None", "MeatballsIcon", "AddIcon"],
-      control: { type: "radio" },
-      mapping: {
-        None: undefined,
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
-      },
-    },
+    variant: { control: false },
+    customIcon: { control: false },
   },
 } satisfies Meta<typeof PopoverComponent>
 
@@ -59,34 +51,3 @@ export const Playground: Story = {
     ),
   ],
 }
-
-export const Variants: Story = {
-  render: (args, context) => {
-    const Popover = (props: PopoverProps): JSX.Element =>
-      PopoverTemplate.render!({ ...args, ...props }, context)
-    return (
-      <div className="flex pl-32">
-        <div className="w-[150px]">
-          <Popover {...args} heading="Default" />
-        </div>
-        <div className="w-[150px]">
-          <Popover {...args} variant="positive" heading="Positive" />
-        </div>
-        <div className="w-[150px]">
-          <Popover {...args} variant="informative" heading="Informative" />
-        </div>
-        <div className="w-[150px]">
-          <Popover {...args} variant="negative" heading="Negative" />
-        </div>
-        <div className="w-[150px]">
-          <Popover {...args} variant="cautionary" heading="Cautionary" />
-        </div>
-      </div>
-    )
-  },
-  parameters: {
-    docs: {
-      source: { type: "dynamic" },
-    },
-  },
-}

package/src/ProgressBar/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Label } from "./subcomponents/Label"
 import { calculatePercentage } from "./utils/calculatePercentage"
 import styles from "./ProgressBar.module.scss"

package/src/Radio/Radio/Radio.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 styles from "./Radio.module.scss"
 
 export type RadioProps = OverrideClassName<

package/src/Radio/RadioGroup/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, useId } from "react"
 import classnames from "classnames"
 import { Label } from "~components/Label"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./RadioGroup.module.scss"
 
 export type RadioGroupProps = OverrideClassName<

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Label } from "~components/Label"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { RichTextContent, RichTextContentProps } from "../RichTextContent"
 import { EditorContentArray } from "../types"
 import styles from "./EditableRichTextContent.module.scss"

package/src/RichTextEditor/RichTextContent/RichTextContent.tsx

@@ -1,6 +1,6 @@
 import React, { useState, HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { createSchemaWithAll } from "../RichTextEditor/schema"
 import { EditorContentArray } from "../types"
 import { useRichTextEditor } from "../utils/core"

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -9,7 +9,7 @@ import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
 import { Label } from "~components/Label"
 import { InlineNotification } from "~components/Notification"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ToolbarItems, EditorContentArray, EditorRows } from "../types"
 import { useRichTextEditor } from "../utils/core"
 import { createLinkManager } from "../utils/plugins"

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import classnames from "classnames"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ToggleIconButtonMoods } from "./types"
 import styles from "./ToggleIconButton.module.scss"
 

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ToolbarSectionProps } from "../ToolbarSection"
 import styles from "./Toolbar.module.scss"
 

package/src/Skirt/Skirt.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import classnames from "classnames"
 import { Container } from "~components/Container"
 import { Content, ContentProps } from "~components/Content"
-import { useResizeObserver } from "~utils/useResizeObserver"
+import { useResizeObserver } from "~components/utils/useResizeObserver"
 import styles from "./Skirt.module.scss"
 
 const spacing = 24