diff --git a/.changeset/shiny-stingrays-shop.md b/.changeset/shiny-stingrays-shop.md
new file mode 100644
index 0000000000000..9237bda43e732
--- /dev/null
+++ b/.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
diff --git a/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch b/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch
deleted file mode 100644
index 31f3a2f88f25c..0000000000000
--- a/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch
+++ /dev/null
@@ -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 {};
diff --git a/package.json b/package.json
index 6701ae07479a7..211a3526df6b1 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json
index 7856c36f2b553..78c222a0f6fa7 100644
--- a/packages/design-system/ui/package.json
+++ b/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",
diff --git a/packages/design-system/ui/src/components/avatar/avatar.tsx b/packages/design-system/ui/src/components/avatar/avatar.tsx
index 3f34c55a528ca..528120455a446 100644
--- a/packages/design-system/ui/src/components/avatar/avatar.tsx
+++ b/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",
diff --git a/packages/design-system/ui/src/components/badge/badge.tsx b/packages/design-system/ui/src/components/badge/badge.tsx
index 78a77afc2726b..1878e291f2f1d 100644
--- a/packages/design-system/ui/src/components/badge/badge.tsx
+++ b/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",
diff --git a/packages/design-system/ui/src/components/button/button.tsx b/packages/design-system/ui/src/components/button/button.tsx
index 8c1cf7b2b58e2..5a0041016a7fb 100644
--- a/packages/design-system/ui/src/components/button/button.tsx
+++ b/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">,
diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.tsx
index 0c7aff0e116ba..5ec855795e5d4 100644
--- a/packages/design-system/ui/src/components/currency-input/currency-input.tsx
+++ b/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",
-      },
-    },
-    defaultVariants: {
-      size: "base",
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3",
+      small: "txt-compact-small h-8 px-2",
     },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 interface CurrencyInputProps
   extends Omit<
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
index 3832576f87913..611e2d658cd70 100644
--- a/packages/design-system/ui/src/components/date-picker/date-picker.tsx
+++ b/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,
diff --git a/packages/design-system/ui/src/components/heading/heading.tsx b/packages/design-system/ui/src/components/heading/heading.tsx
index 6ab4129c3b937..6394d2594ef6a 100644
--- a/packages/design-system/ui/src/components/heading/heading.tsx
+++ b/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",
diff --git a/packages/design-system/ui/src/components/hint/hint.tsx b/packages/design-system/ui/src/components/hint/hint.tsx
index d6598a18a172d..74a5396e2cc9c 100644
--- a/packages/design-system/ui/src/components/hint/hint.tsx
+++ b/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">
diff --git a/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx b/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx
index d0a86878ca191..0904309b7835a 100644
--- a/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx
+++ b/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">,
diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.tsx
index a5ba58e3967a4..d325c7c1eb21d 100644
--- a/packages/design-system/ui/src/components/icon-button/icon-button.tsx
+++ b/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">,
diff --git a/packages/design-system/ui/src/components/input/input.tsx b/packages/design-system/ui/src/components/input/input.tsx
index 74efff00eba97..6dcdbef44cd65 100644
--- a/packages/design-system/ui/src/components/input/input.tsx
+++ b/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,
diff --git a/packages/design-system/ui/src/components/label/label.tsx b/packages/design-system/ui/src/components/label/label.tsx
index e0cc159b82d17..ce8a8028ffe90 100644
--- a/packages/design-system/ui/src/components/label/label.tsx
+++ b/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",
diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx
index 5be9f26e8fe29..bcc97d7966896 100644
--- a/packages/design-system/ui/src/components/select/select.tsx
+++ b/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>,
diff --git a/packages/design-system/ui/src/components/switch/switch.tsx b/packages/design-system/ui/src/components/switch/switch.tsx
index e0849bb4037d6..826b8feba433d 100644
--- a/packages/design-system/ui/src/components/switch/switch.tsx
+++ b/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",
-      },
-    },
-    defaultVariants: {
-      size: "base",
+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",
+  },
+})
 
 interface SwitchProps
   extends Omit<
diff --git a/packages/design-system/ui/src/components/text/text.tsx b/packages/design-system/ui/src/components/text/text.tsx
index 0f0baf0085f40..09c12c1449558 100644
--- a/packages/design-system/ui/src/components/text/text.tsx
+++ b/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: "",
diff --git a/packages/design-system/ui/src/hooks/use-prompt/dialog.tsx b/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx
similarity index 96%
rename from packages/design-system/ui/src/hooks/use-prompt/dialog.tsx
rename to packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx
index 2c862acaac1af..2af41bc5ae1b5 100644
--- a/packages/design-system/ui/src/hooks/use-prompt/dialog.tsx
+++ b/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
diff --git a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx b/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx
index 829c4d873ace7..7c2f5bbf67725 100644
--- a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx
+++ b/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 }
diff --git a/yarn.lock b/yarn.lock
index 7da8f24a49049..a208b454415bf 100644
--- a/yarn.lock
+++ b/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"