Added configuration for font-loading

packages/web/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   stories: [
     "../stories/**/*.stories.mdx",
@@ -15,5 +17,14 @@ module.exports = {
   },
   typescript: {
     reactDocgen: false
-  }
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ];
+  
+    // Return the altered config
+    return config;
+  },
 }

packages/web/.storybook/preview.js

@@ -1,5 +1,7 @@
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import * as NextImage from 'next/image';
+import { getCssText } from '../components/tokens/stitches.config';
+import "../styles/globals.css";
 
 const OriginalNextImage = NextImage.default;
 
@@ -20,3 +22,21 @@ export const parameters = {
     Provider: RouterContext.Provider
   }
 }
+
+export const decorators = [
+  (Story, context) => {
+    return (
+      <>
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{
+            __html: getCssText(),
+          }}
+        />
+        <div className='Gray'>
+          <Story {...context} />
+        </div>
+      </>
+    );
+  }
+]

packages/web/stories/Snackbar.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { Toaster, ToastPosition } from 'react-hot-toast'
 import { showErrorToast, showSuccessToast } from '../lib/toastHelpers'
+import { Button } from '../components/elements/Button'
 
 export default {
   title: 'Components/Snackbar',
@@ -32,7 +33,9 @@ const Template = ({ showToast, position }: { showToast: () => void; position?: T
         justifyContent: 'center',
       }}
     >
-      <button onClick={showToast}>Show Toast</button>
+      <Button style='ctaGray' onClick={showToast}>
+        Show Toast
+      </Button>
     </div>
   </div>
 )