chore(ui,dashboard): Use radix-ui package (#11195)

* update deps for ui * chore(ui,dashboard): Use radix-ui package --------- Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
2025-02-02 14:20:34 +01:00
parent 12c3e6a03d
commit 9822bd930b
54 changed files with 1351 additions and 877 deletions
--- a/packages/design-system/ui/package.json
+++ b/packages/design-system/ui/package.json
@@ -82,27 +82,13 @@
  },
  "dependencies": {
    "@medusajs/icons": "~2.4.0",
-    "@radix-ui/react-accordion": "1.2.0",
-    "@radix-ui/react-alert-dialog": "1.1.1",
-    "@radix-ui/react-avatar": "1.1.0",
-    "@radix-ui/react-checkbox": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-dropdown-menu": "2.1.1",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-portal": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.0",
-    "@radix-ui/react-select": "2.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.2",
    "@tanstack/react-table": "8.20.5",
    "clsx": "^1.2.1",
    "copy-to-clipboard": "^3.3.3",
    "cva": "1.0.0-beta.1",
    "prism-react-renderer": "^2.0.6",
    "prismjs": "^1.29.0",
+    "radix-ui": "1.1.2",
    "react-aria": "^3.33.1",
    "react-currency-input-field": "^3.6.11",
    "react-stately": "^3.31.1",
--- a/packages/design-system/ui/src/blocks/data-table/components/data-table-action-cell.tsx
+++ b/packages/design-system/ui/src/blocks/data-table/components/data-table-action-cell.tsx
@@ -2,11 +2,11 @@

 import * as React from "react"

+import type { DataTableActionColumnDefMeta } from "@/blocks/data-table/types"
+import { DropdownMenu } from "@/components/dropdown-menu"
+import { IconButton } from "@/components/icon-button"
 import { EllipsisHorizontal } from "@medusajs/icons"
 import { CellContext } from "@tanstack/react-table"
-import { DropdownMenu } from "../../../components/dropdown-menu"
-import { IconButton } from "../../../components/icon-button"
-import { DataTableActionColumnDefMeta } from "../types"

 interface DataTableActionCellProps<TData> {
  ctx: CellContext<TData, unknown>
--- a/packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx
+++ b/packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx
@@ -1,8 +1,7 @@
 "use client"

 import type { DataTableCellContext, DataTableHeaderContext } from "@/blocks/data-table/types"
-import { Checkbox } from "@/components/checkbox"
-import { CheckedState } from "@radix-ui/react-checkbox"
+import { Checkbox, CheckboxCheckedState } from "@/components/checkbox"
 import * as React from "react"

 interface DataTableSelectCellProps<TData> {
@@ -32,7 +31,7 @@ const DataTableSelectHeader = <TData,>(props: DataTableSelectHeaderProps<TData>)
    ? "indeterminate"
    : props.ctx.table.getIsAllPageRowsSelected()

-  const onChange = (checked: CheckedState) => {
+  const onChange = (checked: CheckboxCheckedState) => {
    props.ctx.table.toggleAllPageRowsSelected(!!checked)
  }

--- a/packages/design-system/ui/src/components/avatar/avatar.tsx
+++ b/packages/design-system/ui/src/components/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 "use client"

-import * as Primitives from "@radix-ui/react-avatar"
 import { cva, type VariantProps } from "cva"
+import { Avatar as RadixAvatar } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -116,7 +116,7 @@ const innerVariants = cva({

 interface AvatarProps
  extends Omit<
-      React.ComponentPropsWithoutRef<typeof Primitives.Root>,
+      React.ComponentPropsWithoutRef<typeof RadixAvatar.Root>,
      "asChild" | "children" | "size"
    >,
    VariantProps<typeof avatarVariants> {
@@ -128,7 +128,7 @@ interface AvatarProps
 * This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
 */
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof Primitives.Root>,
+  React.ElementRef<typeof RadixAvatar.Root>,
  AvatarProps
 >(
  (
@@ -155,7 +155,7 @@ const Avatar = React.forwardRef<
    ref
  ) => {
    return (
-      <Primitives.Root
+      <RadixAvatar.Root
        ref={ref}
        {...props}
        className={clx(         
@@ -164,20 +164,20 @@ const Avatar = React.forwardRef<
        )}
      >
        {src && (
-          <Primitives.Image
+          <RadixAvatar.Image
            src={src}
            className={innerVariants({ variant, size })}
          />
        )}
-        <Primitives.Fallback
+        <RadixAvatar.Fallback
          className={clx(
            innerVariants({ variant, size }),
            "bg-ui-bg-component-hover text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center"
          )}
        >
          {fallback}
-        </Primitives.Fallback>
-      </Primitives.Root>
+        </RadixAvatar.Fallback>
+      </RadixAvatar.Root>
    )
  }
 )
--- a/packages/design-system/ui/src/components/badge/badge.tsx
+++ b/packages/design-system/ui/src/components/badge/badge.tsx
@@ -1,5 +1,5 @@
-import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "cva"
+import { Slot } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -131,7 +131,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
    }: BadgeProps,
    ref
  ) => {
-    const Component = asChild ? Slot : "span"
+    const Component = asChild ? Slot.Root : "span"

    return (
      <Component
--- a/packages/design-system/ui/src/components/button/button.tsx
+++ b/packages/design-system/ui/src/components/button/button.tsx
@@ -1,5 +1,5 @@
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "cva"
+import { Slot } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -90,7 +90,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    }: ButtonProps,
    ref
  ) => {
-    const Component = asChild ? Slot : "button"
+    const Component = asChild ? Slot.Root : "button"

    /**
     * In the case of a button where asChild is true, and isLoading is true, we ensure that
--- a/packages/design-system/ui/src/components/calender/calendar.stories.tsx
+++ b/packages/design-system/ui/src/components/calender/calendar.stories.tsx
@@ -1,8 +1,8 @@
+import { Button } from "@/components/button"
+import { Calendar } from "@/components/calender/calendar"
 import type { Meta, StoryObj } from "@storybook/react"
 import * as React from "react"
 import { ComponentPropsWithoutRef } from "react"
-import { Button } from "../button"
-import { Calendar } from "./calendar"

 const meta: Meta<typeof Calendar> = {
  title: "Components/CalendarNew",
--- a/packages/design-system/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 "use client"

 import { CheckMini, MinusMini } from "@medusajs/icons"
-import * as Primitives from "@radix-ui/react-checkbox"
+import { Checkbox as RadixCheckbox } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -11,13 +11,13 @@ import { CheckboxCheckedState } from "./types"
 * This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.
 */
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof Primitives.Root>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
+  React.ElementRef<typeof RadixCheckbox.Root>,
+  React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root> & {
    checked?: CheckboxCheckedState | undefined
  }
 >(({ className, checked, ...props }, ref) => {
  return (
-    <Primitives.Root
+    <RadixCheckbox.Root
      {...props}
      ref={ref}
      checked={checked}
@@ -36,11 +36,11 @@ const Checkbox = React.forwardRef<
          "group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow"
        )}
      >
-        <Primitives.Indicator>
+        <RadixCheckbox.Indicator>
          {checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
-        </Primitives.Indicator>
+        </RadixCheckbox.Indicator>
      </div>
-    </Primitives.Root>
+    </RadixCheckbox.Root>
  )
 })
 Checkbox.displayName = "Checkbox"
--- a/packages/design-system/ui/src/components/checkbox/types.ts
+++ b/packages/design-system/ui/src/components/checkbox/types.ts
@@ -1,3 +1,3 @@
-import { CheckedState } from "@radix-ui/react-checkbox"
+import type { Checkbox } from "radix-ui"

-export type CheckboxCheckedState = CheckedState
+export type CheckboxCheckedState = Checkbox.CheckedState
--- a/packages/design-system/ui/src/components/command-bar/command-bar.tsx
+++ b/packages/design-system/ui/src/components/command-bar/command-bar.tsx
@@ -1,7 +1,6 @@
 "use client"

-import * as Popover from "@radix-ui/react-popover"
-import * as Portal from "@radix-ui/react-portal"
+import { Popover, Portal } from "radix-ui"
 import * as React from "react"

 import { Kbd } from "@/components/kbd"
--- a/packages/design-system/ui/src/components/copy/copy.tsx
+++ b/packages/design-system/ui/src/components/copy/copy.tsx
@@ -8,8 +8,8 @@ import {
  SquareTwoStack,
  SquareTwoStackMini,
 } from "@medusajs/icons"
-import { Slot } from "@radix-ui/react-slot"
 import copy from "copy-to-clipboard"
+import { Slot } from "radix-ui"
 import React, { useState } from "react"

 type CopyProps = React.HTMLAttributes<HTMLButtonElement> & {
@@ -81,7 +81,7 @@ const Copy = React.forwardRef<HTMLButtonElement, CopyProps>(

    const isDefault = isDefaultVariant(variant)

-    const Component = asChild ? Slot : "button"
+    const Component = asChild ? Slot.Root : "button"

    return (
      <Tooltip content={text} open={done || open} onOpenChange={setOpen}>
--- a/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx
+++ b/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx
@@ -1,9 +1,9 @@
+import { Button } from "@/components/button"
+import { Drawer } from "@/components/drawer"
+import { Label } from "@/components/label"
 import type { Meta, StoryObj } from "@storybook/react"
 import * as React from "react"
 import { ComponentPropsWithoutRef } from "react"
-import { Button } from "../button"
-import { Drawer } from "../drawer"
-import { Label } from "../label"
 import { DatePicker } from "./date-picker"

 const meta: Meta<typeof DatePicker> = {
--- a/packages/design-system/ui/src/components/drawer/drawer.tsx
+++ b/packages/design-system/ui/src/components/drawer/drawer.tsx
@@ -1,7 +1,7 @@
 "use client"

 import { XMark } from "@medusajs/icons"
-import * as DrawerPrimitives from "@radix-ui/react-dialog"
+import { Dialog as RadixDialog } from "radix-ui"
 import * as React from "react"

 import { IconButton } from "@/components/icon-button"
@@ -9,7 +9,7 @@ import { Kbd } from "@/components/kbd"
 import { Text } from "@/components/text"
 import { clx } from "@/utils/clx"

-interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Root> {}
+interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}

 /**
 * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
@@ -17,65 +17,65 @@ interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof DrawerPr
 const DrawerRoot = (
  props: DrawerRootProps
 ) => {
-  return <DrawerPrimitives.Root {...props} />
+  return <RadixDialog.Root {...props} />
 }
 DrawerRoot.displayName = "Drawer"

-interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Trigger> {}
+interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}

 /**
 * This component is used to create the trigger button that opens the drawer.
 * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
 */
 const DrawerTrigger = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Trigger>,
+  React.ElementRef<typeof RadixDialog.Trigger>,
  DrawerTriggerProps
 >(({ className, ...props }: DrawerTriggerProps, ref) => {
  return (
-    <DrawerPrimitives.Trigger ref={ref} className={clx(className)} {...props} />
+    <RadixDialog.Trigger ref={ref} className={clx(className)} {...props} />
  )
 })
 DrawerTrigger.displayName = "Drawer.Trigger"

-interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Close> {}
+interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Close> {}

 /**
 * This component is used to create the close button for the drawer.
 * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
 */
 const DrawerClose = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Close>,
+  React.ElementRef<typeof RadixDialog.Close>,
  DrawerCloseProps
 >(({ className, ...props }: DrawerCloseProps, ref) => {
  return (
-    <DrawerPrimitives.Close ref={ref} className={clx(className)} {...props} />
+    <RadixDialog.Close ref={ref} className={clx(className)} {...props} />
  )
 })
 DrawerClose.displayName = "Drawer.Close"

-interface DrawerPortalProps extends DrawerPrimitives.DialogPortalProps {}
+interface DrawerPortalProps extends RadixDialog.DialogPortalProps {}

 /**
 * The `Drawer.Content` component uses this component to wrap the drawer content.
 * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
 */
 const DrawerPortal = (props: DrawerPortalProps) => {
-  return <DrawerPrimitives.DialogPortal {...props} />
+  return <RadixDialog.DialogPortal {...props} />
 }
 DrawerPortal.displayName = "Drawer.Portal"

-interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Overlay> {}
+interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay> {}

 /**
 * This component is used to create the overlay for the drawer.
 * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
 */
 const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Overlay>,
+  React.ElementRef<typeof RadixDialog.Overlay>,
  DrawerOverlayProps
 >(({ className, ...props }: DrawerOverlayProps, ref) => {
  return (
-    <DrawerPrimitives.Overlay
+    <RadixDialog.Overlay
      ref={ref}
      className={clx(
        "bg-ui-bg-overlay fixed inset-0",
@@ -88,7 +88,7 @@ const DrawerOverlay = React.forwardRef<
 })
 DrawerOverlay.displayName = "Drawer.Overlay"

-interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content> {
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
  /**
   * Props for the overlay component.
   * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
@@ -106,13 +106,13 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof Drawe
 * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
 */
 const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Content>,
+  React.ElementRef<typeof RadixDialog.Content>,
  DrawerContentProps
 >(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, ref) => {
  return (
    <DrawerPortal {...portalProps}>
      <DrawerOverlay {...overlayProps} />
-      <DrawerPrimitives.Content
+      <RadixDialog.Content
        ref={ref}
        className={clx(
          "bg-ui-bg-base shadow-elevation-modal border-ui-border-base fixed inset-y-2 flex w-full flex-1 flex-col rounded-lg border outline-none max-sm:inset-x-2 max-sm:w-[calc(100%-16px)] sm:right-2 sm:max-w-[560px]",
@@ -145,11 +145,11 @@ const DrawerHeader = React.forwardRef<
      <div className={clx("flex flex-col gap-y-1", className)}>{children}</div>
      <div className="flex items-center gap-x-2">
        <Kbd>esc</Kbd>
-        <DrawerPrimitives.Close asChild>
+        <RadixDialog.Close asChild>
          <IconButton size="small" type="button" variant="transparent">
            <XMark />
          </IconButton>
-        </DrawerPrimitives.Close>
+        </RadixDialog.Close>
      </div>
    </div>
  )
@@ -198,27 +198,27 @@ DrawerFooter.displayName = "Drawer.Footer"
 * This component adds an accessible title to the drawer.
 * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.
 */
-const DrawerTitle = DrawerPrimitives.Title
+const DrawerTitle = RadixDialog.Title
 DrawerTitle.displayName = "Drawer.Title"

-interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Description> {}
+interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Description> {}

 /**
 * This component adds accessible description to the drawer.
 * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
 */
 const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Description>,
+  React.ElementRef<typeof RadixDialog.Description>,
  DrawerDescriptionProps
 >(({ className, children, ...props }: DrawerDescriptionProps, ref) => (
-  <DrawerPrimitives.Description
+  <RadixDialog.Description
    ref={ref}
    className={clx(className)}
    asChild
    {...props}
  >
    <Text>{children}</Text>
-  </DrawerPrimitives.Description>
+  </RadixDialog.Description>
 ))
 DrawerDescription.displayName = "Drawer.Description"

--- a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 "use client"

 import { CheckMini, ChevronRightMini, EllipseMiniSolid } from "@medusajs/icons"
-import * as Primitives from "@radix-ui/react-dropdown-menu"
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -9,41 +9,41 @@ import { clx } from "@/utils/clx"
 /**
 * This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.
 */
-const Root = Primitives.Root
+const Root = RadixDropdownMenu.Root
 Root.displayName = "DropdownMenu"

 /**
 * This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.
 */
-const Trigger = Primitives.Trigger
+const Trigger = RadixDropdownMenu.Trigger
 Trigger.displayName = "DropdownMenu.Trigger"

 /**
 * This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.
 */
-const Group = Primitives.Group
+const Group = RadixDropdownMenu.Group
 Group.displayName = "DropdownMenu.Group"

 /**
 * This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.
 */
-const SubMenu = Primitives.Sub
+const SubMenu = RadixDropdownMenu.Sub
 SubMenu.displayName = "DropdownMenu.SubMenu"

 /**
 * This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.
 */
-const RadioGroup = Primitives.RadioGroup
+const RadioGroup = RadixDropdownMenu.RadioGroup
 RadioGroup.displayName = "DropdownMenu.RadioGroup"

 /**
 * This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.
 */
 const SubMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof Primitives.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof Primitives.SubTrigger>
+  React.ElementRef<typeof RadixDropdownMenu.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubTrigger>
 >(({ className, children, ...props }, ref) => (
-  <Primitives.SubTrigger
+  <RadixDropdownMenu.SubTrigger
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -57,7 +57,7 @@ const SubMenuTrigger = React.forwardRef<
  >
    {children}
    <ChevronRightMini className="text-ui-fg-muted ml-auto" />
-  </Primitives.SubTrigger>
+  </RadixDropdownMenu.SubTrigger>
 ))
 SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"

@@ -65,11 +65,11 @@ SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
 * This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.
 */
 const SubMenuContent = React.forwardRef<
-  React.ElementRef<typeof Primitives.SubContent>,
-  React.ComponentPropsWithoutRef<typeof Primitives.SubContent>
+  React.ElementRef<typeof RadixDropdownMenu.SubContent>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubContent>
 >(({ className, collisionPadding = 8, ...props }, ref) => (
-  <Primitives.Portal>
-    <Primitives.SubContent
+  <RadixDropdownMenu.Portal>
+    <RadixDropdownMenu.SubContent
      ref={ref}
      collisionPadding={collisionPadding}
      className={clx(
@@ -79,7 +79,7 @@ const SubMenuContent = React.forwardRef<
      )}
      {...props}
    />
-  </Primitives.Portal>
+  </RadixDropdownMenu.Portal>
 ))
 SubMenuContent.displayName = "DropdownMenu.SubMenuContent"

@@ -87,8 +87,8 @@ SubMenuContent.displayName = "DropdownMenu.SubMenuContent"
 * This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.
 */
 const Content = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Content>
+  React.ElementRef<typeof RadixDropdownMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>
 >(
  (
    {
@@ -100,8 +100,8 @@ const Content = React.forwardRef<
    },
    ref
  ) => (
-    <Primitives.Portal>
-      <Primitives.Content
+    <RadixDropdownMenu.Portal>
+      <RadixDropdownMenu.Content
        ref={ref}
        sideOffset={sideOffset}
        align={align}
@@ -113,7 +113,7 @@ const Content = React.forwardRef<
        )}
        {...props}
      />
-    </Primitives.Portal>
+    </RadixDropdownMenu.Portal>
  )
 )
 Content.displayName = "DropdownMenu.Content"
@@ -122,10 +122,10 @@ Content.displayName = "DropdownMenu.Content"
 * This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.
 */
 const Item = React.forwardRef<
-  React.ElementRef<typeof Primitives.Item>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Item>
+  React.ElementRef<typeof RadixDropdownMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>
 >(({ className, ...props }, ref) => (
-  <Primitives.Item
+  <RadixDropdownMenu.Item
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -143,10 +143,10 @@ Item.displayName = "DropdownMenu.Item"
 * This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.
 */
 const CheckboxItem = React.forwardRef<
-  React.ElementRef<typeof Primitives.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof Primitives.CheckboxItem>
+  React.ElementRef<typeof RadixDropdownMenu.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <Primitives.CheckboxItem
+  <RadixDropdownMenu.CheckboxItem
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -160,12 +160,12 @@ const CheckboxItem = React.forwardRef<
    {...props}
  >
    <span className="absolute left-2 flex size-[15px] items-center justify-center">
-      <Primitives.ItemIndicator>
+      <RadixDropdownMenu.ItemIndicator>
        <CheckMini />
-      </Primitives.ItemIndicator>
+      </RadixDropdownMenu.ItemIndicator>
    </span>
    {children}
-  </Primitives.CheckboxItem>
+  </RadixDropdownMenu.CheckboxItem>
 ))
 CheckboxItem.displayName = "DropdownMenu.CheckboxItem"

@@ -173,10 +173,10 @@ CheckboxItem.displayName = "DropdownMenu.CheckboxItem"
 * This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.
 */
 const RadioItem = React.forwardRef<
-  React.ElementRef<typeof Primitives.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof Primitives.RadioItem>
+  React.ElementRef<typeof RadixDropdownMenu.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <Primitives.RadioItem
+  <RadixDropdownMenu.RadioItem
    ref={ref}
    className={clx(
      "bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -189,12 +189,12 @@ const RadioItem = React.forwardRef<
    {...props}
  >
    <span className="absolute left-2 flex size-[15px] items-center justify-center">
-      <Primitives.ItemIndicator>
+      <RadixDropdownMenu.ItemIndicator>
        <EllipseMiniSolid className="text-ui-fg-base" />
-      </Primitives.ItemIndicator>
+      </RadixDropdownMenu.ItemIndicator>
    </span>
    {children}
-  </Primitives.RadioItem>
+  </RadixDropdownMenu.RadioItem>
 ))
 RadioItem.displayName = "DropdownMenu.RadioItem"

@@ -202,10 +202,10 @@ RadioItem.displayName = "DropdownMenu.RadioItem"
 * This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.
 */
 const Label = React.forwardRef<
-  React.ElementRef<typeof Primitives.Label>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Label>
+  React.ElementRef<typeof RadixDropdownMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Label>
 >(({ className, ...props }, ref) => (
-  <Primitives.Label
+  <RadixDropdownMenu.Label
    ref={ref}
    className={clx("text-ui-fg-subtle txt-compact-xsmall-plus", className)}
    {...props}
@@ -217,10 +217,10 @@ Label.displayName = "DropdownMenu.Label"
 * This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.
 */
 const Separator = React.forwardRef<
-  React.ElementRef<typeof Primitives.Separator>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Separator>
+  React.ElementRef<typeof RadixDropdownMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Separator>
 >(({ className, ...props }, ref) => (
-  <Primitives.Separator
+  <RadixDropdownMenu.Separator
    ref={ref}
    className={clx(
      "bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t",
--- a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
+++ b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
@@ -1,7 +1,7 @@
 "use client"

 import { XMark } from "@medusajs/icons"
-import * as FocusModalPrimitives from "@radix-ui/react-dialog"
+import { Dialog as RadixDialog } from "radix-ui"
 import * as React from "react"

 import { IconButton } from "@/components/icon-button"
@@ -14,27 +14,27 @@ import { clx } from "@/utils/clx"
 * @prop onOpenChange - A function to handle when the modal is opened or closed.
 */
 interface FocusModalRootProps
-  extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Root> {}
+  extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}

 /**
 * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
 */
 const FocusModalRoot = (props: FocusModalRootProps) => {
-  return <FocusModalPrimitives.Root {...props} />
+  return <RadixDialog.Root {...props} />
 }
 FocusModalRoot.displayName = "FocusModal"

-interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Trigger> {}
+interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}

 /**
 * This component is used to create the trigger button that opens the modal.
 * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
 */
 const FocusModalTrigger = React.forwardRef<
-  React.ElementRef<typeof FocusModalPrimitives.Trigger>,
+  React.ElementRef<typeof RadixDialog.Trigger>,
  FocusModalTriggerProps
 >((props: FocusModalTriggerProps, ref) => {
-  return <FocusModalPrimitives.Trigger ref={ref} {...props} />
+  return <RadixDialog.Trigger ref={ref} {...props} />
 })
 FocusModalTrigger.displayName = "FocusModal.Trigger"

@@ -42,10 +42,10 @@ FocusModalTrigger.displayName = "FocusModal.Trigger"
 * This component is used to create the close button for the modal.
 * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
 */
-const FocusModalClose = FocusModalPrimitives.Close
+const FocusModalClose = RadixDialog.Close
 FocusModalClose.displayName = "FocusModal.Close"

-interface FocusModalPortalProps extends FocusModalPrimitives.DialogPortalProps {}
+interface FocusModalPortalProps extends RadixDialog.DialogPortalProps {}

 /**
 * The `FocusModal.Content` component uses this component to wrap the modal content.
@@ -53,7 +53,7 @@ interface FocusModalPortalProps extends FocusModalPrimitives.DialogPortalProps {
 */
 const FocusModalPortal = (props: FocusModalPortalProps) => {
  return (
-    <FocusModalPrimitives.DialogPortal {...props} />
+    <RadixDialog.DialogPortal {...props} />
  )
 }
 FocusModalPortal.displayName = "FocusModal.Portal"
@@ -63,11 +63,11 @@ FocusModalPortal.displayName = "FocusModal.Portal"
 * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
 */
 const FocusModalOverlay = React.forwardRef<
-  React.ElementRef<typeof FocusModalPrimitives.Overlay>,
-  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Overlay>
+  React.ElementRef<typeof RadixDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
 >(({ className, ...props }, ref) => {
  return (
-    <FocusModalPrimitives.Overlay
+    <RadixDialog.Overlay
      ref={ref}
      className={clx(
        "bg-ui-bg-overlay fixed inset-0",
@@ -85,8 +85,8 @@ FocusModalOverlay.displayName = "FocusModal.Overlay"
 * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
 */
 const FocusModalContent = React.forwardRef<
-  React.ElementRef<typeof FocusModalPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Content> & {
+  React.ElementRef<typeof RadixDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & {
    overlayProps?: React.ComponentPropsWithoutRef<typeof FocusModalOverlay>
    portalProps?: React.ComponentPropsWithoutRef<typeof FocusModalPortal>
  }
@@ -94,7 +94,7 @@ const FocusModalContent = React.forwardRef<
  return (
    <FocusModalPortal {...portalProps}>
      <FocusModalOverlay {...overlayProps} />
-      <FocusModalPrimitives.Content
+      <RadixDialog.Content
        ref={ref}
        className={clx(
          "bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none",
@@ -126,11 +126,11 @@ const FocusModalHeader = React.forwardRef<
      {...props}
    >
      <div className="flex items-center gap-x-2">
-        <FocusModalPrimitives.Close asChild>
+        <RadixDialog.Close asChild>
          <IconButton size="small" type="button" variant="transparent">
            <XMark />
          </IconButton>
-        </FocusModalPrimitives.Close>
+        </RadixDialog.Close>
        <Kbd>esc</Kbd>
      </div>
      {children}
@@ -162,7 +162,7 @@ const FocusModalFooter = React.forwardRef<
 })
 FocusModalFooter.displayName = "FocusModal.Footer"

-interface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Title> {}
+interface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Title> {}

 /**
 * This component adds an accessible title to the modal.
@@ -173,7 +173,7 @@ const FocusModalTitle = React.forwardRef<
  FocusModalTitleProps
 >(({ className, ...props }: FocusModalTitleProps, ref) => {
  return (
-    <FocusModalPrimitives.Title ref={ref} {...props} />
+    <RadixDialog.Title ref={ref} {...props} />
  )
 })
 FocusModalTitle.displayName = "FocusModal.Title"
@@ -182,7 +182,7 @@ FocusModalTitle.displayName = "FocusModal.Title"
 * This component adds accessible description to the modal.
 * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
 */
-const FocusModalDescription = FocusModalPrimitives.Description
+const FocusModalDescription = RadixDialog.Description
 FocusModalDescription.displayName = "FocusModal.Description"

 /**
--- a/packages/design-system/ui/src/components/hint/hint.tsx
+++ b/packages/design-system/ui/src/components/hint/hint.tsx
@@ -2,7 +2,7 @@ import { ExclamationCircleSolid } from "@medusajs/icons"
 import { VariantProps, cva } from "cva"
 import * as React from "react"

-import { clx } from "../../utils/clx"
+import { clx } from "@/utils/clx"

 const hintVariants = cva({
  base: "txt-small",
--- 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,5 +1,5 @@
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "cva"
+import { Slot } from "radix-ui"
 import * as React from "react"

 import { badgeColorVariants } from "@/components/badge"
@@ -47,7 +47,7 @@ const IconBadge = React.forwardRef<HTMLSpanElement, IconBadgeProps>(
    }: IconBadgeProps,
    ref
  ) => {
-    const Component = asChild ? Slot : "span"
+    const Component = asChild ? Slot.Root : "span"

    return (
      <Component
--- 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,6 +1,6 @@
 import { Spinner } from "@medusajs/icons"
-import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "cva"
+import { Slot } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -78,7 +78,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
    }: IconButtonProps,
    ref
  ) => {
-    const Component = asChild ? Slot : "button"
+    const Component = asChild ? Slot.Root : "button"

    /**
     * In the case of a button where asChild is true, and isLoading is true, we ensure that
--- a/packages/design-system/ui/src/components/label/label.tsx
+++ b/packages/design-system/ui/src/components/label/label.tsx
@@ -1,7 +1,7 @@
 "use client"

-import * as Primitives from "@radix-ui/react-label"
 import { cva, type VariantProps } from "cva"
+import { Label as RadixLabel } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -47,7 +47,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
    ...props
  }: LabelProps, ref) => {
    return (
-      <Primitives.Root
+      <RadixLabel.Root
        ref={ref}
        className={clx(labelVariants({ size, weight }), className)}
        {...props}
--- a/packages/design-system/ui/src/components/popover/popover.tsx
+++ b/packages/design-system/ui/src/components/popover/popover.tsx
@@ -1,4 +1,4 @@
-import * as Primitives from "@radix-ui/react-popover"
+import { Popover as RadixPopover } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -7,44 +7,44 @@ import { clx } from "@/utils/clx"
 * This component is based on the [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover) primitves.
 */
 const Root = (
-  props: React.ComponentPropsWithoutRef<typeof Primitives.Root>
+  props: React.ComponentPropsWithoutRef<typeof RadixPopover.Root>
 ) => {
-  return <Primitives.Root {...props} />
+  return <RadixPopover.Root {...props} />
 }
 Root.displayName = "Popover"

 const Trigger = React.forwardRef<
-  React.ElementRef<typeof Primitives.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Trigger>
+  React.ElementRef<typeof RadixPopover.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>
 >((props, ref) => {
-  return <Primitives.Trigger ref={ref} {...props} />
+  return <RadixPopover.Trigger ref={ref} {...props} />
 })
 Trigger.displayName = "Popover.Trigger"

 const Anchor = React.forwardRef<
-  React.ElementRef<typeof Primitives.Anchor>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Anchor>
+  React.ElementRef<typeof RadixPopover.Anchor>,
+  React.ComponentPropsWithoutRef<typeof RadixPopover.Anchor>
 >((props, ref) => {
-  return <Primitives.Anchor ref={ref} {...props} />
+  return <RadixPopover.Anchor ref={ref} {...props} />
 })
 Anchor.displayName = "Popover.Anchor"

 const Close = React.forwardRef<
-  React.ElementRef<typeof Primitives.Close>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Close>
+  React.ElementRef<typeof RadixPopover.Close>,
+  React.ComponentPropsWithoutRef<typeof RadixPopover.Close>
 >((props, ref) => {
-  return <Primitives.Close ref={ref} {...props} />
+  return <RadixPopover.Close ref={ref} {...props} />
 })
 Close.displayName = "Popover.Close"

 interface ContentProps
-  extends React.ComponentPropsWithoutRef<typeof Primitives.Content> {}
+  extends React.ComponentPropsWithoutRef<typeof RadixPopover.Content> {}

 /**
 * @excludeExternal
 */
 const Content = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
+  React.ElementRef<typeof RadixPopover.Content>,
  ContentProps
 >(
  (
@@ -69,8 +69,8 @@ const Content = React.forwardRef<
    ref
  ) => {
    return (
-      <Primitives.Portal>
-        <Primitives.Content
+      <RadixPopover.Portal>
+        <RadixPopover.Content
          ref={ref}
          sideOffset={sideOffset}
          side={side}
@@ -83,7 +83,7 @@ const Content = React.forwardRef<
          )}
          {...props}
        />
-      </Primitives.Portal>
+      </RadixPopover.Portal>
    )
  }
 )
--- a/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
+++ b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
@@ -6,7 +6,7 @@ import {
  CircleHalfSolid,
  Plus,
 } from "@medusajs/icons"
-import * as Primitves from "@radix-ui/react-accordion"
+import { Accordion as RadixAccordion } from "radix-ui"
 import * as React from "react"

 import { ProgressStatus } from "@/types"
@@ -16,17 +16,17 @@ import { IconButton } from "../icon-button"
 /**
 * This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
 */
-const Root = (props: React.ComponentPropsWithoutRef<typeof Primitves.Root>) => {
-  return <Primitves.Root {...props} />
+const Root = (props: React.ComponentPropsWithoutRef<typeof RadixAccordion.Root>) => {
+  return <RadixAccordion.Root {...props} />
 }
 Root.displayName = "ProgressAccordion"

 const Item = React.forwardRef<
-  React.ElementRef<typeof Primitves.Item>,
-  React.ComponentPropsWithoutRef<typeof Primitves.Item>
+  React.ElementRef<typeof RadixAccordion.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixAccordion.Item>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitves.Item
+    <RadixAccordion.Item
      ref={ref}
      className={clx(
        "border-ui-border-base border-b last-of-type:border-b-0",
@@ -39,7 +39,7 @@ const Item = React.forwardRef<
 Item.displayName = "ProgressAccordion.Item"

 interface HeaderProps
-  extends React.ComponentPropsWithoutRef<typeof Primitves.Header> {
+  extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Header> {
  status?: ProgressStatus
 }

@@ -79,7 +79,7 @@ const ProgressIndicator = ({
 ProgressIndicator.displayName = "ProgressAccordion.ProgressIndicator"

 const Header = React.forwardRef<
-  React.ElementRef<typeof Primitves.Header>,
+  React.ElementRef<typeof RadixAccordion.Header>,
  HeaderProps
 >(
  (
@@ -95,7 +95,7 @@ const Header = React.forwardRef<
    ref
  ) => {
    return (
-      <Primitves.Header
+      <RadixAccordion.Header
        ref={ref}
        className={clx(
          "h3-core text-ui-fg-base group flex w-full flex-1 items-center gap-4 px-6",
@@ -105,23 +105,23 @@ const Header = React.forwardRef<
      >
        <ProgressIndicator status={status} />
        {children}
-        <Primitves.Trigger asChild className="ml-auto">
+        <RadixAccordion.Trigger asChild className="ml-auto">
          <IconButton variant="transparent">
            <Plus className="transform transition-transform group-data-[state=open]:rotate-45" />
          </IconButton>
-        </Primitves.Trigger>
-      </Primitves.Header>
+        </RadixAccordion.Trigger>
+      </RadixAccordion.Header>
    )
  }
 )
 Header.displayName = "ProgressAccordion.Header"

 const Content = React.forwardRef<
-  React.ElementRef<typeof Primitves.Content>,
-  React.ComponentPropsWithoutRef<typeof Primitves.Content>
+  React.ElementRef<typeof RadixAccordion.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixAccordion.Content>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitves.Content
+    <RadixAccordion.Content
      ref={ref}
      className={clx(
        "overflow-hidden",
--- a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx
+++ b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx
@@ -5,7 +5,7 @@ import {
  CircleDottedLine,
  CircleHalfSolid,
 } from "@medusajs/icons"
-import * as ProgressTabsPrimitives from "@radix-ui/react-tabs"
+import { Tabs as RadixTabs } from "radix-ui"
 import * as React from "react"

 import { ProgressStatus } from "@/types"
@@ -16,8 +16,8 @@ import { clx } from "@/utils/clx"
 *
 * @excludeExternal
 */
-const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => {
-  return <ProgressTabsPrimitives.Root {...props} />
+const ProgressTabsRoot = (props: RadixTabs.TabsProps) => {
+  return <RadixTabs.Root {...props} />
 }
 ProgressTabsRoot.displayName = "ProgressTabs"

@@ -59,14 +59,14 @@ ProgressIndicator.displayName = "ProgressTabs.ProgressIndicator"

 interface ProgressTabsTriggerProps
  extends Omit<
-    React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Trigger>,
+    React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>,
    "asChild"
  > {
  status?: ProgressStatus
 }

 const ProgressTabsTrigger = React.forwardRef<
-  React.ElementRef<typeof ProgressTabsPrimitives.Trigger>,
+  React.ElementRef<typeof RadixTabs.Trigger>,
  ProgressTabsTriggerProps
 >(
  (
@@ -78,7 +78,7 @@ const ProgressTabsTrigger = React.forwardRef<
    }: ProgressTabsTriggerProps,
    ref
  ) => (
-    <ProgressTabsPrimitives.Trigger
+    <RadixTabs.Trigger
      ref={ref}
      className={clx(
        "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-[52px] w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
@@ -93,16 +93,16 @@ const ProgressTabsTrigger = React.forwardRef<
    >
      <ProgressIndicator status={status} />
      {children}
-    </ProgressTabsPrimitives.Trigger>
+    </RadixTabs.Trigger>
  )
 )
 ProgressTabsTrigger.displayName = "ProgressTabs.Trigger"

 const ProgressTabsList = React.forwardRef<
-  React.ElementRef<typeof ProgressTabsPrimitives.List>,
-  React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.List>
+  React.ElementRef<typeof RadixTabs.List>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.List>
 >(({ className, ...props }, ref) => (
-  <ProgressTabsPrimitives.List
+  <RadixTabs.List
    ref={ref}
    className={clx("flex items-center", className)}
    {...props}
@@ -111,11 +111,11 @@ const ProgressTabsList = React.forwardRef<
 ProgressTabsList.displayName = "ProgressTabs.List"

 const ProgressTabsContent = React.forwardRef<
-  React.ElementRef<typeof ProgressTabsPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Content>
+  React.ElementRef<typeof RadixTabs.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
 >(({ className, ...props }, ref) => {
  return (
-    <ProgressTabsPrimitives.Content
+    <RadixTabs.Content
      ref={ref}
      className={clx("outline-none", className)}
      {...props}
--- a/packages/design-system/ui/src/components/prompt/prompt.tsx
+++ b/packages/design-system/ui/src/components/prompt/prompt.tsx
@@ -1,6 +1,6 @@
 "use client"

-import * as Primitives from "@radix-ui/react-alert-dialog"
+import { AlertDialog as RadixAlertDialog } from "radix-ui"
 import * as React from "react"

 import { Button } from "@/components/button"
@@ -42,31 +42,31 @@ const Root = ({
   */
  variant = "danger",
  ...props
-}: React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
+}: React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Root> & {
  variant?: PromptVariant
 }) => {
  return (
    <PromptProvider variant={variant}>
-      <Primitives.Root {...props} />
+      <RadixAlertDialog.Root {...props} />
    </PromptProvider>
  )
 }
 Root.displayName = "Prompt"

-const Trigger = Primitives.Trigger
+const Trigger = RadixAlertDialog.Trigger
 Trigger.displayName = "Prompt.Trigger"

-const Portal = (props: Primitives.AlertDialogPortalProps) => {
-  return <Primitives.AlertDialogPortal {...props} />
+const Portal = (props: RadixAlertDialog.AlertDialogPortalProps) => {
+  return <RadixAlertDialog.AlertDialogPortal {...props} />
 }
 Portal.displayName = "Prompt.Portal"

 const Overlay = React.forwardRef<
-  React.ElementRef<typeof Primitives.Overlay>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Overlay>
+  React.ElementRef<typeof RadixAlertDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Overlay>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitives.Overlay
+    <RadixAlertDialog.Overlay
      ref={ref}
      className={clx(
        "bg-ui-bg-overlay fixed inset-0",
@@ -80,27 +80,27 @@ const Overlay = React.forwardRef<
 Overlay.displayName = "Prompt.Overlay"

 const Title = React.forwardRef<
-  React.ElementRef<typeof Primitives.Title>,
-  Omit<React.ComponentPropsWithoutRef<typeof Primitives.Title>, "asChild">
+  React.ElementRef<typeof RadixAlertDialog.Title>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Title>, "asChild">
 >(({ className, children, ...props }, ref) => {
  return (
-    <Primitives.Title ref={ref} className={clx(className)} {...props} asChild>
+    <RadixAlertDialog.Title ref={ref} className={clx(className)} {...props} asChild>
      <Heading level="h2" className="text-ui-fg-base">
        {children}
      </Heading>
-    </Primitives.Title>
+    </RadixAlertDialog.Title>
  )
 })
 Title.displayName = "Prompt.Title"

 const Content = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Content>
+  React.ElementRef<typeof RadixAlertDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Content>
 >(({ className, ...props }, ref) => {
  return (
    <Portal>
      <Overlay />
-      <Primitives.Content
+      <RadixAlertDialog.Content
        ref={ref}
        className={clx(
          "bg-ui-bg-base shadow-elevation-flyout fixed left-[50%] top-[50%] flex w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border focus-visible:outline-none",
@@ -115,11 +115,11 @@ const Content = React.forwardRef<
 Content.displayName = "Prompt.Content"

 const Description = React.forwardRef<
-  React.ElementRef<typeof Primitives.Description>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Description>
+  React.ElementRef<typeof RadixAlertDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Description>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitives.Description
+    <RadixAlertDialog.Description
      ref={ref}
      className={clx("text-ui-fg-subtle txt-compact-medium", className)}
      {...props}
@@ -129,13 +129,13 @@ const Description = React.forwardRef<
 Description.displayName = "Prompt.Description"

 const Action = React.forwardRef<
-  React.ElementRef<typeof Primitives.Action>,
-  Omit<React.ComponentPropsWithoutRef<typeof Primitives.Action>, "asChild">
+  React.ElementRef<typeof RadixAlertDialog.Action>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Action>, "asChild">
 >(({ className, children, type, ...props }, ref) => {
  const { variant } = usePromptContext()

  return (
-    <Primitives.Action ref={ref} className={className} {...props} asChild>
+    <RadixAlertDialog.Action ref={ref} className={className} {...props} asChild>
      <Button
        size="small"
        type={type}
@@ -143,21 +143,21 @@ const Action = React.forwardRef<
      >
        {children}
      </Button>
-    </Primitives.Action>
+    </RadixAlertDialog.Action>
  )
 })
 Action.displayName = "Prompt.Action"

 const Cancel = React.forwardRef<
-  React.ElementRef<typeof Primitives.Cancel>,
-  Omit<React.ComponentPropsWithoutRef<typeof Primitives.Cancel>, "asChild">
+  React.ElementRef<typeof RadixAlertDialog.Cancel>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Cancel>, "asChild">
 >(({ className, children, ...props }, ref) => {
  return (
-    <Primitives.Cancel ref={ref} className={clx(className)} {...props} asChild>
+    <RadixAlertDialog.Cancel ref={ref} className={clx(className)} {...props} asChild>
      <Button size="small" variant="secondary">
        {children}
      </Button>
-    </Primitives.Cancel>
+    </RadixAlertDialog.Cancel>
  )
 })
 Cancel.displayName = "Prompt.Cancel"
--- a/packages/design-system/ui/src/components/radio-group/radio-group.tsx
+++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
@@ -1,21 +1,21 @@
 "use client"

-import * as Primitives from "@radix-ui/react-radio-group"
+import { RadioGroup as RadixRadioGroup } from "radix-ui"
 import * as React from "react"

+import { Hint } from "@/components/hint"
+import { Label } from "@/components/label"
 import { clx } from "@/utils/clx"
-import { Hint } from "../hint"
-import { Label } from "../label"

 /**
 * This component is based on the [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) primitives.
 */
 const Root = React.forwardRef<
-  React.ElementRef<typeof Primitives.Root>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Root>
+  React.ElementRef<typeof RadixRadioGroup.Root>,
+  React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitives.Root
+    <RadixRadioGroup.Root
      className={clx("grid gap-2", className)}
      {...props}
      ref={ref}
@@ -25,11 +25,11 @@ const Root = React.forwardRef<
 Root.displayName = "RadioGroup"

 const Indicator = React.forwardRef<
-  React.ElementRef<typeof Primitives.Indicator>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Indicator>
+  React.ElementRef<typeof RadixRadioGroup.Indicator>,
+  React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Indicator>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitives.Indicator
+    <RadixRadioGroup.Indicator
      ref={ref}
      className={clx("flex items-center justify-center", className)}
      {...props}
@@ -39,17 +39,17 @@ const Indicator = React.forwardRef<
          "bg-ui-bg-base shadow-details-contrast-on-bg-interactive h-1.5 w-1.5 rounded-full"
        )}
      />
-    </Primitives.Indicator>
+    </RadixRadioGroup.Indicator>
  )
 })
 Indicator.displayName = "RadioGroup.Indicator"

 const Item = React.forwardRef<
-  React.ElementRef<typeof Primitives.Item>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Item>
+  React.ElementRef<typeof RadixRadioGroup.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Item>
 >(({ className, ...props }, ref) => {
  return (
-    <Primitives.Item
+    <RadixRadioGroup.Item
      ref={ref}
      className={clx(
        "group relative flex h-5 w-5 items-center justify-center outline-none",
@@ -68,19 +68,19 @@ const Item = React.forwardRef<
      >
        <Indicator />
      </div>
-    </Primitives.Item>
+    </RadixRadioGroup.Item>
  )
 })
 Item.displayName = "RadioGroup.Item"

 interface ChoiceBoxProps
-  extends React.ComponentPropsWithoutRef<typeof Primitives.Item> {
+  extends React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Item> {
  label: string
  description: string
 }

 const ChoiceBox = React.forwardRef<
-  React.ElementRef<typeof Primitives.Item>,
+  React.ElementRef<typeof RadixRadioGroup.Item>,
  ChoiceBoxProps
 >(({ className, id, label, description, ...props }, ref) => {
  const generatedId = React.useId()
@@ -92,7 +92,7 @@ const ChoiceBox = React.forwardRef<
  const descriptionId = `${id}-description`

  return (
-    <Primitives.Item
+    <RadixRadioGroup.Item
      ref={ref}
      className={clx(
        "shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus transition-fg group flex items-start gap-x-2 rounded-lg p-3 outline-none",
@@ -131,7 +131,7 @@ const ChoiceBox = React.forwardRef<
          {description}
        </Hint>
      </div>
-    </Primitives.Item>
+    </RadixRadioGroup.Item>
  )
 })
 ChoiceBox.displayName = "RadioGroup.ChoiceBox"
--- a/packages/design-system/ui/src/components/select/select.tsx
+++ b/packages/design-system/ui/src/components/select/select.tsx
@@ -1,14 +1,14 @@
 "use client"

 import { Check, TrianglesMini } from "@medusajs/icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
 import { cva } from "cva"
+import { Select as RadixSelect } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"

 interface SelectProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
+  extends React.ComponentPropsWithoutRef<typeof RadixSelect.Root> {
  size?: "base" | "small"
 }

@@ -42,7 +42,7 @@ const Root = ({
 }: SelectProps) => {
  return (
    <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
-      <SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>
+      <RadixSelect.Root {...props}>{children}</RadixSelect.Root>
    </SelectContext.Provider>
  )
 }
@@ -51,14 +51,14 @@ Root.displayName = "Select"
 /**
 * Groups multiple items together.
 */
-const Group = SelectPrimitive.Group
+const Group = RadixSelect.Group
 Group.displayName = "Select.Group"

 /**
 * Displays the selected value, or a placeholder if no value is selected.
 * It's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).
 */
-const Value = SelectPrimitive.Value
+const Value = RadixSelect.Value
 Value.displayName = "Select.Value"

 const triggerVariants = cva({
@@ -85,27 +85,27 @@ const triggerVariants = cva({
 * It's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger).
 */
 const Trigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+  React.ElementRef<typeof RadixSelect.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
 >(({ className, children, ...props }, ref) => {
  const { size } = useSelectContext()

  return (
-    <SelectPrimitive.Trigger
+    <RadixSelect.Trigger
      ref={ref}
      className={clx(triggerVariants({ size }), className)}
      {...props}
    >
      {children}
-      <SelectPrimitive.Icon asChild>
+      <RadixSelect.Icon asChild>
        <TrianglesMini className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
+      </RadixSelect.Icon>
+    </RadixSelect.Trigger>
  )
 })
 Trigger.displayName = "Select.Trigger"

-interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {
 }

 /**
@@ -113,7 +113,7 @@ interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof Selec
 * It's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content).
 */
 const Content = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ElementRef<typeof RadixSelect.Content>,
  SelectContentProps
 >(
  (
@@ -136,8 +136,8 @@ const Content = React.forwardRef<
    }: SelectContentProps,
    ref
  ) => (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
+    <RadixSelect.Portal>
+      <RadixSelect.Content
        ref={ref}
        className={clx(
          "bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
@@ -155,7 +155,7 @@ const Content = React.forwardRef<
        collisionPadding={collisionPadding}
        {...props}
      >
-        <SelectPrimitive.Viewport
+        <RadixSelect.Viewport
          className={clx(
            "p-1",
            position === "popper" &&
@@ -163,9 +163,9 @@ const Content = React.forwardRef<
          )}
        >
          {children}
-        </SelectPrimitive.Viewport>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
+        </RadixSelect.Viewport>
+      </RadixSelect.Content>
+    </RadixSelect.Portal>
  )
 )
 Content.displayName = "Select.Content"
@@ -175,10 +175,10 @@ Content.displayName = "Select.Content"
 * It's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label).
 */
 const Label = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+  React.ElementRef<typeof RadixSelect.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
+  <RadixSelect.Label
    ref={ref}
    className={clx(
      "txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5",
@@ -194,11 +194,11 @@ Label.displayName = "Select.Label"
 * and accepts its props.
 */
 const Item = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+  React.ElementRef<typeof RadixSelect.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Item>
 >(({ className, children, ...props }, ref) => {
  return (
-    <SelectPrimitive.Item
+    <RadixSelect.Item
      ref={ref}
      className={clx(
        "bg-ui-bg-component grid cursor-pointer grid-cols-[15px_1fr] gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors txt-compact-small items-center",
@@ -211,23 +211,23 @@ const Item = React.forwardRef<
      {...props}
    >
      <span className="flex h-[15px] w-[15px] items-center justify-center">
-        <SelectPrimitive.ItemIndicator className="flex items-center justify-center">
+        <RadixSelect.ItemIndicator className="flex items-center justify-center">
          <Check />
-        </SelectPrimitive.ItemIndicator>
+        </RadixSelect.ItemIndicator>
      </span>
-      <SelectPrimitive.ItemText className="flex-1 truncate">
+      <RadixSelect.ItemText className="flex-1 truncate">
        {children}
-      </SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
+      </RadixSelect.ItemText>
+    </RadixSelect.Item>
  )
 })
 Item.displayName = "Select.Item"

 const Separator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+  React.ElementRef<typeof RadixSelect.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
+  <RadixSelect.Separator
    ref={ref}
    className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
    {...props}
--- a/packages/design-system/ui/src/components/skeleton/skeleton.tsx
+++ b/packages/design-system/ui/src/components/skeleton/skeleton.tsx
@@ -1,6 +1,7 @@
-import { clx } from "@/utils/clx"
 import * as React from "react"

+import { clx } from "@/utils/clx"
+
 function Skeleton({
  className,
  ...props
--- a/packages/design-system/ui/src/components/switch/switch.tsx
+++ b/packages/design-system/ui/src/components/switch/switch.tsx
@@ -1,7 +1,7 @@
 "use client"

-import * as Primitives from "@radix-ui/react-switch"
 import { VariantProps, cva } from "cva"
+import { Switch as RadixSwitch } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -35,7 +35,7 @@ const thumbVariants = cva({

 interface SwitchProps
  extends Omit<
-      React.ComponentPropsWithoutRef<typeof Primitives.Root>,
+      React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>,
      "asChild"
    >,
    VariantProps<typeof switchVariants> {}
@@ -44,7 +44,7 @@ interface SwitchProps
 * This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
 */
 const Switch = React.forwardRef<
-  React.ElementRef<typeof Primitives.Root>,
+  React.ElementRef<typeof RadixSwitch.Root>,
  SwitchProps
 >(
  (
@@ -58,13 +58,13 @@ const Switch = React.forwardRef<
    }: SwitchProps,
    ref
  ) => (
-    <Primitives.Root
+    <RadixSwitch.Root
      className={clx(switchVariants({ size }), className)}
      {...props}
      ref={ref}
    >
-      <Primitives.Thumb className={clx(thumbVariants({ size }))} />
-    </Primitives.Root>
+      <RadixSwitch.Thumb className={clx(thumbVariants({ size }))} />
+    </RadixSwitch.Root>
  )
 )
 Switch.displayName = "Switch"
--- a/packages/design-system/ui/src/components/tabs/tabs.tsx
+++ b/packages/design-system/ui/src/components/tabs/tabs.tsx
@@ -1,6 +1,6 @@
 "use client"

-import * as TabsPrimitives from "@radix-ui/react-tabs"
+import { Tabs as RadixTabs } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -9,17 +9,17 @@ import { clx } from "@/utils/clx"
 * This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
 */
 const TabsRoot = (
-  props: React.ComponentPropsWithoutRef<typeof TabsPrimitives.Root>
+  props: React.ComponentPropsWithoutRef<typeof RadixTabs.Root>
 ) => {
-  return <TabsPrimitives.Root {...props} />
+  return <RadixTabs.Root {...props} />
 }
 TabsRoot.displayName = "Tabs"

 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitives.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitives.Trigger>
+  React.ElementRef<typeof RadixTabs.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <TabsPrimitives.Trigger
+  <RadixTabs.Trigger
    ref={ref}
    className={clx(
      "txt-compact-small-plus transition-fg text-ui-fg-subtle inline-flex items-center justify-center rounded-full border border-transparent bg-transparent px-2.5 py-1 outline-none",
@@ -31,15 +31,15 @@ const TabsTrigger = React.forwardRef<
    {...props}
  >
    {children}
-  </TabsPrimitives.Trigger>
+  </RadixTabs.Trigger>
 ))
 TabsTrigger.displayName = "Tabs.Trigger"

 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitives.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitives.List>
+  React.ElementRef<typeof RadixTabs.List>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitives.List
+  <RadixTabs.List
    ref={ref}
    className={clx("flex items-center gap-2", className)}
    {...props}
@@ -48,10 +48,10 @@ const TabsList = React.forwardRef<
 TabsList.displayName = "Tabs.List"

 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitives.Content>
+  React.ElementRef<typeof RadixTabs.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitives.Content
+  <RadixTabs.Content
    ref={ref}
    className={clx("outline-none", className)}
    {...props}
--- a/packages/design-system/ui/src/components/text/text.tsx
+++ b/packages/design-system/ui/src/components/text/text.tsx
@@ -1,5 +1,5 @@
-import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "cva"
+import { Slot } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -130,7 +130,7 @@ const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
    }: TextProps,
    ref
  ) => {
-    const Component = asChild ? Slot : as
+    const Component = asChild ? Slot.Root : as

    return (
      <Component
--- a/packages/design-system/ui/src/components/textarea/textarea.tsx
+++ b/packages/design-system/ui/src/components/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"

+import { inputBaseStyles } from "@/components/input"
 import { clx } from "@/utils/clx"
-import { inputBaseStyles } from "../input"

 /**
 * This component is based on the `textarea` element and supports all of its props
--- a/packages/design-system/ui/src/components/toast/toast.tsx
+++ b/packages/design-system/ui/src/components/toast/toast.tsx
@@ -7,11 +7,11 @@ import {
  XMark,
 } from "@medusajs/icons"
 import * as React from "react"
+import { toast } from "sonner"

+import { IconButton } from "@/components/icon-button"
 import type { ToastAction, ToastVariant } from "@/types"
 import { clx } from "@/utils/clx"
-import { toast } from "sonner"
-import { IconButton } from "../icon-button"

 interface ToastComponentProps {
  id: string | number
--- a/packages/design-system/ui/src/components/tooltip/tooltip.tsx
+++ b/packages/design-system/ui/src/components/tooltip/tooltip.tsx
@@ -1,14 +1,14 @@
 "use client"

-import * as Primitives from "@radix-ui/react-tooltip"
+import { Tooltip as RadixTooltip } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"

 interface TooltipProps
-  extends Omit<Primitives.TooltipContentProps, "content" | "onClick">,
+  extends Omit<RadixTooltip.TooltipContentProps, "content" | "onClick">,
    Pick<
-      Primitives.TooltipProps,
+      RadixTooltip.TooltipProps,
      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
    > {
  content: React.ReactNode
@@ -40,17 +40,17 @@ const Tooltip = ({
  ...props
 }: TooltipProps) => {
  return (
-      <Primitives.Root
+      <RadixTooltip.Root
        open={open}
        defaultOpen={defaultOpen}
        onOpenChange={onOpenChange}
        delayDuration={delayDuration}
      >
-        <Primitives.Trigger onClick={onClick} asChild>
+        <RadixTooltip.Trigger onClick={onClick} asChild>
          {children}
-        </Primitives.Trigger>
-        <Primitives.Portal>
-          <Primitives.Content
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
            side={side}
            sideOffset={sideOffset}
            align="center"
@@ -63,19 +63,19 @@ const Tooltip = ({
            style={{ ...props.style, maxWidth }}
          >
            {content}
-          </Primitives.Content>
-        </Primitives.Portal>
-      </Primitives.Root>
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
  )
 }

-interface TooltipProviderProps extends Primitives.TooltipProviderProps {}
+interface TooltipProviderProps extends RadixTooltip.TooltipProviderProps {}

 const TooltipProvider = ({ children, delayDuration = 100, skipDelayDuration = 300, ...props }: TooltipProviderProps) => {
  return (
-    <Primitives.TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props}>
+    <RadixTooltip.TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props}>
      {children}
-    </Primitives.TooltipProvider>
+    </RadixTooltip.TooltipProvider>
  )
 }