fix(ui): Bump cva and minor type fixes (#5818)

**What**
- Bumps `class-variance-authority` to new beta version - `cva@beta`.
- Updates all usages of `cva` to new API.
- Clear up the naming of types in `usePrompt`

**Why**
- A bug in how `class-variance-authority` exported its types mean that we were relying on patching the package to ensure that the correct types made it into the build of our UI package. This was important to ensure intellisense for component variants, such as `<Button size="large" />`. Previously in the UI monorepo, having the patch was enough to ensure that the correct types made it into the build, but that was not the case after we moved the design system to the core repo. The issue with types is fixed in the `@1` version of `cva` which is currently in beta. I have pinpointed the version to the current beta version to ensure stability despite the package currently being in beta.

.changeset/shiny-stingrays-shop.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Bump 'class-variance-authority' to 'cva@beta' and update usage to new API. Also fix the naming of usePrompt types

.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch

@@ -1,71 +0,0 @@
-diff --git a/dist/index.d.ts b/dist/index.d.ts
-index 676e466a43ad8932cbb3131bb2c3dea687d47041..cbffdc5191bd8535468fdeaf68365845d15804ea 100644
---- a/dist/index.d.ts
-+++ b/dist/index.d.ts
-@@ -1,21 +1,55 @@
-+import type * as CLSX from "clsx";
- import clsx from "clsx";
--import type { ClassProp, ClassValue, OmitUndefined, StringToBoolean } from "./types";
--export type VariantProps<Component extends (...args: any) => any> = Omit<OmitUndefined<Parameters<Component>[0]>, "class" | "className">;
-+
-+type ClassPropKey = "class" | "className";
-+type ClassValue = CLSX.ClassValue;
-+type ClassProp =
-+  | {
-+      class: ClassValue;
-+      className?: never;
-+    }
-+  | {
-+      class?: never;
-+      className: ClassValue;
-+    }
-+  | {
-+      class?: never;
-+      className?: never;
-+    };
-+type OmitUndefined<T> = T extends undefined ? never : T;
-+type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
-+
-+export type VariantProps<Component extends (...args: any) => any> = Omit<
-+  OmitUndefined<Parameters<Component>[0]>,
-+  "class" | "className"
-+>;
- export type CxOptions = Parameters<typeof clsx>;
- export type CxReturn = ReturnType<typeof clsx>;
- export declare const cx: typeof clsx;
- type ConfigSchema = Record<string, Record<string, ClassValue>>;
- type ConfigVariants<T extends ConfigSchema> = {
--    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
-+  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
- };
- type ConfigVariantsMulti<T extends ConfigSchema> = {
--    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
-+  [Variant in keyof T]?:
-+    | StringToBoolean<keyof T[Variant]>
-+    | StringToBoolean<keyof T[Variant]>[]
-+    | undefined;
- };
--type Config<T> = T extends ConfigSchema ? {
--    variants?: T;
--    defaultVariants?: ConfigVariants<T>;
--    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
--} : never;
--type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
--export declare const cva: <T>(base?: ClassValue, config?: Config<T> | undefined) => (props?: Props<T> | undefined) => string;
-+type Config<T> = T extends ConfigSchema
-+  ? {
-+      variants?: T;
-+      defaultVariants?: ConfigVariants<T>;
-+      compoundVariants?: (T extends ConfigSchema
-+        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp
-+        : ClassProp)[];
-+    }
-+  : never;
-+type Props<T> = T extends ConfigSchema
-+  ? ConfigVariants<T> & ClassProp
-+  : ClassProp;
-+export declare const cva: <T>(
-+  base?: ClassValue,
-+  config?: Config<T> | undefined
-+) => (props?: Props<T> | undefined) => string;
- export {};

package.json

@@ -92,7 +92,6 @@
   "resolutions": {
     "@redocly/cli/react": "^17.0.1",
     "@redocly/cli/react-dom": "^17.0.1",
-    "pg": "8.10.0",
-    "class-variance-authority@0.6.1": "patch:class-variance-authority@npm:0.6.1#.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch"
+    "pg": "8.10.0"
   }
 }

packages/design-system/ui/package.json

@@ -100,9 +100,9 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-aria/datepicker": "^3.5.0",
     "@react-stately/datepicker": "^3.5.0",
