From 591ba2388d9768f70ca2faf48d353e5a65e4e123 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 7 Dec 2023 21:13:44 +0100
Subject: [PATCH] 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            |  5 ++
 ...iance-authority-npm-0.6.1-22a468e86e.patch | 71 ----------------
 package.json                                  |  3 +-
 packages/design-system/ui/package.json        |  2 +-
 .../ui/src/components/avatar/avatar.tsx       | 37 ++++----
 .../ui/src/components/badge/badge.tsx         |  7 +-
 .../ui/src/components/button/button.tsx       | 84 +++++++++----------
 .../currency-input/currency-input.tsx         | 26 +++---
 .../components/date-picker/date-picker.tsx    | 26 +++---
 .../ui/src/components/heading/heading.tsx     |  5 +-
 .../ui/src/components/hint/hint.tsx           | 26 +++---
 .../src/components/icon-badge/icon-badge.tsx  | 20 ++---
 .../components/icon-button/icon-button.tsx    | 60 +++++++------
 .../ui/src/components/input/input.tsx         | 26 +++---
 .../ui/src/components/label/label.tsx         |  5 +-
 .../ui/src/components/select/select.tsx       | 20 ++---
 .../ui/src/components/switch/switch.tsx       | 52 ++++++------
 .../ui/src/components/text/text.tsx           |  4 +-
 .../{dialog.tsx => render-prompt.tsx}         |  8 +-
 .../ui/src/hooks/use-prompt/use-prompt.tsx    | 12 ++-
 yarn.lock                                     | 34 +++++---
 21 files changed, 228 insertions(+), 305 deletions(-)
 create mode 100644 .changeset/shiny-stingrays-shop.md
 delete mode 100644 .yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch
 rename packages/design-system/ui/src/hooks/use-prompt/{dialog.tsx => render-prompt.tsx} (96%)

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"