@kaizen/components 1.59.0 → 1.60.1

package/dist/types/LikertScaleLegacy/index.d.ts

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

package/dist/types/Popover/Popover.d.ts

@@ -3,6 +3,9 @@ import { OverrideClassName } from "../types/OverrideClassName";
 import { Placement, PopoverSize, PopoverVariant } from "./types";
 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;
@@ -11,8 +14,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/dist/types/utils/hostedAssets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the full URL of the asset at `path` managed by the
+ * `kaizen-design-system-assets` service.
+ *
+ * @example
+ * assetUrl("some/blob.png") -> "https://<origin>/some/blob.png"
+ *
+ * @see https://github.com/cultureamp/kaizen-design-system-assets/
+ */
+export declare const assetUrl: (path: string) => string;

package/dist/types/utils/index.d.ts

@@ -1 +1,2 @@
 export * from "./useMediaQueries";
+export * from "./hostedAssets";

package/dist/types/utils/useResizeObserver.d.ts

@@ -17,5 +17,6 @@ export interface DOMRectReadOnly {
  * @return {Array} An array containing a ref for binding to the observed DOM
  * element, and the current value of the callback-resolved ResizeObserverEntry
  * @callback resolveEntryCallback
+ * @deprecated use native `ResizeObserver` DOM API instead
  */
 export declare const useResizeObserver: <T, E extends Element = HTMLElement>(resolveEntry?: (entry: ResizeObserverEntry) => any) => [Ref<E>, T | undefined];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.59.0",
+  "version": "1.60.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -33,6 +33,7 @@
   "bin": {
     "kaizen-codemod": "./bin/codemod.sh"
   },
+  "type": "module",
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "<=1.5.0",
@@ -80,10 +81,9 @@
     "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.2",
     "tsx": "^4.17.0",
-    "uuid": "^10.0.0",
-    "@kaizen/hosted-assets": "2.0.3"
+    "use-debounce": "^10.0.2",
+    "uuid": "^10.0.0"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
@@ -91,13 +91,25 @@
   "devDependencies": {
     "@cultureamp/frontend-apis": "^9.8.0",
     "@cultureamp/i18n-react-intl": "^2.6.0",
+    "@tanstack/react-query": "^5.51.23",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "concat-cli": "^4.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "lodash.isempty": "^4.4.0",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-preset-env": "^10.0.2",
+    "postcss-scss": "^4.0.9",
     "query-string": "^9.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-highlight": "^0.15.0",
     "react-intl": "^6.6.8",
     "rollup": "^4.20.0",
     "sass": "^1.77.8",
@@ -106,17 +118,13 @@
     "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
-    "@kaizen/design-tokens": "10.5.3",
+    "@kaizen/design-tokens": "10.6.0",
     "@kaizen/package-bundler": "1.1.4"
   },
-  "devDependenciesComments": {
-    "postcss": "Installed in root",
-    "postcss-cli": "Installed in root",
-    "postcss-preset-env": "Installed in root"
-  },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",
     "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-intl": "^6.6.8",
     "typescript": "^5.5.4"
   },

package/src/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Textfit } from "react-textfit"
 import { UserIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Avatar.module.scss"
 
 export type AvatarSizes = "small" | "medium" | "large" | "xlarge" | "xxlarge"

package/src/AvatarGroup/AvatarGroup.tsx

@@ -5,7 +5,7 @@ import {
   CompanyAvatarProps,
   GenericAvatarProps,
 } from "~components/Avatar"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./AvatarGroup.module.scss"
 
 export type AvatarGroupAvatarProps =

package/src/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, useLayoutEffect, useState } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Badge.module.scss"
 
 type BadgeCommonProps = {

package/src/Brand/Brand.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, SVGAttributes } from "react"
-import { assetUrl } from "@kaizen/hosted-assets"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import { assetUrl } from "~components/utils/hostedAssets"
 import { BrandCollectiveIntelligence } from "./BrandCollectiveIntelligence"
 import styles from "./Brand.module.scss"
 

package/src/BrandMoment/BrandMoment.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode, ReactElement, HTMLAttributes } from "react"
 import classnames from "classnames"
-import { assetUrl } from "@kaizen/hosted-assets"
 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 { OverrideClassName } from "~components/types/OverrideClassName"
+import { assetUrl } from "~components/utils/hostedAssets"
+import { useMediaQueries } from "~components/utils/useMediaQueries"
 import styles from "./BrandMoment.module.scss"
 
 type DeprecatedMoodProps = {

package/src/BrandMoment/_docs/ExampleHeaders.tsx

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

package/src/ButtonGroup/ButtonGroup.tsx

@@ -5,7 +5,7 @@ import {
   FilterButtonBaseProps,
 } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ButtonGroup.module.scss"
 
 const isFilterButton = (

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -8,7 +8,7 @@ import {
   autoPlacement,
 } from "@floating-ui/react-dom"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./CalendarPopover.module.scss"
 
 export type CalendarPopoverProps = {

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerRangeProps } from "react-day-picker"
 import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate } from "../utils"
 import styles from "./CalendarRange.module.scss"

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerSingleProps } from "react-day-picker"
 import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
 import styles from "./CalendarSingle.module.scss"

