feat: Replace all toasts with sonner (#28250)

* Update the design of the sonner toasts. Add the close button by default.

* Migrate studio and www apps to use the SonnerToaster.

* Migrate all toasts from studio.

* Migrate all leftover toasts in studio.

* Add a new toast component with progress. Use it in studio.

* Migrate the design-system app.

* Refactor the consent toast to use sonner.

* Switch docs to use the new sonner toasts.

* Remove toast examples from the design-system app.

* Remove all toast-related components and old code.

* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.

* Fix the width of the toast progress.

* Use text-foreground-lighter instead of muted for ToastProgress text

* Rename ToastProgress to SonnerProgress.

* Shorten the text in sonner progress.

* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.

* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).

* Fix the playwright tests.

* Refactor imports to use ui instead of @ui.

* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.

* Remove react-hot-toast lib.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

apps/design-system/__registry__/index.tsx

@@ -1303,61 +1303,6 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "toast-demo": {
-      name: "toast-demo",
-      type: "components:example",
-      registryDependencies: ["toast"],
-      component: React.lazy(() => import("@/registry/default/example/toast-demo")),
-      source: "",
-      files: ["registry/default/example/toast-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "toast-destructive": {
-      name: "toast-destructive",
-      type: "components:example",
-      registryDependencies: ["toast"],
-      component: React.lazy(() => import("@/registry/default/example/toast-destructive")),
-      source: "",
-      files: ["registry/default/example/toast-destructive.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "toast-simple": {
-      name: "toast-simple",
-      type: "components:example",
-      registryDependencies: ["toast"],
-      component: React.lazy(() => import("@/registry/default/example/toast-simple")),
-      source: "",
-      files: ["registry/default/example/toast-simple.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "toast-with-action": {
-      name: "toast-with-action",
-      type: "components:example",
-      registryDependencies: ["toast"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-action")),
-      source: "",
-      files: ["registry/default/example/toast-with-action.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "toast-with-title": {
-      name: "toast-with-title",
-      type: "components:example",
-      registryDependencies: ["toast"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-title")),
-      source: "",
-      files: ["registry/default/example/toast-with-title.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
     "toggle-group-demo": {
       name: "toggle-group-demo",
       type: "components:example",

apps/design-system/app/layout.tsx

@@ -2,7 +2,6 @@ import '@/styles/globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
-import { Toaster } from 'ui'
 import { SonnerToaster } from './SonnerToast'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -29,7 +28,6 @@ export default async function Layout({ children }: RootLayoutProps) {
           <div vaul-drawer-wrapper="">
             <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
           </div>
-          <Toaster />
           <SonnerToaster />
         </ThemeProvider>
       </body>

apps/design-system/content/docs/components/toast.mdx

@@ -1,155 +0,0 @@
----
-title: Toast
-description: A succinct message that is displayed temporarily.
-component: true
-links:
-  doc: https://www.radix-ui.com/docs/primitives/components/toast
-  api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
-source:
-  shadcn: true
----
-
-<ComponentPreview name="toast-demo" peekCode wide />
-
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-<Steps>
-
-<Step>Run the following command:</Step>
-
-```bash
-npx shadcn-ui@latest add toast
-```
-
-<Step>Add the Toaster component</Step>
-
-```tsx title="app/layout.tsx" {1,9}
-import { Toaster } from '@/components/ui/toaster'
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <head />
-      <body>
-        <main>{children}</main>
-        <Toaster />
-      </body>
-    </html>
-  )
-}
-```
-
-</Steps>
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @radix-ui/react-toast
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-`toast.tsx`
-
-<ComponentSource name="toast" />
-
-`toaster.tsx`
-
-<ComponentSource name="toast" fileName="toaster" />
-
-`use-toast.tsx`
-
-<ComponentSource name="toast" fileName="use-toast" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-<Step>Add the Toaster component</Step>
-
-```tsx title="app/layout.tsx" {1,9}
-import { Toaster } from '@/components/ui/toaster'
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <head />
-      <body>
-        <main>{children}</main>
-        <Toaster />
-      </body>
-    </html>
-  )
-}
-```
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
-## Usage
-
-The `useToast` hook returns a `toast` function that you can use to display a toast.
-
-```tsx
-import { useToast } from '@/components/ui/use-toast'
-```
-
-```tsx {2,7-10}
-export const ToastDemo = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      onClick={() => {
-        toast({
-          title: 'Scheduled: Catch up',
-          description: 'Friday, February 10, 2023 at 5:57 PM',
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-```
-
-<Callout>
-
-To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`.
-
-</Callout>
-
-## Examples
-
-### Simple
-
-<ComponentPreview name="toast-simple" />
-
-### With title
-
-<ComponentPreview name="toast-with-title" />
-
-### With Action
-
-<ComponentPreview name="toast-with-action" />
-
-### Destructive
-
-Use `toast({ variant: "destructive" })` to display a destructive toast.
-
-<ComponentPreview name="toast-destructive" />

apps/design-system/registry/default/example/calendar-form.tsx

@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
 import {
+  Button,
+  Calendar,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -17,9 +18,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   dob: z.date({
@@ -33,8 +35,7 @@ export default function CalendarForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/calendar-react-hook-form.tsx

@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
 import {
+  Button,
+  Calendar,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -17,9 +18,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   dob: z.date({
@@ -33,8 +35,7 @@ export default function CalendarForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/checkbox-form-multiple.tsx

@@ -2,11 +2,12 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
-import { Checkbox_Shadcn_ } from 'ui'
 import {
+  Button,
+  Checkbox_Shadcn_,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -15,7 +16,6 @@ import {
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const items = [
   {
@@ -59,8 +59,7 @@ export default function CheckboxReactHookFormMultiple() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/checkbox-form-single.tsx

@@ -1,22 +1,21 @@
 'use client'
 
-import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
-import { Checkbox_Shadcn_ } from 'ui'
 import {
+  Button,
+  Checkbox_Shadcn_,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   mobile: z.boolean().default(false).optional(),
@@ -31,8 +30,7 @@ export default function CheckboxReactHookFormSingle() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/combobox-form.tsx

@@ -3,11 +3,12 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
@@ -23,9 +24,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const languages = [
   { label: 'English', value: 'en' },
@@ -51,8 +53,7 @@ export default function ComboboxForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/date-picker-form.tsx

@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
 import {
+  Button,
+  Calendar,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -17,9 +18,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   dob: z.date({
@@ -33,8 +35,7 @@ export default function DatePickerForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/input-form.tsx

@@ -2,10 +2,11 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -13,9 +14,8 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Input,
 } from 'ui'
-import { Input } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   username: z.string().min(2, {
@@ -32,8 +32,7 @@ export default function InputForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/input-otp-form.tsx

@@ -2,10 +2,11 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -13,9 +14,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
 } from 'ui'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   pin: z.string().min(6, {
@@ -32,8 +34,7 @@ export default function InputOTPForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/multi-select-form.tsx

@@ -1,5 +1,20 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import Image from 'next/image'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import z from 'zod'
+
+import {
+  Button,
+  Form_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
 import {
   MultiSelector,
   MultiSelectorContent,
@@ -8,21 +23,6 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
-import {
-  Form_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
-  useToast,
-} from 'ui'
-import z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { toast } from 'ui'
-import { Button } from 'ui'
-import Image from 'next/image'
 
 const form = z.object({
   value: z.array(z.string()).nonempty('Please select at least one person'),
@@ -51,12 +51,8 @@ const MultiSelectZod = () => {
     defaultValues: form.parse({ value: [users[0].name] }),
   })
 
-  const { toast } = useToast()
   const onSubmit = (data: Form) => {
-    toast({
-      title: 'Form submitted ',
-      description: JSON.stringify(data, null, 2),
-    })
+    toast('Form submitted ', { description: JSON.stringify(data, null, 2) })
   }
 
   return (

apps/design-system/registry/default/example/radio-group-card-form.tsx

@@ -2,18 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, RadioGroupCard, RadioGroupCardItem } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroupCard,
+  RadioGroupCardItem,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +30,7 @@ export default function RadioGroupForm() {
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     console.log(JSON.stringify(data, null, 2))
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/radio-group-form.tsx

@@ -2,19 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroup_Shadcn_,
+  RadioGroupItem_Shadcn_,
 } from 'ui'
-import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +29,7 @@ export default function RadioGroupForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/radio-group-stacked-form.tsx

@@ -2,18 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, RadioGroupStacked, RadioGroupStackedItem } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroupStacked,
+  RadioGroupStackedItem,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +30,7 @@ export default function RadioGroupForm() {
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     console.log(JSON.stringify(data, null, 2))
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/select-form.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -14,15 +15,12 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
-} from 'ui'
-import {
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   email: z
@@ -38,8 +36,7 @@ export default function SelectForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/sonner-upload.tsx

@@ -1,11 +1,8 @@
 import { Check, Loader2 } from 'lucide-react'
-import { useState } from 'react'
 import { toast } from 'sonner'
 import { Button, Progress } from 'ui'
 
 export default function SonnerUpload() {
-  const [isUploading, setIsUploadingState] = useState(false)
-
   const uploadPromise = (files: number, toastId: number) => {
     toast.loading(<UploadContent progress={0} files={files} />, {
       id: toastId,
@@ -70,14 +67,12 @@ export default function SonnerUpload() {
           const max = 20 // specify the maximum value
           const files = Math.floor(Math.random() * max)
           try {
-            setIsUploadingState(true)
             const promise = await uploadPromise(files, toastId)
             // @ts-expect-error
             toast.success(<UploadContent progress={promise.progress} files={promise.files} />, {
               duration: 2000,
               id: toastId,
             })
-            setIsUploadingState(false)
           } catch (error) {}
         }}
       >

apps/design-system/registry/default/example/switch-form.tsx

@@ -2,19 +2,19 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
 import {
-  Form,
+  Button,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
+  Switch,
 } from 'ui'
-import { Switch } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   marketing_emails: z.boolean().default(false).optional(),
@@ -30,8 +30,7 @@ export default function SwitchForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalPrimary = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalPrimary = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithCancelButton = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithCancelButton = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx

@@ -1,16 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-import { Button, useToast } from 'ui'
 import { UserPlus } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithChildren = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -20,10 +20,7 @@ const TextConfirmModalWithChildren = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithDestructiveAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithDestructiveAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithInfoAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithInfoAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithSize = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithSize = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 

apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithWarningAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,8 +19,7 @@ const TextConfirmModalWithWarningAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
+      toast('Updated project', {
         description: 'Friday, February 10, 2023 at 5:57 PM',
       })
     }, 3000)

apps/design-system/registry/default/example/textarea-form.tsx

@@ -2,20 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
 import {
-  Form,
+  Button,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Textarea,
 } from 'ui'
-import { Textarea } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   bio: z
@@ -34,8 +34,7 @@ export default function TextareaForm() {
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>

apps/design-system/registry/default/example/toast-demo.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastDemo() {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      type="outline"
-      onClick={() => {
-        toast({
-          title: 'Scheduled: Catch up ',
-          description: 'Friday, February 10, 2023 at 5:57 PM',
-          action: <ToastAction altText="Goto schedule to undo">Undo</ToastAction>,
-        })
-      }}
-    >
-      Add to calendar
-    </Button>
-  )
-}

apps/design-system/registry/default/example/toast-destructive.tsx

@@ -1,25 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastDestructive() {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      type="outline"
-      onClick={() => {
-        toast({
-          variant: 'destructive',
-          title: 'Uh oh! Something went wrong.',
-          description: 'There was a problem with your request.',
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}

apps/design-system/registry/default/example/toast-simple.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastSimple() {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      type="outline"
-      onClick={() => {
-        toast({
-          description: 'Your message has been sent.',
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}

apps/design-system/registry/default/example/toast-with-action.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastWithAction() {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      type="outline"
-      onClick={() => {
-        toast({
-          title: 'Uh oh! Something went wrong.',
-          description: 'There was a problem with your request.',
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}

apps/design-system/registry/default/example/toast-with-title.tsx

@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastWithTitle() {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      type="outline"
-      onClick={() => {
-        toast({
-          title: 'Uh oh! Something went wrong.',
-          description: 'There was a problem with your request.',
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}

apps/design-system/registry/examples.ts

@@ -791,36 +791,6 @@ export const examples: Registry = [
     registryDependencies: ['textarea', 'label'],
     files: ['example/textarea-with-text.tsx'],
   },
-  {
-    name: 'toast-demo',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-demo.tsx'],
-  },
-  {
-    name: 'toast-destructive',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-destructive.tsx'],
-  },
-  {
-    name: 'toast-simple',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-simple.tsx'],
-  },
-  {
-    name: 'toast-with-action',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-with-action.tsx'],
-  },
-  {
-    name: 'toast-with-title',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-with-title.tsx'],
-  },
   {
     name: 'toggle-group-demo',
     type: 'components:example',

apps/docs/features/app.providers.tsx

@@ -1,9 +1,9 @@
-import { CommandProvider } from '@ui-patterns/CommandMenu'
-import { ThemeProvider } from 'common'
-import { PortalToast } from 'ui'
-import { PromoToast } from 'ui-patterns'
 import { type PropsWithChildren } from 'react'
 
+import { ThemeProvider } from 'common'
+import { SonnerToaster } from 'ui'
+import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { PromoToast } from 'ui-patterns/PromoToast'
 import SiteLayout from '~/layouts/SiteLayout'
 import { AuthContainer } from './auth/auth.client'
 import { DocsCommandMenu } from './command'
@@ -25,7 +25,6 @@ function GlobalProviders({ children }: PropsWithChildren) {
           <CommandProvider>
             <div className="flex flex-col">
               <SiteLayout>
-                <PortalToast />
                 <PromoToast />
                 {children}
                 <DocsCommandMenu />
@@ -33,6 +32,7 @@ function GlobalProviders({ children }: PropsWithChildren) {
               <ThemeSandbox />
             </div>
           </CommandProvider>
+          <SonnerToaster position="top-right" />
         </ThemeProvider>
       </AuthContainer>
     </QueryClientProvider>

apps/docs/features/helpers.consent.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useConsent } from 'ui-patterns/ConsentToast'
+
+/**
+ * Helper client component to trigger the consent toast. It has to be a client component.
+ */
+export const TriggerConsentToast = () => {
+  const { triggerConsentToast } = useConsent()
+  useEffect(() => {
+    setTimeout(() => triggerConsentToast(), 1000)
+  }, [triggerConsentToast])
+  return null
+}

apps/studio/components/grid/components/editor/JsonEditor.tsx

@@ -3,7 +3,7 @@ import { isNil } from 'lodash'
 import { Maximize } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import type { RenderEditCellProps } from 'react-data-grid'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useTrackedState } from 'components/grid/store/Store'

apps/studio/components/grid/components/editor/TextEditor.tsx

@@ -2,7 +2,7 @@ import { PostgresTable } from '@supabase/postgres-meta'
 import { Maximize } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import type { RenderEditCellProps } from 'react-data-grid'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useGetCellValueMutation } from 'data/table-rows/get-cell-value-mutation'

apps/studio/components/grid/components/header/Header.tsx

@@ -5,7 +5,7 @@ import saveAs from 'file-saver'
 import { ArrowUp, ChevronDown, Download, FileText, Trash, X } from 'lucide-react'
 import Papa from 'papaparse'
 import { ReactNode, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useDispatch, useTrackedState } from 'components/grid/store/Store'
 import type { Filter, Sort, SupaTable } from 'components/grid/types'

apps/studio/components/interfaces/Account/AccessTokenList.tsx

@@ -2,7 +2,7 @@ import { useAccessTokenDeleteMutation } from 'data/access-tokens/access-tokens-d
 import { AccessToken, useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
 import { Trash } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Table from 'components/to-be-cleaned/Table'
 import { Button } from 'ui'

apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx

@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
-import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 import { useSendSupportTicketMutation } from 'data/feedback/support-ticket-send'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'

apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   FormControl_Shadcn_,
   FormField_Shadcn_,

apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
-import { Input, Modal } from 'ui'
+import { toast } from 'sonner'
+import { Input } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import InformationBox from 'components/ui/InformationBox'

apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx

@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useMfaUnenrollMutation } from 'data/profile/mfa-unenroll-mutation'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'

apps/studio/components/interfaces/App/RouteValidationWrapper.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'

apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { boolean, number, object, string } from 'yup'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx

@@ -2,8 +2,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Check, ChevronUp, ExternalLink } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import type { components } from 'data/api'

apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { ExternalLink, Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { boolean, number, object, string } from 'yup'
 
 import { useParams } from 'common'
@@ -27,8 +27,8 @@ import {
   Input,
   InputNumber,
   Toggle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui'
 import FormField from '../AuthProvidersForm/FormField'
 
 // Use a const string to represent no chars option. Represented as empty string on the backend side.

apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import CodeEditor from 'components/ui/CodeEditor/CodeEditor'

apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx

@@ -3,8 +3,8 @@ import { X } from 'lucide-react'
 import randomBytes from 'randombytes'
 import { useEffect, useMemo } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'

apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/index.tsx

@@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   Checkbox_Shadcn_,

apps/studio/components/interfaces/Auth/Policies/Policies.tsx

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash'
 import { HelpCircle } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import PolicyTableRow from 'components/interfaces/Auth/Policies/PolicyTableRow'

apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx

@@ -1,6 +1,6 @@
 import { isEmpty, noop } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'

apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx

@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'

apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { number, object, string } from 'yup'
 
 import { Markdown } from 'components/interfaces/Markdown'

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { AlertTriangle, Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Loader2 } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'

apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx

@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Lock, Mail } from 'lucide-react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useUserCreateMutation } from 'data/auth/user-create-mutation'

apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Mail } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useUserInviteMutation } from 'data/auth/user-invite-mutation'

apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx

@@ -1,6 +1,6 @@
 import { Mail, MoreHorizontal, ShieldOff, Trash, User as UserIcon } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useUserDeleteMFAFactorsMutation } from 'data/auth/user-delete-mfa-factors-mutation'

apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx

@@ -3,7 +3,7 @@ import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useOrganizationPaymentMethodSetupIntent } from 'data/organizations/organization-payment-method-setup-intent-mutation'

apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx

@@ -4,7 +4,7 @@ import { organizationKeys } from 'data/organizations/keys'
 import { useOrganizationPaymentMethodMarkAsDefaultMutation } from 'data/organizations/organization-payment-method-default-mutation'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Checkbox_Shadcn_, Label_Shadcn_, Modal } from 'ui'
 
 interface AddPaymentMethodFormProps {

apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -4,7 +4,7 @@ import { ExternalLink, MessageCircle } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'

apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -15,8 +15,8 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { PropsWithChildren, ReactNode, useState } from 'react'
-import toast from 'react-hot-toast'
 import { useInView } from 'react-intersection-observer'
+import { toast } from 'sonner'
 
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useBranchQuery } from 'data/branches/branch-query'

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -4,7 +4,7 @@ import { Check, ExternalLink, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import AlertError from 'components/ui/AlertError'

apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx

@@ -4,17 +4,17 @@ import { PlusIcon } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { FormMessage } from '@ui/components/shadcn/ui/form'
-import { useParams } from 'common'
-import { Button, FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Modal } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { Input } from '@ui/components/shadcn/ui/input'
+import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useCreateCollection } from 'data/analytics/warehouse-collections-create-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { Button, FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Modal } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 export const CreateWarehouseCollectionModal = () => {
   const [isOpen, setIsOpen] = useState(false)

apps/studio/components/interfaces/DataWarehouse/WarehouseAccessTokens.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { MoreVertical, TrashIcon } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { TooltipContent } from '@radix-ui/react-tooltip'
 import { useParams } from 'common'

apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { FormMessage } from '@ui/components/shadcn/ui/form'
@@ -15,7 +15,6 @@ import { useUpdateCollection } from 'data/analytics/warehouse-collections-update
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import {
   Button,
-  Checkbox_Shadcn_,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -23,7 +22,6 @@ import {
   DropdownMenuTrigger,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  FormLabel_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
   Modal,

apps/studio/components/interfaces/Database/Backups/BackupsList.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { Clock } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Panel from 'components/ui/Panel'

apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useEffect, useRef } from 'react'
 import { DragDropContext, Droppable, DroppableProvided } from 'react-beautiful-dnd'
 import { useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,

apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx

@@ -1,15 +1,7 @@
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  IconAlertTriangle,
-  Modal,
-} from 'ui'
-
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { useEnumeratedTypeDeleteMutation } from 'data/enumerated-types/enumerated-type-delete-mutation'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 interface DeleteEnumeratedTypeModalProps {
   visible: boolean

apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useEffect, useRef } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,

apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx

@@ -1,7 +1,7 @@
 import type { PostgresExtension } from '@supabase/postgres-meta'
 import { ExternalLinkIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'

apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Book, Github, Loader2, Settings } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useDatabaseExtensionDisableMutation } from 'data/database-extensions/database-extension-disable-mutation'
@@ -111,10 +111,10 @@ const ExtensionCard = ({ extension }: ExtensionCardProps) => {
                   extensionMeta?.link.startsWith('/guides')
                     ? siteUrl === 'http://localhost:8082'
                       ? `http://localhost:3001/docs${
-                          extensions.find((item: any) => item.name === extension.name)?.link
+                          extensions.find((item) => item.name === extension.name)?.link
                         }`
                       : `https://supabase.com/docs${
-                          extensions.find((item: any) => item.name === extension.name)?.link
+                          extensions.find((item) => item.name === extension.name)?.link
                         }`
                     : extensions.find((item: any) => item.name === extension.name)?.link ?? ''
                 }

apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx

@@ -3,7 +3,7 @@ import { isEmpty, isNull, keyBy, mapValues, partition } from 'lodash'
 import { Plus, Trash } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import z from 'zod'
 
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'

apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx

@@ -1,9 +1,9 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation'
 import { DatabaseFunction } from 'data/database-functions/database-functions-query'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteFunctionProps {
   func?: DatabaseFunction

apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx

@@ -1,9 +1,9 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteHookModalProps {
   visible: boolean

apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx

@@ -1,7 +1,7 @@
 import type { PostgresTable, PostgresTrigger } from '@supabase/postgres-meta'
 import Image from 'next/legacy/image'
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx

@@ -1,7 +1,7 @@
 import { Check, ChevronsUpDown } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import CodeEditor from 'components/ui/CodeEditor/CodeEditor'

apps/studio/components/interfaces/Database/Indexes/Indexes.tsx

@@ -1,6 +1,6 @@
 import { partition, sortBy } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, IconAlertCircle, IconSearch, Input, Toggle } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 

apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx

@@ -7,7 +7,7 @@ import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectConte
 import Table from 'components/to-be-cleaned/Table'
 import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 interface PublicationsTableItemProps {
   table: PostgresTable

apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import z from 'zod'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx

@@ -1,5 +1,5 @@
 import type { PostgresRole } from '@supabase/postgres-meta'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Roles/RoleRow.tsx

@@ -1,6 +1,6 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   Collapsible,
@@ -17,8 +17,8 @@ import {
 } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { PgRole } from 'data/database-roles/database-roles-query'
 import { useDatabaseRoleUpdateMutation } from 'data/database-roles/database-role-update-mutation'
+import { PgRole } from 'data/database-roles/database-roles-query'
 import { ROLE_PERMISSIONS } from './Roles.constants'
 
 interface RoleRowProps {

apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx

@@ -2,8 +2,8 @@ import { has, isEmpty, mapValues, union, without } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { createContext, useContext, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
 import SVG from 'react-inlinesvg'
+import { toast } from 'sonner'
 import {
   Badge,
   Button,
@@ -13,7 +13,6 @@ import {
   IconTerminal,
   Input,
   Listbox,
-  Modal,
   SidePanel,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'

apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx

@@ -1,8 +1,8 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteTriggerProps {
   trigger?: any

apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx

@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx

@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx

@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx

@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'

apps/studio/components/interfaces/Docs/Description.tsx

@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AutoTextArea from 'components/to-be-cleaned/forms/AutoTextArea'

apps/studio/components/interfaces/Docs/GeneratingTypes.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx

@@ -6,7 +6,7 @@ import { ExternalLink, Maximize2, Minimize2, Terminal } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FormActions } from 'components/ui/Forms/FormActions'

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretModal.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Form, IconEye, IconEyeOff, Input, Modal } from 'ui'
 
 import { useSecretsCreateMutation } from 'data/secrets/secrets-create-mutation'

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { ExternalLink, Search } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'

apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx

@@ -2,7 +2,7 @@ import { ChevronDown, Loader2, RefreshCw, Trash } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef, useCallback, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   IntegrationConnection,