[Design system] Feat/sonner (#27382)

* fix toast examples

* add sonner stuff

* new sonner examples added

* updated

* add upload POC

* add

* Update sonner-upload.tsx

* move statusicons

* Minor fix.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/design-system/__registry__/index.tsx

@@ -1160,6 +1160,39 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "sonner-demo": {
+      name: "sonner-demo",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-demo")),
+      source: "",
+      files: ["registry/default/example/sonner-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sonner-types": {
+      name: "sonner-types",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-types")),
+      source: "",
+      files: ["registry/default/example/sonner-types.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sonner-upload": {
+      name: "sonner-upload",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-upload")),
+      source: "",
+      files: ["registry/default/example/sonner-upload.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "switch-demo": {
       name: "switch-demo",
       type: "components:example",

apps/design-system/app/SonnerToast.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { useConfig } from '@/hooks/use-config'
+import { SonnerToaster as Toaster } from 'ui'
+
+export function SonnerToaster() {
+  const [config] = useConfig()
+  return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
+}

apps/design-system/app/layout.tsx

@@ -2,6 +2,8 @@ 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'] })
 
@@ -15,22 +17,16 @@ interface RootLayoutProps {
 }
 
 export default async function Layout({ children }: RootLayoutProps) {
-  // console.log('Root Layout mounted or re-rendered')
-
   return (
-    <html
-      // className="dark"
-      lang="en"
-      // data-theme="dark"
-      // style={{ colorScheme: 'dark' }}
-      suppressHydrationWarning
-    >
+    <html lang="en" suppressHydrationWarning>
       <head />
       <body className={inter.className}>
         <ThemeProvider themes={['dark', 'light', 'deep-dark']} defaultTheme="system" enableSystem>
           <div vaul-drawer-wrapper="">
             <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
           </div>
+          <Toaster />
+          <SonnerToaster />
         </ThemeProvider>
       </body>
     </html>

apps/design-system/components/mdx-components.tsx

@@ -44,6 +44,8 @@ import { Icons } from '@/components/icons'
 import { ThemeSettings } from '@/components/theme-settings'
 import { CodeFragment } from '@/components/code-fragment'
 import { Admonition } from 'ui-patterns/admonition'
+import { SonnerExpandConfig } from './sonner-expand-config'
+import { SonnerPositionConfig } from './sonner-expand-position'
 
 const components = {
   Accordion,
@@ -273,6 +275,8 @@ const components = {
   ThemeSettings,
   CodeFragment,
   Admonition,
+  SonnerExpandConfig,
+  SonnerPositionConfig,
 }
 
 interface MdxProps {

apps/design-system/components/sonner-expand-config.tsx

@@ -0,0 +1,37 @@
+import { useConfig } from '@/hooks/use-config'
+import { Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+function SonnerExpandConfig() {
+  const [config, setConfig] = useConfig()
+
+  return (
+    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
+      <form>
+        <FormItemLayout
+          name="sonnerExpand"
+          id="sonnerExpand"
+          isReactForm={false}
+          label="Use expand prop"
+          description="You will need to fire a few Sonner toasts first"
+          layout="flex"
+        >
+          <Switch
+            name="sonnerExpand"
+            id="sonnerExpand"
+            size="large"
+            checked={config.sonnerExpand}
+            onCheckedChange={(e) =>
+              setConfig({
+                ...config,
+                sonnerExpand: e,
+              })
+            }
+          />
+        </FormItemLayout>
+      </form>
+    </div>
+  )
+}
+
+export { SonnerExpandConfig }

apps/design-system/components/sonner-expand-position.tsx

@@ -0,0 +1,70 @@
+import { useConfig } from '@/hooks/use-config'
+import { ComponentProps } from 'react'
+import {
+  SelectContent_Shadcn_,
+  SelectGroup_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectLabel_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+  Select_Shadcn_,
+  SonnerToaster,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+function SonnerPositionConfig() {
+  const [config, setConfig] = useConfig()
+
+  type Position = NonNullable<ComponentProps<typeof SonnerToaster>['position']>
+
+  const positions: Position[] = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'top-center',
+    'bottom-center',
+  ]
+
+  return (
+    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
+      <form>
+        <FormItemLayout
+          name="sonnerExpand"
+          id="sonnerExpand"
+          isReactForm={false}
+          label="Use position prop"
+          description="You will need to fire a few Sonner toasts first"
+          layout="flex"
+        >
+          <Select_Shadcn_
+            value={config.sonnerPosition}
+            defaultValue={config.sonnerPosition}
+            onValueChange={(e: Position) => {
+              setConfig({
+                ...config,
+                sonnerPosition: e,
+              })
+            }}
+          >
+            <SelectTrigger_Shadcn_ className="w-[180px]">
+              <SelectValue_Shadcn_ placeholder="Select a position" />
+            </SelectTrigger_Shadcn_>
+            <SelectContent_Shadcn_>
+              <SelectGroup_Shadcn_>
+                <SelectLabel_Shadcn_>Positions available</SelectLabel_Shadcn_>
+                {positions.map((position) => (
+                  <SelectItem_Shadcn_ key={position} value={position}>
+                    {position}
+                  </SelectItem_Shadcn_>
+                ))}
+              </SelectGroup_Shadcn_>
+            </SelectContent_Shadcn_>
+          </Select_Shadcn_>
+        </FormItemLayout>
+      </form>
+    </div>
+  )
+}
+
+export { SonnerPositionConfig }

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

@@ -16,46 +16,6 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal
 
 ## 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 sonner
-```
-
-<Step>Add the Toaster component</Step>
-
-```tsx title="app/layout.tsx" {1,9}
-import { Toaster } from '@/components/ui/sonner'
-
-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>
@@ -88,10 +48,6 @@ export default function RootLayout({ children }) {
 
 </Steps>
 
-</TabsContent>
-
-</Tabs>
-
 ## Usage
 
 ```tsx
@@ -101,3 +57,41 @@ import { toast } from 'sonner'
 ```tsx
 toast('Event has been created.')
 ```
+
+## Expand
+
+You can change the amount of toasts visible through the visibleToasts prop.
+
+```tsx
+<Toaster expand={true | false} />
+```
+
+You can use the Input below to try it out.
+
+<SonnerExpandConfig />
+
+## Position
+
+You can change the amount of toasts visible through the visibleToasts prop.
+
+```tsx
+<Toaster
+  position={
+    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
+  }
+/>
+```
+
+You can use the Input below to try it out.
+
+<SonnerPositionConfig />
+
+## Types
+
+You can customize the type of toast you want to render, and pass an options object as the second argument.
+
+<ComponentPreview name="sonner-types" />
+
+## Upload example
+
+<ComponentPreview name="sonner-upload" />

apps/design-system/hooks/use-config.ts

@@ -1,22 +1,27 @@
-import { useAtom } from 'jotai'
-import { atomWithStorage } from 'jotai/utils'
-
-// import { BackendProvider } from '@/registry/backend-provider'
 import { Style } from '@/registry/styles'
 import { Theme } from '@/registry/themes'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { ComponentProps } from 'react'
+import { SonnerToaster } from 'ui'
+// import { BackendProvider } from '@/registry/backend-provider'
 
 type Config = {
   style: Style['name']
   theme: Theme['name']
   radius: number
+  sonnerPosition: ComponentProps<typeof SonnerToaster>['position']
+  sonnerExpand: boolean
   // backendProvider: BackendProvider['name'] | undefined
 }
 
 const configAtom = atomWithStorage<Config>('config', {
   style: 'default',
-  // backendProvider: 'nextjs-auth',
   theme: 'zinc',
   radius: 0.5,
+  sonnerPosition: 'bottom-right',
+  sonnerExpand: false,
+  // backendProvider: 'nextjs-auth',
 })
 
 export function useConfig() {

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

@@ -0,0 +1,21 @@
+import { toast } from 'sonner'
+import { Button } from 'ui'
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      type="default"
+      onClick={() =>
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          cancel: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { toast } from 'sonner'
+import { Button } from 'ui'
+
+export default function SonnerDemo() {
+  const promise = () =>
+    new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000))
+
+  return (
+    <div className="flex gap-1">
+      <Button type="default" onClick={() => toast('Event has been created')}>
+        Default
+      </Button>
+      <Button
+        type="default"
+        onClick={() =>
+          toast.message('Event has been created', {
+            description: 'Monday, January 3rd at 6:00pm',
+          })
+        }
+      >
+        description
+      </Button>
+      <Button
+        type="default"
+        onClick={() =>
+          toast.success('Event has been created', {
+            description: 'Sunday, December 03, 2023 at 9:00 AM',
+          })
+        }
+      >
+        Success
+      </Button>
+      <Button type="default" onClick={() => toast.success('Event has been created')}>
+        Show Toast
+      </Button>
+      <Button
+        type="default"
+        onClick={() => toast.info('Be at the area 10 minutes before the event time')}
+      >
+        Info
+      </Button>
+      <Button
+        type="warning"
+        onClick={() => toast.warning('Event start time cannot be earlier than 8am')}
+      >
+        Warning
+      </Button>
+      <Button type="danger" onClick={() => toast.error('Event has not been created')}>
+        Error
+      </Button>
+      <Button
+        type="primary"
+        onClick={() =>
+          toast('Event has been created', {
+            action: {
+              label: 'Action!',
+              onClick: () => console.log('Undo'),
+            },
+          })
+        }
+      >
+        Action
+      </Button>
+      <Button type="default" onClick={() => toast.loading('Event has been created')}>
+        Loading
+      </Button>
+      <Button
+        type="default"
+        onClick={() =>
+          toast.promise(promise, {
+            loading: 'Loading...',
+            success: (data) => {
+              // @ts-expect-error
+              return `${data.name} toast has been added`
+            },
+            error: 'Error',
+          })
+        }
+      >
+        Promise
+      </Button>
+      <Button
+        type="default"
+        onClick={() =>
+          toast(
+            <>
+              <div>A custom toast with default styling</div>
+              <Button type="default">Hello world</Button>
+            </>
+          )
+        }
+      >
+        Custom
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+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,
+    })
+
+    return new Promise((resolve) => {
+      let currentProgress = 0
+
+      toast.loading(<UploadContent progress={currentProgress} files={files} />, {
+        id: toastId,
+      })
+
+      const intervalId = setInterval(() => {
+        currentProgress += Math.floor(Math.random() * 10) + 1 // Increment progress by a random value
+        if (currentProgress > 100) currentProgress = 100 // Ensure progress does not exceed 100%
+
+        if (currentProgress >= 100) {
+          clearInterval(intervalId) // Clear the interval once upload is complete
+          resolve({ progress: currentProgress, message: 'Upload complete', files: 3, toastId }) // Resolve the promise when progress reaches 100
+        }
+
+        toast.loading(<UploadContent progress={currentProgress} files={files} />, {
+          id: toastId,
+        })
+      }, 200) // Adjust the interval time as needed
+    })
+  }
+
+  const UploadContent = ({ progress, files }: { progress: number; files: number }) => (
+    <div className="flex gap-3 w-full">
+      {progress >= 100 ? (
+        <Check className="text-foreground mt-0.5" size={16} strokeWidth={4} />
+      ) : (
+        <Loader2 className="animate-spin text-foreground-muted mt-0.5" size={16} />
+      )}
+      <div className="flex flex-col gap-2 w-full">
+        <div className="flex w-full justify-between">
+          <p className="text-foreground text-sm">
+            {progress >= 100
+              ? `Upload complete`
+              : files
+                ? `Uploading ${files} files...`
+                : `Uploading...`}
+          </p>
+          <p className="text-foreground-light text-sm font-mono">{`${progress}%`}</p>
+        </div>
+        <Progress value={progress} className="w-full" />
+        <small className="text-foreground-muted text-xs">
+          Please do not close the browser until completed
+        </small>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Button
+        type="default"
+        onClick={async () => {
+          // random id
+          const toastId = Math.random()
+          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) {}
+        }}
+      >
+        Start upload
+      </Button>
+    </div>
+  )
+}

apps/design-system/registry/examples.ts

@@ -713,12 +713,24 @@ export const examples: Registry = [
     registryDependencies: ['slider'],
     files: ['example/slider-demo.tsx'],
   },
-  // {
-  //   name: 'sonner-demo',
-  //   type: 'components:example',
-  //   registryDependencies: ['sonner'],
-  //   files: ['example/sonner-demo.tsx'],
-  // },
+  {
+    name: 'sonner-demo',
+    type: 'components:example',
+    registryDependencies: ['sonner'],
+    files: ['example/sonner-demo.tsx'],
+  },
+  {
+    name: 'sonner-types',
+    type: 'components:example',
+    registryDependencies: ['sonner'],
+    files: ['example/sonner-types.tsx'],
+  },
+  {
+    name: 'sonner-upload',
+    type: 'components:example',
+    registryDependencies: ['sonner'],
+    files: ['example/sonner-upload.tsx'],
+  },
   {
     name: 'switch-demo',
     type: 'components:example',

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

@@ -1,6 +1,6 @@
 import Panel from 'components/ui/Panel'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
-import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon } from 'ui'
 import { DeleteAccountButton } from './DeleteAccountButton'
 
 export const AccountDeletion = () => {

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

@@ -24,7 +24,7 @@ import {
   InputNumber,
   Toggle,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 const schema = object({
   JWT_EXP: number()

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

@@ -5,8 +5,13 @@ import { useParams } from 'common'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers/Shimmers'
 import { useAuthConfigQuery } from 'data/auth/auth-config-query'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  WarningIcon,
+} from 'ui'
 import { PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation'
 import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
 import ProviderForm from './ProviderForm'

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

@@ -21,8 +21,8 @@ import {
   Collapsible,
   Form,
   Input,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
 import type { Provider } from './AuthProvidersForm.types'
 import FormField from './FormField'

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

@@ -28,7 +28,7 @@ import {
   InputNumber,
   Toggle,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+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/Policies/PolicyTableRow/index.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import Panel from 'components/ui/Panel'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import PolicyRow from './PolicyRow'

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

@@ -27,8 +27,8 @@ import {
   FormItem_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils'
 
 const RateLimits = () => {

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

@@ -21,8 +21,8 @@ import {
   Form,
   Input,
   Modal,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { urlRegex } from '../Auth.constants'
 import RedirectUrlList from './RedirectUrlList'
 import ValueContainer from './ValueContainer'

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

@@ -25,8 +25,8 @@ import {
   Input,
   InputNumber,
   Toggle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import EmailRateLimitsAlert from '../EmailRateLimitsAlert'
 import { urlRegex } from './../Auth.constants'
 import { defaultDisabledSmtpFormValues } from './SmtpForm.constants'

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

@@ -1,7 +1,7 @@
 import type { BranchData } from 'data/branches/branch-query'
 import type { Branch } from 'data/branches/branches-query'
 import { Badge } from 'ui'
-import { StatusIcon } from 'ui-patterns/Icons/StatusIcons'
+import { StatusIcon } from 'ui'
 
 type Status = Branch['status'] | BranchData['status']
 

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

@@ -1,5 +1,5 @@
 import { AlertDescription_Shadcn_, Alert_Shadcn_ } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 const BackupsStorageAlert = () => {
   return (

apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx

@@ -26,8 +26,8 @@ import {
   Alert_Shadcn_,
   Button,
   Modal,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import BackupsEmpty from '../BackupsEmpty'
 import BackupsStorageAlert from '../BackupsStorageAlert'
 import type { Timezone } from './PITR.types'

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

@@ -19,8 +19,8 @@ import {
   Input,
   Listbox,
   Modal,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 interface EnableExtensionModalProps {
   visible: boolean

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

@@ -24,8 +24,8 @@ import {
   Button,
   Form,
   Input,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import InputField from './InputField'
 import WrapperTableEditor from './WrapperTableEditor'
 import { WRAPPERS } from './Wrappers.constants'

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

@@ -24,12 +24,12 @@ import {
   AlertTitle_Shadcn_,
   Alert_Shadcn_,
   Button,
+  CriticalIcon,
   Form,
   Input,
   Modal,
   Toggle,
 } from 'ui'
-import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons'
 import CommandRender from '../CommandRender'
 import { generateCLICommands } from './EdgeFunctionDetails.utils'
 

apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx

@@ -6,7 +6,6 @@ import { ArrowDown, ArrowUp, RefreshCw, User } from 'lucide-react'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { Alert, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
 
 import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
 import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
@@ -25,7 +24,14 @@ import { useOrganizationRolesQuery } from 'data/organizations/organization-roles
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import {
+  Alert,
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  WarningIcon,
+} from 'ui'
 
 // [Joshen considerations]
 // - Maybe fix the height of the table to the remaining height of the viewport, so that the search input is always visible

apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx

@@ -6,7 +6,7 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useOrgUsageQuery } from 'data/usage/org-usage-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon, WarningIcon } from 'ui'
 
 export const Restriction = () => {
   const org = useSelectedOrganization()

apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx

@@ -1,6 +1,6 @@
 import Panel from 'components/ui/Panel'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
-import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon } from 'ui'
 import DeleteOrganizationButton from './DeleteOrganizationButton'
 
 const OrganizationDeletePanel = () => {

apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx

@@ -38,9 +38,9 @@ import {
   TooltipContent_Shadcn_,
   TooltipTrigger_Shadcn_,
   Tooltip_Shadcn_,
+  WarningIcon,
   cn,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { useGetRolesManagementPermissions } from '../TeamSettings.utils'
 import { UpdateRolesConfirmationModal } from './UpdateRolesConfirmationModal'
 import {

apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanelOld.tsx

@@ -20,9 +20,9 @@ import {
   SheetContent,
   SheetFooter,
   SheetHeader,
+  WarningIcon,
   cn,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2'
 
 interface UpdateRolesPanelProps {

apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx

@@ -24,8 +24,8 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 interface HardenAPIModalProps {
   visible: boolean

apps/studio/components/interfaces/Settings/API/JWTSettings.tsx

@@ -38,9 +38,9 @@ import {
   DropdownMenuTrigger,
   Input,
   Modal,
+  WarningIcon,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import {
   JWT_SECRET_UPDATE_ERROR_MESSAGES,
   JWT_SECRET_UPDATE_PROGRESS_MESSAGES,

apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx

@@ -38,7 +38,7 @@ import {
   Skeleton,
   Switch,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,

apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx

@@ -24,18 +24,19 @@ import Telemetry from 'lib/telemetry'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import {
   Alert,
+  Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
-  Alert_Shadcn_,
   Badge,
   Button,
+  CriticalIcon,
   IconExternalLink,
   IconInfo,
   Modal,
   Radio,
   SidePanel,
+  WarningIcon,
 } from 'ui'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 const ComputeInstanceSidePanel = () => {
   const queryClient = useQueryClient()

apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx

@@ -32,7 +32,7 @@ import {
   SidePanel,
   cn,
 } from 'ui'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon, WarningIcon } from 'ui'
 
 const PITR_CATEGORY_OPTIONS: {
   id: 'off' | 'on'

apps/studio/components/interfaces/Settings/Database/DatabaseConnectionNotices.tsx

@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 export const IPv4DeprecationNotice = () => {
   return (

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx

@@ -15,7 +15,7 @@ import Telemetry from 'lib/telemetry'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { useDatabaseSettingsStateSnapshot } from 'state/database-settings'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Input } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import {
   DefaultSessionModeNotice,
   IPv4AddonDirectConnectionNotice,

apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx

@@ -25,7 +25,7 @@ import {
   InputNumber,
   Modal,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 export interface DiskSizeConfigurationProps {
   disabled?: boolean

apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx

@@ -16,7 +16,7 @@ import {
   IconHelpCircle,
   IconRefreshCw,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import DNSRecord from './DNSRecord'
 
 export type CustomDomainVerifyProps = {

apps/studio/components/interfaces/Settings/General/General.tsx

@@ -26,8 +26,8 @@ import {
   IconAlertCircle,
   IconBarChart2,
   Input,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import PauseProjectButton from './Infrastructure/PauseProjectButton'
 import RestartServerButton from './Infrastructure/RestartServerButton'
 

apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx

@@ -17,11 +17,11 @@ import {
   IconShield,
   IconTool,
   IconUsers,
+  InfoIcon,
   Listbox,
   Loading,
   Modal,
 } from 'ui'
-import { InfoIcon } from 'ui-patterns/Icons/StatusIcons'
 
 const TransferProjectButton = () => {
   const project = useSelectedProject()

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx

@@ -21,7 +21,7 @@ import {
   Listbox,
   SidePanel,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import { AVAILABLE_REPLICA_REGIONS, AWS_REGIONS_VALUES } from './InstanceConfiguration.constants'
 
 // [Joshen] FYI this is purely for AWS only, need to update to support Fly eventually

apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx

@@ -38,9 +38,9 @@ import {
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
   Switch,
+  WarningIcon,
   cn,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 interface GitHubIntegrationConnectionFormProps {
   disabled?: boolean

apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx

@@ -1,12 +1,11 @@
 import Link from 'next/link'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
 
 import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker'
 import SidePanelVercelProjectLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker'
 import { ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import { useProjectByRef, useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { BASE_PATH } from 'lib/constants'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, WarningIcon } from 'ui'
 import GitHubSection from './GithubIntegration/GithubSection'
 import VercelSection from './VercelIntegration/VercelSection'
 

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -28,8 +28,8 @@ import {
   Input,
   SidePanel,
   Toggle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import ActionBar from '../ActionBar'
 import type { ForeignKey } from '../ForeignKeySelector/ForeignKeySelector.types'
 import { formatForeignKeys } from '../ForeignKeySelector/ForeignKeySelector.utils'

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx

@@ -21,7 +21,7 @@ import {
   IconExternalLink,
   IconTrash,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import { generateColumnField } from '../ColumnEditor/ColumnEditor.utils'
 import { ForeignKeySelector } from '../ForeignKeySelector/ForeignKeySelector'
 import type { ForeignKey } from '../ForeignKeySelector/ForeignKeySelector.types'

apps/studio/components/layouts/AppLayout/RestrictionBanner.tsx

@@ -2,9 +2,8 @@ import dayjs from 'dayjs'
 import Link from 'next/link'
 
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { AlertTitle_Shadcn_, Alert_Shadcn_, Button, CriticalIcon, WarningIcon } from 'ui'
 
 /**
  * Shown on projects in organization which are above their qouta

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationRow.tsx

@@ -7,7 +7,7 @@ import { useInView } from 'react-intersection-observer'
 import { Button, IconArchive, IconExternalLink, cn } from 'ui'
 
 import { Markdown } from 'components/interfaces/Markdown'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon, WarningIcon } from 'ui'
 import type { ItemRenderer } from 'components/ui/InfiniteList'
 import { Notification, NotificationData } from 'data/notifications/notifications-v2-query'
 import { ProjectInfo } from 'data/projects/projects-query'

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx

@@ -18,7 +18,7 @@ import {
 } from 'ui'
 
 import { CommandGroup } from '@ui/components/shadcn/ui/command'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon, WarningIcon } from 'ui'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useNotificationsStateSnapshot } from 'state/notifications'

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx

@@ -12,7 +12,7 @@ import {
 } from 'ui'
 
 import AlertError from 'components/ui/AlertError'
-import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { CriticalIcon, WarningIcon } from 'ui'
 import InfiniteList from 'components/ui/InfiniteList'
 import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useNotificationsArchiveAllMutation } from 'data/notifications/notifications-v2-archive-all-mutation'

apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
-import { Button } from 'ui'
-import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons'
+import { Button, CriticalIcon } from 'ui'
 
 import { useProjectContext } from './ProjectContext'
 

apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx

@@ -31,7 +31,7 @@ import {
 } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import { useProjectContext } from './ProjectContext'
 import { RestorePaidPlanProjectNotice } from './RestorePaidPlanProjectNotice'
 

apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link'
-import { Button } from 'ui'
-import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons'
 
+import { Button, CriticalIcon } from 'ui'
 import { useProjectContext } from './ProjectContext'
 
 const RestoreFailedState = () => {

apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx

@@ -1,6 +1,11 @@
 import { ExternalLink } from 'lucide-react'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  WarningIcon,
+} from 'ui'
 
 export const RestorePaidPlanProjectNotice = () => {
   return (

apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx

@@ -18,8 +18,8 @@ import {
   HoverCard_Shadcn_,
   cn,
 } from 'ui'
-import { InnerSideMenuItem } from 'ui-patterns'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { InnerSideMenuItem } from 'ui-patterns/InnerSideMenu'
 import { QueryItemActions } from './QueryItemActions'
 
 export interface QueryItemProps {

apps/studio/components/to-be-cleaned/Charts/ChartHandler.tsx

@@ -12,7 +12,7 @@ import {
 import { useProjectDailyStatsQuery } from 'data/analytics/project-daily-stats-query'
 import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import type { ChartData } from './ChartHandler.types'
 
 interface ChartHandlerProps {

apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx

@@ -18,7 +18,7 @@ import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { AlertDescription_Shadcn_, Alert_Shadcn_, Button } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { CreateCredentialModal } from './CreateCredentialModal'
 import { RevokeCredentialModal } from './RevokeCredentialModal'

apps/studio/components/ui/AISettingsModal.tsx

@@ -12,8 +12,8 @@ import {
   Button,
   Modal,
   Toggle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 const AISettingsModal = () => {
   const snap = useAppStateSnapshot()

apps/studio/components/ui/AlertError.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 import type { ResponseError } from 'types'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 export interface AlertErrorProps {
   projectRef?: string

apps/studio/components/ui/ErrorBoundaryState.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import type { FallbackProps } from 'react-error-boundary'
 
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
+import { WarningIcon } from 'ui'
 
 export const ErrorBoundaryState = ({ error, resetErrorBoundary }: FallbackProps) => {
   const router = useRouter()

apps/www/public/sitemap_www.xml

@@ -61,13 +61,13 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/blog/</loc>
+    <loc>https://supabase.com/auth</loc>
     <changefreq>weekly</changefreq>
     <priority>0.5</priority>
   </url>
 
   <url>
-    <loc>https://supabase.com/auth</loc>
+    <loc>https://supabase.com/blog/</loc>
     <changefreq>weekly</changefreq>
     <priority>0.5</priority>
   </url>
@@ -1724,6 +1724,12 @@
     <priority>0.5</priority>
   </url>
 
+  <url>
+    <loc>https://supabase.com/blog/calcom-platform-starter-kit-nextjs-supabase</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+
   <url>
     <loc>https://supabase.com/customers/berriai</loc>
     <changefreq>weekly</changefreq>
@@ -1802,6 +1808,18 @@
     <priority>0.5</priority>
   </url>
 
+  <url>
+    <loc>https://supabase.com/customers/tinloof</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/customers/voypost</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+
   <url>
     <loc>https://supabase.com/customers/xendit</loc>
     <changefreq>weekly</changefreq>
@@ -1825,586 +1843,4 @@
     <changefreq>weekly</changefreq>
     <priority>0.5</priority>
   </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/appsmith</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/arengu</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/artie</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/auth0</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/authsignal</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/basedash</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/buster</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/clerk</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/cloudflare-workers</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/clutch</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/codesandbox</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/corbado</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/cyberduck</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/deepnote</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/dezbor</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/dhiwise</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/directus</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/doppler</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/draftbit</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/drapcode</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/draxlr</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/dronahq</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/electricsql</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/estuary</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/explo</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/fezto</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/flutterflow</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/forestadmin</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/getstream_io</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/illa</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/infisical</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/insightbase</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/internalio</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/jetadmin</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/keyri</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/litellm</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/n8n</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/nextauth</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/nuxt</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/onesignal</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/ory</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/passageidentity</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/pgmustard</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/picket</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/plasmic</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/powersync</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/prisma</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/react-admin</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/readyset</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/refine_dev</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/replibyte</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/replicache</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/resend</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/retool</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/risingwave</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/sequin_io</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/snaplet</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/stacksync</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/stormkit</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/streamlit</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/stytch</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/supabase_wrapper_bigquery</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/supabase_wrapper_firebase</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/supabase_wrapper_stripe</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/supertokens</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/tamagui-takeout</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/toddle</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/trevor_io</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/triggerdotdev</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/vercel</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/voltapp</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/weweb</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/windmill</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/yepcode</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/zapier</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/zapp_run</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/integrations/zuplo</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/antstack</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/arceptive</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/buildlab</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/calda</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/driglo</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/enginedigital</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/feelantera</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/jensenlabs</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/koptional</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/morrow</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/overcode</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/quinence</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/robkendal</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/solid_software</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/sunmoon</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/theodo</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/tinloof</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/uncommonpurpose</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/voypost</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/partners/experts/zerodays</loc>
-    <changefreq>weekly</changefreq>
-    <priority>0.5</priority>
-  </url>
 </urlset>

package-lock.json

@@ -37663,6 +37663,15 @@
         "swr-store": "^0.10"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz",
+      "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/sort-keys": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-5.0.0.tgz",
@@ -42962,6 +42971,7 @@
         "react-use": "^17.5.0",
         "reactflow": "^11.10.1",
         "remark-gfm": "^3.0.1",
+        "sonner": "^1.5.0",
         "sse.js": "^2.2.0",
         "tailwind-merge": "^1.13.2",
         "tailwindcss": "^3.4.1",

packages/ui-patterns/Cmdk/AiCommand.tsx

@@ -10,29 +10,26 @@ import {
   useRef,
   useState,
 } from 'react'
-
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { SSE } from 'sse.js'
 
+import { isBrowser } from 'common'
 import {
   AiIconAnimation,
   Button,
+  cn,
   IconCornerDownLeft,
   IconUser,
   Input,
   markdownComponents,
+  StatusIcon,
 } from 'ui'
+import { AiWarning } from './Command.alerts'
 import { AiIconChat } from './Command.icons'
 import { CommandGroup, CommandItem, useAutoInputFocus, useHistoryKeys } from './Command.utils'
-
-import { AiWarning } from './Command.alerts'
 import { useCommandMenu } from './CommandMenuContext'
 
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { cn } from 'ui/src/lib/utils'
-import { StatusIcon } from '../Icons/StatusIcons'
-import { isBrowser } from 'common'
-
 const questions = [
   'How do I get started with Supabase?',
   'How do I run Supabase locally?',

packages/ui-patterns/Cmdk/DocsSearch.tsx

@@ -10,10 +10,9 @@ import {
 import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef } from 'react'
-import { Button } from 'ui'
+import { Button, StatusIcon } from 'ui'
 import { CommandGroup, CommandItem, CommandLabel, TextHighlighter } from './Command.utils'
 import { useCommandMenu } from './CommandMenuContext'
-import { StatusIcon } from '../Icons/StatusIcons'
 
 const questions = [
   'How do I get started with Supabase?',

packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx

@@ -21,7 +21,7 @@ import { SAMPLE_QUERIES } from '../Command.constants'
 import SQLOutputActions from './SQLOutputActions'
 import { generatePrompt } from './GenerateSQL.utils'
 import { ExcludeSchemaAlert, IncludeSchemaAlert, AiWarning } from '../Command.alerts'
-import { StatusIcon } from '../../Icons/StatusIcons'
+import { StatusIcon } from 'ui'
 
 const GenerateSQL = () => {
   const [includeSchemaMetadata, setIncludeSchemaMetadata] = useState(false)

packages/ui-patterns/Icons/StatusIcons.stories.tsx

@@ -1,100 +0,0 @@
-// import { StoryObj } from '@storybook/react'
-// import { Badge } from 'ui'
-// import { StatusIcon } from './StatusIcons'
-
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// export default {
-//   title: 'Icons/StatusIcon',
-//   component: StatusIcon,
-//   parameters: {
-//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-//     layout: 'centered',
-//   },
-//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-//   tags: ['autodocs'],
-//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
-//   argTypes: {},
-// }
-
-// // export default meta
-
-// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-// // export const Primary = {
-// //   args: {
-// //     size: 'small',
-// //     // visible: true,
-// //   },
-// // }
-
-// type Story = StoryObj<typeof StatusIcon>
-
-// export const Default: Story = {
-//   args: {
-//     variant: 'default',
-//   },
-//   /**
-//    * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
-//    * If you are not concerned with linting, you may use an arrow function.
-//    */
-//   render: function Render(args) {
-//     return <StatusIcon {...args} />
-//   },
-// }
-
-// export const Destructive: Story = {
-//   args: {
-//     variant: 'destructive',
-//   },
-//   /**
-//    * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
-//    * If you are not concerned with linting, you may use an arrow function.
-//    */
-//   render: function Render(args) {
-//     return <StatusIcon {...args} />
-//   },
-// }
-
-// export const Warning: Story = {
-//   args: {
-//     variant: 'warning',
-//   },
-//   /**
-//    * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
-//    * If you are not concerned with linting, you may use an arrow function.
-//    */
-//   render: function Render(args) {
-//     return <StatusIcon {...args} />
-//   },
-// }
-
-// export const withNoBackground: Story = {
-//   args: {
-//     variant: 'default',
-//     hideBackground: true,
-//   },
-//   /**
-//    * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
-//    * If you are not concerned with linting, you may use an arrow function.
-//    */
-//   render: function Render(args) {
-//     return <StatusIcon {...args} />
-//   },
-// }
-
-// export const InsideBadge: Story = {
-//   args: {
-//     variant: 'destructive',
-//   },
-//   /**
-//    * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
-//    * If you are not concerned with linting, you may use an arrow function.
-//    */
-//   render: function Render(args) {
-//     return (
-//       <Badge variant={'destructive'} className="flex gap-1">
-//         <StatusIcon {...args} hideBackground />
-//         Caution
-//       </Badge>
-//     )
-//   },
-// }

packages/ui-patterns/tsconfig.json

@@ -3,13 +3,6 @@
   "compilerOptions": {
     "resolveJsonModule": true
   },
-  "include": [
-    ".",
-    "./../../packages/ui/src/**/*.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules"
-  ]
+  "include": [".", "./../../packages/ui/src/**/*.d.ts", "../ui/src/components/Icons"],
+  "exclude": ["dist", "build", "node_modules"]
 }

packages/ui/index.tsx

@@ -75,7 +75,7 @@ export * from './src/components/shadcn/ui/dropdown-menu'
 export * from './src/components/shadcn/ui/use-toast'
 export * from './src/components/shadcn/ui/toast'
 export * from './src/components/shadcn/ui/toaster'
-
+export * from './src/components/shadcn/ui/sonner'
 export * from './src/components/shadcn/ui/separator'
 export * from './src/components/shadcn/ui/sheet'
 export * from './src/components/shadcn/ui/badge'
@@ -265,6 +265,8 @@ export * from './src/components/TextLink'
 
 export * from './src/layout/banners'
 
+export * from './src/components/StatusIcon'
+
 // config
 
 // export { default as Config } from './../ui.config'

packages/ui/package.json

@@ -81,6 +81,7 @@
     "react-use": "^17.5.0",
     "reactflow": "^11.10.1",
     "remark-gfm": "^3.0.1",
+    "sonner": "^1.5.0",
     "sse.js": "^2.2.0",
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "^3.4.1",

packages/ui/src/components/shadcn/ui/progress.tsx

@@ -11,11 +11,11 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
+    className={cn('relative h-1 w-full overflow-hidden rounded-full bg-surface-300', className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-foreground transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

packages/ui/src/components/shadcn/ui/sonner.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+import { cn } from '../../../lib/utils'
+import { buttonVariants } from './../../Button'
+import { StatusIcon } from './../../StatusIcon'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const SonnerToaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      icons={{
+        warning: <StatusIcon variant="warning" />,
+        error: <StatusIcon variant="destructive" />,
+        info: <StatusIcon variant="default" />,
+      }}
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          toast: cn(
+            'group',
+            'toast',
+            'w-full',
+            'rounded-md',
+            'py-3',
+            'px-5',
+            'flex',
+            'gap-2',
+            'items-start',
+            'font-normal',
+            'text-sm',
+            'group-[.toaster]:bg-overlay group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-overlay group-[.toaster]:shadow-lg'
+          ),
+          icon: 'mt-0.5',
+          title: '!font-normal',
+          description:
+            'text-xs group-[.toast]:text-foreground-lighter transition-opacity group-data-[expanded=false]:opacity-0 group-data-[front=true]:!opacity-100',
+          actionButton: cn('block', buttonVariants({ type: 'primary', size: 'tiny' })),
+          cancelButton: cn('block', buttonVariants({ type: 'default', size: 'tiny' })),
+          // success: 'group toast group-[.toaster]:!bg-brand-200 group-[.toaster]:border-brand-500',
+          warning:
+            'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500',
+          error:
+            'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { SonnerToaster }