@kaizen/components 1.58.2 → 1.60.0

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -4,8 +4,8 @@ import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
-import { DataAttributes } from "~types/DataAttributes"
-import { isRefObject } from "~utils/isRefObject"
+import { DataAttributes } from "~components/types/DataAttributes"
+import { isRefObject } from "~components/utils/isRefObject"
 import { FilterButton, FilterButtonProps } from "../FilterButton"
 import {
   FilterButtonBase,

package/src/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes, forwardRef } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FilterButtonBase.module.scss"
 
 export type FilterButtonBaseProps = {

package/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react"
-import { renderHook, act } from "@testing-library/react-hooks"
+import { renderHook, act } from "@testing-library/react"
 import { enAU } from "date-fns/locale"
 import * as isSelectingDayInCalendar from "~components/Calendar/utils/isSelectingDayInCalendar"
 import { useDateInputHandlers } from "./useDateInputHandlers"

package/src/Filter/FilterDatePicker/hooks/useDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor } from "@testing-library/react"
-import { renderHook } from "@testing-library/react-hooks"
+import { waitFor, renderHook } from "@testing-library/react"
 import { renderWithIntl } from "~tests"
 import { useDateValidation } from "./useDateValidation"
 

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx

@@ -14,8 +14,8 @@ import {
 import { FilterProps } from "~components/Filter/Filter"
 import { useDateValidation } from "~components/Filter/FilterDatePicker/hooks/useDateValidation"
 import { transformDateToInputValue } from "~components/Filter/FilterDatePicker/utils/transformDateToInputValue"
-import { DataAttributes } from "~types/DataAttributes"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { DataAttributes } from "~components/types/DataAttributes"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useDateInputHandlers } from "../../hooks/useDateInputHandlers"
 import { DateValidationResponse, ValidationMessage } from "../../types"
 import { DateInputField, DateInputFieldProps } from "../DateInputField"

package/src/Filter/FilterDatePicker/utils/getDateValidationHandler.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { LabelledMessage } from "~components/LabelledMessage"
-import { getNodeText } from "~utils/getNodeText"
+import { getNodeText } from "~components/utils/getNodeText"
 import { DateValidationResponse, ValidationMessage } from "../types"
 
 export type GetDateValidationHandlerArgs = {

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx

@@ -9,8 +9,8 @@ import {
 } from "~components/DateInput"
 import { FieldMessage } from "~components/FieldMessage"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
-import { isRefObject } from "~utils/isRefObject"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import { isRefObject } from "~components/utils/isRefObject"
 import {
   DateRangeValidationMessage,
   DateRangeValidationMessageProps,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -16,8 +16,8 @@ import {
 } from "~components/DatePicker/utils/getLocale"
 import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
 import { useDateInputHandlers } from "~components/Filter/FilterDatePicker/hooks/useDateInputHandlers"
-import { DataAttributes } from "~types/DataAttributes"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { DataAttributes } from "~components/types/DataAttributes"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   DateRangeInputField,
   DateRangeInputFieldProps,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor } from "@testing-library/react"
-import { renderHook } from "@testing-library/react-hooks"
+import { waitFor, renderHook } from "@testing-library/react"
 import { renderWithIntl } from "~tests"
 import { useEndDateValidation } from "./useEndDateValidation"
 

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.ts

@@ -1,6 +1,5 @@
 import { act } from "react"
-import { waitFor } from "@testing-library/react"
-import { renderHook } from "@testing-library/react-hooks"
+import { waitFor, renderHook } from "@testing-library/react"
 import { renderWithIntl } from "~tests"
 import { useStartDateValidation } from "./useStartDateValidation"
 

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { FormattedMessage } from "@cultureamp/i18n-react-intl"
 import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
-import { getNodeText } from "~utils/getNodeText"
+import { getNodeText } from "~components/utils/getNodeText"
 import { isValidRange } from "./isValidRange"
 
 export type ValidateEndDateBeforeStartDateArgs = {

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -14,7 +14,7 @@ import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
 import { FilterMultiSelect, getSelectedOptionLabels } from ".."
 import { mockItems } from "./MockData"
-import styles from "./FilterMultiSelect.stories.scss"
+import styles from "./FilterMultiSelect.module.scss"
 
 const IS_CHROMATIC = isChromatic()
 

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -18,7 +18,7 @@ import {
 } from "~components/__future__/Select/subcomponents"
 import { getDisabledKeysFromItems } from "~components/__future__/Select/utils/getDisabledKeysFromItems"
 import { transformSelectItemToCollectionElement } from "~components/__future__/Select/utils/transformSelectItemToCollectionElement"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { SelectItem, SelectOption } from "./types"
 import styles from "./FilterSelect.module.scss"
 

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>