Merge branch 'main' into refactor-modals

docs/widget/common-questions.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Common Questions"
+title: 'Common Questions'
 ---
 
 ## I'm getting a "Buffer is not defined" error, how do I fix?
@@ -11,4 +11,17 @@ Here are some polyfill plugins for common environments:
 - [Webpack](https://www.npmjs.com/package/node-polyfill-webpack-plugin),
 - [Rollup](https://www.npmjs.com/package/rollup-plugin-polyfill-node),
 - [Vite](https://www.npmjs.com/package/vite-plugin-node-polyfills),
-- [ESBuild](https://www.npmjs.com/package/esbuild-plugins-node-modules-polyfill)
+- [ESBuild](https://www.npmjs.com/package/esbuild-plugins-node-modules-polyfill)
+
+## I'm getting errors such as `could not resolve "react/jsx-runtime"` after installing the widget, how do I fix?
+
+If you encounter errors such as `could not resolve "react/jsx-runtime"` after installing the widget, you may need to install the peer dependencies.
+Some package managers will install peer dependencies by default if they are missing, but others (like yarn) will not.
+
+Try installing the following packages and see if that resolves the issue:
+
+(example using yarn)
+
+```bash
+yarn add react react-dom styled-components
+```

docs/widget/getting-started.mdx

@@ -1,12 +1,12 @@
 ---
-title: "Getting Started"
+title: 'Getting Started'
 ---
 
 # Overview
 
-Skip Go Widget is the easiest way to onboard users and capital from anywhere in the world to your corner of the sovereign web! The widget provides seamless cross-chain bridging, swapping, and transferring functionality, in an easy to integrate React/Web Component. 
+Skip Go Widget is the easiest way to onboard users and capital from anywhere in the world to your corner of the sovereign web! The widget provides seamless cross-chain bridging, swapping, and transferring functionality, in an easy to integrate React/Web Component.
 
-Purpose built with customizability, extensibility, and contributor friendliness in mind, the Skip Go Widget is fully open-sourced designed to fit your exact user experience needs. If there's any functionality or configurations you'd like to see in the widget, we'd love for you to contribute by opening up an issue/pull request in [the repository](https://discord.com/invite/hFeHVAE26P)  or by joining [our Discord](https://discord.com/invite/hFeHVAE26P) and giving us a shout!
+Purpose built with customizability, extensibility, and contributor friendliness in mind, the Skip Go Widget is fully open-sourced designed to fit your exact user experience needs. If there's any functionality or configurations you'd like to see in the widget, we'd love for you to contribute by opening up an issue/pull request in [the repository](https://discord.com/invite/hFeHVAE26P) or by joining [our Discord](https://discord.com/invite/hFeHVAE26P) and giving us a shout!
 
 # Useful Links
 
@@ -25,6 +25,13 @@ The `@skip-go/widget` package is an npm package providing a React component for
 npm install @skip-go/widget
 ```
 
+If you're using yarn (or some other package manager that doesn't install peer dependencies by default)
+you may need to install these peer dependencies as well:
+
+```bash
+yarn add react react-dom styled-components
+```
+
 ## 2. Use the `SwapWidget` Component
 
 Next, use the `SwapWidget` component to render the swap interface:
@@ -52,4 +59,4 @@ const SwapPage = () => {
 
 ## 3. Configure away!
 
-You're all done with the basic set up! Now that you have the widget integrated, it's time to configure the user experience. You can find all of the configurable component props in [Configuration Options](/widget/configuration-options).
+You're all done with the basic set up! Now that you have the widget integrated, it's time to configure the user experience. You can find all of the configurable component props in [Configuration Options](/widget/configuration-options).

docs/widget/web-component.mdx

@@ -1,19 +1,32 @@
 ---
-title: "Web Component"
+title: 'Web Component'
 ---
 
-# Web Component
-
 If your app is not using React, have no fear, the web component version of the Skip:Go Widget is here!
 
 In order to register the web-component, you must first call the `initializeSwapWidget` function:
+
 ```tsx
 import { initializeSwapWidget } from '@skip-go/widget';
 initializeSwapWidget();
 ```
+
+## If you encounter errors such as `could not resolve "react/jsx-runtime"` after installing the widget, you may need to install the peer dependencies.
+
+Some package managers will install peer dependencies by default if they are missing, but others (like yarn) will not.
+
+Try installing the following packages and see if that resolves the issue:
+
+(example using yarn)
+
+```bash
+yarn add react react-dom styled-components
+```
+
 et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`.
 The props for the web component are the same as `SwapWidgetProps` except that all props
 are passed to the web-component via attributes in kebab-case as strings or stringified objects. Example below:
+
 ```tsx
 <div
   style={{
@@ -35,7 +48,9 @@ are passed to the web-component via attributes in kebab-case as strings or strin
   />
 </div>
 ```
+
 becomes
+
 ```tsx
 <div style="width:450px;height:820px;">
   <swap-widget
@@ -49,4 +64,4 @@ becomes
     })}
   ></swap-widget>
 </div>
-```
+```

packages/widget/README.md

@@ -1,5 +1,3 @@
 # Skip Go Widget
 
 We document everything about Skip Go Widget in [docs.skip.build/go/widget](https://docs.skip.build/go/widget)
-
-[Here](https://github.com/skip-mev/skip-go/blob/main/docs/widget/) is where all of the markdown lives