-    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
+    "cva": "1.0.0-beta.1",
     "date-fns": "^2.30.0",
     "prism-react-renderer": "^2.0.6",
     "react-currency-input-field": "^3.6.11",

packages/design-system/ui/src/components/avatar/avatar.tsx

@@ -1,32 +1,31 @@
 "use client"
 
 import * as Primitives from "@radix-ui/react-avatar"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const avatarVariants = cva(
-  "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
-  {
-    variants: {
-      variant: {
-        squared: "rounded-lg",
-        rounded: "rounded-full",
-      },
-      size: {
-        base: "h-8 w-8",
-        large: "h-10 w-10",
-      },
+const avatarVariants = cva({
+  base: "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
+  variants: {
+    variant: {
+      squared: "rounded-lg",
+      rounded: "rounded-full",
     },
-    defaultVariants: {
-      variant: "rounded",
-      size: "base",
+    size: {
+      base: "h-8 w-8",
+      large: "h-10 w-10",
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "rounded",
+    size: "base",
+  },
+})
 
-const innerVariants = cva("aspect-square object-cover object-center", {
+const innerVariants = cva({
+  base: "aspect-square object-cover object-center",
   variants: {
     variant: {
       squared: "rounded-lg",

packages/design-system/ui/src/components/badge/badge.tsx

@@ -1,10 +1,10 @@
 import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const badgeColorVariants = cva("", {
+const badgeColorVariants = cva({
   variants: {
     color: {
       green:
@@ -23,7 +23,8 @@ const badgeColorVariants = cva("", {
   },
 })
 
-const badgeSizeVariants = cva("inline-flex items-center gap-x-0.5 border", {
+const badgeSizeVariants = cva({
+  base: "inline-flex items-center gap-x-0.5 border",
   variants: {
     size: {
       small: "txt-compact-xsmall-plus px-1.5",

packages/design-system/ui/src/components/button/button.tsx

@@ -1,58 +1,56 @@
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 import { Spinner } from "@medusajs/icons"
 
-const buttonVariants = cva(
-  clx(
+const buttonVariants = cva({
+  base: clx(
     "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none",
     "disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden",
     "after:transition-fg after:absolute after:inset-0 after:content-['']"
   ),
-  {
-    variants: {
-      variant: {
-        primary: clx(
-          "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient",
-          "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient",
-          "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient",
-          "focus:!shadow-buttons-inverted-focus"
-        ),
-        secondary: clx(
-          "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient",
-          "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
-          "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
-          "focus:shadow-buttons-neutral-focus"
-        ),
-        transparent: clx(
-          "after:hidden",
-          "text-ui-fg-base bg-ui-button-transparent",
-          "hover:bg-ui-button-transparent-hover",
-          "active:bg-ui-button-transparent-pressed",
-          "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
-          "disabled:!bg-transparent disabled:!shadow-none"
-        ),
-        danger: clx(
-          "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient",
-          "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient",
-          "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient",
-          "focus:shadow-buttons-danger-focus"
-        ),
-      },
-      size: {
-        base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
-        large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
-        xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
-      },
+  variants: {
+    variant: {
+      primary: clx(
+        "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient",
+        "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient",
+        "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient",
+        "focus:!shadow-buttons-inverted-focus"
+      ),
+      secondary: clx(
+        "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient",
+        "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
+        "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
+        "focus:shadow-buttons-neutral-focus"
+      ),
+      transparent: clx(
+        "after:hidden",
+        "text-ui-fg-base bg-ui-button-transparent",
+        "hover:bg-ui-button-transparent-hover",
+        "active:bg-ui-button-transparent-pressed",
+        "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
+        "disabled:!bg-transparent disabled:!shadow-none"
+      ),
+      danger: clx(
+        "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient",
+        "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient",
+        "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient",
+        "focus:shadow-buttons-danger-focus"
+      ),
     },
-    defaultVariants: {
-      size: "base",
-      variant: "primary",
+    size: {
+      base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
+      large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
+      xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
     },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+    variant: "primary",
+  },
+})
 
 interface ButtonProps
   extends React.ComponentPropsWithoutRef<"button">,

packages/design-system/ui/src/components/currency-input/currency-input.tsx

@@ -5,26 +5,24 @@ import Primitive from "react-currency-input-field"
 
 import { Text } from "@/components/text"
 import { clx } from "@/utils/clx"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 
-const currencyInputVariants = cva(
-  clx(
+const currencyInputVariants = cva({
+  base: clx(
     "flex items-center gap-x-1",
     "bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md",
     "focus-within:shadow-borders-interactive-with-active"
   ),
-  {
-    variants: {
-      size: {
-        base: "txt-compact-medium h-10 px-3",
-        small: "txt-compact-small h-8 px-2",
-      },
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3",
+      small: "txt-compact-small h-8 px-2",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 interface CurrencyInputProps
   extends Omit<

packages/design-system/ui/src/components/date-picker/date-picker.tsx

@@ -13,28 +13,26 @@ import { TimeInput } from "@/components/time-input"
 import type { DateRange } from "@/types"
 import { clx } from "@/utils/clx"
 import { isBrowserLocaleClockType24h } from "@/utils/is-browser-locale-hour-cycle-24h"
-import { cva } from "class-variance-authority"
+import { cva } from "cva"
 
-const displayVariants = cva(
-  clx(
+const displayVariants = cva({
+  base: clx(
     "text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none",
     "hover:bg-ui-bg-field-hover",
     "focus:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active",
     "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral",
     "aria-[invalid=true]:!shadow-borders-error"
   ),
-  {
-    variants: {
-      size: {
-        base: "txt-compact-medium h-10 px-3 py-2.5",
-        small: "txt-compact-small h-8 px-2 py-1.5",
-      },
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3 py-2.5",
+      small: "txt-compact-small h-8 px-2 py-1.5",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 const Display = React.forwardRef<
   HTMLButtonElement,

packages/design-system/ui/src/components/heading/heading.tsx

@@ -1,9 +1,10 @@
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const headingVariants = cva("font-sans font-medium", {
+const headingVariants = cva({
+  base: "font-sans font-medium",
   variants: {
     level: {
       h1: "h1-core",

packages/design-system/ui/src/components/hint/hint.tsx

@@ -1,23 +1,21 @@
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { ExclamationCircleSolid } from "@medusajs/icons"
 import { clx } from "../../utils/clx"
 
-const hintVariants = cva(
-  "txt-compact-xsmall inline-flex items-center gap-x-2",
-  {
-    variants: {
-      variant: {
-        info: "text-ui-fg-subtle",
-        error: "text-ui-fg-error",
-      },
+const hintVariants = cva({
+  base: "txt-compact-xsmall inline-flex items-center gap-x-2",
+  variants: {
+    variant: {
+      info: "text-ui-fg-subtle",
+      error: "text-ui-fg-error",
     },
-    defaultVariants: {
-      variant: "info",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+})
 
 type HintProps = VariantProps<typeof hintVariants> &
   React.ComponentPropsWithoutRef<"span">

packages/design-system/ui/src/components/icon-badge/icon-badge.tsx

@@ -1,21 +1,19 @@
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { badgeColorVariants } from "@/components/badge"
 import { clx } from "@/utils/clx"
 
-const iconBadgeVariants = cva(
-  "flex items-center justify-center overflow-hidden rounded-md border",
-  {
-    variants: {
-      size: {
-        base: "h-6 w-6",
-        large: "h-7 w-7",
-      },
+const iconBadgeVariants = cva({
+  base: "flex items-center justify-center overflow-hidden rounded-md border",
+  variants: {
+    size: {
+      base: "h-6 w-6",
+      large: "h-7 w-7",
     },
-  }
-)
+  },
+})
 
 interface IconBadgeProps
   extends Omit<React.ComponentPropsWithoutRef<"span">, "color">,

packages/design-system/ui/src/components/icon-button/icon-button.tsx

@@ -1,45 +1,43 @@
 import { Spinner } from "@medusajs/icons"
 import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const iconButtonVariants = cva(
-  clx(
+const iconButtonVariants = cva({
+  base: clx(
     "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none",
     "disabled:bg-ui-bg-disabled disabled:shadow-buttons-neutral disabled:text-ui-fg-disabled disabled:after:hidden"
   ),
-  {
-    variants: {
-      variant: {
-        primary: clx(
-          "shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral after:button-neutral-gradient",
-          "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
-          "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
-          "focus:shadow-buttons-neutral-focus",
-          "after:absolute after:inset-0 after:content-['']"
-        ),
-        transparent: clx(
-          "text-ui-fg-subtle bg-ui-button-transparent",
-          "hover:bg-ui-button-transparent-hover",
-          "active:bg-ui-button-transparent-pressed",
-          "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
-          "disabled:!bg-transparent disabled:!shadow-none"
-        ),
-      },
-      size: {
-        base: "h-8 w-8 p-1.5",
-        large: "h-10 w-10 p-2.5",
-        xlarge: "h-12 w-12 p-3.5",
-      },
+  variants: {
+    variant: {
+      primary: clx(
+        "shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral after:button-neutral-gradient",
+        "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
+        "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
+        "focus:shadow-buttons-neutral-focus",
+        "after:absolute after:inset-0 after:content-['']"
+      ),
+      transparent: clx(
+        "text-ui-fg-subtle bg-ui-button-transparent",
+        "hover:bg-ui-button-transparent-hover",
+        "active:bg-ui-button-transparent-pressed",
+        "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
+        "disabled:!bg-transparent disabled:!shadow-none"
+      ),
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "base",
+    size: {
+      base: "h-8 w-8 p-1.5",
+      large: "h-10 w-10 p-2.5",
+      xlarge: "h-12 w-12 p-3.5",
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "base",
+  },
+})
 
 interface IconButtonProps
   extends React.ComponentPropsWithoutRef<"button">,

packages/design-system/ui/src/components/input/input.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Eye, EyeSlash, MagnifyingGlassMini } from "@medusajs/icons"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
@@ -13,23 +13,21 @@ const inputBaseStyles = clx(
   "aria-[invalid=true]:!shadow-borders-error  invalid:!shadow-borders-error"
 )
 
-const inputVariants = cva(
-  clx(
+const inputVariants = cva({
+  base: clx(
     inputBaseStyles,
     "[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
   ),
-  {
-    variants: {
-      size: {
-        base: "txt-compact-medium h-10 px-3 py-[9px]",
-        small: "txt-compact-small h-8 px-2 py-[5px]",
-      },
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3 py-[9px]",
+      small: "txt-compact-small h-8 px-2 py-[5px]",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 const Input = React.forwardRef<
   HTMLInputElement,

packages/design-system/ui/src/components/label/label.tsx

@@ -1,12 +1,13 @@
 "use client"
 
 import * as Primitives from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const labelVariants = cva("font-sans", {
+const labelVariants = cva({
+  base: "font-sans",
   variants: {
     size: {
       xsmall: "txt-compact-xsmall",

packages/design-system/ui/src/components/select/select.tsx

@@ -2,7 +2,7 @@
 
 import { ChevronUpDown, EllipseMiniSolid } from "@medusajs/icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { cva } from "class-variance-authority"
+import { cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
@@ -40,8 +40,8 @@ const Group = SelectPrimitive.Group
 
 const Value = SelectPrimitive.Value
 
-const triggerVariants = cva(
-  clx(
+const triggerVariants = cva({
+  base: clx(
     "bg-ui-bg-field txt-compact-medium shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
     "data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
     "hover:bg-ui-bg-field-hover",
@@ -51,15 +51,13 @@ const triggerVariants = cva(
     "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
     "group/trigger"
   ),
-  {
-    variants: {
-      size: {
-        base: "h-10 px-3 py-[9px]",
-        small: "h-8 px-2 py-[5px]",
-      },
+  variants: {
+    size: {
+      base: "h-10 px-3 py-[9px]",
+      small: "h-8 px-2 py-[5px]",
     },
-  }
-)
+  },
+})
 
 const Trigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,

packages/design-system/ui/src/components/switch/switch.tsx

@@ -1,41 +1,37 @@
 "use client"
 
 import * as Primitives from "@radix-ui/react-switch"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const switchVariants = cva(
-  "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
-  {
-    variants: {
-      size: {
-        small: "h-[16px] w-[28px]",
-        base: "h-[18px] w-[32px]",
-      },
+const switchVariants = cva({
+  base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
+  variants: {
+    size: {
+      small: "h-[16px] w-[28px]",
+      base: "h-[18px] w-[32px]",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
-const thumbVariants = cva(
-  "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
-  {
-    variants: {
-      size: {
-        small:
-          "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
-        base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
-      },
+const thumbVariants = cva({
+  base: "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
+  variants: {
+    size: {
+      small:
+        "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
+      base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 interface SwitchProps
   extends Omit<

packages/design-system/ui/src/components/text/text.tsx

@@ -1,10 +1,10 @@
 import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const textVariants = cva("", {
+const textVariants = cva({
   variants: {
     size: {
       xsmall: "",

packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx

@@ -6,7 +6,7 @@ import { Input } from "@/components/input"
 import { Label } from "@/components/label"
 import { Prompt } from "@/components/prompt"
 
-export type DialogProps = {
+export type RenderPromptProps = {
   open: boolean
   title: string
   description: string
@@ -17,7 +17,7 @@ export type DialogProps = {
   onCancel: () => void
 }
 
-const Dialog = ({
+export const RenderPrompt = ({
   open,
   title,
   description,
@@ -26,7 +26,7 @@ const Dialog = ({
   confirmText = "Confirm",
   onConfirm,
   onCancel,
-}: DialogProps) => {
+}: RenderPromptProps) => {
   const [userInput, setUserInput] = React.useState("")
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -108,5 +108,3 @@ const Dialog = ({
     </Prompt>
   )
 }
-
-export default Dialog

packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx

@@ -2,14 +2,12 @@
 
 import * as React from "react"
 import { createRoot } from "react-dom/client"
-import { DialogProps } from "./dialog"
+import { RenderPrompt, RenderPromptProps } from "./render-prompt"
 
-import Dialog from "./dialog"
-
-type PromptProps = Omit<DialogProps, "onConfirm" | "onCancel" | "open">
+type UsePromptProps = Omit<RenderPromptProps, "onConfirm" | "onCancel" | "open">
 
 const usePrompt = () => {
-  const dialog = async (props: PromptProps): Promise<boolean> => {
+  const prompt = async (props: UsePromptProps): Promise<boolean> => {
     return new Promise((resolve) => {
       let open = true
 
@@ -29,7 +27,7 @@ const usePrompt = () => {
 
       const render = () => {
         mountRoot.render(
-          <Dialog
+          <RenderPrompt
             open={open}
             onConfirm={onConfirm}
             onCancel={onCancel}
@@ -42,7 +40,7 @@ const usePrompt = () => {
     })
   }
 
-  return dialog
+  return prompt
 }
 
 export { usePrompt }

yarn.lock

@@ -8020,9 +8020,9 @@ __metadata:
     "@vitest/coverage-v8": ^0.32.2
     autoprefixer: ^10.4.14
     chromatic: ^6.20.0
-    class-variance-authority: ^0.6.1
     clsx: ^1.2.1
     copy-to-clipboard: ^3.3.3
+    cva: 1.0.0-beta.1
     date-fns: ^2.30.0
     eslint: ^7.32.0
     eslint-plugin-storybook: ^0.6.12
@@ -21444,15 +21444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"class-variance-authority@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "class-variance-authority@npm:0.6.1"
-  dependencies:
-    clsx: 1.2.1
-  checksum: 0685b1a92d97fbb26b1031a9dcb9d419c4bbb163aa20a6025a11f3a92ebd6209da277c63f789b294d890a0d500558de285fd842068c824d40b5beda97e01aa1a
-  languageName: node
-  linkType: hard
-
 "classnames@npm:^2.2.6, classnames@npm:^2.3.1":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
@@ -21734,7 +21725,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:1.2.1, clsx@npm:^1.1.0, clsx@npm:^1.1.1, clsx@npm:^1.2.1":
+"clsx@npm:2.0.0":
+  version: 2.0.0
+  resolution: "clsx@npm:2.0.0"
+  checksum: c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd
+  languageName: node
+  linkType: hard
+
+"clsx@npm:^1.1.0, clsx@npm:^1.1.1, clsx@npm:^1.2.1":
   version: 1.2.1
   resolution: "clsx@npm:1.2.1"
   checksum: 34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27
@@ -23175,6 +23173,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cva@npm:1.0.0-beta.1":
+  version: 1.0.0-beta.1
+  resolution: "cva@npm:1.0.0-beta.1"
+  dependencies:
+    clsx: 2.0.0
+  peerDependencies:
+    typescript: ">= 4.5.5 < 6"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 0ac27613b156d0ff6b1450c3257c1b98356865366165cb973748a102ed576dc07824cd098b23da6e24155d3b732d6222b4fa83cff85fbd2df3924a5b425bfbde
+  languageName: node
+  linkType: hard
+
 "cyclist@npm:^1.0.1":
   version: 1.0.2
   resolution: "cyclist@npm:1.0.2"