@kaizen/components 1.58.2 → 1.60.0

package/dist/types/Avatar/Avatar.d.ts

@@ -25,6 +25,11 @@ type BaseAvatarProps = {
      * Renders Company Avatar variant - If true `fullName` and `avatarSrc` will be strictly typed.
      */
     isCompany?: boolean;
+    /**
+     * Control of the alt property on the img (or title when initials are rendered)
+     * Defaults to the fullName if provided, otherwise an empty string
+     */
+    alt?: string;
 } & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
 export type GenericAvatarProps = BaseAvatarProps & {
     isCompany?: false;
@@ -46,5 +51,5 @@ export type AvatarProps = GenericAvatarProps | CompanyAvatarProps;
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}
  */
-export declare const Avatar: ({ fullName, size, avatarSrc, disableInitials, isCompany, isCurrentUser, classNameOverride, ...restProps }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ fullName, size, avatarSrc, disableInitials, isCompany, isCurrentUser, alt, classNameOverride, ...restProps }: AvatarProps) => JSX.Element;
 export {};

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.58.2",
+  "version": "1.60.0",
   "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.spec.tsx

@@ -23,4 +23,67 @@ describe("<Avatar />", () => {
       expect(screen.getByText("JWAVLN")).toBeInTheDocument()
     })
   })
+
+  describe("alt text", () => {
+    describe("providing alt text, overriding fullName", () => {
+      it("uses alt prop over full name when using initials", () => {
+        render(<Avatar fullName="Jane Doe" alt="alt override" />)
+        expect(screen.getByTitle("alt override")).toBeInTheDocument()
+      })
+
+      it("uses alt prop over full name when using fallback img", () => {
+        render(
+          <Avatar fullName="Jane Doe" alt="alt override" disableInitials />
+        )
+        expect(screen.getByRole("img")).toHaveAccessibleName("alt override")
+      })
+
+      it("uses alt prop over full name when supplying an img", () => {
+        render(
+          <Avatar
+            fullName="Jane Doe"
+            alt="alt override"
+            avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
+          />
+        )
+        expect(screen.getByRole("img")).toHaveAccessibleName("alt override")
+      })
+    })
+
+    describe("providing fullName, no alt prop", () => {
+      it("uses the fullName when using initials", () => {
+        render(<Avatar fullName="Jane Doe" />)
+        expect(screen.getByTitle("Jane Doe")).toBeInTheDocument()
+      })
+
+      it("uses the fullName when using fallback img", () => {
+        render(<Avatar fullName="Jane Doe" disableInitials />)
+        expect(screen.getByRole("img")).toHaveAccessibleName("Jane Doe")
+      })
+
+      it("uses alt prop over full name when supplying an img", () => {
+        render(
+          <Avatar
+            fullName="Jane Doe"
+            avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
+          />
+        )
+        expect(screen.getByRole("img")).toHaveAccessibleName("Jane Doe")
+      })
+    })
+
+    describe("not providing fullName or alt text", () => {
+      it("makes the img presentational on the fallback img", () => {
+        render(<Avatar />)
+        expect(screen.queryByRole("img")).not.toBeInTheDocument()
+      })
+
+      it("has blank alt text when img provided", () => {
+        render(
+          <Avatar avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png" />
+        )
+        expect(screen.queryByRole("img")).not.toBeInTheDocument()
+      })
+    })
+  })
 })

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"
@@ -31,6 +31,11 @@ type BaseAvatarProps = {
    * Renders Company Avatar variant - If true `fullName` and `avatarSrc` will be strictly typed.
    */
   isCompany?: boolean
+  /**
+   * Control of the alt property on the img (or title when initials are rendered)
+   * Defaults to the fullName if provided, otherwise an empty string
+   */
+  alt?: string
 } & OverrideClassName<HTMLAttributes<HTMLSpanElement>>
 
 export type GenericAvatarProps = BaseAvatarProps & {
@@ -71,9 +76,9 @@ const getMaxFontSizePixels: (size: AvatarSizes) => number = size => {
   return 22
 }
 
-const fallbackIcon = (fullName: string): JSX.Element => {
-  if (fullName) {
-    return <UserIcon inheritSize role="img" aria-label={fullName} />
+const fallbackIcon = (alt: string): JSX.Element => {
+  if (alt) {
+    return <UserIcon inheritSize role="img" aria-label={alt} />
   }
 
   return <UserIcon inheritSize role="presentation" />
@@ -81,6 +86,7 @@ const fallbackIcon = (fullName: string): JSX.Element => {
 
 const renderInitials = (
   fullName = "",
+  alt: string,
   size: AvatarSizes,
   disableInitials = false
 ): JSX.Element => {
@@ -89,11 +95,11 @@ const renderInitials = (
   const renderFallback = disableInitials || initials === ""
 
   return renderFallback ? (
-    <span className={styles.fallbackIcon}>{fallbackIcon(fullName)}</span>
+    <span className={styles.fallbackIcon}>{fallbackIcon(alt)}</span>
   ) : (
     <abbr
       className={classnames(styles.initials, isLongName && styles.longName)}
-      title={fullName || ""}
+      title={alt}
     >
       {isLongName ? (
         // Only called if 3 or more initials, fits text width for long names
@@ -118,6 +124,7 @@ export const Avatar = ({
   disableInitials = false,
   isCompany = false,
   isCurrentUser = true,
+  alt = fullName || "",
   classNameOverride,
   ...restProps
 }: AvatarProps): JSX.Element => {
@@ -167,10 +174,11 @@ export const Avatar = ({
           src={avatarSrc}
           onError={onImageFailure}
           onLoad={onImageSuccess}
-          alt={fullName || ""}
+          alt={alt}
         />
       )}
-      {renderInitialAvatar && renderInitials(fullName, size, disableInitials)}
+      {renderInitialAvatar &&
+        renderInitials(fullName, alt, size, disableInitials)}
     </span>
   )
 }

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,