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

package/dist/types/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { HeadingProps } from "../../../Heading";
-import { SceneProps, SpotProps } from "../../../Illustration";
-import { ButtonProps } from "../../../__actions__/v2";
-import { TooltipProps } from "../../../__overlays__/Tooltip/v1";
+import { HeadingProps } from "../Heading";
+import { SceneProps, SpotProps } from "../Illustration";
+import { ButtonProps } from "../__actions__/v2";
+import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;

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

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

package/dist/types/Workflow/Workflow.d.ts

@@ -1,18 +1,15 @@
 import { HTMLAttributes } from "react";
 import { OverrideClassName } from "../types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
-export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
+export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">;
 export declare const Workflow: {
-    ({ stepName, steps, isComplete, workflowName, status, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps): JSX.Element;
+    ({ steps, currentStepId, isComplete, workflowName, statusTag, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps): JSX.Element;
     Header: {
-        ({ workflowName, stepName, status, headerActions, ...restProps }: HeaderProps): JSX.Element;
+        ({ workflowName, stepName, statusTag, headerActions, ...restProps }: HeaderProps): JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ steps, stepName, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
+        ({ steps, currentStepId, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
         displayName: string;
     };
     Main: {
@@ -20,7 +17,7 @@ export declare const Workflow: {
         displayName: string;
     };
     ProgressStepper: {
-        ({ stepName, steps, isComplete, ...restprops }: import("./subcomponents").ProgressStepperProps): JSX.Element;
+        ({ currentStepId, steps, isComplete, ...restprops }: import("./subcomponents").ProgressStepperProps): JSX.Element;
         displayName: string;
     };
     Wrapper: {

package/dist/types/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,13 +1,12 @@
-import { HTMLAttributes } from "react";
 import { OverrideClassName } from "../../../types/OverrideClassName";
-import { ProgressStepperProps } from "./components";
+import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */
     previousAction?: JSX.Element;
     /** An action to progress to the next step or submit the form */
     nextAction?: JSX.Element;
-} & ProgressStepperProps & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>;
+} & ProgressStepperProps & OverrideClassName<Omit<FooterRootProps, "children">>;
 export declare const Footer: {
-    ({ steps, stepName, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
+    ({ steps, currentStepId, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.d.ts

@@ -1,9 +1,16 @@
+export type Step = {
+    id: string;
+    label: string;
+};
+export type Steps = [Step, ...Step[]];
 export type ProgressStepperProps = {
-    stepName: string;
-    steps: [string, ...string[]];
+    /** The id reference to within a Step object */
+    currentStepId: Step["id"];
+    /** A non-empty array of Steps */
+    steps: Steps;
     isComplete?: boolean;
 };
 export declare const ProgressStepper: {
-    ({ stepName, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
+    ({ currentStepId, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Workflow/subcomponents/Header/Header.d.ts

@@ -1,6 +1,6 @@
-import { WorkflowTitlesProps, WorkflowActionsProps } from "./components";
+import { WorkflowActionsProps, WorkflowTitlesProps } from "./components";
 export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
 export declare const Header: {
-    ({ workflowName, stepName, status, headerActions, ...restProps }: HeaderProps): JSX.Element;
+    ({ workflowName, stepName, statusTag, headerActions, ...restProps }: HeaderProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Workflow/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,17 +1,11 @@
-import { HTMLAttributes } from "react";
-import { DefaultTagProps } from "../../../../../Tag";
+import { HTMLAttributes, ReactNode } from "react";
 import { OverrideClassName } from "../../../../../types/OverrideClassName";
-export type WorkflowStatus = {
-    /** @default: "statusDraft" */
-    variant?: DefaultTagProps["variant"];
-    content?: string;
-};
 export type WorkflowTitlesProps = {
     workflowName: string;
     stepName: string;
-    status?: WorkflowStatus;
+    statusTag?: ReactNode;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 export declare const Titles: {
-    ({ workflowName, stepName, status, ...restProps }: WorkflowTitlesProps): JSX.Element;
+    ({ workflowName, stepName, statusTag, ...restProps }: WorkflowTitlesProps): JSX.Element;
     displayName: string;
 };

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

@@ -1,3 +1,2 @@
 export * from "./Select";
 export * from "./Tag";
-export * from "./Workflow";

package/dist/types/index.d.ts

@@ -20,6 +20,7 @@ export * from "./ErrorPage";
 export * from "./FieldGroup";
 export * from "./FieldMessage";
 export * from "./Filter";
+export * from "./GuidanceBlock";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./Illustration";
@@ -60,4 +61,3 @@ export * from "./Workflow";
 export * from "./__overlays__/Tooltip/v1";
 export * from "./__actions__/Menu/v1";
 export * from "./__actions__/Button/v1";
-export * from "./__containers__/GuidanceBlock/v1";

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": "0.0.0-canary-toast-notification-fix-20240822034045",
+  "version": "0.0.0-canary-workflow-export-20240910075656",
   "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,43 +81,52 @@
     "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)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^9.8.0",
-    "@cultureamp/i18n-react-intl": "^2.6.0",
+    "@cultureamp/frontend-apis": "^9.8.2",
+    "@cultureamp/i18n-react-intl": "^2.6.1",
+    "@tanstack/react-query": "^5.51.23",
+    "@testing-library/dom": "^10.4.0",
+    "@types/jest-axe": "^3.5.9",
     "@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",
+    "jest-axe": "^9.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",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
-    "@kaizen/package-bundler": "1.1.4",
-    "@kaizen/design-tokens": "10.5.3"
-  },
-  "devDependenciesComments": {
-    "postcss": "Installed in root",
-    "postcss-cli": "Installed in root",
-    "postcss-preset-env": "Installed in root"
+    "@kaizen/design-tokens": "10.6.1",
+    "@kaizen/package-bundler": "1.1.5"
   },
   "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"
   },
@@ -129,15 +139,15 @@
     }
   },
   "scripts": {
-    "clean": "rm -rf dist",
     "lint:ts": "tsc --noEmit",
     "build": "pnpm package-bundler build-shared-ui && pnpm build:styles",
     "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
     "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
     "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
-    "test": "FORCE_COLOR=1 jest",
-    "test:ci": "pnpm test -- --ci",
+    "test": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
     "update-icons": "./src/Icon/bin/update-icons.sh",
-    "i18n:extract": "pnpm i18n-extract"
+    "i18n:extract": "pnpm i18n-extract",
+    "clean": "rimraf 'dist' 'node_modules' '.turbo'",
+    "clean:dist": "rimraf 'dist'"
   }
 }

package/src/Avatar/Avatar.spec.tsx

@@ -6,7 +6,7 @@ describe("<Avatar />", () => {
   // there is an issue with react-textfit that is only flagged in a test suite
   // this solution silences that specific case https://github.com/malte-wessel/react-textfit/issues/35
   beforeEach(() => {
-    jest.spyOn(console, "warn").mockImplementation(() => "")
+    vi.spyOn(console, "warn").mockImplementation(() => "")
   })
 
   it("renders user initials if the image link is broken", () => {

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/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -2,13 +2,13 @@ import React from "react"
 import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
+import { vi } from "vitest"
 import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
 import { setFocusInCalendar } from "./setFocusInCalendar"
-
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
-    onDayClick={jest.fn()}
+    onDayClick={vi.fn()}
     locale={enUS}
     onMount={calendarElement =>
       setFocusInCalendar(calendarElement, props.selected)

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.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { CheckboxProps } from "./Checkbox"
 import { Checkbox } from "."
-
 const user = userEvent.setup()
 
 const defaultProps = {
@@ -11,7 +11,7 @@ const defaultProps = {
   checkedStatus: "off",
   disabled: false,
   name: "someCheckboxName",
-  onCheck: jest.fn(),
+  onCheck: vi.fn(),
 } satisfies CheckboxProps
 
 describe("<Checkbox />", () => {

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.spec.tsx

@@ -1,23 +1,11 @@
 import React from "react"
 import { queryByTestId, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Collapsible } from "./Collapsible"
-
 const user = userEvent.setup()
 
 describe("<Collapsible />", () => {
-  it("includes the 'sticky' class on buttons when the 'sticky' prop is specified", () => {
-    const { getByTestId } = render(
-      <Collapsible id="1" title="First panel" sticky={{ top: "0px" }}>
-        First panel content
-      </Collapsible>
-    )
-
-    const collapsibleContainer = getByTestId("collapsible-header-1")
-
-    expect(collapsibleContainer.classList.contains("sticky")).toBeTruthy()
-  })
-
   it("toggles the height of the section on click of the button", async () => {
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel">
@@ -74,7 +62,7 @@ describe("<Collapsible />", () => {
   })
 
   it("runs the onToggle callback", async () => {
-    const onToggle = jest.fn()
+    const onToggle = vi.fn()
 
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel" onToggle={onToggle}>

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/Collapsible/_docs/Collapsible.mdx

@@ -30,8 +30,6 @@ Collapsibles are used to collapse and expand content inline on a page. This lets
 
 <DocsStory of={CollapsibleStories.CustomHeader} />
 
-<DocsStory of={CollapsibleStories.Sticky} sourceState="shown" />
-
 ### Controlled
 
 Control the open state using a `useState` (or similar) by setting the `controlled` prop to `true`