package/src/Card/{Card.module.scss → Card.module.css}

@@ -1,7 +1,3 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
 .wrapper {
   color: var(--color-purple-800);
   border: var(--border-width-1) solid var(--card-border-color);
@@ -18,7 +14,6 @@
   --card-box-shadow: var(--shadow-large-box-shadow);
 }
 
-// Color styles ---------------------------
 .blue {
   --card-background-color: var(--color-blue-100);
   --card-border-color: var(--color-blue-400);
@@ -59,7 +54,6 @@
   --card-border-color: var(--color-yellow-700);
 }
 
-// Deprecated Variant styles ----------------
 .default {
   border-color: var(--color-gray-500);
   background-color: var(--color-white);
@@ -67,32 +61,30 @@
 
 .informative {
   border-color: var(--color-blue-400);
-  background-color: $color-blue-100;
+  background-color: var(--color-blue-100);
 }
 
 .positive {
   border-color: var(--color-green-500);
-  background-color: $color-green-100;
+  background-color: var(--color-green-100);
 }
 
 .cautionary {
   border-color: var(--color-yellow-700);
-  background-color: $color-yellow-100;
+  background-color: var(--color-yellow-100);
 }
 
 .destructive {
   border-color: var(--color-red-500);
-  background-color: $color-red-100;
+  background-color: var(--color-red-100);
 }
 
 .assertive {
   border-color: var(--color-orange-600);
-  background-color: $color-orange-100;
+  background-color: var(--color-orange-100);
 }
 
 .highlight {
   border-color: var(--color-purple-400);
-  background-color: $color-purple-100;
+  background-color: var(--color-purple-100);
 }
-
-// --------------------------------------------

package/src/Card/Card.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./Card.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Card.module.css"
 
 export type CardVariants =
   | "default"

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { 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 = "on" | "off" | "mixed"

package/src/Checkbox/CheckboxGroup/CheckboxGroup.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 "./CheckboxGroup.module.scss"
 
 export type CheckboxGroupProps = {

package/src/ClearButton/ClearButton.tsx

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
 import { ClearIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ClearButton.module.scss"
 
 export type ClearButtonProps = {

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -4,7 +4,7 @@ import AnimateHeight from "react-animate-height"
 import { Heading } from "~components/Heading"
 import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"
 

package/src/Collapsible/CollapsibleGroup/CollapsibleGroup.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { CollapsibleProps } from "~components/Collapsible/Collapsible"
 import { Sticky } from "~components/Collapsible/types"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./CollapsibleGroup.module.scss"
 
 export type CollapsibleGroupProps = {

package/src/Content/Content.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 "./Content.module.scss"
 
 export type ContentProps = {

package/src/DateInput/DateInput/DateInput.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import classnames from "classnames"
 import { Input, InputProps } from "~components/Input"
 import { Label } from "~components/Label"
-import { isRefObject } from "~utils/isRefObject"
+import { isRefObject } from "~components/utils/isRefObject"
 import styles from "./DateInput.module.scss"
 
 type OmittedInputProps = "reversed" | "type" | "inputRef"

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import classnames from "classnames"
 import { DateStartIcon } from "~components/Icon"
-import { isRefObject } from "~utils/isRefObject"
+import { isRefObject } from "~components/utils/isRefObject"
 import { DateInput, DateInputProps } from "../DateInput"
 import styles from "./DateInputWithIconButton.module.scss"
 

package/src/Divider/Divider.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 "./Divider.module.scss"
 
 export type DividerProps = {

package/src/EmptyState/EmptyState.tsx

@@ -9,7 +9,7 @@ import {
   EmptyStatesPositive,
 } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./EmptyState.module.scss"
 
 const ILLUSTRATIONS: Record<

package/src/ErrorPage/ErrorPage.tsx

@@ -5,7 +5,7 @@ import { BrandMoment } from "~components/BrandMoment"
 import { ArrowRightIcon, EmailIcon } from "~components/Icon"
 import { BrandMomentError } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ErrorStatuses, useErrorMessages } from "./hooks"
 import styles from "./ErrorPage.module.scss"
 

package/src/FieldGroup/FieldGroup.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 "./FieldGroup.module.scss"
 
 export type FieldGroupProps = {

package/src/FieldMessage/FieldMessage.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldMessage.module.scss"
 
 export type FieldMessageStatus = "default" | "success" | "error" | "caution"

package/src/Filter/Filter/Filter.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react"
 import { FocusOn } from "react-focus-on"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { FilterPopover } from "./subcomponents/FilterPopover"
 import { FilterTriggerRef } from "./types"
 

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.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 "./FilterContents.module.scss"
 
 export type FilterContentsProps = {

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, useState } from "react"
 import { Options } from "@popperjs/core"
 import classnames from "classnames"
 import { usePopper } from "react-popper"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FilterPopover.module.scss"
 
 export type FilterPopoverProps = {

package/src/Filter/FilterBar/FilterBar.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 {
   FilterBarProvider,
   FilterBarProviderProps,

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react"
 import classnames from "classnames"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { isRefObject } from "~utils/isRefObject"
+import { isRefObject } from "~components/utils/isRefObject"
 import { FilterTriggerRef } from "../../Filter/types"
 import {
   FilterButtonBase,

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"