Integrate Sonner for toasts (#8839)

* Integrate Sonner for toasts

* Fix animation on iOS

* Refactor API

* Update e2e file

src/components/Toast/Toast.tsx

@@ -13,6 +13,11 @@ type ContextType = {
   type: ToastType
 }
 
+export type ToastComponentProps = {
+  type?: ToastType
+  content: React.ReactNode
+}
+
 export const ICONS = {
   default: CircleCheck,
   success: CircleCheck,
@@ -26,13 +31,7 @@ const Context = createContext<ContextType>({
 })
 Context.displayName = 'ToastContext'
 
-export function Toast({
-  type,
-  content,
-}: {
-  type: ToastType
-  content: React.ReactNode
-}) {
+export function Toast({type = 'default', content}: ToastComponentProps) {
   const {fonts} = useAlf()
   const t = useTheme()
   const styles = useToastStyles({type})
@@ -90,10 +89,12 @@ export function ToastText({children}: {children: React.ReactNode}) {
   const {textColor} = useToastStyles({type})
   return (
     <Text
+      selectable={false}
       style={[
         a.text_md,
         a.font_bold,
         a.leading_snug,
+        a.pointer_events_none,
         {
           color: textColor,
         },