diff --git a/package-lock.json b/package-lock.json
index 5232397..6c5d5e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-hot-toast",
-  "version": "1.0.2",
+  "version": "2.0.0-beta.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4322,9 +4322,9 @@
       }
     },
     "csstype": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
       "dev": true
     },
     "cyclist": {
@@ -6029,9 +6029,9 @@
       "dev": true
     },
     "goober": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.18.tgz",
-      "integrity": "sha512-XaYq9GqRkWHS0DFPQZQLhrKGWWbiz+ydiEbMRN8eGJZ7enDjmWnRv3RWn5RwdukjnHUA6b/AQcf4QWjellKOCw=="
+      "version": "2.0.35",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.35.tgz",
+      "integrity": "sha512-800lO2kBZg2UEpGDST2Jsx8FDaEaSuEXBYV6HlmPBX4HPaDCM/qeMtHM20a7ZmGxDjHONx5+CUKPLYTrcf7Lwg=="
     },
     "graceful-fs": {
       "version": "4.2.4",
diff --git a/package.json b/package.json
index dd37f2a..301c402 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "react-hot-toast",
-  "version": "1.0.2",
+  "version": "2.0.0-beta.0",
   "author": "Timo Lins",
   "license": "MIT",
+  "sideEffects": false,
   "repository": "timolins/react-hot-toast",
   "keywords": [
     "react",
@@ -60,10 +61,11 @@
     "@size-limit/preset-small-lib": "^4.9.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "csstype": "^3.0.7",
     "size-limit": "^4.9.1",
     "tsdx": "^0.14.1"
   },
   "dependencies": {
-    "goober": "^2.0.15"
+    "goober": "^2.0.35"
   }
 }
