Feature/toast component fixed

.eslintrc.js

@@ -7,13 +7,13 @@ module.exports = {
     "plugin:mdx/recommended"
   ],
   rules: {
-    'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
     "import/no-unused-modules": [
       1,
       {
         "unusedExports": true,
       }
     ],
+    'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
     'react/display-name': 1,
     'react/react-in-jsx-scope': 0,
   },

.storybook/preview.js

@@ -3,15 +3,15 @@ import {
   addParameters,
   addDecorator
 } from '@storybook/react';
-import CodeBlock from '../src/CodeBlock';
+// import CodeBlock from '../src/CodeBlock';
 import { GlobalStyles, ThemeProvider, Heading, defaultIcons, defaultTheme } from '../src';
 
 const h1 = (props) => <Heading as="h1" fontFamily={`-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"`}fontSize="36px" {...props} fontWeight={700} />
 
 addParameters({
   docs: {
     components: {
-      code: CodeBlock,
+      // code: CodeBlock,
       h1
     },
   },

docs/pages/components/Icon.mdx

@@ -31,8 +31,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

docs/pages/components/Menu.mdx

@@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me
 
 When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).
 
-<Callout emoji="⚠️">Do _not_ use this if you need to store a value. Use a `<select />` component instead.
+<Callout emoji="⚠️">
+  Do _not_ use this if you need to store a value. Use a `<select />` component
+  instead.
 </Callout>
 
 ```js

docs/pages/examples/Buttons.mdx

@@ -23,7 +23,7 @@ render(
 <Stack horizontal>
   <Button>
     <Icon name="mail" mr={2} size="16px" /> Inbox
-    </Button>
+  </Button>
   <Button>
     Save <Icon name="save" ml={2} size="16px" />
   </Button>

docs/pages/examples/Forms.mdx

@@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms)
   return (
     <Stack>
       {items.map(plan => (
-      <Button
-        flexDirection="row"
-        width="100%"
-        borderWidth={0}
-        borderBottomWidth={1}
-        borderBottomStyle="solid"
-        borderBottomColor="gray.300"
-        pr={3}
-        pl={3}
-        overflow="hidden"
-        alignItems="center"
-        onClick={() => setSelected(plan)}
-      >
-        <Flex
-          width={4}
-          height={4}
-          backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'}
-          mr={4}
-          borderRadius={100}
-          borderColor="#5850ec"
-          borderWidth={1}
-          borderStyle="solid"
-          justifyContent="center"
+        <Button
+          flexDirection="row"
+          width="100%"
+          borderWidth={0}
+          borderBottomWidth={1}
+          borderBottomStyle="solid"
+          borderBottomColor="gray.300"
+          pr={3}
+          pl={3}
+          overflow="hidden"
           alignItems="center"
+          onClick={() => setSelected(plan)}
         >
-          <Box
-            width={1}
-            height={1}
-            backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
-            borderRadius={50}
-            borderColor="#fff"
+          <Flex
+            width={4}
+            height={4}
+            backgroundColor={
+              selected.id === plan.id ? '#5850ec' : 'transparent'
+            }
+            mr={4}
+            borderRadius={100}
+            borderColor="#5850ec"
             borderWidth={1}
             borderStyle="solid"
-          />
-        </Flex>
-        <Flex
-          width="100%"
-          flexDirection="row"
-          justifyContent="space-between"
-          px={1}
-          py={4}
-        >
-          <Flex flexDirection="column" alignItems="flex-start">
-            <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
-              {plan.title}
-            </Text>
-            <Text color="gray.400">{plan.description}</Text>
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Box
+              width={1}
+              height={1}
+              backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
+              borderRadius={50}
+              borderColor="#fff"
+              borderWidth={1}
+              borderStyle="solid"
+            />
           </Flex>
-          <Flex>
-            <Text fontSize="2xl" py={2}>
-              {plan.cost}/mo
-            </Text>
+          <Flex
+            width="100%"
+            flexDirection="row"
+            justifyContent="space-between"
+            px={1}
+            py={4}
+          >
+            <Flex flexDirection="column" alignItems="flex-start">
+              <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
+                {plan.title}
+              </Text>
+              <Text color="gray.400">{plan.description}</Text>
+            </Flex>
+            <Flex>
+              <Text fontSize="2xl" py={2}>
+                {plan.cost}/mo
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
-      </Button>
-    ))}
-  </Stack>
-  )
+        </Button>
+      ))}
+    </Stack>
+  );
 };
 ```
 

docs/pages/index.mdx

@@ -69,8 +69,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

package.json

@@ -96,6 +96,7 @@
     "@reach/dialog": "^0.11.2",
     "@reach/menu-button": "^0.11.2",
     "@reach/popover": "^0.11.2",
+    "@reach/portal": "0.12.1",
     "@reach/tabs": "^0.11.2",
     "@reach/tooltip": "^0.11.2",
     "@styled-system/css": "^5.1.5",
@@ -134,7 +135,6 @@
     ],
     "coveragePathIgnorePatterns": [
       "/node_modules/",
-      "<rootDir>/src/CodeBlock.*",
       "(.d.ts)$",
       ".stories.tsx$",
       "<rootDir>/src/type-utilities.tsx"