docs: add avanced toasts example

Shows a basic example of how you can create a
toaster from scratch.

Author: lekoaf

packages/docs/src/mdx/coreComponents/Toast.mdx

@@ -249,7 +249,7 @@ const MyComponent = () => {
       onClose: id => {
         console.log('Dismissed toast with ID: %o', id)
       },
-    }
+    })
   }, [])
 
   return (
@@ -262,6 +262,42 @@ const MyComponent = () => {
 }
 ```
 
+## Advanced usage
+
+Not happy with the defaults we've provided? Don't fret. You can create a toast from scratch
+as well if you want to.
+
+```typescript
+import React, { useCallback } from 'react'
+import { useToasts, Button } from 'practical-react-components-core'
+
+const MyComponent = () => {
+  const { showToast } = useToasts()
+
+  const showAdvancedToaster = useCallback(() => {
+    showToast({
+      icon: <Icon icon={HomeIcon} />,
+      label: <Typography>Toast label</Typography>,
+      message: <Typography>Toast message</Typography>,
+      // Shows an X the user can click to dismiss the toaster
+      hasCloseButton: true,
+      duration: 10000,
+      onClose: id => {
+        console.log('Dismissed toast with ID: %o', id)
+      },
+    })
+  }, [])
+
+  return (
+    <Button
+      label="Custom toaster"
+      variant="primary"
+      onClick={showAdvancedToaster}
+    />
+  )
+}
+```
+
 ## Props
 
 useToasts forwards all unknown props to the base native `<div>` component. See