diff --git a/site/components/code.tsx b/site/components/code.tsx
index 12c281b..e86a4ca 100644
--- a/site/components/code.tsx
+++ b/site/components/code.tsx
@@ -103,9 +103,10 @@ const theme: PrismTheme = {
 
 export const Code: React.FC<{
   snippet: string;
+  language?: Language;
   className?: string;
 }> = (props) => {
-  const language = (props.className?.replace(/language-/, '') as any) || 'jsx';
+  const language = props.language || 'jsx';
 
   return (
     <Highlight
diff --git a/site/components/docs-layout.tsx b/site/components/docs-layout.tsx
index fe07050..2ad3b51 100644
--- a/site/components/docs-layout.tsx
+++ b/site/components/docs-layout.tsx
@@ -9,7 +9,7 @@ const TableItem: React.FC<{
   href: string;
 }> = ({ children, href }) => (
   <Link href={href}>
-    <a className="rounded px-3 py-2 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
+    <a className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
       {children}
     </a>
   </Link>
@@ -53,8 +53,8 @@ export default function DocsLayout({ children, meta }) {
             GitHub
           </a>
         </header>
-        <nav className="font-medium rounded-lg">
-          <div className="flex flex-col mb-8">
+        <nav className="font-medium rounded-lg ">
+          <div className="flex flex-col mb-8 sticky top-0">
             <TableHeader>Overview</TableHeader>
 
             <TableItem href="/docs">Get Started</TableItem>
@@ -62,13 +62,16 @@ export default function DocsLayout({ children, meta }) {
             <TableHeader>API</TableHeader>
 
             <TableItem href="/docs/toast">toast()</TableItem>
-            <TableItem href="/docs/toaster">Toaster</TableItem>
+            <TableItem href="/docs/toaster">{`Toaster`}</TableItem>
+            <TableItem href="/docs/toast-bar">{`ToastBar`}</TableItem>
             <TableItem href="/docs/use-toaster">useToaster()</TableItem>
             <TableItem href="/docs/use-toaster-store">
               useToasterStore()
             </TableItem>
             <TableHeader>Guides</TableHeader>
             <TableItem href="/docs/styling">Styling</TableItem>
+            <TableHeader>Releases</TableHeader>
+            <TableItem href="/docs/version-2">New in 2.0</TableItem>
           </div>
         </nav>
 
diff --git a/site/components/sections/toast-example.tsx b/site/components/sections/toast-example.tsx
index 4ac4478..72e27af 100644
--- a/site/components/sections/toast-example.tsx
+++ b/site/components/sections/toast-example.tsx
@@ -169,6 +169,102 @@ const examples: Array<{
       });
     },
   },
+  {
+    title: 'Custom Position',
+    emoji: '⬆️',
+    snippet: `toast.success('Always at the bottom.', {
+  position: "bottom-center"
+})`,
+    action: () => {
+      toast.success('Always at the bottom.', {
+        position: 'bottom-center',
+        duration: 10000,
+      });
+    },
+  },
+  {
+    title: 'TailwindCSS',
+    emoji: '️💨',
+    snippet: `toast.custom((t) => (
+  <div
+    className={\`\${
+      t.visible ? 'animate-enter' : 'animate-leave'
+    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
+  >
+    <div className="flex-1 w-0 p-4">
+      <div className="flex items-start">
+        <div className="flex-shrink-0 pt-0.5">
+          <img
+            className="h-10 w-10 rounded-full"
+            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+            alt=""
+          />
+        </div>
+        <div className="ml-3 flex-1">
+          <p className="text-sm font-medium text-gray-900">
+            Emilia Gates
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            Sure! 8:30pm works great!
+          </p>
+        </div>
+      </div>
+    </div>
+    <div className="flex border-l border-gray-200">
+      <button
+        onClick={() => toast.dismiss(t.id)}
+        className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+))`,
+    action: () => {
+      // toast.custom(<TestApp />);
+
+      toast.custom(
+        (t) => (
+          <div
+            className={`${
+              t.visible ? 'animate-enter' : 'animate-leave'
+            } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+          >
+            <div className="flex-1 w-0 p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0 pt-0.5">
+                  <img
+                    className="h-10 w-10 rounded-full"
+                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+                    alt=""
+                  />
+                </div>
+                <div className="ml-3 flex-1">
+                  <p className="text-sm font-medium text-gray-900">
+                    Emilia Gates
+                  </p>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Sure! 8:30pm works great!
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex border-l border-gray-200">
+              <button
+                onClick={() => toast.dismiss(t.id)}
+                className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        ),
+        {
+          duration: 10000,
+        }
+      );
+    },
+  },
 ];
 
 export const ToastExample = () => {
@@ -196,8 +292,8 @@ export const ToastExample = () => {
           ))}
         </div>
       </div>
-      <div className="md:h-72 w-full overflow-hidden">
-        <Code snippet={snippet} />
+      <div className="md:h-72 w-full overflow-auto rounded-lg">
+        <Code snippet={snippet} className="!h-auto min-h-full" />
       </div>
     </section>
   );
diff --git a/site/next.config.js b/site/next.config.js
index f3c606f..65fd246 100644
--- a/site/next.config.js
+++ b/site/next.config.js
@@ -1,6 +1,11 @@
 const withTM = require('next-transpile-modules')(['react-hot-toast']);
+const remarkSlugs = require('rehype-slug');
+
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: /.mdx?$/,
+  options: {
+    rehypePlugins: [remarkSlugs],
+  },
 });
 const withPlugins = require('next-compose-plugins');
 
@@ -8,7 +13,7 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
       config.module.rules.push({
-        test: /\.svg$/,
+        test: /.svg$/,
         use: ['@svgr/webpack'],
       });
 
diff --git a/site/package-lock.json b/site/package-lock.json
index 35ffa77..b1519da 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1139,37 +1139,11 @@
       }
     },
     "@fullhuman/postcss-purgecss": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.0.0.tgz",
-      "integrity": "sha512-cvuOgMwIVlfgWcUMqg5p33NbGUxLwMrKtDKkm3QRfOo4PRVNR6+y/xd9OyXTVZiB1bIpKNJ0ZObYPWD3DRQDtw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
       "requires": {
-        "postcss": "7.0.32",
-        "purgecss": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "purgecss": "^3.1.3"
       }
     },
     "@hapi/accept": {
@@ -1355,6 +1329,29 @@
       "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.0.3.tgz",
       "integrity": "sha512-XtzzPX2R4+MIyu1waEQUo2tiNwWVEkmObA6pboRCDTPOs4Ri8ckaIE08lN5A5opyF6GVN+IEq/J8KQrgsePsZQ=="
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q=="
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
@@ -3159,6 +3156,11 @@
         }
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -3270,6 +3272,11 @@
         }
       }
     },
+    "emoji-regex": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz",
+      "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4="
+    },
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -3632,11 +3639,50 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.2.3"
+          },
+          "dependencies": {
+            "picomatch": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+              "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+            }
+          }
+        }
+      }
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -3767,14 +3813,14 @@
       "optional": true
     },
     "fs-extra": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-      "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "requires": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
-        "universalify": "^1.0.0"
+        "universalify": "^2.0.0"
       }
     },
     "fs-write-stream-atomic": {
@@ -3887,6 +3933,14 @@
       "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=",
       "optional": true
     },
+    "github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==",
+      "requires": {
+        "emoji-regex": ">=6.0.0 <=6.1.1"
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -3900,6 +3954,38 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+          "requires": {
+            "is-glob": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "glob-parent": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
@@ -3918,6 +4004,11 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "goober": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.37.tgz",
+      "integrity": "sha512-wgj5C7IJX2+MyHZ4TgOA+hLL1mCDW+jGorQ5KCMLF1ofE9gQkfbo1s8txIrzIsAX65XRTm0qaipolId2KMYUkw=="
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -4054,6 +4145,16 @@
         "web-namespaces": "^1.0.0"
       }
     },
+    "hast-util-has-property": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.4.tgz",
+      "integrity": "sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg=="
+    },
+    "hast-util-heading-rank": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-1.0.1.tgz",
+      "integrity": "sha512-P6Hq7RCky9syMevlrN90QWpqWDXCxwIVOfQR2rK6P4GpY4bqjKEuCzoWSRORZ7vz+VgRpLnXimh+mkwvVFjbyQ=="
+    },
     "hast-util-parse-selector": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
@@ -4088,6 +4189,11 @@
         "zwitch": "^1.0.0"
       }
     },
+    "hast-util-to-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
+      "integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w=="
+    },
     "hastscript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
@@ -4417,6 +4523,11 @@
         }
       }
     },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE="
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -4596,13 +4707,6 @@
       "requires": {
         "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-        }
       }
     },
     "kind-of": {
@@ -4667,6 +4771,11 @@
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
       "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
     },
+    "lodash.topath": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
+      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -4810,6 +4919,11 @@
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -5008,9 +5122,9 @@
       "optional": true
     },
     "modern-normalize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
-      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -5449,9 +5563,9 @@
       }
     },
     "object-hash": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
-      "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
     },
     "object-inspect": {
       "version": "1.9.0",
@@ -5631,6 +5745,32 @@
         "is-hexadecimal": "^1.0.0"
       }
     },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "requires": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "parse-json": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
@@ -5928,9 +6068,9 @@
       }
     },
     "postcss-nested": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.3.tgz",
-      "integrity": "sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
+      "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
       "requires": {
         "postcss-selector-parser": "^6.0.4"
       }
@@ -6124,43 +6264,20 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "purgecss": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.0.0.tgz",
-      "integrity": "sha512-t3FGCwyX9XWV3ffvnAXTw6Y3Z9kNlcgm14VImNK66xKi5sdqxSA2I0SFYxtmZbAKuIZVckPdazw5iKL/oY/2TA==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
       "requires": {
         "commander": "^6.0.0",
         "glob": "^7.0.0",
-        "postcss": "7.0.32",
+        "postcss": "^8.2.1",
         "postcss-selector-parser": "^6.0.2"
       },
       "dependencies": {
         "commander": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz",
-          "integrity": "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q=="
-        },
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
         }
       }
     },
@@ -6179,6 +6296,16 @@
       "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -6241,7 +6368,7 @@
     "react-hot-toast": {
       "version": "file:..",
       "requires": {
-        "goober": "^2.0.15"
+        "goober": "^2.0.35"
       },
       "dependencies": {
         "@babel/code-frame": {
@@ -10012,11 +10139,6 @@
           "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
           "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
         },
-        "goober": {
-          "version": "2.0.18",
-          "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.18.tgz",
-          "integrity": "sha512-XaYq9GqRkWHS0DFPQZQLhrKGWWbiz+ydiEbMRN8eGJZ7enDjmWnRv3RWn5RwdukjnHUA6b/AQcf4QWjellKOCw=="
-        },
         "graceful-fs": {
           "version": "4.2.4",
           "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -14891,9 +15013,9 @@
       }
     },
     "reduce-css-calc": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
-      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
       "requires": {
         "css-unit-converter": "^1.1.1",
         "postcss-value-parser": "^3.3.0"
@@ -14979,6 +15101,18 @@
         }
       }
     },
+    "rehype-slug": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-4.0.1.tgz",
+      "integrity": "sha512-KIlJALf9WfHFF21icwTd2yI2IP+RQRweaxH9ChVGQwRYy36+hiomG4ZSe0yQRyCt+D/vE39LbAcOI/h4O4GPhA==",
+      "requires": {
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^1.0.0",
+        "hast-util-heading-rank": "^1.0.0",
+        "hast-util-to-string": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "remark-footnotes": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz",
@@ -15165,6 +15299,11 @@
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
+    },
     "rework": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz",
@@ -15203,6 +15342,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -15913,30 +16060,37 @@
       }
     },
     "tailwindcss": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.2.tgz",
-      "integrity": "sha512-nO9JRE1pO7SF9RnYAl6g7uzeHdrmKAFqNjT9NtZUfxqimJZAOOLOEyIEUiMq12+xIc7mC2Ey3Vf90XjHpWKfbw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.2.tgz",
+      "integrity": "sha512-T5t+wwd+/hsOyRw2HJuFuv0LTUm3MUdHm2DJ94GPVgzqwPPFa9XxX0KlwLWupUuiOUj6uiKURCzYPHFcuPch/w==",
       "requires": {
-        "@fullhuman/postcss-purgecss": "^3.0.0",
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "bytes": "^3.0.0",
         "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
         "color": "^3.1.3",
         "detective": "^5.2.0",
         "didyoumean": "^1.2.1",
-        "fs-extra": "^9.0.1",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.5",
+        "fs-extra": "^9.1.0",
         "html-tags": "^3.1.0",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
+        "lodash.topath": "^4.5.2",
         "modern-normalize": "^1.0.0",
         "node-emoji": "^1.8.1",
-        "object-hash": "^2.0.3",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.1.1",
+        "parse-glob": "^3.0.4",
         "postcss-functions": "^3",
         "postcss-js": "^3.0.3",
-        "postcss-nested": "^5.0.1",
+        "postcss-nested": "5.0.5",
         "postcss-selector-parser": "^6.0.4",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
-        "reduce-css-calc": "^2.1.6",
-        "resolve": "^1.19.0"
+        "quick-lru": "^5.1.1",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -15948,14 +16102,29 @@
           }
         },
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
           }
         },
+        "chokidar": {
+          "version": "3.5.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.1",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.5.0"
+          }
+        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -15969,11 +16138,31 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
+        "fsevents": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+          "optional": true
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -16446,9 +16635,9 @@
       }
     },
     "universalify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-      "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
     },
     "unpipe": {
       "version": "1.0.0",
diff --git a/site/package.json b/site/package.json
index 89a0a90..d482826 100644
--- a/site/package.json
+++ b/site/package.json
@@ -20,7 +20,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-toast": "file:../",
-    "tailwindcss": "^2.0.2"
+    "rehype-slug": "^4.0.1",
+    "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
     "@types/node": "^14.14.13",
diff --git a/site/pages/docs/styling.mdx b/site/pages/docs/styling.mdx
index 844ae9a..6c049b2 100644
--- a/site/pages/docs/styling.mdx
+++ b/site/pages/docs/styling.mdx
@@ -55,20 +55,41 @@ toast('I have a border.', {
 });
 ```
 
-## Changing the offset
+## Change the offset
 
-If you want to change the offset of your noticiations, add a margin to your `toastOptions`.
+If you want to change the offset of your notifications, you can adapt the absolute position in `containerStyle`.
 
 ```jsx
 <Toaster
-  toastOptions={{
-    style: {
-      margin: '50px',
-    },
+  containerStyle={{
+    top: 20,
+    left: 20,
+    bottom: 20,
+    right: 20,
+  }}
+/>
+```
+
+## Change position of the toaster
+
+By default, the toaster is position fixed in the window. If you want to place it somewhere else, you can ovewrite the position with `containerStyle`.
+
+```jsx
+<Toaster
+  containerStyle={{
+    position: 'relative',
   }}
 />
 ```
 
+## Change offset between toasts
+
+If you want to change the offset between notifications change the gutter.
+
+```jsx
+<Toaster gutter={24} />
+```
+
 ## Change icon color
 
 All icon colors can be changed by supplying a `iconTheme` with a `primary` & `secondary` color.
@@ -85,3 +106,23 @@ All icon colors can be changed by supplying a `iconTheme` with a `primary` & `se
   }}
 />
 ```
+
+## Change enter and exit animations
+
+In this example, we provide a render function with the default `<ToastBar />`. We overwrite the animation style based on the current state.
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+<Toaster>
+  {(t) => (
+    <ToastBar
+      toast={t}
+      style={{
+        ...t.style,
+        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
+      }}
+    />
+  )}
+</Toaster>;
+```
diff --git a/site/pages/docs/toast-bar.mdx b/site/pages/docs/toast-bar.mdx
new file mode 100644
index 0000000..7cade9a
--- /dev/null
+++ b/site/pages/docs/toast-bar.mdx
@@ -0,0 +1,50 @@
+import Layout from '../../components/docs-layout';
+import toast from 'react-hot-toast';
+
+export const meta = {
+  title: '<ToasterBar/> API',
+};
+
+export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
+
+# `<ToasterBar />` API
+
+This is the **default toast component** rendered by the [Toaster](/docs/toaster). You can use this component in a [Toaster](/docs/toaster) with a custom render function to overwrite its defaults.
+
+## Available options
+
+```jsx
+<ToastBar
+  toast={t}
+  style={{}} // Overwrite styles
+  position="top-center" // Used to adapt the animation
+/>
+```
+
+## Add custom content
+
+You can add a **render function to the ToastBar to modify its content**. An object containing The `icon` as well as the `message` are passed into the function.
+
+### Add a dismiss button
+
+In this example we add a basic dismiss button to all toasts, except if the loading one.
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+<Toaster>
+  {(t) => (
+    <ToastBar toast={t}>
+      {({ icon, message }) => (
+        <>
+          {icon}
+          {message}
+          {t.type !== 'loading' && (
+            <button onClick={() => toast.dismiss(t.id)}>X</button>
+          )}
+        </>
+      )}
+    </ToastBar>
+  )}
+</Toaster>;
+```
diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx
index 6536bad..e460e7d 100644
--- a/site/pages/docs/toast.mdx
+++ b/site/pages/docs/toast.mdx
@@ -7,15 +7,46 @@ export const meta = {
 
 # `toast()` API
 
-Call it to create a toast from anywhere, even outside React. Make sure you add the `<Toaster/>` component to your app first.
+Call it to create a toast from anywhere, even outside React. Make sure you add the [`<Toaster/>`](/docs/toaster) component to your app first.
 
-### Blank
+## Available toast options
+
+You can provide `ToastOptions` as the second argument. They will overwrite all options received from [`<Toaster/>`](/docs/toaster).
 
+```js
+toast('Hello World', {
+  duration: 4000,
+
+  // Styling
+  style: {},
+  className: '',
+
+  // Custom Icon
+  icon: '👏',
+
+  // Change colors of success/error/loading icon
+  iconTheme: {
+    primary: '#000',
+    secondary: '#fff',
+  },
+
+  // Aria
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite',
+  },
+});
 ```
+
+## Creating a toast
+
+### Blank
+
+```js
 toast('Hello World');
 ```
 
-The most basic variant. It does not have an icon by default, but you can provide one via the options.
+The most basic variant. It does not have an icon by default, but you can provide one via the options. If you don't want any default styles, use `toast.custom()` instead.
 
 ### Success
 
@@ -23,7 +54,7 @@ The most basic variant. It does not have an icon by default, but you can provide
 toast.success('Successfully created!');
 ```
 
-Creates a notification with an animated checkmark. It can be themed with `iconTheme`.
+Creates a notification with an animated checkmark. It can be themed with the `iconTheme` option.
 
 ### Error
 
@@ -31,7 +62,15 @@ Creates a notification with an animated checkmark. It can be themed with `iconTh
 toast.error('This is an error!');
 ```
 
-Creates a notification with an animated error icon. It can be themed with `iconTheme`.
+Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
+
+### Custom (JSX)
+
+```js
+toast.custom(<div>Hello World</div>);
+```
+
+Creates a custom notification with JSX without default styles.
 
 ### Loading
 
@@ -39,7 +78,7 @@ Creates a notification with an animated error icon. It can be themed with `iconT
 toast.loading('Waiting...');
 ```
 
-This will create a loading notification. Most likely you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
+This will create a loading notification. Most likely, you want to update it afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
 
 ### Promise
 
@@ -83,43 +122,17 @@ toast.promise(
 );
 ```
 
-## Available options
-
-You can provide `ToastOptions` as second argument. They will overwrite all options received from `<Toaster/>`.
-
-```js
-toast('Hello World', {
-  duration: 4000,
-
-  // Styling
-  style: {},
-  className: '',
-
-  // Custom Icon
-  icon: '👏',
-
-  // Change colors of success/error/loading icon
-  iconTheme: {
-    primary: '#000',
-    secondary: '#fff',
-  },
-
-  // Aria
-  role: 'status',
-  ariaLive: 'polite',
-});
-```
-
 ## Default durations
 
-Every type has their own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
+Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
 
 | type      | duration |
 | --------- | -------- |
 | `blank`   | 4000     |
 | `error`   | 4000     |
 | `success` | 2000     |
-| `loading` | 30000    |
+| `custom`  | 4000     |
+| `loading` | Infinity |
 
 ### Dismiss toast programmatically
 
@@ -139,24 +152,26 @@ You can dismiss all toasts at once, by leaving out the `toastId`.
 
 #### Dismiss all toasts at one
 
-```
-toast.dismiss()
+```js
+toast.dismiss();
 ```
 
 To remove toasts instantly without any animations, use `toast.remove`.
 
 #### Remove toasts instanstly
 
-```
-toast.remove(toastId)
+```js
+toast.remove(toastId);
 
 // or
 
-toast.remove()
+toast.remove();
 ```
 
 ### Update an existing toast
 
+Each toast call returns a unique id. Use in the toast options to update the existing toast.
+
 ```js
 const toastId = toast.loading('Loading...');
 
@@ -167,9 +182,19 @@ toast.success('This worked', {
 });
 ```
 
+### Prevent duplicate toasts
+
+To prevent duplicates of the same kind, you can provide a unique permanent id.
+
+```js
+toast.success('Copied to clipboard!', {
+  id: 'clipboard',
+});
+```
+
 ### Render JSX custom content
 
-You can provide a React components instead of text.
+You can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.
 
 ```jsx
 toast(
@@ -182,7 +207,7 @@ toast(
 );
 ```
 
-You can also supply a function that receives the `Toast` as argument. This can be usefull to add a custom dismiss button.
+You can also supply a function that receives the `Toast` as an argument, giving you access to all properties. This allows you to access the toast id, which can be used to add a dismiss button.
 
 ```jsx
 toast(
diff --git a/site/pages/docs/toaster.mdx b/site/pages/docs/toaster.mdx
index a9768dd..a4c4710 100644
--- a/site/pages/docs/toaster.mdx
+++ b/site/pages/docs/toaster.mdx
@@ -9,45 +9,25 @@ export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
 
 # `<Toaster />` API
 
-This component will render all received toasts. Alternatively you can create own renderer with the headless [`useToaster()`](/docs/use-toaster) hook.
+This component will render all toasts. Alternatively you can create own renderer with the headless [`useToaster()`](/docs/use-toaster) hook.
 
-### `position` Prop
-
-You can change the position of all toasts by modifying supplying `positon` prop.
-
-| Positions   |               |              |
-| ----------- | ------------- | ------------ |
-| top-left    | top-center    | top-right    |
-| bottom-left | bottom-center | bottom-right |
-
-### `reverseOrder` Prop
-
-Toasts spawn at top by default. Set to `true` if you want new Toasts at the end.
-
-### `toastOptions` Prop
-
-These will act as default options for all toasts.
-
-#### Type specific options
-
-You can change the defaults for a specific type by adding, `success: {}`, `error: {}` or `loading: {}`.
-
-## Example with all available options
+## Available options
 
 ```jsx
 <Toaster
   position="top-center"
   reverseOrder={false}
+  gutter={8}
+  containerClassName=""
+  containerStyle={{}}
   toastOptions={{
     // Define default options
     className: '',
+    duration: 5000,
     style: {
-      margin: '40px',
       background: '#363636',
       color: '#fff',
-      zIndex: 1,
     },
-    duration: 5000,
 
     // Default options for specific types
     success: {
@@ -60,3 +40,81 @@ You can change the defaults for a specific type by adding, `success: {}`, `error
   }}
 />
 ```
+
+### `position` Prop
+
+You can change the position of all toasts by modifying supplying `positon` prop.
+
+| Positions   |               |              |
+| ----------- | ------------- | ------------ |
+| top-left    | top-center    | top-right    |
+| bottom-left | bottom-center | bottom-right |
+
+### `reverseOrder` Prop
+
+Toasts spawn at top by default. Set to `true` if you want new toasts at the end.
+
+### `containerClassName` Prop
+
+Add a custom CSS class name to toaster div. Defaults to `undefined`.
+
+### `containerStyle` Prop
+
+Customize the style of toaster div. This can be used to change the offset of all toasts
+
+### `gutter` Prop
+
+Changes the gap between each toast. Defaults to `8`.
+
+### `toastOptions` Prop
+
+These will act as default options for all toasts. See [`toast()`](/docs/toast) for all available options.
+
+#### Type specific options
+
+You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.
+
+## Using a custom render function
+
+You can provide your **own render function** to the Toaster by passing it as children. It will be called for each [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) allowing you to render any component based on the toast state.
+
+### Minimal example
+
+```jsx
+import { Toaster, resolveValue } from 'react-hot-toast';
+
+// In your app
+<Toaster>
+  {(t) => (
+    <div
+      style={{ opacity: t.visible ? 1 : 0, background: 'white', padding: 8 }}
+    >
+      {resolveValue(t.message, t)}
+    </div>
+  )}
+</Toaster>;
+```
+
+`resolveValue()` is needed to resolve all message types: Text, JSX or a function that resolves to JSX.
+
+### Adapting the default [`<ToastBar/>`](/docs/toast-bar)
+
+You can use this API to modify the defualt ToastBar as well. In this example we overwrite the animation style based on the current state.
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+<Toaster>
+  {(t) => (
+    <ToastBar
+      toast={t}
+      style={{
+        ...t.style,
+        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
+      }}
+    />
+  )}
+</Toaster>;
+```
+
+Check out the [`<ToastBar/>`](/docs/toast-bar) docs for more options.
diff --git a/site/pages/docs/use-toaster-store.mdx b/site/pages/docs/use-toaster-store.mdx
index a8376ad..3dd8911 100644
--- a/site/pages/docs/use-toaster-store.mdx
+++ b/site/pages/docs/use-toaster-store.mdx
@@ -13,7 +13,7 @@ This hook gives you access to the internal toaster state. This is the right choi
 
 In comparison to [`useToaster()`](/docs/use-toaster) it does not handle pausing or provide handlers for creating your own notification system.
 
-```
+```jsx
 import { useToasterStore } from "react-hot-toast";
 
 const { toasts, pausedAt } = useToasterStore();
diff --git a/site/pages/docs/use-toaster.mdx b/site/pages/docs/use-toaster.mdx
index e73956b..47913cb 100644
--- a/site/pages/docs/use-toaster.mdx
+++ b/site/pages/docs/use-toaster.mdx
@@ -9,7 +9,11 @@ export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
 
 # `useToaster()` API
 
-Create your own notification system with **headless mode**. The `useToaster()` hook will manage the notification state for you. This includes keeping track of all toast created with  [`toast()`](/docs/toast), auto-dimiss, pause on hover and an unmount delay for exit animations. The hook will provide you with the current state, so you can render on own components. Tree shaking is supported, so you won't ship any unused styles from library.
+The `useToaster()` hook provides you a **headless system that will manage the notification state** for you. This includes keeping track of all toast created with [`toast()`](/docs/toast), auto-dimiss, pause on hover, and an unmount delay for exit animations.
+
+Be aware: [react-hot-toast 2.0](/docs/version-2) adds support for **custom render functions**, an easier method to render custom notification components.
+
+Tree shaking is supported so that you won't ship any unused styles from the library.
 
 It's recommended to only have one `<Toaster/>` or `useToaster()` in your app at a time. If you need the current state without the handlers, you should use [`useToasterStore()`](/docs/use-toaster-store) instead.
 
@@ -23,16 +27,18 @@ Headless mode is perfectly suited to add notifications to your React Native app.
 
 ```jsx
 const Notifications = () => {
-  const { visibleToasts, handlers } = useToaster();
+  const { toasts, handlers } = useToaster();
   const { startPause, endPause } = handlers;
 
   return (
     <div onMouseEnter={startPause} onMouseLeave={endPause}>
-      {visibleToasts.map((toast) => (
-        <div key={toast.id} role={toast.role} aria-live={toast.ariaLive}>
-          {toast.message}
-        </div>
-      ))}
+      {toasts
+        .filter((toast) => toast.visible)
+        .map((toast) => (
+          <div key={toast.id} role={toast.role} aria-live={toast.ariaLive}>
+            {toast.message}
+          </div>
+        ))}
     </div>
   );
 };
@@ -43,7 +49,7 @@ toast('Hello World');
 
 ### Animated Example
 
-Instead of mapping over `visibleToasts` we'll use `toasts`, which includes all hidden toasts aswell. We animate them based on `toast.visible`. Toasts will be removed from 1 second after being dismissed, which give us enough time to animate.
+Instead of mapping over `visibleToasts` we'll use `toasts`, which includes all hidden toasts. We animate them based on `toast.visible`. Toasts will be removed from 1 second after being dismissed, which give us enough time to animate.
 
 You can play with the demo on [CodeSandbox](https://codesandbox.io/s/react-hot-toast-usetoaster-headless-example-zw7op?file=/src/App.js).
 
@@ -65,9 +71,9 @@ const Notifications = () => {
       onMouseLeave={endPause}
     >
       {toasts.map((toast) => {
-        const offset = calculateOffset(toast.id, {
+        const offset = calculateOffset(toast, {
           reverseOrder: false,
-          margin: 8,
+          gutter: 8,
         });
 
         const ref = (el) => {
diff --git a/site/pages/docs/version-2.mdx b/site/pages/docs/version-2.mdx
new file mode 100644
index 0000000..f511a28
--- /dev/null
+++ b/site/pages/docs/version-2.mdx
@@ -0,0 +1,214 @@
+import Layout from '../../components/docs-layout';
+import toast from 'react-hot-toast';
+
+export const meta = {
+  title: 'react-hot-toast 2.0 changes',
+};
+
+export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
+
+# What's new in react-hot-toast 2.0
+
+This release is all about **flexibility**. It allows you to create the notification system of your dreams, even simpler. Before we dig deeper into the new APIs, check out what's included in this release:
+
+<div className="">
+<span style={{ margin: '10px' }}>✨</span> <a href="#introducing-toastcustom" className="font-semibold">toast.custom()</a> <span className="">- Dispatch components as toast</span>
+<br />
+
+<span style={{ margin: '10px' }}>👀</span> <a
+  href="#better-accessibility"
+  className="font-semibold"
+>
+  Reduced-motion support
+</a> <span className="">- Automatically adapts to system preference</span>
+<br />
+
+<span style={{ margin: '10px' }}>🔀</span> <a
+  href="#per-toast-positioning"
+  className="font-semibold"
+>
+  Individually position toasts{' '}
+</a> <span className=""></span>
+<br />
+<span style={{ margin: '10px' }}>🧈</span> <a
+  href="#smoother-exit-animation"
+  className="font-semibold"
+>
+  Smoother exit animations
+</a> <span className=""></span>
+<br />
+
+<span style={{ margin: '10px' }}>⚙️</span> <a href="#custom-renderer-api" className="font-semibold">Custom Renderer API</a> <span className="">- Supply your own render function</span>
+</div>
+
+As well as a many [other improvements and fixes](#changelog).
+
+## Introducing `toast.custom()`
+
+This new function allows you to **render any React component** on the fly. Pass in JSX, and it will add it to the notification stack. There are no default styles applied, giving you complete control.
+
+This API makes it super easy to add [Tailwind UI Notifications](https://tailwindui.com/components/application-ui/overlays/notifications) to your React app.
+
+```jsx
+// Minimal Example
+toast.custom(<div>Minimal Example</div>);
+
+// Tailwind Example
+toast.custom((t) => (
+  <div
+    className={`bg-white px-6 py-4 shadow-md rounded-full ${
+      t.visible ? 'animate-enter' : 'animate-leave'
+    }`}
+  >
+    Hello TailwindCSS! 👋
+  </div>
+));
+```
+
+<div className="w-full relative">
+  <button
+    className="bg-toast-800 text-toast-100 whitespace-nowrap py-1 px-3 shadow-md rounded-lg absolute mt-[-4.5rem] -ml-2 transform -translate-x-full left-full"
+    onClick={() => {
+      toast.custom((t) => (
+        <div
+          className={`bg-white px-6 py-4 shadow-md rounded-full ${
+            t.visible ? 'animate-enter' : 'animate-leave'
+          }`}
+        >
+          Hello from TailwindCSS! 👋
+        </div>
+      ));
+    }}
+  >
+    Run Example
+  </button>
+</div>
+
+In the example above, we pass in a **function that returns JSX**. This allows us to access the current toast state and toggle between the enter and exit animation.
+
+Instead of CSS keyframe animations, you can use TailwindCSS classes by wrapping it in the [Transition](https://headlessui.dev/react/transition) component from [@headlessui/react](https://headlessui.dev/).
+
+## Better accessibility
+
+The prefers reduced motion is now respected by default. If react-hot-toast detects this setting, it will use fade transitions instead of sliding.
+
+## Smoother exit animation
+
+The exit animation is now less hectic when you have multiple toasts stacked.
+
+## Per toast positioning
+
+From now on, it's possible to have toasts at multiple positions at once. Just add the `position` you want as option when dispatching a toast.
+
+```jsx
+toast.success('Always at the bottom', {
+  position: 'bottom-center',
+});
+```
+
+<div className="w-full relative">
+  <button
+    className="bg-toast-800 text-toast-100 whitespace-nowrap py-1 px-3 shadow-md rounded-lg absolute mt-[-4.5rem] -ml-2 transform -translate-x-full left-full"
+    onClick={() => {
+      toast.success('Always at the bottom', {
+        position: 'bottom-center',
+      });
+    }}
+  >
+    Run Example
+  </button>
+</div>
+
+## Relative positioning
+
+You can now overwrite the default position of the toaster and place it anywhere you want.
+
+```jsx
+<Toaster containerStyle={{ position: 'absolute' }} />
+```
+
+## Simpler offset styling
+
+There is now a `gutter` option to control the gap between toasts.
+
+```jsx
+<Toaster gutter={30} />
+```
+
+The offset is now controlled by the Toaster and can be changed by overwriting the `top`, `right`, `bottom` and `left` styles.
+
+```jsx
+<Toaster containerStyle={{ top: '8px' }} />
+```
+
+## Custom Renderer API
+
+You can now use the [`<Toaster/>`](/docs/toaster#using-a-custom-render-function) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
+
+This is a great alternative if you are using [`useToaster()`](/docs/use-toaster) to render create custom notfications.
+
+This API allows us to dynamically react to to current state our toasts. This can be used to **change the default animations**, add **a custom dismiss button** or render a custom notification, like [TailwindUI Notifications](https://tailwindui.com/components/application-ui/overlays/notifications).
+
+```jsx
+import { Toaster, ToastBar } from 'react-hot-toast';
+
+const CustomToaster = () => (
+  <Toaster>
+    {(t) => (
+      <ToastBar>
+        {({ icon, message }) => (
+          <>
+            {icon}
+            {message}
+            {t.type !== 'loading' && (
+              <button onClick={() => toast.dismiss(t.id)}>X</button>
+            )}
+          </>
+        )}
+      </ToastBar>
+    )}
+  </Toaster>
+);
+```
+
+This example adapts the [ToastBar](/docs/toast-bar) with its new render function API. You can read more about the APIs in the [Toaster](/docs/toaster) & [ToastBar](/docs/toast-bar) docs.
+
+## Available now
+
+Get react-hot-toast 2.0 while it's hot. Upgrading from 1.0.0 should be seamless for most users.
+
+```sh
+yarn add react-hot-toast
+```
+
+## The future and beyond
+
+React Hot Toast got a lot more flexible with this version, laying the **foundation for future releases**. Thanks to everyone who helped out; much appreciated!
+
+In the next releases, I plan to add the [most requested feature](https://github.com/timolins/react-hot-toast/issues/7): a dismiss button. As well as support for [custom toast types](https://github.com/timolins/react-hot-toast/issues/23).
+
+---
+
+## Changelog
+
+### New
+
+- Easier Customization
+  - Create your own toast renderer (without useToaster)
+    - Support for custom render function in Toaster
+    - Support for custom render function in ToastBar
+  - `toast.custom()` - Render custom one-off toasts. No default styling will be applied.
+- Per toast positioning
+- New exit animation
+- Change the gutter between toasts with `<Toaster gutter={20} />`
+- Support for relative positioning
+- Respect reduce motion OS setting
+- Create persistent toasts with `duration: Infinity`
+
+### Breaking Changes
+
+- Use the `top`, `right`, `bottom`, `left` to in `containerStyle` to change the offset, instead of margin
+- Loading toasts no longer disappear after 30 seconds
+- `role` & `ariaLive` got moved into `ariaProps`
+- `useToaster()` no longer exposes `visibleToasts`
+- No longer expose `dispatch`
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
index e354947..36ba7c9 100644
--- a/site/pages/index.tsx
+++ b/site/pages/index.tsx
@@ -104,7 +104,7 @@ export default function Home() {
   const shouldFade =
     allToasts.filter((t) => t.visible).length && position.includes('top');
   return (
-    <div>
+    <div className="overflow-x-hidden">
       <NextSeo
         title={'react-hot-toast - The Best React Notifications in Town'}
         openGraph={{
diff --git a/site/styles/main.css b/site/styles/main.css
index 1b0f255..f36b5cd 100644
--- a/site/styles/main.css
+++ b/site/styles/main.css
@@ -4,7 +4,7 @@
 html,
 body,
 body > div {
-  @apply flex flex-col justify-between flex-1 min-h-full overflow-x-hidden text-toast-900;
+  @apply flex flex-col justify-between flex-1 min-h-full text-toast-900;
 }
 
 button,
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index e1558a6..a86634e 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -1,7 +1,10 @@
 module.exports = {
+  mode: 'jit',
   purge: [
     './pages/*.tsx',
     './pages/**/*.tsx',
+    './pages/*.mdx',
+    './pages/**/*.mdx',
     './components/*.tsx',
     './components/**/*.tsx',
   ],
@@ -18,12 +21,17 @@ module.exports = {
       animation: {
         enter: 'enter 200ms ease-out',
         'slide-in': 'slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)',
+        leave: 'leave 150ms ease-in forwards',
       },
       keyframes: {
         enter: {
           '0%': { transform: 'scale(0.9)', opacity: 0 },
           '100%': { transform: 'scale(1)', opacity: 1 },
         },
+        leave: {
+          '0%': { transform: 'scale(1)', opacity: 1 },
+          '100%': { transform: 'scale(0.9)', opacity: 0 },
+        },
         'slide-in': {
           '0%': { transform: 'translateY(-100%)' },
           '100%': { transform: 'translateY(0)' },
diff --git a/src/components/checkmark.tsx b/src/components/checkmark.tsx
index dee1fad..bffaa5c 100644
--- a/src/components/checkmark.tsx
+++ b/src/components/checkmark.tsx
@@ -1,35 +1,30 @@
 import { styled, keyframes } from 'goober';
 
 const circleAnimation = keyframes`
-  from {
-    transform: scale(0) rotate(45deg);
-	 opacity: 0;
-  }
-
-  to {
-    transform: scale(1) rotate(45deg);
-	 opacity: 1;
-  }
-`;
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+to {
+  transform: scale(1) rotate(45deg);
+	opacity: 1;
+}`;
 
 const checkmarkAnimation = keyframes`
-  0% {
-		height: 0;
-		width: 0;
-		opacity: 0;
-  }
-
-  40% {
-		height: 0;
-		width: 6px;
-		opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-		height: 10px;
-  }
-`;
+0% {
+	height: 0;
+	width: 0;
+	opacity: 0;
+}
+40% {
+  height: 0;
+	width: 6px;
+	opacity: 1;
+}
+100% {
+  opacity: 1;
+  height: 10px;
+}`;
 
 export interface CheckmarkTheme {
   primary?: string;
diff --git a/src/components/error.tsx b/src/components/error.tsx
index bd14920..96da602 100644
--- a/src/components/error.tsx
+++ b/src/components/error.tsx
@@ -1,40 +1,34 @@
 import { styled, keyframes } from 'goober';
 
 const circleAnimation = keyframes`
-  from {
-    transform: scale(0) rotate(45deg);
-	 opacity: 0;
-  }
-
-  to {
-    transform: scale(1) rotate(45deg);
-	 opacity: 1;
-  }
-`;
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+to {
+ transform: scale(1) rotate(45deg);
+  opacity: 1;
+}`;
 
 const firstLineAnimation = keyframes`
-  from {
-    transform: scale(0);
-	 opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-	 opacity: 1;
-  }
-`;
+from {
+  transform: scale(0);
+  opacity: 0;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`;
 
 const secondLineAnimation = keyframes`
-  from {
-    transform: scale(0) rotate(90deg);
-	 opacity: 0;
-  }
-
-  to {
-    transform: scale(1) rotate(90deg);
-	 opacity: 1;
-  }
-`;
+from {
+  transform: scale(0) rotate(90deg);
+	opacity: 0;
+}
+to {
+  transform: scale(1) rotate(90deg);
+	opacity: 1;
+}`;
 
 export interface ErrorTheme {
   primary?: string;
diff --git a/src/components/icon-wrapper.tsx b/src/components/icon-wrapper.tsx
deleted file mode 100644
index 6716ac3..0000000
--- a/src/components/icon-wrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { styled, keyframes } from 'goober';
-
-const enter = keyframes`
-from {
-  transform: scale(0.6);
-  opacity: 0.4;
-}
-
-to {
-  transform: scale(1);
-  opacity: 1;
-}
-`;
-
-export const AnimatedIconWrapper = styled('div')`
-  position: relative;
-  transform: scale(0.6);
-  opacity: 0.4;
-  min-width: 20px;
-  animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-    forwards;
-`;
diff --git a/src/components/indicator.tsx b/src/components/indicator.tsx
deleted file mode 100644
index 4c3a980..0000000
--- a/src/components/indicator.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { styled } from 'goober';
-
-import { ToastType, IconTheme } from '../core/types';
-import { ErrorIcon, ErrorTheme } from './error';
-import { LoaderIcon, LoaderTheme } from './loader';
-import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
-
-const StatusWrapper = styled('div')`
-  position: absolute;
-`;
-
-const IndicatorWrapper = styled('div')`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 20px;
-  min-height: 20px;
-`;
-
-export type IconThemes = Partial<{
-  success: CheckmarkTheme;
-  error: ErrorTheme;
-  loading: LoaderTheme;
-}>;
-
-interface IndicatorProps {
-  type: ToastType;
-  theme?: IconTheme;
-}
-
-export const Indicator: React.FC<IndicatorProps> = ({ type, theme }) => {
-  if (type === 'blank') {
-    return null;
-  }
-
-  return (
-    <IndicatorWrapper>
-      <LoaderIcon {...theme} />
-      {type !== 'loading' && (
-        <StatusWrapper>
-          {type === 'error' ? (
-            <ErrorIcon {...theme} />
-          ) : (
-            <CheckmarkIcon {...theme} />
-          )}
-        </StatusWrapper>
-      )}
-    </IndicatorWrapper>
-  );
-};
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
index 9cae15a..6525f7f 100644
--- a/src/components/toast-bar.tsx
+++ b/src/components/toast-bar.tsx
@@ -1,21 +1,23 @@
 import * as React from 'react';
-import { useCallback } from 'react';
-import { styled, keyframes, CSSAttribute } from 'goober';
+import { styled, keyframes } from 'goober';
 
-import { Toast, ToastPosition, resolveValueOrFunction } from '../core/types';
-import { Indicator } from './indicator';
-import { AnimatedIconWrapper } from './icon-wrapper';
+import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
+import { ToastIcon } from './toast-icon';
+import { prefersReducedMotion } from '../core/utils';
 
 const enterAnimation = (factor: number) => `
-0% {transform: translate3d(0,${factor * -80}px,0) scale(.6); opacity:.5;}
+0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
 100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
 `;
 
 const exitAnimation = (factor: number) => `
 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
-100% {transform: translate3d(0,${factor * -130}px,-1px) scale(.5); opacity:0;}
+100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
 `;
 
+const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
+const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
+
 const ToastBarBase = styled('div', React.forwardRef)`
   display: flex;
   align-items: center;
@@ -25,7 +27,6 @@ const ToastBarBase = styled('div', React.forwardRef)`
   will-change: transform;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
   max-width: 350px;
-  margin: 16px;
   pointer-events: auto;
   padding: 8px 10px;
   border-radius: 8px;
@@ -36,119 +37,74 @@ const Message = styled('div')`
   justify-content: center;
   margin: 4px 10px;
   color: inherit;
-  flex: 1;
+  flex: 1 1 auto;
 `;
 
 interface ToastBarProps {
   toast: Toast;
-  offset: number;
-  onHeight: (height: number) => void;
-
-  position: ToastPosition;
+  position?: ToastPosition;
+  style?: React.CSSProperties;
+  children?: (components: {
+    icon: Renderable;
+    message: Renderable;
+  }) => Renderable;
 }
 
-const getPositionStyle = (
-  position: ToastPosition,
-  offset: number
-): React.CSSProperties => {
-  const top = position.includes('top');
-  const verticalStyle = top ? { top: 0 } : { bottom: 0 };
-
-  const horizontalStyle: CSSAttribute = position.includes('left')
-    ? {
-        left: 0,
-      }
-    : position.includes('right')
-    ? {
-        right: 0,
-      }
-    : {
-        left: 0,
-        right: 0,
-        justifyContent: 'center',
-      };
-  return {
-    position: 'fixed',
-    transition: 'all 230ms cubic-bezier(.21,1.02,.73,1)',
-    transform: `translateY(${offset * (top ? 1 : -1)}px)`,
-    ...verticalStyle,
-    ...horizontalStyle,
-  };
-};
-
 const getAnimationStyle = (
   position: ToastPosition,
   visible: boolean
 ): React.CSSProperties => {
   const top = position.includes('top');
   const factor = top ? 1 : -1;
-  return visible
-    ? {
-        animation: `${keyframes`${enterAnimation(
-          factor
-        )}`} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`,
-      }
-    : {
-        animation: `${keyframes`${exitAnimation(
-          factor
-        )}`} 0.8s forwards cubic-bezier(.06,.71,.55,1)`,
-        pointerEvents: 'none',
-      };
+
+  const [enter, exit] = prefersReducedMotion()
+    ? [fadeInAnimation, fadeOutAnimation]
+    : [enterAnimation(factor), exitAnimation(factor)];
+
+  return {
+    animation: visible
+      ? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
+      : `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
+  };
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position, ...props }) => {
-    const ref = useCallback((el: HTMLElement | null) => {
-      if (el) {
-        setTimeout(() => {
-          const boundingRect = el.getBoundingClientRect();
-          props.onHeight(boundingRect.height);
-        });
-      }
-    }, []);
-
-    const positionStyle = getPositionStyle(position, props.offset);
-    const animationStyle = toast?.height
-      ? getAnimationStyle(position, toast.visible)
+  ({ toast, position, style, children }) => {
+    const animationStyle: React.CSSProperties = toast?.height
+      ? getAnimationStyle(
+          toast.position || position || 'top-center',
+          toast.visible
+        )
       : { opacity: 0 };
 
-    const renderIcon = () => {
-      const { icon, type, iconTheme } = toast;
-      if (icon !== undefined) {
-        if (typeof icon === 'string') {
-          return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
-        } else {
-          return icon;
-        }
-      }
-
-      return <Indicator theme={iconTheme} type={type} />;
-    };
+    const icon = <ToastIcon toast={toast} />;
+    const message = (
+      <Message {...toast.ariaProps}>
+        {resolveValue(toast.message, toast)}
+      </Message>
+    );
 
     return (
-      <div
+      <ToastBarBase
+        className={toast.className}
         style={{
-          display: 'flex',
-          zIndex: toast.visible ? 9999 : undefined,
-          pointerEvents: 'none',
-          ...positionStyle,
+          ...animationStyle,
+          ...style,
+          ...toast.style,
         }}
       >
-        <ToastBarBase
-          ref={ref}
-          className={toast.className}
-          style={{
-            pointerEvents: 'initial',
-            ...animationStyle,
-            ...toast.style,
-          }}
-        >
-          {renderIcon()}
-          <Message role={toast.role} aria-live={toast.ariaLive}>
-            {resolveValueOrFunction(toast.message, toast)}
-          </Message>
-        </ToastBarBase>
-      </div>
+        {typeof children === 'function' ? (
+          children({
+            icon,
+            message,
+          })
+        ) : (
+          <>
+            {icon}
+            {message}
+          </>
+        )}
+      </ToastBarBase>
     );
   }
 );
diff --git a/src/components/toast-icon.tsx b/src/components/toast-icon.tsx
new file mode 100644
index 0000000..d7e3677
--- /dev/null
+++ b/src/components/toast-icon.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { styled, keyframes } from 'goober';
+
+import { Toast } from '../core/types';
+import { ErrorIcon, ErrorTheme } from './error';
+import { LoaderIcon, LoaderTheme } from './loader';
+import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
+
+const StatusWrapper = styled('div')`
+  position: absolute;
+`;
+
+const IndicatorWrapper = styled('div')`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 20px;
+  min-height: 20px;
+`;
+
+const enter = keyframes`
+from {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`;
+
+export const AnimatedIconWrapper = styled('div')`
+  position: relative;
+  transform: scale(0.6);
+  opacity: 0.4;
+  min-width: 20px;
+  animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+`;
+
+export type IconThemes = Partial<{
+  success: CheckmarkTheme;
+  error: ErrorTheme;
+  loading: LoaderTheme;
+}>;
+
+export const ToastIcon: React.FC<{
+  toast: Toast;
+}> = ({ toast }) => {
+  const { icon, type, iconTheme } = toast;
+  if (icon !== undefined) {
+    if (typeof icon === 'string') {
+      return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
+    } else {
+      return icon;
+    }
+  }
+
+  if (type === 'blank') {
+    return null;
+  }
+
+  return (
+    <IndicatorWrapper>
+      <LoaderIcon {...iconTheme} />
+      {type !== 'loading' && (
+        <StatusWrapper>
+          {type === 'error' ? (
+            <ErrorIcon {...iconTheme} />
+          ) : (
+            <CheckmarkIcon {...iconTheme} />
+          )}
+        </StatusWrapper>
+      )}
+    </IndicatorWrapper>
+  );
+};
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
index d6a99a8..250cf5a 100644
--- a/src/components/toaster.tsx
+++ b/src/components/toaster.tsx
@@ -1,26 +1,74 @@
 import * as React from 'react';
-import { setup } from 'goober';
-import CSS from 'csstype';
+import { setup, css } from 'goober';
 
 import { useToaster } from '../core/use-toaster';
 import { ToastBar } from './toast-bar';
-import { ToastPosition, DefaultToastOptions } from '../core/types';
+import {
+  ToastPosition,
+  DefaultToastOptions,
+  Toast,
+  resolveValue,
+} from '../core/types';
+import { createRectRef, prefersReducedMotion } from '../core/utils';
 
 setup(React.createElement);
 
+const getPositionStyle = (
+  position: ToastPosition,
+  offset: number
+): React.CSSProperties => {
+  const top = position.includes('top');
+  const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
+  const horizontalStyle: React.CSSProperties = position.includes('center')
+    ? {
+        justifyContent: 'center',
+      }
+    : position.includes('right')
+    ? {
+        justifyContent: 'flex-end',
+      }
+    : {};
+  return {
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: prefersReducedMotion()
+      ? undefined
+      : `all 230ms cubic-bezier(.21,1.02,.73,1)`,
+    transform: `translateY(${offset * (top ? 1 : -1)}px)`,
+    ...verticalStyle,
+    ...horizontalStyle,
+  };
+};
+
+const activeClass = css`
+  z-index: 9999;
+  > * {
+    pointer-events: auto;
+  }
+`;
+
 interface ToasterProps {
   position?: ToastPosition;
-  reverseOrder?: boolean;
-  containerStyle?: CSS.Properties;
-
   toastOptions?: DefaultToastOptions;
+  reverseOrder?: boolean;
+  gutter?: number;
+  containerStyle?: React.CSSProperties;
+  containerClassName?: string;
+  children?: (toast: Toast) => JSX.Element;
 }
 
+const DEFAULT_OFFSET = 16;
+
 export const Toaster: React.FC<ToasterProps> = ({
   reverseOrder,
   position = 'top-center',
-  containerStyle,
   toastOptions,
+  gutter,
+  children,
+  containerStyle,
+  containerClassName,
 }) => {
   const { toasts, handlers } = useToaster(toastOptions);
 
@@ -29,22 +77,47 @@ export const Toaster: React.FC<ToasterProps> = ({
       style={{
         position: 'fixed',
         zIndex: 9999,
+        top: DEFAULT_OFFSET,
+        left: DEFAULT_OFFSET,
+        right: DEFAULT_OFFSET,
+        bottom: DEFAULT_OFFSET,
+        pointerEvents: 'none',
         ...containerStyle,
       }}
+      className={containerClassName}
       onMouseEnter={handlers.startPause}
       onMouseLeave={handlers.endPause}
     >
       {toasts.map((t) => {
+        const toastPosition = t.position || position;
+        const offset = handlers.calculateOffset(t, {
+          reverseOrder,
+          gutter,
+          defaultPosition: position,
+        });
+        const positionStyle = getPositionStyle(toastPosition, offset);
+
+        const ref = t.height
+          ? undefined
+          : createRectRef((rect) => {
+              handlers.updateHeight(t.id, rect.height);
+            });
+
         return (
-          <ToastBar
+          <div
+            ref={ref}
+            className={t.visible ? activeClass : ''}
             key={t.id}
-            onHeight={(height) => handlers.updateHeight(t.id, height)}
-            toast={t}
-            offset={handlers.calculateOffset(t.id, {
-              reverseOrder,
-            })}
-            position={position}
-          />
+            style={positionStyle}
+          >
+            {t.type === 'custom' ? (
+              resolveValue(t.message, t)
+            ) : children ? (
+              children(t)
+            ) : (
+              <ToastBar toast={t} position={toastPosition} />
+            )}
+          </div>
         );
       })}
     </div>
diff --git a/src/core/store.ts b/src/core/store.ts
index 5163a9e..274daf8 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -172,7 +172,8 @@ const defaultTimeouts: {
   blank: 4000,
   error: 4000,
   success: 2000,
-  loading: 30000,
+  loading: Infinity,
+  custom: 4000,
 };
 
 export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
diff --git a/src/core/toast.ts b/src/core/toast.ts
index 34a17ef..ec04865 100644
--- a/src/core/toast.ts
+++ b/src/core/toast.ts
@@ -5,7 +5,7 @@ import {
   ToastType,
   DefaultToastOptions,
   ValueOrFunction,
-  resolveValueOrFunction,
+  resolveValue,
 } from './types';
 import { genId } from './utils';
 import { dispatch, ActionType } from './store';
@@ -22,8 +22,10 @@ const createToast = (
   createdAt: Date.now(),
   visible: true,
   type,
-  role: 'status',
-  ariaLive: 'polite',
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite',
+  },
   message,
   pauseDuration: 0,
   ...opts,
@@ -45,6 +47,7 @@ const toast = (message: Message, opts?: ToastOptions) =>
 toast.error = createHandler('error');
 toast.success = createHandler('success');
 toast.loading = createHandler('loading');
+toast.custom = createHandler('custom');
 
 toast.dismiss = (toastId?: string) => {
   dispatch({
@@ -69,7 +72,7 @@ toast.promise = <T>(
 
   promise
     .then((p) => {
-      toast.success(resolveValueOrFunction(msgs.success, p), {
+      toast.success(resolveValue(msgs.success, p), {
         id,
         ...opts,
         ...opts?.success,
@@ -77,7 +80,7 @@ toast.promise = <T>(
       return p;
     })
     .catch((e) => {
-      toast.error(resolveValueOrFunction(msgs.error, e), {
+      toast.error(resolveValue(msgs.error, e), {
         id,
         ...opts,
         ...opts?.error,
diff --git a/src/core/types.ts b/src/core/types.ts
index e680861..4ea02e4 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -1,6 +1,6 @@
-import { Properties } from 'csstype';
+import { CSSProperties } from 'react';
 
-export type ToastType = 'success' | 'error' | 'loading' | 'blank';
+export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
 export type ToastPosition =
   | 'top-left'
   | 'top-center'
@@ -9,7 +9,7 @@ export type ToastPosition =
   | 'bottom-center'
   | 'bottom-right';
 
-export type Renderable = JSX.Element | string | number | null;
+export type Renderable = JSX.Element | string | null;
 
 export interface IconTheme {
   primary: string;
@@ -26,7 +26,7 @@ const isFunction = <TValue, TArg>(
 ): valOrFunction is ValueFunction<TValue, TArg> =>
   typeof valOrFunction === 'function';
 
-export const resolveValueOrFunction = <TValue, TArg>(
+export const resolveValue = <TValue, TArg>(
   valOrFunction: ValueOrFunction<TValue, TArg>,
   arg: TArg
 ): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);
@@ -38,11 +38,14 @@ export interface Toast {
   icon?: Renderable;
   duration?: number;
   pauseDuration: number;
+  position?: ToastPosition;
 
-  role: 'status' | 'alert';
-  ariaLive: 'assertive' | 'off' | 'polite';
+  ariaProps: {
+    role: 'status' | 'alert';
+    'aria-live': 'assertive' | 'off' | 'polite';
+  };
 
-  style?: Properties;
+  style?: CSSProperties;
   className?: string;
   iconTheme?: IconTheme;
 
@@ -57,10 +60,10 @@ export type ToastOptions = Partial<
     | 'id'
     | 'icon'
     | 'duration'
-    | 'role'
-    | 'ariaLive'
+    | 'ariaProps'
     | 'className'
     | 'style'
+    | 'position'
     | 'iconTheme'
   >
 >;
diff --git a/src/core/use-toaster.ts b/src/core/use-toaster.ts
index c4f83dc..ceb9d32 100644
--- a/src/core/use-toaster.ts
+++ b/src/core/use-toaster.ts
@@ -1,11 +1,10 @@
 import { useEffect, useMemo } from 'react';
 import { dispatch, ActionType, useStore } from './store';
 import { toast } from './toast';
-import { DefaultToastOptions } from './types';
+import { DefaultToastOptions, Toast, ToastPosition } from './types';
 
 export const useToaster = (toastOptions?: DefaultToastOptions) => {
   const { toasts, pausedAt } = useStore(toastOptions);
-  const visibleToasts = toasts.filter((t) => t.visible);
 
   useEffect(() => {
     if (pausedAt) {
@@ -54,27 +53,39 @@ export const useToaster = (toastOptions?: DefaultToastOptions) => {
           toast: { id: toastId, height },
         }),
       calculateOffset: (
-        toastId: string,
-        opts?: { reverseOrder?: boolean; margin?: number }
+        toast: Toast,
+        opts?: {
+          reverseOrder?: boolean;
+          gutter?: number;
+          defaultPosition?: ToastPosition;
+        }
       ) => {
-        const { reverseOrder = false, margin = 8 } = opts || {};
-        const index = visibleToasts.findIndex((toast) => toast.id === toastId);
-        const offset =
-          index !== -1
-            ? visibleToasts
-                .slice(...(reverseOrder ? [index + 1] : [0, index]))
-                .reduce((acc, t) => acc + (t.height || 0) + margin, 0)
-            : 0;
+        const { reverseOrder = false, gutter = 8, defaultPosition } =
+          opts || {};
+
+        const relevantToasts = toasts.filter(
+          (t) =>
+            (t.position || defaultPosition) ===
+              (toast.position || defaultPosition) && t.height
+        );
+        const toastIndex = relevantToasts.findIndex((t) => t.id === toast.id);
+        const toastsBefore = relevantToasts.filter(
+          (toast, i) => i < toastIndex && toast.visible
+        ).length;
+
+        const offset = relevantToasts
+          .filter((t) => t.visible)
+          .slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
+          .reduce((acc, t) => acc + (t.height || 0) + gutter, 0);
 
         return offset;
       },
     }),
-    [visibleToasts, pausedAt]
+    [toasts, pausedAt]
   );
 
   return {
     toasts,
-    visibleToasts,
     handlers,
   };
 };
diff --git a/src/core/utils.ts b/src/core/utils.ts
index fdaca37..098159a 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -4,3 +4,27 @@ export const genId = (() => {
     return (++count).toString();
   };
 })();
+
+export const createRectRef = (onRect: (rect: DOMRect) => void) => (
+  el: HTMLElement | null
+) => {
+  if (el) {
+    setTimeout(() => {
+      const boundingRect = el.getBoundingClientRect();
+      onRect(boundingRect);
+    });
+  }
+};
+
+export const prefersReducedMotion = (() => {
+  // Cache result
+  let shouldReduceMotion: boolean | undefined = undefined;
+
+  return () => {
+    if (shouldReduceMotion === undefined) {
+      const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');
+      shouldReduceMotion = !mediaQuery || mediaQuery.matches;
+    }
+    return shouldReduceMotion;
+  };
+})();
diff --git a/src/index.tsx b/src/index.tsx
index 79629d3..01bb29d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,14 +6,11 @@ import {
   ToastPosition as _ToastPosition,
 } from './core/types';
 export { useToaster } from './core/use-toaster';
-export { dispatch, ActionType } from './core/store';
 export { ToastBar } from './components/toast-bar';
+export { ToastIcon } from './components/toast-icon';
 export { Toaster } from './components/toaster';
 export { useStore as useToasterStore } from './core/store';
-
-export { CheckmarkIcon } from './components/checkmark';
-export { ErrorIcon } from './components/error';
-export { LoaderIcon } from './components/loader';
+export { resolveValue } from './core/types';
 
 export type ToastOptions = _ToastOptions;
 export type ToastPosition = _ToastPosition;