diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index a5d057ab713..4e4b03ecbec 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -888,6 +888,7 @@ export const integrations = {
         { name: 'Authsignal', url: '/guides/integrations/authsignal' },
         { name: 'Clerk', url: '/guides/integrations/clerk' },
         { name: 'keyri', url: '/guides/integrations/keyri' },
+        { name: 'Passage', url: '/guides/integrations/passage' },
         { name: 'Stytch', url: '/guides/integrations/stytch' },
         { name: 'SuperTokens', url: '/guides/integrations/supertokens' },
       ],
diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx
index c3b9901e49d..34ec6137a52 100644
--- a/apps/docs/pages/guides/functions.mdx
+++ b/apps/docs/pages/guides/functions.mdx
@@ -94,7 +94,7 @@ export const examples = [
   {
     name: 'Connect to Postgres',
     description: `Connecting to Postgres from Edge Functions.`,
-    href: '/guides/functions/examples/connect-to-postgres',
+    href: '/guides/functions/connect-to-postgres',
   },
   {
     name: 'Github Actions',
diff --git a/apps/docs/pages/guides/integrations/auth0.mdx b/apps/docs/pages/guides/integrations/auth0.mdx
index e344acacdb8..f22ce35ba82 100644
--- a/apps/docs/pages/guides/integrations/auth0.mdx
+++ b/apps/docs/pages/guides/integrations/auth0.mdx
@@ -162,7 +162,7 @@ Open `pages/_app.js` and wrap our `Component` with the `UserProvider` from Auth0
 // pages/_app.js
 
 import React from 'react'
-import { UserProvider } from '@auth0/nextjs-auth0'
+import { UserProvider } from '@auth0/nextjs-auth0/client'
 
 const App = ({ Component, pageProps }) => {
   return (
diff --git a/apps/docs/pages/guides/integrations/passage.mdx b/apps/docs/pages/guides/integrations/passage.mdx
new file mode 100644
index 00000000000..46ebc61ba1e
--- /dev/null
+++ b/apps/docs/pages/guides/integrations/passage.mdx
@@ -0,0 +1,608 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'passage',
+  title: 'Passage',
+  description:
+    'Build a Next.js application that uses passkey authentication with Passage and Row Level Security (RLS) with Supabase.',
+}
+
+This guide steps through building a Next.js application with Passage and Supabase. We will use Passage to authenticate users and manage tokens, while using Supabase for storing data and enforcing authorization logic using Row Level Security policies.
+
+The full code example for this guide can be found [here](https://github.com/passageidentity/supabase-passage-example).
+
+[Passage](https://passage.id) is a passwordless authentication platform that makes it simple for developers to add passkey authentication to their apps and websites, providing better security and simpler sign in for your users. They provide simple frontend components that handle all of the complexity of passwordless login for developers in just two lines of codes. Passage also provides session management, user management, and in-depth customization capabilities.
+
+Next.js is a web application framework built on top of React. We will be using it for this example, as it allows us to write server-side logic within our application. Passage’s [frontend elements](https://docs.passage.id/frontend/passage-element) and [Node.js SDK](https://docs.passage.id/backend/overview/node) are designed to work for Next.js. 
+
+For this guide, you will need a Passage account which can be created [here](https://console.passage.id/register), and a Supabase account which can be created [here](https://app.supabase.com/).
+
+## 1. Create a Passage application
+In the [Passage Console](https://console.passage.id), create a new application with the following configuration:
+
+* Application name: Todo Application
+* Authentication origin: http://localhost:3000
+* Redirect URL: /dashboard
+
+![Passage Console dashboard](/docs/img/guides/integrations/passage/01.png)
+
+![Fill out the required fields to create a new application](/docs/img/guides/integrations/passage/02.png)
+
+## 2. Create and configure a Supabase project
+
+#### Create a new project
+In the [Supabase dashboard](https://app.supabase.com/), click `New Project`.
+Enter a name for your project and create a secure database password.
+
+#### Create a table schema
+We are building Todo list application, similar to the [Supabase demo application](https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list) so we will need a table for the todo list items.
+
+Create a new table in the Table Editor view.
+
+Set the Name field to `todo`.
+
+Select Enable Row Level Security (RLS).
+
+Create the following new columns.
+  * `title` as `text`
+  * `user_id` as `text` with a default value of `auth.user_id()`
+  * `is_complete` as `bool` with a default value of `false`
+
+Click `Save` to create the table.
+
+![Table schema.](/docs/img/guides/integrations/passage/03.png)
+
+#### Add initial data to the table
+From the Table editor, select the `todo` table and click `Insert row`. Fill out the required fields with an example todo item, leaving the `user_id` as NULL and click `Save`.
+
+![Example todo item.](/docs/img/guides/integrations/passage/04.png)
+
+After adding a few todo items, the table editor view will look like this:
+
+![Table with multiple todo items.](/docs/img/guides/integrations/passage/05.png)
+
+## 3. Build a Next.js app
+
+#### Create Next.js app
+
+Create a new Next.js project on the command line. You can choose your settings through the setup wizard - for this guide we will use JavaScript instead of TypeScript. This example uses the create script in Next v13.2.
+
+```sh
+npx create-next-app <name-of-project>
+cd <name-of-project>/
+```
+
+You should be able to use the default settings for the project, but here are the settings used for the example app.
+
+![Settings for Next.js application.](/docs/img/guides/integrations/passage/06.png)
+
+#### Configure your ENV 
+
+Create a `.env` file and enter the following values.
+
+```sh
+NEXT_PUBLIC_PASSAGE_APP_ID=get-from-passage-settings
+PASSAGE_API_KEY=get-from-passage-settings
+NEXT_PUBLIC_SUPABASE_URL=get-from-supabase-dashboard
+NEXT_PUBLIC_SUPABASE_ANON_KEY=get-from-supabase-dashboard
+SUPABASE_JWT_SECRET=get-from-supabase-dashboard
+```
+
+The Supabase values can be found under `Project->Settings->API Settings`.
+
+![Supabase environment variables.](/docs/img/guides/integrations/passage/07.png)
+
+The Passage values can be found under `General->Settings` and `General->API Keys`.
+
+![Passage environment variables.](/docs/img/guides/integrations/passage/08.png)
+
+![Passage environment variables.](/docs/img/guides/integrations/passage/09.png)
+
+> The `PASSAGE_API_KEY` and `SUPABASE_JWT_SECRET` are secret values and should never be shared publicly. They will only be used in the server-side code of the Next.js application.
+
+Restart your Next.js development server to read in the environment variables.
+
+```bash
+npm run dev
+```
+
+## 4. Add Passage login to your app
+
+#### Add Passage Element
+
+Install the `@passageidentity/passage-elements` package.
+
+```bash
+npm install @passageidentity/passage-elements
+```
+
+Create a new folder called components with a new login file `components/login.js` and add the following content.
+
+```js
+// components/login.js
+import { useEffect } from 'react';
+
+const PassageLogin = () => {
+
+    useEffect(()=>{
+        require('@passageidentity/passage-elements/passage-auth');
+    }, []);
+
+    return (
+        <>
+          <passage-auth app-id={process.env.NEXT_PUBLIC_PASSAGE_APP_ID}></passage-auth>
+        </>
+      )
+  }
+  
+  export default PassageLogin
+```
+
+Then update `pages/index.js` to include the login component.
+
+```js
+// pages/index.js
+import styles from '@/styles/Home.module.css'
+import PassageLogin from '@/components/login'
+
+
+export default function Home(props) {
+    return(
+      <div className={styles.main}>
+        <PassageLogin />
+      </div>
+    ) 
+}
+```
+
+When we have a successful registration the Passage element will request a redirect to `/dashboard` per the redirect URL we set during app creation. 
+
+Create a new file `pages/dashboard.js` for this new route with the following content: 
+
+```js
+// pages/dashboard.js
+import styles from '@/styles/Home.module.css'
+
+export default function Dashboard({isAuthorized, userID, todos}) {    
+    return(
+       <div className={styles.main}>
+        <div className={styles.container}>
+          <p>
+            You've logged in! 
+          </p>
+        </div>
+      </div>
+    )
+}
+```
+Now when you visit `http://localhost:3000` in a browser you will have a fully functioning and passwordless login page!
+
+![Simple app with Passage login page.](/docs/img/guides/integrations/passage/10.png)
+
+Go ahead and go through the registration process. You will be able to register an account with either a passkey or a magic link. Once you've logged in, you will notice that you just get redirected to `/dashboard` page.
+The login was successful, but we need to build in the functionality to know when a user is authenticated and show them the appropriate view.
+
+#### Use Passage to verify the JWT
+
+Now we will need to use a Passage SDK to verify the JWT from Passage. 
+
+Install the Passage Node.js library.
+
+```bash
+npm install @passageidentity/passage-node
+```
+
+Create a utils folder and a file called `utils/passage.js` with the following content.
+
+```js
+// utils/passage.js
+import Passage from '@passageidentity/passage-node';
+
+const passage = new Passage({
+    appID: process.env.NEXT_PUBLIC_PASSAGE_APP_ID,
+    apiKey: process.env.PASSAGE_API_KEY,
+});
+
+export const getAuthenticatedUserFromSession = async (req, res) => {
+    try {
+        const userID = await passage.authenticateRequest(req);
+        if (userID) {
+          return {isAuthorized: true, userID: userID};
+        }
+      } catch (error) {
+        // authentication failed
+        return {isAuthorized: false, userID: ''};
+      }
+}
+```
+
+This will be used in the `getServerSideProps()` function to check authentication status for a user. Add this function to `index.js` then update the `Home` function to use the props.
+
+```js
+// pages/index.js
+import styles from '@/styles/Home.module.css'
+import PassageLogin from '@/components/login'
+import { getAuthenticatedUserFromSession } from '@/utils/passage'
+import { useEffect } from 'react'
+import Router from 'next/router';
+
+export default function Home({isAuthorized}) {
+  useEffect(()=> {
+    if(isAuthorized){
+      Router.push('/dashboard')
+    }
+  })
+  
+    return(
+      <div className={styles.main}>
+        <PassageLogin />
+      </div>
+    ) 
+}
+
+export const getServerSideProps = async (context) => {
+  const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
+    return {
+      props: {
+        isAuthorized: loginProps.isAuthorized?? false,
+        userID: loginProps.userID?? ''
+      },
+    }
+}
+```
+
+We will also use this logic on the dashboard page to check if a user is authenticated. If not we should redirect them to the login page. We will also add a quick sign out button using Passage while we are at it.
+
+```js
+// pages/dashboard.js
+import styles from '@/styles/Home.module.css'
+import { useEffect } from 'react';
+import Router from 'next/router';
+import { getAuthenticatedUserFromSession } from '@/utils/passage'
+import { PassageUser } from '@passageidentity/passage-elements/passage-user'
+
+export default function Dashboard({isAuthorized, userID}) {
+    useEffect(() => {
+      if(!isAuthorized){
+        Router.push('/');
+      }
+    })
+    
+    const signOut = async ()=>{
+        new PassageUser().signOut()
+        Router.push('/')
+    }
+    
+    return (
+      <div className={styles.main}>
+        <h1>
+          Welcome {userID}!{' '}
+        </h1>
+        <br></br>
+        <button onClick={signOut}>Sign Out</button>
+      </div>
+    )
+  }
+
+export const getServerSideProps = async (context) => {
+    const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
+
+    return {
+        props: {
+          isAuthorized: loginProps.isAuthorized?? false,
+          userID: loginProps.userID?? '',
+        },
+      }
+}
+```
+
+The app can now tell the difference between an authenticated and unauthenticated user. When you log into the application, you will be redirected to the dashboard and see this message.
+
+![Authenticated users can see their user ID.](/docs/img/guides/integrations/passage/11.png)
+
+## 5. Integrate Supabase into Next.js app
+
+Passage and Supabase do not currently allow for custom signing secrets. Therefore, we will need to extract the necessary claims from the Passage JWT and sign a new JWT to send to Supabase.
+
+Because of the sensitive nature of this functionality, we will handle the authentication and JWT exchange in Next.js’s server-side rendering function `getServerSideProps()`. Imports used in this function will not be bundled client-side. Additionally, the JWT provided by Passage is stored in a cookie which is automatically passed to `getServerSideProps()`.
+
+#### Sign Passage token for Supabase
+
+Install the Supabase client SDK and the popular Node package `jsonwebtoken`, which allows us to easily work with JWTs.
+
+```bash
+npm install @supabase/supabase-js jsonwebtoken
+```
+
+Create a new file called `utils/supabase.js` and add the following content. This function accepts a Passage user ID and then creates and signs a Supabase JWT for that user. This allows Supabase to verify the token and authenticate the user when making Supabase calls.
+
+```js
+// utils/supabase.js
+import { createClient } from '@supabase/supabase-js'
+import jwt from 'jsonwebtoken'
+
+const getSupabase = (userId) => {
+  const options = {}
+
+  if (userId) {
+    const payload = {
+      userId,
+      exp: Math.floor(Date.now() / 1000) + 60 * 60,
+    }
+    const token = jwt.sign(payload, process.env.SUPABASE_JWT_SECRET)
+
+    options.global = {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+   }
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    options
+  )
+  return supabase
+}
+
+export { getSupabase }
+```
+
+#### Enable Row Level Security (RLS) in Supabase
+
+To enable users to view and create their own todo items we need to write a RLS policy. Our policy will check the currently logged in user is to determine whether or not they should have access. Let's create a PostgreSQL function to extract the current user from our new JWT.
+
+Navigate back to the Supabase dashboard, select `SQL Editor` from the sidebar menu, and click `New query`. This will create a new query called `new sql snippet`, which will allow us to run any SQL against our Postgres database.
+
+Write the following and click `Run`.
+
+```sql
+create or replace function auth.user_id() returns text as $$
+ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text;
+$$ language sql stable;
+```
+
+You should see the output `Success, no rows returned`. This created a function called `auth.user_id()` which will return the `userId` field of our JWT payload.
+
+> To learn more about PostgresSQL functions, check out this [deep dive video](https://www.youtube.com/watch?v=MJZCCpCYEqk).
+
+Now we can create a policy that checks whether the current user is the owner of a todo item. From the `Authentication` sidebar menu in Supabase, click `Policies` then create a new policy.
+
+![RLS policies for a table.](/docs/img/guides/integrations/passage/12.png)
+
+Choose `For full customization create a policy from scratch` and add the following.
+
+![Policy to restrict access to todo items.](/docs/img/guides/integrations/passage/13.png)
+
+This policy is calling the function we just created to get the currently logged in user's ID `auth.user_id() `and checking whether this matches the `user_id` column for the current todo. If it does, then it will allow the user to select it, otherwise it will deny access.
+
+Click `Review` and then `Save policy`.
+
+> Note: To learn more about RLS and policies, check out this [deep dive video](https://www.youtube.com/watch?v=Ow_Uzedfohk).
+
+#### Fetch data from Supabase
+
+Now we can fetch data from Supabase specific to that user. We will update `pages/dashboard.js` to do the following:
+1. authenticate the user using Passage
+2. create and sign a JWT for the user with the Supabase secret
+3. query Supabase to fetch a user’s todo list items
+
+```js
+// pages/dashboard.js
+import styles from '@/styles/Home.module.css'
+import { useEffect } from 'react';
+import Router from 'next/router';
+import { getAuthenticatedUserFromSession } from '@/utils/passage'
+import { getSupabase } from '../utils/supabase'
+
+
+export default function Dashboard({isAuthorized, userID, todos}) {
+    useEffect(() => {
+      if(!isAuthorized){
+        Router.push('/');
+      }
+    })
+    
+    return(
+        <div className={styles.main}>
+          <div className={styles.container}>
+            <h1>
+            Welcome {userID}!{' '}
+            </h1>
+            <br></br>
+            <button onClick={signOut}>Sign Out</button>
+            <br></br>
+            <div className={styles.list}>
+            {todos?.length > 0 ? (
+            todos.map((todo) => <li key={todo.id}>{todo.title}</li>)
+          ) : (
+            <p>You have completed all todos!</p>
+          )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+export const getServerSideProps = async (context) => {
+    const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
+
+    if(loginProps.isAuthorized){
+        const supabase = getSupabase(loginProps.userID)
+        const {data} = await supabase.from('todo').select()
+
+
+        return {
+            props: {
+              isAuthorized: loginProps.isAuthorized?? false,
+              userID: loginProps.userID?? '',
+              todos: data?? [],
+            },
+          }
+    } else {
+            return {
+                props: {
+                    isAuthorized: loginProps.isAuthorized?? false,
+                    userID: loginProps.userID?? ''
+                },
+            }
+        }
+}
+```
+
+When we reload our application, we are still getting the empty state for todos.
+
+This is because we enabled Row Level Security, which blocks all requests by default and lets you granularly control access to the data in your database.
+
+#### Update the UserID data
+
+The last thing we need to do is update the `user_id` columns for our existing todos. Head back to the Supabase dashboard, and select `Table editor` from the sidebar. You will see that the `user_id` field is NULL for all of our todo items. 
+
+![User ID is NULL for all todo items.](/docs/img/guides/integrations/passage/14.png)
+
+To get the user ID for our Passage user, go back to the Passage Console and check the `Users` tab.
+
+![Get User ID from Passage.](/docs/img/guides/integrations/passage/15.png)
+
+Copy this user ID and update two of the three rows in the Supabase database to match this user ID. When you are done, the database table will look like this.
+
+![Updated User ID in Supabase.](/docs/img/guides/integrations/passage/16.png)
+
+Now when we refresh the application, we will see the todo items for our user! 
+
+![Authenticated users can see their todo items.](/docs/img/guides/integrations/passage/17.png)
+
+## Bonus: Add todo items
+
+To build out a bit more functionality in our application, we can now let users add items to their to do list. Create a file `pages/api/addTodo.js` with the following content.
+
+```js
+// pages/api/addTodo.js
+import { getSupabase } from "../../utils/supabase";
+
+export default async function handler(req, res) {
+  const { userID, todo } = req.body;
+  const supabase = getSupabase(userID);
+  const { data, error } = await supabase
+    .from("todo")
+    .insert({ title: todo })
+    .select()
+    .single();
+  if (error) return res.status(400).json(error);
+  res.status(200).json(data);
+}
+```
+Then update `pages/dashboard.js` to include a form for submitting new to do items. The complete file will look like this.
+
+```js
+//pages/dashboard.js
+import styles from "@/styles/Home.module.css";
+import { useEffect, useState } from "react";
+import Router from "next/router";
+import { getAuthenticatedUserFromSession } from "@/utils/passage";
+import { getSupabase } from "../utils/supabase";
+import { PassageUser } from "@passageidentity/passage-elements/passage-user";
+
+export default function Dashboard({ isAuthorized, userID, initialTodos }) {
+  const [todos, setTodos] = useState(initialTodos);
+  useEffect(() => {
+    if (!isAuthorized) {
+      Router.push("/");
+    }
+  });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const todo = data.get("todo");
+    const res = await fetch("/api/addTodo", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ todo, userID }),
+    }).then((res) => res.json());
+    setTodos([...todos, res]);
+  };
+
+  const signOut = async () => {
+    new PassageUser().signOut();
+    Router.push("/");
+  };
+
+  return (
+    <div className={styles.main}>
+      <div className={styles.container}>
+        <h1>Welcome {userID}! </h1>
+        <br></br>
+        <button onClick={signOut}>Sign Out</button>
+        <br></br>
+        <div className={styles.list}>
+          {todos?.length > 0 ? (
+            todos.map((todo) => <li key={todo.id}>{todo.title}</li>)
+          ) : (
+            <p>You have completed all todos!</p>
+          )}
+        </div>
+        <form onSubmit={handleSubmit}>
+          <label>
+            Todo: <input type="text" name="todo" />
+          </label>
+          <button>Submit</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export const getServerSideProps = async (context) => {
+  const loginProps = await getAuthenticatedUserFromSession(
+    context.req,
+    context.res
+  );
+
+  if (loginProps.isAuthorized) {
+    const supabase = getSupabase(loginProps.userID);
+    const { data } = await supabase
+      .from("todo")
+      .select()
+      .is("is_complete", false);
+
+    return {
+      props: {
+        isAuthorized: loginProps.isAuthorized ?? false,
+        userID: loginProps.userID ?? "",
+        initialTodos: data ?? [],
+      },
+    };
+  } else {
+    return {
+      props: {
+        isAuthorized: loginProps.isAuthorized ?? false,
+        userID: loginProps.userID ?? "",
+      },
+    };
+  }
+};
+```
+
+Finally, we need to add a new RLS policy in Supabase to allow users to insert their own todo items. 
+
+![RLS policy for inserting todo items.](/docs/img/guides/integrations/passage/18.png)
+
+That's it! Now the website has form for submitting new items for the to do list.
+
+![Authenticated users can create todo items](/docs/img/guides/integrations/passage/19.png)
+
+## Resources
+
+* [Passage website](https://passage.id)
+* [Complete developer documentation](https://docs.passage.id)
+* [Passage Github](https://github.com/passageidentity), including SDKs and example apps for Next.js
+* [Developer community](https://discord.com/invite/445QpyEDXh) on Discord
+
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
\ No newline at end of file
diff --git a/apps/docs/pages/guides/integrations/picket.mdx b/apps/docs/pages/guides/integrations/picket.mdx
index d33fa8f7988..0508e5cfa18 100644
--- a/apps/docs/pages/guides/integrations/picket.mdx
+++ b/apps/docs/pages/guides/integrations/picket.mdx
@@ -72,7 +72,7 @@ Click `Save` to create the new table.
 Now we want to make sure that only the `todos` owner, the user's `wallet_address`, can access their todos. The key component of the this RLS policy is the expression
 
 ```sql
-((jwt() ->> 'walletAddress'::text) = wallet_address)
+((auth.jwt() ->> 'walletAddress'::text) = wallet_address)
 ```
 
 This expression checks that the wallet address in the requesting JWT access token is the same as the `wallet_address` in the `todos` table.
diff --git a/apps/docs/pages/guides/platform/logs.mdx b/apps/docs/pages/guides/platform/logs.mdx
index f1609a68482..ad73fc5315d 100644
--- a/apps/docs/pages/guides/platform/logs.mdx
+++ b/apps/docs/pages/guides/platform/logs.mdx
@@ -112,6 +112,8 @@ To _permanently_ set a logging configuration (beyond a single session), execute
 alter role postgres set pgaudit.log to 'function, write, ddl';
 ```
 
+For user-traffic flowing through the [HTTP APIs](../../guides/database/api#rest-api-overview) powered by PostgREST, set your configuration values for the roles `anon` and `authenticated`.  For traffic using the `service_role` key, set the configuration values for the role `service_role`.
+
 To reset system-wide settings, execute the following, then perform a fast reboot:
 
 ```sql
diff --git a/apps/docs/pages/guides/resources/glossary.mdx b/apps/docs/pages/guides/resources/glossary.mdx
index 75c7d5efa1c..e2e3ffdede5 100755
--- a/apps/docs/pages/guides/resources/glossary.mdx
+++ b/apps/docs/pages/guides/resources/glossary.mdx
@@ -54,7 +54,7 @@ Nonce means number used once. In reality though, it is a unique and difficult to
 
 ## OAuth
 
-OAuth is a protocol allowing third-party applications to request and receive authorization from their users. It is typically used to implement social login, and serves as a base for enterprise single-sign on in the OIDC protocol. Applications can request various level of access, and this includes some user identification information at least (name, email address, user identification number).
+OAuth is a protocol allowing third-party applications to request and receive authorization from their users. It is typically used to implement social login, and serves as a base for enterprise single-sign on in the OIDC protocol. Applications can request different levels of access, including basic user identification information such as name, email address, and user ID.
 
 ## OIDC
 
diff --git a/apps/docs/public/img/guides/integrations/passage/01.png b/apps/docs/public/img/guides/integrations/passage/01.png
new file mode 100644
index 00000000000..23848286067
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/01.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/02.png b/apps/docs/public/img/guides/integrations/passage/02.png
new file mode 100644
index 00000000000..fb519b27f31
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/02.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/03.png b/apps/docs/public/img/guides/integrations/passage/03.png
new file mode 100644
index 00000000000..b7ba3d90e99
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/03.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/04.png b/apps/docs/public/img/guides/integrations/passage/04.png
new file mode 100644
index 00000000000..3d8909d1296
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/04.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/05.png b/apps/docs/public/img/guides/integrations/passage/05.png
new file mode 100644
index 00000000000..0e6c71b72d4
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/05.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/06.png b/apps/docs/public/img/guides/integrations/passage/06.png
new file mode 100644
index 00000000000..0f92cbdb363
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/06.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/07.png b/apps/docs/public/img/guides/integrations/passage/07.png
new file mode 100644
index 00000000000..ec8a2bfe07c
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/07.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/08.png b/apps/docs/public/img/guides/integrations/passage/08.png
new file mode 100644
index 00000000000..19c432120c5
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/08.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/09.png b/apps/docs/public/img/guides/integrations/passage/09.png
new file mode 100644
index 00000000000..2d8766587dd
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/09.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/10.png b/apps/docs/public/img/guides/integrations/passage/10.png
new file mode 100644
index 00000000000..8600e4bb469
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/10.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/11.png b/apps/docs/public/img/guides/integrations/passage/11.png
new file mode 100644
index 00000000000..c8d40d3c4ea
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/11.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/12.png b/apps/docs/public/img/guides/integrations/passage/12.png
new file mode 100644
index 00000000000..5c4df0d6ad5
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/12.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/13.png b/apps/docs/public/img/guides/integrations/passage/13.png
new file mode 100644
index 00000000000..88557cc6ead
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/13.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/14.png b/apps/docs/public/img/guides/integrations/passage/14.png
new file mode 100644
index 00000000000..d4e05338aa4
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/14.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/15.png b/apps/docs/public/img/guides/integrations/passage/15.png
new file mode 100644
index 00000000000..2e3246d6dfb
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/15.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/16.png b/apps/docs/public/img/guides/integrations/passage/16.png
new file mode 100644
index 00000000000..33110817294
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/16.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/17.png b/apps/docs/public/img/guides/integrations/passage/17.png
new file mode 100644
index 00000000000..ee4828c7db1
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/17.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/18.png b/apps/docs/public/img/guides/integrations/passage/18.png
new file mode 100644
index 00000000000..3a72dd6ffa8
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/18.png differ
diff --git a/apps/docs/public/img/guides/integrations/passage/19.png b/apps/docs/public/img/guides/integrations/passage/19.png
new file mode 100644
index 00000000000..f763def22ec
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/passage/19.png differ
diff --git a/apps/docs/public/img/guides/integrations/picket/rls_policy.png b/apps/docs/public/img/guides/integrations/picket/rls_policy.png
index 347038ebe90..54fee108478 100644
Binary files a/apps/docs/public/img/guides/integrations/picket/rls_policy.png and b/apps/docs/public/img/guides/integrations/picket/rls_policy.png differ
diff --git a/apps/docs/public/img/integrations/logos/passage_logo.png b/apps/docs/public/img/integrations/logos/passage_logo.png
new file mode 100644
index 00000000000..270d6afa701
Binary files /dev/null and b/apps/docs/public/img/integrations/logos/passage_logo.png differ
diff --git a/apps/www/_blog/2023-04-14-launch-week-7-community-highlights.mdx b/apps/www/_blog/2023-04-14-launch-week-7-community-highlights.mdx
index 6e585199759..a87c43050d8 100644
--- a/apps/www/_blog/2023-04-14-launch-week-7-community-highlights.mdx
+++ b/apps/www/_blog/2023-04-14-launch-week-7-community-highlights.mdx
@@ -67,7 +67,7 @@ Dart Edge, built by [Invertase](https://invertase.io/), allows developers to wri
 
 [Check out the guide.](/docs/guides/functions/dart-edge)
 
-### **T3 Turbo x Supabase**
+### T3 Turbo x Supabase
 
 T3 Turbo is a type-safe, full-stack template to create Next.js and Expo React Native applications. Using our recent [Mobile Auth updates](/blog/supabase-auth-sso-pkce), the T3 community has helped build the [Supabase Create T3 Turbo template](https://github.com/supabase-community/create-t3-turbo), the fastest and easiest way to get started with Supabase and the T3 Stack. Huge shout out to [Julius](https://twitter.com/jullerino) who single-handedly created the template!
 
@@ -82,6 +82,17 @@ This Launch Week had a big focus on self-hosting, adding support for self-hosted
 - [Digital Ocean](https://supabase-on-do.product-docs.pages.dev/developer-center/hosting-supabase-on-digitalocean/)
 - [Stackgres](https://stackgres.io/blog/running-supabase-on-top-of-stackgres/)
 
+<div className="video-container">
+  <iframe
+    className="w-full"
+    src="https://www.youtube-nocookie.com/embed/dDhy6pk282U"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  ></iframe>
+</div>
+
 We’re looking for more self-hosting maintainers, especially for the self-hosted guides. Everything we do is MIT, Apache2, or PostgreSQL licensed, but our team is relatively small and we don’t have expertise for every deployment strategy that our community might want. If you are willing to help out on a regular basis please reach out!
 
 ## Postgres Extensions and improvements
diff --git a/apps/www/internals/generate-sitemap.mjs b/apps/www/internals/generate-sitemap.mjs
index 35dde9ce42c..2e7ece2c0cb 100644
--- a/apps/www/internals/generate-sitemap.mjs
+++ b/apps/www/internals/generate-sitemap.mjs
@@ -24,6 +24,8 @@ async function generate() {
     '!pages/*/index.tsx',
     '!pages/api',
     '!pages/404.js',
+    //get the generated partner pages
+    '.next/server/pages/partners/*.html',
   ])
 
   const blogUrl = 'blog'
@@ -37,6 +39,8 @@ async function generate() {
           .filter((page) => !page.includes('_document.tsx'))
           .map((page) => {
             const path = page
+              //replace the path for the generated partner pages
+              .replace('.next/server/pages/partners/', '/partners/')
               .replace('pages', '')
               // add a `/` for blog posts
               .replace('_blog', `/${blogUrl}`)
@@ -45,6 +49,7 @@ async function generate() {
               .replace('_alternatives', '/alternatives')
               .replace('.tsx', '')
               .replace('.mdx', '')
+              .replace('.html', '')
               // replace the paths for nested 'index' based routes
               .replace('/auth/Auth', '/auth')
               .replace('/database/Database', '/database')
diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index ab01e1b7783..38483846dd3 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -1,4 +1,4 @@
-import { Button, IconGrid, IconLayers, IconMenu } from '@supabase/ui'
+import { Button, IconGrid, IconLayers, IconMenu } from 'ui'
 import ApiExamples from 'data/products/realtime/api-examples'
 import AppExamples from 'data/products/realtime/app-examples'
 import Solutions from 'data/Solutions.json'
diff --git a/docker/.env.example b/docker/.env.example
index e39eb8f4f0b..17bb463705f 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -79,6 +79,10 @@ SUPABASE_PUBLIC_URL=http://localhost:8000
 # Enable webp support
 IMGPROXY_ENABLE_WEBP_DETECTION=true
 
+############
+# Functions - Configuration for Functions
+############
+FUNCTIONS_HTTP_PORT=9002
 
 ############
 # Logs - Configuration for Logflare
diff --git a/docker/docker-compose-logging.yml b/docker/docker-compose-logging.yml
index 3aed11c1d5f..b65d190d52e 100644
--- a/docker/docker-compose-logging.yml
+++ b/docker/docker-compose-logging.yml
@@ -81,6 +81,16 @@ services:
         syslog-address: "tcp://localhost:${VECTOR_PORT}"
         tag: meta
 
+  functions:
+    depends_on:
+      analytics:
+        condition: service_healthy
+    logging:
+      driver: syslog
+      options:
+        syslog-address: "tcp://localhost:${VECTOR_PORT}"
+        tag: functions
+
   analytics:
     container_name: supabase-analytics
     image: supabase/logflare:1.0.2
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 067633f138e..c2a5205856d 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -241,6 +241,26 @@ services:
       PG_META_DB_USER: supabase_admin
       PG_META_DB_PASSWORD: ${POSTGRES_PASSWORD}
 
+  functions:
+    container_name: supabase-edge-functions
+    image: supabase/edge-runtime:v1.2.12
+    restart: unless-stopped
+    environment:
+      JWT_SECRET: ${JWT_SECRET}
+      SUPABASE_URL: http://kong:8000"
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_ROLE_KEY: ${SERVICE_ROLE_KEY}
+      SUPABASE_DB_URL: postgresql://postgres:${POSTGRES_PASSWORD}@{POSTGRES_DB}:${POSTGRES_PORT}/${POSTGRES_DB}"
+      VERIFY_JWT: false
+    ports:
+      - ${FUNCTIONS_HTTP_PORT}:9000/tcp
+    volumes:
+      - ./volumes/functions:/home/deno/functions:Z
+    command:
+      - start
+      - --main-service
+      - /home/deno/functions/main
+
   # Comment out everything below this point if you are using an external Postgres database
   db:
     container_name: supabase-db
diff --git a/docker/volumes/functions/main/index.ts b/docker/volumes/functions/main/index.ts
new file mode 100644
index 00000000000..2408aee0ff7
--- /dev/null
+++ b/docker/volumes/functions/main/index.ts
@@ -0,0 +1,93 @@
+import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
+
+console.log('main function started')
+
+const JWT_SECRET = Deno.env.get('JWT_SECRET')
+const VERIFY_JWT = Deno.env.get('VERIFY_JWT') === 'true'
+
+function getAuthToken(req: Request) {
+  const authHeader = req.headers.get('authorization')
+  if (!authHeader) {
+    throw new Error('Missing authorization header')
+  }
+  const [bearer, token] = authHeader.split(' ')
+  if (bearer !== 'Bearer') {
+    throw new Error(`Auth header is not 'Bearer {token}'`)
+  }
+  return token
+}
+
+async function verifyJWT(jwt: string): Promise<boolean> {
+  const encoder = new TextEncoder()
+  const secretKey = encoder.encode(JWT_SECRET)
+  try {
+    await jose.jwtVerify(jwt, secretKey)
+  } catch (err) {
+    console.error(err)
+    return false
+  }
+  return true
+}
+
+serve(async (req: Request) => {
+  if (req.method !== 'OPTIONS' && VERIFY_JWT) {
+    try {
+      const token = getAuthToken(req)
+      const isValidJWT = await verifyJWT(token)
+
+      if (!isValidJWT) {
+        return new Response(JSON.stringify({ msg: 'Invalid JWT' }), {
+          status: 401,
+          headers: { 'Content-Type': 'application/json' },
+        })
+      }
+    } catch (e) {
+      console.error(e)
+      return new Response(JSON.stringify({ msg: e.toString() }), {
+        status: 401,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    }
+  }
+
+  const url = new URL(req.url)
+  const { pathname } = url
+  const path_parts = pathname.split('/')
+  const service_name = path_parts[1]
+
+  if (!service_name || service_name === '') {
+    const error = { msg: 'missing function name in request' }
+    return new Response(JSON.stringify(error), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  const servicePath = `/home/deno/functions/${service_name}`
+  console.error(`serving the request with ${servicePath}`)
+
+  const memoryLimitMb = 150
+  const workerTimeoutMs = 1 * 60 * 1000
+  const noModuleCache = false
+  const importMapPath = null
+  const envVarsObj = Deno.env.toObject()
+  const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]])
+
+  try {
+    const worker = await EdgeRuntime.userWorkers.create({
+      servicePath,
+      memoryLimitMb,
+      workerTimeoutMs,
+      noModuleCache,
+      importMapPath,
+      envVars,
+    })
+    return await worker.fetch(req)
+  } catch (e) {
+    const error = { msg: e.toString() }
+    return new Response(JSON.stringify(error), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+})
diff --git a/docker/volumes/logs/vector.yml b/docker/volumes/logs/vector.yml
index 2d7bd81764e..52394f8fc0f 100644
--- a/docker/volumes/logs/vector.yml
+++ b/docker/volumes/logs/vector.yml
@@ -33,6 +33,7 @@ transforms:
       rest: '.appname == "rest"'
       realtime: '.appname == "realtime"'
       storage: '.appname == "storage"'
+      functions: '.appname == "functions"'
       db: '.appname == "db"'
   # Kong logs only include api requests
   kong_logs:
@@ -179,6 +180,16 @@ sinks:
     # lead to broken queries from studio. This works by the assumption that containers are started in the
     # following order: vector > db > logflare > kong
     uri: 'http://kong:8000/analytics/v1/api/logs?source_name=postgres.logs&api_key=your-super-secret-and-long-logflare-key'
+  logflare_functions:
+    type: 'http'
+    inputs:
+      - router.functions
+    encoding:
+      codec: 'json'
+    method: 'post'
+    request:
+      retry_max_duration_secs: 10
+    uri: 'http://analytics:4000/api/logs?source_name=deno-relay-logs&api_key=your-super-secret-and-long-logflare-key'
   logflare_storage:
     type: 'http'
     inputs:
diff --git a/examples/realtime/nextjs-auth-presence/README.md b/examples/realtime/nextjs-auth-presence/README.md
index 06e7caf2a84..e887b8fc03c 100644
--- a/examples/realtime/nextjs-auth-presence/README.md
+++ b/examples/realtime/nextjs-auth-presence/README.md
@@ -52,8 +52,6 @@ First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/examples/realtime/nextjs-auth-presence/package-lock.json b/examples/realtime/nextjs-auth-presence/package-lock.json
index e9a69891c68..6fce0a66c05 100644
--- a/examples/realtime/nextjs-auth-presence/package-lock.json
+++ b/examples/realtime/nextjs-auth-presence/package-lock.json
@@ -8,7 +8,7 @@
       "name": "nextjs-auth-presence",
       "version": "0.1.0",
       "dependencies": {
-        "@supabase/auth-helpers-nextjs": "^0.5.4",
+        "@supabase/auth-helpers-nextjs": "^0.6.0",
         "@supabase/auth-helpers-react": "^0.3.1",
         "@supabase/auth-ui-react": "^0.2.7",
         "@supabase/supabase-js": "^2.7.1",
@@ -370,11 +370,11 @@
       }
     },
     "node_modules/@supabase/auth-helpers-nextjs": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.5.4.tgz",
-      "integrity": "sha512-Xm3BMDOYPbNyuh8UXDRgBDc3JkeM5S2PfuC1jFJ73CCay4YiH1YxTz06Cvtp+vLH432qdjnqH+49ehVvUehPnQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.6.0.tgz",
+      "integrity": "sha512-f1e5blmpt9F/Bnb2hKreWHqf3zEhl29P357d5fnXzQ3Ph7DuW2Wha7uwQVTgE2QH3niqVpJpY0Pg0zBT5NmNWQ==",
       "dependencies": {
-        "@supabase/auth-helpers-shared": "0.2.4"
+        "@supabase/auth-helpers-shared": "0.3.3"
       },
       "peerDependencies": {
         "@supabase/supabase-js": "^2.0.4"
@@ -389,9 +389,12 @@
       }
     },
     "node_modules/@supabase/auth-helpers-shared": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.2.4.tgz",
-      "integrity": "sha512-c+hi3N6DhjPTzjXGOokre4gmMZOqt0f1ORrwZwi2s07pk3cbkmn77DwwVtlYMNi3oZNYRQqAfxJu83UzpJrrmg==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.3.3.tgz",
+      "integrity": "sha512-ZwZGffApfyz9MiT3knnZoF1DMWE56H/Q0Mrsn22J9ubhss7/+e7TP3dChxxwlUYqtDmjmLV6OV8W0BANENfUew==",
+      "dependencies": {
+        "js-base64": "^3.7.5"
+      },
       "peerDependencies": {
         "@supabase/supabase-js": "^2.0.4"
       }
@@ -2206,6 +2209,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
     "node_modules/js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -3603,11 +3611,11 @@
       "requires": {}
     },
     "@supabase/auth-helpers-nextjs": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.5.4.tgz",
-      "integrity": "sha512-Xm3BMDOYPbNyuh8UXDRgBDc3JkeM5S2PfuC1jFJ73CCay4YiH1YxTz06Cvtp+vLH432qdjnqH+49ehVvUehPnQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.6.0.tgz",
+      "integrity": "sha512-f1e5blmpt9F/Bnb2hKreWHqf3zEhl29P357d5fnXzQ3Ph7DuW2Wha7uwQVTgE2QH3niqVpJpY0Pg0zBT5NmNWQ==",
       "requires": {
-        "@supabase/auth-helpers-shared": "0.2.4"
+        "@supabase/auth-helpers-shared": "0.3.3"
       }
     },
     "@supabase/auth-helpers-react": {
@@ -3617,10 +3625,12 @@
       "requires": {}
     },
     "@supabase/auth-helpers-shared": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.2.4.tgz",
-      "integrity": "sha512-c+hi3N6DhjPTzjXGOokre4gmMZOqt0f1ORrwZwi2s07pk3cbkmn77DwwVtlYMNi3oZNYRQqAfxJu83UzpJrrmg==",
-      "requires": {}
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.3.3.tgz",
+      "integrity": "sha512-ZwZGffApfyz9MiT3knnZoF1DMWE56H/Q0Mrsn22J9ubhss7/+e7TP3dChxxwlUYqtDmjmLV6OV8W0BANENfUew==",
+      "requires": {
+        "js-base64": "^3.7.5"
+      }
     },
     "@supabase/auth-ui-react": {
       "version": "0.2.7",
@@ -4975,6 +4985,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
     "js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
diff --git a/examples/realtime/nextjs-auth-presence/package.json b/examples/realtime/nextjs-auth-presence/package.json
index 550dfdb86c1..d30bbe10155 100644
--- a/examples/realtime/nextjs-auth-presence/package.json
+++ b/examples/realtime/nextjs-auth-presence/package.json
@@ -10,7 +10,7 @@
     "format": "prettier --write \"pages/**/*.{js,jsx,ts,tsx,css,md,json}\""
   },
   "dependencies": {
-    "@supabase/auth-helpers-nextjs": "^0.5.4",
+    "@supabase/auth-helpers-nextjs": "^0.6.0",
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/auth-ui-react": "^0.2.7",
     "@supabase/supabase-js": "^2.7.1",
diff --git a/examples/realtime/nextjs-auth-presence/yarn.lock b/examples/realtime/nextjs-auth-presence/yarn.lock
deleted file mode 100644
index 42e4445cf3b..00000000000
--- a/examples/realtime/nextjs-auth-presence/yarn.lock
+++ /dev/null
@@ -1,1699 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.20.1"
-  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.1.tgz"
-  dependencies:
-    core-js-pure "^3.25.1"
-    regenerator-runtime "^0.13.10"
-
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.18.9":
-  version "7.20.1"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz"
-  dependencies:
-    regenerator-runtime "^0.13.10"
-
-"@eslint/eslintrc@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz"
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^9.4.0"
-    globals "^13.15.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.1.2"
-    strip-json-comments "^3.1.1"
-
-"@humanwhocodes/config-array@^0.10.5":
-  version "0.10.7"
-  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz"
-  dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
-    minimatch "^3.0.4"
-
-"@humanwhocodes/module-importer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
-
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
-
-"@next/env@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.npmjs.org/@next/env/-/env-13.1.6.tgz"
-
-"@next/eslint-plugin-next@12.3.1":
-  version "12.3.1"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.3.1.tgz"
-  dependencies:
-    glob "7.1.7"
-
-"@next/swc-android-arm-eabi@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz#d766dfc10e27814d947b20f052067c239913dbcc"
-
-"@next/swc-android-arm64@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.6.tgz#f37a98d5f18927d8c9970d750d516ac779465176"
-
-"@next/swc-darwin-arm64@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.6.tgz"
-
-"@next/swc-darwin-x64@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.6.tgz#e869ac75d16995eee733a7d1550322d9051c1eb4"
-
-"@next/swc-freebsd-x64@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.6.tgz#84a7b2e423a2904afc2edca21c2f1ba6b53fa4c1"
-
-"@next/swc-linux-arm-gnueabihf@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.6.tgz#980eed1f655ff8a72187d8a6ef9e73ac39d20d23"
-
-"@next/swc-linux-arm64-gnu@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.6.tgz#87a71db21cded3f7c63d1d19079845c59813c53d"
-
-"@next/swc-linux-arm64-musl@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.6.tgz#c5aac8619331b9fd030603bbe2b36052011e11de"
-
-"@next/swc-linux-x64-gnu@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.6.tgz#9513d36d540bbfea575576746736054c31aacdea"
-
-"@next/swc-linux-x64-musl@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.6.tgz#d61fc6884899f5957251f4ce3f522e34a2c479b7"
-
-"@next/swc-win32-arm64-msvc@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.6.tgz#fac2077a8ae9768e31444c9ae90807e64117cda7"
-
-"@next/swc-win32-ia32-msvc@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.6.tgz#498bc11c91b4c482a625bf4b978f98ae91111e46"
-
-"@next/swc-win32-x64-msvc@13.1.6":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.6.tgz#17ed919c723426b7d0ce1cd73d40ce3dcd342089"
-
-"@nodelib/fs.scandir@2.1.5":
-  version "2.1.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
-  dependencies:
-    "@nodelib/fs.stat" "2.0.5"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.8"
-  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.5"
-    fastq "^1.6.0"
-
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
-
-"@stitches/core@^1.2.8":
-  version "1.2.8"
-  resolved "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz"
-
-"@stitches/react@^1.2.8":
-  version "1.2.8"
-  resolved "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz"
-
-"@supabase/auth-helpers-nextjs@^0.5.4":
-  version "0.5.4"
-  resolved "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.5.4.tgz"
-  dependencies:
-    "@supabase/auth-helpers-shared" "0.2.4"
-
-"@supabase/auth-helpers-react@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.npmjs.org/@supabase/auth-helpers-react/-/auth-helpers-react-0.3.1.tgz"
-
-"@supabase/auth-helpers-shared@0.2.4":
-  version "0.2.4"
-  resolved "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.2.4.tgz"
-
-"@supabase/auth-ui-react@^0.2.7":
-  version "0.2.7"
-  resolved "https://registry.npmjs.org/@supabase/auth-ui-react/-/auth-ui-react-0.2.7.tgz"
-  dependencies:
-    "@stitches/core" "^1.2.8"
-    "@stitches/react" "^1.2.8"
-    prop-types "^15.7.2"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
-"@supabase/functions-js@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.0.0.tgz"
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@supabase/gotrue-js@^2.10.2":
-  version "2.11.0"
-  resolved "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.11.0.tgz"
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@supabase/postgrest-js@^1.1.1":
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.4.0.tgz"
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@supabase/realtime-js@^2.4.0":
-  version "2.6.0"
-  resolved "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.6.0.tgz"
-  dependencies:
-    "@types/phoenix" "^1.5.4"
-    websocket "^1.0.34"
-
-"@supabase/storage-js@^2.1.0":
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.3.0.tgz"
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@supabase/supabase-js@^2.7.1":
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.7.1.tgz"
-  dependencies:
-    "@supabase/functions-js" "^2.0.0"
-    "@supabase/gotrue-js" "^2.10.2"
-    "@supabase/postgrest-js" "^1.1.1"
-    "@supabase/realtime-js" "^2.4.0"
-    "@supabase/storage-js" "^2.1.0"
-    cross-fetch "^3.1.5"
-
-"@swc/helpers@0.4.14":
-  version "0.4.14"
-  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz"
-  dependencies:
-    tslib "^2.4.0"
-
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
-
-"@types/node@18.11.0":
-  version "18.11.0"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.0.tgz"
-
-"@types/phoenix@^1.5.4":
-  version "1.5.4"
-  resolved "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz"
-
-"@types/prop-types@*":
-  version "15.7.5"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
-
-"@types/react-dom@18.0.10":
-  version "18.0.10"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz"
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz"
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
-
-"@typescript-eslint/parser@^5.21.0":
-  version "5.42.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.0.tgz"
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.42.0"
-    "@typescript-eslint/types" "5.42.0"
-    "@typescript-eslint/typescript-estree" "5.42.0"
-    debug "^4.3.4"
-
-"@typescript-eslint/scope-manager@5.42.0":
-  version "5.42.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz"
-  dependencies:
-    "@typescript-eslint/types" "5.42.0"
-    "@typescript-eslint/visitor-keys" "5.42.0"
-
-"@typescript-eslint/types@5.42.0":
-  version "5.42.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz"
-
-"@typescript-eslint/typescript-estree@5.42.0":
-  version "5.42.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz"
-  dependencies:
-    "@typescript-eslint/types" "5.42.0"
-    "@typescript-eslint/visitor-keys" "5.42.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/visitor-keys@5.42.0":
-  version "5.42.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.42.0.tgz"
-  dependencies:
-    "@typescript-eslint/types" "5.42.0"
-    eslint-visitor-keys "^3.3.0"
-
-acorn-jsx@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
-
-acorn@^8.8.0:
-  version "8.8.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz"
-
-ajv@^6.10.0, ajv@^6.12.4:
-  version "6.12.6"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
-
-ansi-styles@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
-  dependencies:
-    color-convert "^2.0.1"
-
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
-
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
-array-includes@^3.1.4, array-includes@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-    get-intrinsic "^1.1.1"
-    is-string "^1.0.7"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
-
-array.prototype.flat@^1.2.5:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    es-shim-unscopables "^1.0.0"
-
-array.prototype.flatmap@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    es-shim-unscopables "^1.0.0"
-
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
-
-axe-core@^4.4.3:
-  version "4.5.1"
-  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.5.1.tgz"
-
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
-
-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
-  dependencies:
-    fill-range "^7.0.1"
-
-bufferutil@^4.0.1:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz"
-  dependencies:
-    node-gyp-build "^4.3.0"
-
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
-
-caniuse-lite@^1.0.30001406:
-  version "1.0.30001430"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001430.tgz"
-
-chalk@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-client-only@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-
-core-js-pure@^3.25.1:
-  version "3.26.0"
-  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.0.tgz"
-
-cross-fetch@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz"
-  dependencies:
-    node-fetch "2.6.7"
-
-cross-spawn@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-csstype@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
-
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/d/-/d-1.0.1.tgz"
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
-damerau-levenshtein@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
-
-debug@^2.2.0, debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
-  dependencies:
-    ms "2.1.2"
-
-deep-is@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
-
-define-properties@^1.1.3, define-properties@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
-  dependencies:
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
-  dependencies:
-    path-type "^4.0.0"
-
-doctrine@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
-  dependencies:
-    esutils "^2.0.2"
-
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
-  dependencies:
-    esutils "^2.0.2"
-
-emoji-regex@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
-
-es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.5, es-abstract@^1.20.4:
-  version "1.20.4"
-  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    function.prototype.name "^1.1.5"
-    get-intrinsic "^1.1.3"
-    get-symbol-description "^1.0.0"
-    has "^1.0.3"
-    has-property-descriptors "^1.0.0"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    is-callable "^1.2.7"
-    is-negative-zero "^2.0.2"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    is-string "^1.0.7"
-    is-weakref "^1.0.2"
-    object-inspect "^1.12.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.4.3"
-    safe-regex-test "^1.0.0"
-    string.prototype.trimend "^1.0.5"
-    string.prototype.trimstart "^1.0.5"
-    unbox-primitive "^1.0.2"
-
-es-shim-unscopables@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
-  dependencies:
-    has "^1.0.3"
-
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.62"
-  resolved "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz"
-  dependencies:
-    es6-iterator "^2.0.3"
-    es6-symbol "^3.1.3"
-    next-tick "^1.1.0"
-
-es6-iterator@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz"
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz"
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
-escape-string-regexp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
-
-eslint-config-next@12.3.1:
-  version "12.3.1"
-  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.3.1.tgz"
-  dependencies:
-    "@next/eslint-plugin-next" "12.3.1"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.21.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^2.7.1"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.31.7"
-    eslint-plugin-react-hooks "^4.5.0"
-
-eslint-import-resolver-node@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
-  dependencies:
-    debug "^3.2.7"
-    resolve "^1.20.0"
-
-eslint-import-resolver-typescript@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz"
-  dependencies:
-    debug "^4.3.4"
-    glob "^7.2.0"
-    is-glob "^4.0.3"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
-
-eslint-module-utils@^2.7.3:
-  version "2.7.4"
-  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz"
-  dependencies:
-    debug "^3.2.7"
-
-eslint-plugin-import@^2.26.0:
-  version "2.26.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz"
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.3"
-    has "^1.0.3"
-    is-core-module "^2.8.1"
-    is-glob "^4.0.3"
-    minimatch "^3.1.2"
-    object.values "^1.1.5"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
-
-eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.6.1"
-  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz"
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    aria-query "^4.2.2"
-    array-includes "^3.1.5"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.4.3"
-    axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.8"
-    emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.2"
-    language-tags "^1.0.5"
-    minimatch "^3.1.2"
-    semver "^6.3.0"
-
-eslint-plugin-react-hooks@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz"
-
-eslint-plugin-react@^7.31.7:
-  version "7.31.10"
-  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz"
-  dependencies:
-    array-includes "^3.1.5"
-    array.prototype.flatmap "^1.3.0"
-    doctrine "^2.1.0"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.1"
-    object.values "^1.1.5"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.7"
-
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^5.2.0"
-
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
-
-eslint-visitor-keys@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
-
-eslint@8.25.0:
-  version "8.25.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.25.0.tgz"
-  dependencies:
-    "@eslint/eslintrc" "^1.3.3"
-    "@humanwhocodes/config-array" "^0.10.5"
-    "@humanwhocodes/module-importer" "^1.0.1"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.2"
-    doctrine "^3.0.0"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    find-up "^5.0.0"
-    glob-parent "^6.0.1"
-    globals "^13.15.0"
-    globby "^11.1.0"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-sdsl "^4.1.4"
-    js-yaml "^4.1.0"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.1.2"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
-    strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
-    text-table "^0.2.0"
-
-espree@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz"
-  dependencies:
-    acorn "^8.8.0"
-    acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
-
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
-  dependencies:
-    estraverse "^5.2.0"
-
-estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
-
-ext@^1.1.2:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz"
-  dependencies:
-    type "^2.7.2"
-
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
-
-fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
-
-fast-levenshtein@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
-
-fastq@^1.6.0:
-  version "1.13.0"
-  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
-  dependencies:
-    reusify "^1.0.4"
-
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
-  dependencies:
-    flat-cache "^3.0.4"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
-  dependencies:
-    to-regex-range "^5.0.1"
-
-find-up@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
-  dependencies:
-    locate-path "^6.0.0"
-    path-exists "^4.0.0"
-
-flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
-  dependencies:
-    flatted "^3.1.0"
-    rimraf "^3.0.2"
-
-flatted@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
-
-fsevents@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
-
-function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
-
-functions-have-names@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
-
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz"
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.3"
-
-get-symbol-description@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
-
-glob-parent@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
-  dependencies:
-    is-glob "^4.0.1"
-
-glob-parent@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
-  dependencies:
-    is-glob "^4.0.3"
-
-glob@7.1.7, glob@^7.1.3:
-  version "7.1.7"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.2.0:
-  version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.1.1"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-globals@^13.15.0:
-  version "13.17.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz"
-  dependencies:
-    type-fest "^0.20.2"
-
-globby@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.2.9"
-    ignore "^5.2.0"
-    merge2 "^1.4.1"
-    slash "^3.0.0"
-
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
-
-has-bigints@^1.0.1, has-bigints@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
-
-has-property-descriptors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
-  dependencies:
-    get-intrinsic "^1.1.1"
-
-has-symbols@^1.0.2, has-symbols@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
-
-has-tostringtag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
-  dependencies:
-    has-symbols "^1.0.2"
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
-  dependencies:
-    function-bind "^1.1.1"
-
-ignore@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
-
-import-fresh@^3.0.0, import-fresh@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
-
-internal-slot@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
-  dependencies:
-    get-intrinsic "^1.1.0"
-    has "^1.0.3"
-    side-channel "^1.0.4"
-
-is-bigint@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
-  dependencies:
-    has-bigints "^1.0.1"
-
-is-boolean-object@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-callable@^1.1.4, is-callable@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
-
-is-core-module@^2.8.1, is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz"
-  dependencies:
-    has "^1.0.3"
-
-is-date-object@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
-  dependencies:
-    has-tostringtag "^1.0.0"
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-negative-zero@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
-
-is-number-object@^1.0.4:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz"
-  dependencies:
-    has-tostringtag "^1.0.0"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
-
-is-regex@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-shared-array-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-
-is-string@^1.0.5, is-string@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
-  dependencies:
-    has-tostringtag "^1.0.0"
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
-  dependencies:
-    has-symbols "^1.0.2"
-
-is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
-
-is-weakref@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
-
-js-sdsl@^4.1.4:
-  version "4.1.5"
-  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz"
-
-"js-tokens@^3.0.0 || ^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
-
-js-yaml@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
-  dependencies:
-    argparse "^2.0.1"
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
-
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
-
-json5@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
-  dependencies:
-    minimist "^1.2.0"
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
-  version "3.3.3"
-  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
-  dependencies:
-    array-includes "^3.1.5"
-    object.assign "^4.1.3"
-
-language-subtag-registry@~0.3.2:
-  version "0.3.22"
-  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
-
-language-tags@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
-  dependencies:
-    language-subtag-registry "~0.3.2"
-
-levn@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
-  dependencies:
-    prelude-ls "^1.2.1"
-    type-check "~0.4.0"
-
-locate-path@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
-  dependencies:
-    p-locate "^5.0.0"
-
-lodash.merge@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
-
-loose-envify@^1.1.0, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
-  dependencies:
-    yallist "^4.0.0"
-
-merge2@^1.3.0, merge2@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
-
-micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
-  dependencies:
-    braces "^3.0.2"
-    picomatch "^2.3.1"
-
-minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.2.0, minimist@^1.2.6:
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
-
-ms@2.1.2, ms@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
-
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
-
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
-
-next-tick@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
-
-next@^13.1.6:
-  version "13.1.6"
-  resolved "https://registry.npmjs.org/next/-/next-13.1.6.tgz"
-  dependencies:
-    "@next/env" "13.1.6"
-    "@swc/helpers" "0.4.14"
-    caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
-    styled-jsx "5.1.1"
-  optionalDependencies:
-    "@next/swc-android-arm-eabi" "13.1.6"
-    "@next/swc-android-arm64" "13.1.6"
-    "@next/swc-darwin-arm64" "13.1.6"
-    "@next/swc-darwin-x64" "13.1.6"
-    "@next/swc-freebsd-x64" "13.1.6"
-    "@next/swc-linux-arm-gnueabihf" "13.1.6"
-    "@next/swc-linux-arm64-gnu" "13.1.6"
-    "@next/swc-linux-arm64-musl" "13.1.6"
-    "@next/swc-linux-x64-gnu" "13.1.6"
-    "@next/swc-linux-x64-musl" "13.1.6"
-    "@next/swc-win32-arm64-msvc" "13.1.6"
-    "@next/swc-win32-ia32-msvc" "13.1.6"
-    "@next/swc-win32-x64-msvc" "13.1.6"
-
-node-fetch@2.6.7:
-  version "2.6.7"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
-  dependencies:
-    whatwg-url "^5.0.0"
-
-node-gyp-build@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz"
-
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
-
-object-inspect@^1.12.2, object-inspect@^1.9.0:
-  version "1.12.2"
-  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
-
-object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
-
-object.assign@^4.1.3, object.assign@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    has-symbols "^1.0.3"
-    object-keys "^1.1.1"
-
-object.entries@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.hasown@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz"
-  dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-
-object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
-  dependencies:
-    wrappy "1"
-
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
-  dependencies:
-    deep-is "^0.1.3"
-    fast-levenshtein "^2.0.6"
-    levn "^0.4.1"
-    prelude-ls "^1.2.1"
-    type-check "^0.4.0"
-    word-wrap "^1.2.3"
-
-p-limit@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
-  dependencies:
-    yocto-queue "^0.1.0"
-
-p-locate@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
-  dependencies:
-    p-limit "^3.0.2"
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
-  dependencies:
-    callsites "^3.0.0"
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
-
-path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
-
-path-parse@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
-
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
-
-picomatch@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-
-postcss@8.4.14:
-  version "8.4.14"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-prelude-ls@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
-
-prop-types@^15.7.2, prop-types@^15.8.1:
-  version "15.8.1"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
-punycode@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
-
-queue-microtask@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
-
-react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
-react-is@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
-  dependencies:
-    loose-envify "^1.1.0"
-
-regenerator-runtime@^0.13.10:
-  version "0.13.10"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz"
-
-regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    functions-have-names "^1.2.2"
-
-regexpp@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
-
-resolve@^1.20.0, resolve@^1.22.0:
-  version "1.22.1"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-resolve@^2.0.0-next.3:
-  version "2.0.0-next.4"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz"
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-reusify@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
-
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
-  dependencies:
-    glob "^7.1.3"
-
-run-parallel@^1.1.9:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
-  dependencies:
-    queue-microtask "^1.2.2"
-
-safe-regex-test@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    is-regex "^1.1.4"
-
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
-  dependencies:
-    loose-envify "^1.1.0"
-
-semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
-
-semver@^7.3.7:
-  version "7.3.8"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
-  dependencies:
-    lru-cache "^6.0.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
-
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
-
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
-
-string.prototype.matchall@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.1"
-    side-channel "^1.0.4"
-
-string.prototype.trimend@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-
-string.prototype.trimstart@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
-
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
-
-styled-jsx@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
-  dependencies:
-    client-only "0.0.1"
-
-supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-preserve-symlinks-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
-
-text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
-  dependencies:
-    is-number "^7.0.0"
-
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
-
-tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.6"
-    strip-bom "^3.0.0"
-
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
-
-tslib@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz"
-
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
-  dependencies:
-    tslib "^1.8.1"
-
-type-check@^0.4.0, type-check@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
-  dependencies:
-    prelude-ls "^1.2.1"
-
-type-fest@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
-
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/type/-/type-1.2.0.tgz"
-
-type@^2.7.2:
-  version "2.7.2"
-  resolved "https://registry.npmjs.org/type/-/type-2.7.2.tgz"
-
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"
-  dependencies:
-    is-typedarray "^1.0.0"
-
-typescript@4.8.4:
-  version "4.8.4"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
-
-unbox-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
-  dependencies:
-    call-bind "^1.0.2"
-    has-bigints "^1.0.2"
-    has-symbols "^1.0.3"
-    which-boxed-primitive "^1.0.2"
-
-uri-js@^4.2.2:
-  version "4.4.1"
-  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
-  dependencies:
-    punycode "^2.1.0"
-
-utf-8-validate@^5.0.2:
-  version "5.0.10"
-  resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz"
-  dependencies:
-    node-gyp-build "^4.3.0"
-
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
-
-websocket@^1.0.34:
-  version "1.0.34"
-  resolved "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz"
-  dependencies:
-    bufferutil "^4.0.1"
-    debug "^2.2.0"
-    es5-ext "^0.10.50"
-    typedarray-to-buffer "^3.1.5"
-    utf-8-validate "^5.0.2"
-    yaeti "^0.0.6"
-
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
-  dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
-
-which-boxed-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
-  dependencies:
-    isexe "^2.0.0"
-
-word-wrap@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
-
-yaeti@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz"
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
-
-yocto-queue@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
diff --git a/examples/slack-clone/nextjs-slack-clone/lib/Store.js b/examples/slack-clone/nextjs-slack-clone/lib/Store.js
index 5a3b8427bf9..a6e4623efda 100644
--- a/examples/slack-clone/nextjs-slack-clone/lib/Store.js
+++ b/examples/slack-clone/nextjs-slack-clone/lib/Store.js
@@ -62,9 +62,9 @@ export const useStore = (props) => {
       .subscribe()
     // Cleanup on unmount
     return () => {
-      supabase.removeChannel('public:messages')
-      supabase.removeChannel('public:users')
-      supabase.removeChannel('public:channels')
+      supabase.removeChannel(supabase.channel(messageListener))
+      supabase.removeChannel(supabase.channel(userListener))
+      supabase.removeChannel(supabase.channel(channelListener))
     }
   }, [])
 
@@ -179,7 +179,7 @@ export const fetchMessages = async (channelId, setState) => {
       .from('messages')
       .select(`*, author:user_id(*)`)
       .eq('channel_id', channelId)
-      .order('inserted_at', true)
+      .order('inserted_at', { ascending: true })
     if (setState) setState(data)
     return data
   } catch (error) {
diff --git a/examples/slack-clone/nextjs-slack-clone/pages/_app.js b/examples/slack-clone/nextjs-slack-clone/pages/_app.js
index 0331451de47..3db2d706fa3 100644
--- a/examples/slack-clone/nextjs-slack-clone/pages/_app.js
+++ b/examples/slack-clone/nextjs-slack-clone/pages/_app.js
@@ -12,17 +12,10 @@ export default function SupabaseSlackClone({ Component, pageProps }) {
   const router = useRouter()
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session }}) => {
-      setSession(session)
-      setUserLoaded(session ? true : false)
-      if (session?.user) {
-        signIn()
-        router.push('/channels/[id]', '/channels/1')
-      }
-    })
-
-
-    const { subscription: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
+    function saveSession(
+      /** @type {Awaited<ReturnType<typeof supabase.auth.getSession>>['data']['session']} */
+      session
+    ) {
       setSession(session)
       const currentUser = session?.user
       setUser(currentUser ?? null)
@@ -31,7 +24,11 @@ export default function SupabaseSlackClone({ Component, pageProps }) {
         signIn(currentUser.id, currentUser.email)
         router.push('/channels/[id]', '/channels/1')
       }
-    })
+    }
+
+    supabase.auth.getSession().then(({ data: { session }}) => saveSession(session))
+
+    const { subscription: authListener } = supabase.auth.onAuthStateChange(async (event, session) => saveSession(session))
 
     return () => {
       authListener.unsubscribe()
diff --git a/examples/user-management/nextjs-ts-user-management/components/Avatar.tsx b/examples/user-management/nextjs-ts-user-management/components/Avatar.tsx
index 4eba7554236..9803487f08a 100644
--- a/examples/user-management/nextjs-ts-user-management/components/Avatar.tsx
+++ b/examples/user-management/nextjs-ts-user-management/components/Avatar.tsx
@@ -17,23 +17,31 @@ export default function Avatar({
   const supabase = useSupabaseClient<Database>()
   const [avatarUrl, setAvatarUrl] = useState<Profiles['avatar_url']>(null)
   const [uploading, setUploading] = useState(false)
+  const [blobUrlCache, setBlobUrlCache] = useState<Record<string, string>>({})
 
   useEffect(() => {
     async function downloadImage(path: string) {
       try {
+        if (blobUrlCache[path]) {
+          setAvatarUrl(blobUrlCache[path])
+          return
+        }
+
         const { data, error } = await supabase.storage.from('avatars').download(path)
         if (error) {
           throw error
         }
+
         const url = URL.createObjectURL(data)
         setAvatarUrl(url)
+        setBlobUrlCache((prevCache) => ({ ...prevCache, [path]: url }))
       } catch (error) {
         console.log('Error downloading image: ', error)
       }
     }
 
     if (url) downloadImage(url)
-  }, [url, supabase.storage])
+  }, [url, supabase.storage, blobUrlCache])
 
   const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
     try {
diff --git a/package-lock.json b/package-lock.json
index 511f63d219a..dbc52c85d20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38843,7 +38843,8 @@
       "dependencies": {
         "@headlessui/react": "^1.5.0",
         "@supabase/gotrue-js": "^2.16.0",
-        "@supabase/ui": "^0.37.0-alpha.50"
+        "@supabase/ui": "^0.37.0-alpha.50",
+        "react-use": "^17.4.0"
       },
       "devDependencies": {
         "@types/react": "^17.0.37",
@@ -49557,6 +49558,7 @@
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "config": "*",
+        "react-use": "*",
         "tsconfig": "*",
         "typescript": "^4.5.3"
       },
diff --git a/packages/common/package.json b/packages/common/package.json
index e687143a5bc..7a654b57ef3 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -7,7 +7,8 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "@supabase/gotrue-js": "^2.16.0",
-    "@supabase/ui": "^0.37.0-alpha.50"
+    "@supabase/ui": "^0.37.0-alpha.50",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.37",
diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index e30eda037b4..f5b7888dcaf 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -6,7 +6,22 @@ const brandColors = require('./default-colors')
 
 const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette')
 
-// console.log(Object.keys(radixUiColors))
+// exclude these colors from the included set from Radix
+const excludedRadixColors = [
+  'bronze',
+  'brown',
+  'cyan',
+  'grass',
+  'olive',
+  'mauve',
+  'mint',
+  'lime',
+  'plum',
+  'sage',
+  'sand',
+  'sky',
+  'teal',
+]
 
 // generates fixed scales
 // based on the root/light mode version
@@ -26,7 +41,11 @@ function radixColorKeys() {
 
   keys = filterItems(keys, 'Dark')
 
-  // console.log('radixColorKeys', keys)
+  // remove excluded colors
+  keys = keys.filter(
+    (key) => !excludedRadixColors.some((excludeColor) => key.startsWith(excludeColor))
+  )
+
   return keys
 }
 
@@ -41,11 +60,7 @@ function generateColorClasses() {
     // create empty obj for each color
     mappedColors[x] = {}
     // create empty obj for each fixed color
-    if (
-      fixedOptions.some(function (v) {
-        return x.indexOf(v) >= 0
-      })
-    ) {
+    if (fixedOptions.some((v) => x.indexOf(v) >= 0)) {
       mappedColors[`${x}-fixed`] = {}
     }
   })
@@ -55,12 +70,7 @@ function generateColorClasses() {
       const step = index + 1
       mappedColors[x][step * 100] = `var(--colors-${x}${step})`
 
-      if (
-        fixedOptions.some(function (v) {
-          return x.indexOf(v) >= 0
-        })
-      ) {
-        // console.log(x)
+      if (fixedOptions.some((v) => x.indexOf(v) >= 0)) {
         mappedColors[`${x}-fixed`][step * 100] = `var(--colors-fixed-${x}${step})`
       }
     }
@@ -71,13 +81,7 @@ function generateColorClasses() {
 
 const colorClasses = generateColorClasses()
 
-/*
- * generateCssVariables()
- *
- * generate the CSS variables for tailwind to use
- *
- */
-
+// generate the CSS variables for tailwind to use
 function generateCssVariables() {
   // potential options
   // { fixedOptions, brandColors }
@@ -85,7 +89,12 @@ function generateCssVariables() {
   let rootColors = {}
   let darkColors = {}
 
-  const radixArray = Object.values(radixUiColors)
+  const radixArray = Object.entries(radixUiColors)
+    .filter(
+      ([key, value]) => !excludedRadixColors.some((excludeColor) => key.startsWith(excludeColor))
+    )
+    .map(([, value]) => value)
+
   const brandArray = Object.values(brandColors)
 
   function generateColors(colors, index, colorSet) {
@@ -379,12 +388,12 @@ const uiConfig = {
             bordershadow: (value) => {
               return {
                 boxShadow: `
-                var(--colors-blackA1) 0px 0px 0px 0px, 
-                var(--colors-blackA1) 0px 0px 0px 0px, 
-                var(--colors-blackA8) 0px 1px 1px 0px, 
-                ${value} 0px 0px 0px 1px, 
-                var(--colors-blackA1) 0px 0px 0px 0px, 
-                var(--colors-blackA1) 0px 0px 0px 0px, 
+                var(--colors-blackA1) 0px 0px 0px 0px,
+                var(--colors-blackA1) 0px 0px 0px 0px,
+                var(--colors-blackA8) 0px 1px 1px 0px,
+                ${value} 0px 0px 0px 1px,
+                var(--colors-blackA1) 0px 0px 0px 0px,
+                var(--colors-blackA1) 0px 0px 0px 0px,
                 rgb(64 68 82 / 8%) 0px 2px 5px 0px;
                 `,
               }
diff --git a/packages/ui/config.js b/packages/ui/config.js
index e760ba29c43..746bef7abec 100644
--- a/packages/ui/config.js
+++ b/packages/ui/config.js
@@ -1,159 +1,13 @@
 const deepMerge = require('deepmerge')
 const customFormsPlugin = require('@tailwindcss/forms')
 
-const colors = {
-  transparent: 'transparent',
-  white: '#ffffff',
-  black: '#000000',
-  gray: {
-    '50': '#f9fafb',
-    '100': '#f4f5f7',
-    '200': '#e5e7eb',
-    '300': '#d5d6d7',
-    '400': '#9e9e9e',
-    '500': '#707275',
-    '600': '#4c4f52',
-    '700': '#24262d',
-    '800': '#1a1c23',
-    '900': '#121317',
-    // default values from Tailwind UI palette
-    // '300': '#d2d6dc',
-    // '400': '#9fa6b2',
-    // '500': '#6b7280',
-    // '600': '#4b5563',
-    // '700': '#374151',
-    // '800': '#252f3f',
-    // '900': '#161e2e',
-  },
-  'cool-gray': {
-    '50': '#fbfdfe',
-    '100': '#f1f5f9',
-    '200': '#e2e8f0',
-    '300': '#cfd8e3',
-    '400': '#97a6ba',
-    '500': '#64748b',
-    '600': '#475569',
-    '700': '#364152',
-    '800': '#27303f',
-    '900': '#1a202e',
-  },
-  red: {
-    '50': '#fdf2f2',
-    '100': '#fde8e8',
-    '200': '#fbd5d5',
-    '300': '#f8b4b4',
-    '400': '#f98080',
-    '500': '#f05252',
-    '600': '#e02424',
-    '700': '#c81e1e',
-    '800': '#9b1c1c',
-    '900': '#771d1d',
-  },
-  orange: {
-    '50': '#fff8f1',
-    '100': '#feecdc',
-    '200': '#fcd9bd',
-    '300': '#fdba8c',
-    '400': '#ff8a4c',
-    '500': '#ff5a1f',
-    '600': '#d03801',
-    '700': '#b43403',
-    '800': '#8a2c0d',
-    '900': '#771d1d',
-  },
-  yellow: {
-    '50': '#fdfdea',
-    '100': '#fdf6b2',
-    '200': '#fce96a',
-    '300': '#faca15',
-    '400': '#e3a008',
-    '500': '#c27803',
-    '600': '#9f580a',
-    '700': '#8e4b10',
-    '800': '#723b13',
-    '900': '#633112',
-  },
-  green: {
-    '50': '#f3faf7',
-    '100': '#def7ec',
-    '200': '#bcf0da',
-    '300': '#84e1bc',
-    '400': '#31c48d',
-    '500': '#0e9f6e',
-    '600': '#057a55',
-    '700': '#046c4e',
-    '800': '#03543f',
-    '900': '#014737',
-  },
-  teal: {
-    '50': '#edfafa',
-    '100': '#d5f5f6',
-    '200': '#afecef',
-    '300': '#7edce2',
-    '400': '#16bdca',
-    '500': '#0694a2',
-    '600': '#047481',
-    '700': '#036672',
-    '800': '#05505c',
-    '900': '#014451',
-  },
-  blue: {
-    '50': '#ebf5ff',
-    '100': '#e1effe',
-    '200': '#c3ddfd',
-    '300': '#a4cafe',
-    '400': '#76a9fa',
-    '500': '#3f83f8',
-    '600': '#1c64f2',
-    '700': '#1a56db',
-    '800': '#1e429f',
-    '900': '#233876',
-  },
-  indigo: {
-    '50': '#f0f5ff',
-    '100': '#e5edff',
-    '200': '#cddbfe',
-    '300': '#b4c6fc',
-    '400': '#8da2fb',
-    '500': '#6875f5',
-    '600': '#5850ec',
-    '700': '#5145cd',
-    '800': '#42389d',
-    '900': '#362f78',
-  },
-  purple: {
-    '50': '#f6f5ff',
-    '100': '#edebfe',
-    '200': '#dcd7fe',
-    '300': '#cabffd',
-    '400': '#ac94fa',
-    '500': '#9061f9',
-    '600': '#7e3af2',
-    '700': '#6c2bd9',
-    '800': '#5521b5',
-    '900': '#4a1d96',
-  },
-  pink: {
-    '50': '#fdf2f8',
-    '100': '#fce8f3',
-    '200': '#fad1e8',
-    '300': '#f8b4d9',
-    '400': '#f17eb8',
-    '500': '#e74694',
-    '600': '#d61f69',
-    '700': '#bf125d',
-    '800': '#99154b',
-    '900': '#751a3d',
-  },
-}
-
 const backgroundOpacity = (theme) => ({
-  '10': '0.1',
+  10: '0.1',
   ...theme('opacity'),
 })
 
 const maxHeight = (theme) => ({
-  '0': '0',
+  0: '0',
   xl: '36rem',
   ...theme('spacing'),
 })
@@ -162,12 +16,11 @@ const windmillConfig = {
   darkMode: 'class',
   purge: {
     content: [
-      'node_modules/@supabase/ui/theme/defaultTheme.js',
+      //'node_modules/@supabase/ui/theme/defaultTheme.js',
       // 'node_modules/@supabase/ui/dist/index.js',
     ],
   },
   theme: {
-    colors,
     backgroundOpacity,
     maxHeight,
   },
@@ -175,14 +28,7 @@ const windmillConfig = {
     backgroundOpacity: ['responsive', 'hover', 'focus', 'dark'],
     backgroundColor: ['responsive', 'hover', 'focus', 'active', 'odd', 'dark'],
     display: ['responsive', 'dark'],
-    textColor: [
-      'responsive',
-      'focus',
-      'focus-within',
-      'hover',
-      'active',
-      'dark',
-    ],
+    textColor: ['responsive', 'focus', 'focus-within', 'hover', 'active', 'dark'],
     placeholderColor: ['responsive', 'focus', 'dark'],
     borderColor: ['responsive', 'hover', 'focus', 'dark'],
     divideColor: ['responsive', 'dark'],
diff --git a/packages/ui/default-colors.js b/packages/ui/default-colors.js
deleted file mode 100644
index 16352a83344..00000000000
--- a/packages/ui/default-colors.js
+++ /dev/null
@@ -1,90 +0,0 @@
-module.exports = {
-  brand: {
-    brand1: 'hsla(153, 80%, 99%, 1)',
-    brand2: 'hsla(148, 88%, 97%, 1)',
-    brand3: 'hsla(148, 76%, 95%, 1)',
-    brand4: 'hsla(148, 68%, 92%, 1)',
-    brand5: 'hsla(148, 59%, 88%, 1)',
-    brand6: 'hsla(149, 43%, 82%, 1)',
-    brand7: 'hsla(149, 43%, 69%, 1)',
-    brand8: 'hsla(154, 55%, 45%, 1)',
-    brand9: 'hsla(153, 60%, 53%, 1)',
-    brand10: 'hsla(153, 50%, 50%, 1)',
-    brand11: 'hsla(153, 50%, 34%, 1)',
-    brand12: 'hsla(153, 40%, 12%, 1)',
-  },
-  brandDark: {
-    brand1: 'hsla(153, 75%, 6%, 1)',
-    brand2: 'hsla(153, 73%, 7%, 1)',
-    brand3: 'hsla(154, 69%, 9%, 1)',
-    brand4: 'hsla(154, 67%, 11%, 1)',
-    brand5: 'hsla(154, 66%, 13%, 1)',
-    brand6: 'hsla(154, 64%, 17%, 1)',
-    brand7: 'hsla(154, 62%, 22%, 1)',
-    brand8: 'hsla(153, 60%, 28%, 1)',
-    brand9: 'hsla(153, 60%, 53%, 1)',
-    brand10: 'hsla(153, 60%, 70%, 1)',
-    brand11: 'hsla(153, 60%, 50%, 1)',
-    brand12: 'hsla(153, 60%, 95%, 1)',
-  },
-  contrast: {
-    'brand-hiContrast': 'var(--colors-brand-9)',
-    'brand-loContrast': 'var(--colors-brand-4)',
-  },
-  scale: {
-    scale1: 'var(--colors-slate1)',
-    scale2: 'var(--colors-slate2)',
-    scale3: 'var(--colors-slate3)',
-    scale4: 'var(--colors-slate4)',
-    scale5: 'var(--colors-slate5)',
-    scale6: 'var(--colors-slate6)',
-    scale7: 'var(--colors-slate7)',
-    scale8: 'var(--colors-slate8)',
-    scale9: 'var(--colors-slate9)',
-    scale10: 'var(--colors-slate10)',
-    scale11: 'var(--colors-slate11)',
-    scale12: 'var(--colors-slate12)',
-  },
-  scaleA: {
-    scaleA1: 'var(--colors-slatea1)',
-    scaleA2: 'var(--colors-slatea2)',
-    scaleA3: 'var(--colors-slatea3)',
-    scaleA4: 'var(--colors-slatea4)',
-    scaleA5: 'var(--colors-slatea5)',
-    scaleA6: 'var(--colors-slatea6)',
-    scaleA7: 'var(--colors-slatea7)',
-    scaleA8: 'var(--colors-slatea8)',
-    scaleA9: 'var(--colors-slatea9)',
-    scaleA10: 'var(--colors-slatea10)',
-    scaleA11: 'var(--colors-slatea11)',
-    scaleA12: 'var(--colors-slatea12)',
-  },
-  scaleDark: {
-    scale1: 'var(--colors-gray1)',
-    scale2: 'var(--colors-gray2)',
-    scale3: 'var(--colors-gray3)',
-    scale4: 'var(--colors-gray4)',
-    scale5: 'var(--colors-gray5)',
-    scale6: 'var(--colors-gray6)',
-    scale7: 'var(--colors-gray7)',
-    scale8: 'var(--colors-gray8)',
-    scale9: 'var(--colors-gray9)',
-    scale10: 'var(--colors-gray10)',
-    scale11: 'var(--colors-gray11)',
-    scale12: 'var(--colors-gray12)',
-  },
-  scaleADark: {
-    scaleA1: 'var(--colors-graya1)',
-    scaleA2: 'var(--colors-graya2)',
-    scaleA3: 'var(--colors-graya3)',
-    scaleA4: 'var(--colors-graya4)',
-    scaleA5: 'var(--colors-graya5)',
-    scaleA6: 'var(--colors-graya6)',
-    scaleA7: 'var(--colors-graya7)',
-    scaleA8: 'var(--colors-graya8)',
-    scaleA9: 'var(--colors-graya9)',
-    scaleA10: 'var(--colors-graya10)',
-    scaleA11: 'var(--colors-graya11)',
-    scaleA12: 'var(--colors-graya12)',
-  },
-}
diff --git a/packages/ui/radix-colors.js b/packages/ui/radix-colors.js
deleted file mode 100644
index 51e5115c33c..00000000000
--- a/packages/ui/radix-colors.js
+++ /dev/null
@@ -1,1349 +0,0 @@
-export const radix_light = {
-  '--colors-gray1': 'hsl(0 0% 99%)',
-  '--colors-gray2': 'hsl(0 0% 97.3%)',
-  '--colors-gray3': 'hsl(0 0% 95.1%)',
-  '--colors-gray4': 'hsl(0 0% 93%)',
-  '--colors-gray5': 'hsl(0 0% 90.9%)',
-  '--colors-gray6': 'hsl(0 0% 88.7%)',
-  '--colors-gray7': 'hsl(0 0% 85.8%)',
-  '--colors-gray8': 'hsl(0 0% 78%)',
-  '--colors-gray9': 'hsl(0 0% 56.1%)',
-  '--colors-gray10': 'hsl(0 0% 52.3%)',
-  '--colors-gray11': 'hsl(0 0% 43.5%)',
-  '--colors-gray12': 'hsl(0 0% 9%)',
-  '--colors-mauve1': 'hsl(300 20% 99%)',
-  '--colors-mauve2': 'hsl(300 7.7% 97.5%)',
-  '--colors-mauve3': 'hsl(294 5.5% 95.3%)',
-  '--colors-mauve4': 'hsl(289 4.7% 93.3%)',
-  '--colors-mauve5': 'hsl(283 4.4% 91.3%)',
-  '--colors-mauve6': 'hsl(278 4.1% 89.1%)',
-  '--colors-mauve7': 'hsl(271 3.9% 86.3%)',
-  '--colors-mauve8': 'hsl(255 3.7% 78.8%)',
-  '--colors-mauve9': 'hsl(252 4% 57.3%)',
-  '--colors-mauve10': 'hsl(253 3.5% 53.5%)',
-  '--colors-mauve11': 'hsl(252 4% 44.8%)',
-  '--colors-mauve12': 'hsl(260 25% 11%)',
-  '--colors-slate1': 'hsl(206 30% 98.8%)',
-  '--colors-slate2': 'hsl(210 16.7% 97.6%)',
-  '--colors-slate3': 'hsl(209 13.3% 95.3%)',
-  '--colors-slate4': 'hsl(209 12.2% 93.2%)',
-  '--colors-slate5': 'hsl(208 11.7% 91.1%)',
-  '--colors-slate6': 'hsl(208 11.3% 88.9%)',
-  '--colors-slate7': 'hsl(207 11.1% 85.9%)',
-  '--colors-slate8': 'hsl(205 10.7% 78%)',
-  '--colors-slate9': 'hsl(206 6% 56.1%)',
-  '--colors-slate10': 'hsl(206 5.8% 52.3%)',
-  '--colors-slate11': 'hsl(206 6% 43.5%)',
-  '--colors-slate12': 'hsl(206 24% 9%)',
-  '--colors-sage1': 'hsl(155 30% 98.8%)',
-  '--colors-sage2': 'hsl(150 16.7% 97.6%)',
-  '--colors-sage3': 'hsl(151 10.6% 95.2%)',
-  '--colors-sage4': 'hsl(151 8.8% 93%)',
-  '--colors-sage5': 'hsl(151 7.8% 90.8%)',
-  '--colors-sage6': 'hsl(152 7.2% 88.4%)',
-  '--colors-sage7': 'hsl(153 6.7% 85.3%)',
-  '--colors-sage8': 'hsl(154 6.1% 77.5%)',
-  '--colors-sage9': 'hsl(155 3.5% 55.5%)',
-  '--colors-sage10': 'hsl(154 2.8% 51.7%)',
-  '--colors-sage11': 'hsl(155 3% 43%)',
-  '--colors-sage12': 'hsl(155 24% 9%)',
-  '--colors-olive1': 'hsl(110 20% 99%)',
-  '--colors-olive2': 'hsl(120 16.7% 97.6%)',
-  '--colors-olive3': 'hsl(119 10.1% 95.2%)',
-  '--colors-olive4': 'hsl(118 8.1% 93%)',
-  '--colors-olive5': 'hsl(117 7.1% 90.8%)',
-  '--colors-olive6': 'hsl(115 6.4% 88.5%)',
-  '--colors-olive7': 'hsl(114 5.9% 85.4%)',
-  '--colors-olive8': 'hsl(110 5.2% 77.3%)',
-  '--colors-olive9': 'hsl(110 3.5% 55.5%)',
-  '--colors-olive10': 'hsl(111 2.8% 51.7%)',
-  '--colors-olive11': 'hsl(110 3% 43%)',
-  '--colors-olive12': 'hsl(110 25% 9.5%)',
-  '--colors-sand1': 'hsl(50 20% 99%)',
-  '--colors-sand2': 'hsl(60 7.7% 97.5%)',
-  '--colors-sand3': 'hsl(59 6.5% 95.1%)',
-  '--colors-sand4': 'hsl(58 6.1% 92.9%)',
-  '--colors-sand5': 'hsl(57 6% 90.7%)',
-  '--colors-sand6': 'hsl(56 5.9% 88.4%)',
-  '--colors-sand7': 'hsl(55 5.9% 85.2%)',
-  '--colors-sand8': 'hsl(51 6% 77.1%)',
-  '--colors-sand9': 'hsl(50 2% 55.7%)',
-  '--colors-sand10': 'hsl(55 1.7% 51.9%)',
-  '--colors-sand11': 'hsl(50 2% 43.1%)',
-  '--colors-sand12': 'hsl(50 6% 10%)',
-  '--colors-tomato1': 'hsl(10 100% 99.4%)',
-  '--colors-tomato2': 'hsl(8 100% 98.4%)',
-  '--colors-tomato3': 'hsl(8 100% 96.6%)',
-  '--colors-tomato4': 'hsl(8 100% 94.3%)',
-  '--colors-tomato5': 'hsl(8 92.8% 91%)',
-  '--colors-tomato6': 'hsl(9 84.7% 86.3%)',
-  '--colors-tomato7': 'hsl(10 77.3% 79.5%)',
-  '--colors-tomato8': 'hsl(10 71.6% 71%)',
-  '--colors-tomato9': 'hsl(10 78% 54%)',
-  '--colors-tomato10': 'hsl(10 71.5% 50%)',
-  '--colors-tomato11': 'hsl(10 82% 43.5%)',
-  '--colors-tomato12': 'hsl(10 50% 13.5%)',
-  '--colors-red1': 'hsl(359 100% 99.4%)',
-  '--colors-red2': 'hsl(359 100% 98.6%)',
-  '--colors-red3': 'hsl(360 100% 96.8%)',
-  '--colors-red4': 'hsl(360 97.9% 94.8%)',
-  '--colors-red5': 'hsl(360 90.2% 91.9%)',
-  '--colors-red6': 'hsl(360 81.7% 87.8%)',
-  '--colors-red7': 'hsl(359 74.2% 81.7%)',
-  '--colors-red8': 'hsl(359 69.5% 74.3%)',
-  '--colors-red9': 'hsl(358 75% 59%)',
-  '--colors-red10': 'hsl(358 69.4% 55.2%)',
-  '--colors-red11': 'hsl(358 65% 48.7%)',
-  '--colors-red12': 'hsl(354 50% 14.6%)',
-  '--colors-crimson1': 'hsl(332 100% 99.4%)',
-  '--colors-crimson2': 'hsl(330 100% 98.4%)',
-  '--colors-crimson3': 'hsl(331 85.6% 96.6%)',
-  '--colors-crimson4': 'hsl(331 78.1% 94.2%)',
-  '--colors-crimson5': 'hsl(332 72.1% 91.1%)',
-  '--colors-crimson6': 'hsl(333 67% 86.7%)',
-  '--colors-crimson7': 'hsl(335 63.5% 80.4%)',
-  '--colors-crimson8': 'hsl(336 62.3% 72.9%)',
-  '--colors-crimson9': 'hsl(336 80% 57.8%)',
-  '--colors-crimson10': 'hsl(336 73.7% 53.5%)',
-  '--colors-crimson11': 'hsl(336 75% 47.2%)',
-  '--colors-crimson12': 'hsl(340 65% 14.5%)',
-  '--colors-pink1': 'hsl(322 100% 99.4%)',
-  '--colors-pink2': 'hsl(323 100% 98.4%)',
-  '--colors-pink3': 'hsl(323 86.3% 96.5%)',
-  '--colors-pink4': 'hsl(323 78.7% 94.2%)',
-  '--colors-pink5': 'hsl(323 72.2% 91.1%)',
-  '--colors-pink6': 'hsl(323 66.3% 86.6%)',
-  '--colors-pink7': 'hsl(323 62% 80.1%)',
-  '--colors-pink8': 'hsl(323 60.3% 72.4%)',
-  '--colors-pink9': 'hsl(322 65% 54.5%)',
-  '--colors-pink10': 'hsl(322 63.9% 50.7%)',
-  '--colors-pink11': 'hsl(322 75% 46%)',
-  '--colors-pink12': 'hsl(320 70% 13.5%)',
-  '--colors-plum1': 'hsl(292 90% 99.4%)',
-  '--colors-plum2': 'hsl(300 100% 98.6%)',
-  '--colors-plum3': 'hsl(299 71.2% 96.4%)',
-  '--colors-plum4': 'hsl(299 62% 93.8%)',
-  '--colors-plum5': 'hsl(298 56.1% 90.5%)',
-  '--colors-plum6': 'hsl(296 51.3% 85.8%)',
-  '--colors-plum7': 'hsl(295 48.2% 78.9%)',
-  '--colors-plum8': 'hsl(292 47.7% 70.8%)',
-  '--colors-plum9': 'hsl(292 45% 51%)',
-  '--colors-plum10': 'hsl(292 50.2% 46.9%)',
-  '--colors-plum11': 'hsl(292 60% 42.5%)',
-  '--colors-plum12': 'hsl(291 66% 14%)',
-  '--colors-purple1': 'hsl(280 65% 99.4%)',
-  '--colors-purple2': 'hsl(276 100% 99%)',
-  '--colors-purple3': 'hsl(276 83.1% 97%)',
-  '--colors-purple4': 'hsl(275 76.4% 94.7%)',
-  '--colors-purple5': 'hsl(275 70.8% 91.8%)',
-  '--colors-purple6': 'hsl(274 65.4% 87.8%)',
-  '--colors-purple7': 'hsl(273 61% 81.7%)',
-  '--colors-purple8': 'hsl(272 60% 73.5%)',
-  '--colors-purple9': 'hsl(272 51% 54%)',
-  '--colors-purple10': 'hsl(272 46.8% 50.3%)',
-  '--colors-purple11': 'hsl(272 50% 45.8%)',
-  '--colors-purple12': 'hsl(272 66% 16%)',
-  '--colors-violet1': 'hsl(255 65% 99.4%)',
-  '--colors-violet2': 'hsl(252 100% 99%)',
-  '--colors-violet3': 'hsl(252 96.9% 97.4%)',
-  '--colors-violet4': 'hsl(252 91.5% 95.5%)',
-  '--colors-violet5': 'hsl(252 85.1% 93%)',
-  '--colors-violet6': 'hsl(252 77.8% 89.4%)',
-  '--colors-violet7': 'hsl(252 71% 83.7%)',
-  '--colors-violet8': 'hsl(252 68.6% 76.3%)',
-  '--colors-violet9': 'hsl(252 56% 57.5%)',
-  '--colors-violet10': 'hsl(251 48.1% 53.5%)',
-  '--colors-violet11': 'hsl(250 43% 48%)',
-  '--colors-violet12': 'hsl(254 60% 18.5%)',
-  '--colors-indigo1': 'hsl(225 60% 99.4%)',
-  '--colors-indigo2': 'hsl(223 100% 98.6%)',
-  '--colors-indigo3': 'hsl(223 98.4% 97.1%)',
-  '--colors-indigo4': 'hsl(223 92.9% 95%)',
-  '--colors-indigo5': 'hsl(224 87.1% 92%)',
-  '--colors-indigo6': 'hsl(224 81.9% 87.8%)',
-  '--colors-indigo7': 'hsl(225 77.4% 82.1%)',
-  '--colors-indigo8': 'hsl(226 75.4% 74.5%)',
-  '--colors-indigo9': 'hsl(226 70% 55.5%)',
-  '--colors-indigo10': 'hsl(226 58.6% 51.3%)',
-  '--colors-indigo11': 'hsl(226 55% 45%)',
-  '--colors-indigo12': 'hsl(226 62% 17%)',
-  '--colors-blue1': 'hsl(206 100% 99.2%)',
-  '--colors-blue2': 'hsl(210 100% 98%)',
-  '--colors-blue3': 'hsl(209 100% 96.5%)',
-  '--colors-blue4': 'hsl(210 98.8% 94%)',
-  '--colors-blue5': 'hsl(209 95% 90.1%)',
-  '--colors-blue6': 'hsl(209 81.2% 84.5%)',
-  '--colors-blue7': 'hsl(208 77.5% 76.9%)',
-  '--colors-blue8': 'hsl(206 81.9% 65.3%)',
-  '--colors-blue9': 'hsl(206 100% 50%)',
-  '--colors-blue10': 'hsl(208 100% 47.3%)',
-  '--colors-blue11': 'hsl(211 100% 43.2%)',
-  '--colors-blue12': 'hsl(211 100% 15%)',
-  '--colors-sky1': 'hsl(193 100% 98.8%)',
-  '--colors-sky2': 'hsl(193 100% 97.3%)',
-  '--colors-sky3': 'hsl(193 99% 94.7%)',
-  '--colors-sky4': 'hsl(193 91.4% 91.4%)',
-  '--colors-sky5': 'hsl(194 82% 86.6%)',
-  '--colors-sky6': 'hsl(194 74.1% 79.5%)',
-  '--colors-sky7': 'hsl(194 72.3% 69.6%)',
-  '--colors-sky8': 'hsl(193 77.9% 53.9%)',
-  '--colors-sky9': 'hsl(193 98% 70%)',
-  '--colors-sky10': 'hsl(193 87% 66.5%)',
-  '--colors-sky11': 'hsl(195 100% 31.5%)',
-  '--colors-sky12': 'hsl(195 100% 13%)',
-  '--colors-mint1': 'hsl(165 80% 98.8%)',
-  '--colors-mint2': 'hsl(164 88.2% 96.7%)',
-  '--colors-mint3': 'hsl(164 76.6% 93.3%)',
-  '--colors-mint4': 'hsl(165 68.8% 89.5%)',
-  '--colors-mint5': 'hsl(165 60.6% 84.5%)',
-  '--colors-mint6': 'hsl(165 53.5% 76.9%)',
-  '--colors-mint7': 'hsl(166 50.7% 66.1%)',
-  '--colors-mint8': 'hsl(168 52.8% 51%)',
-  '--colors-mint9': 'hsl(167 65% 66%)',
-  '--colors-mint10': 'hsl(167 59.3% 63.1%)',
-  '--colors-mint11': 'hsl(172 72% 28.5%)',
-  '--colors-mint12': 'hsl(172 70% 12%)',
-  '--colors-cyan1': 'hsl(185 60% 98.7%)',
-  '--colors-cyan2': 'hsl(185 73.3% 97.1%)',
-  '--colors-cyan3': 'hsl(186 70.2% 94.4%)',
-  '--colors-cyan4': 'hsl(186 63.8% 90.6%)',
-  '--colors-cyan5': 'hsl(187 58.3% 85.4%)',
-  '--colors-cyan6': 'hsl(188 54.6% 78.4%)',
-  '--colors-cyan7': 'hsl(189 53.7% 68.7%)',
-  '--colors-cyan8': 'hsl(189 60.3% 52.5%)',
-  '--colors-cyan9': 'hsl(190 95% 39%)',
-  '--colors-cyan10': 'hsl(191 91.2% 36.8%)',
-  '--colors-cyan11': 'hsl(192 85% 31%)',
-  '--colors-cyan12': 'hsl(192 88% 12.5%)',
-  '--colors-teal1': 'hsl(165 60% 98.8%)',
-  '--colors-teal2': 'hsl(169 64.7% 96.7%)',
-  '--colors-teal3': 'hsl(169 59.8% 94%)',
-  '--colors-teal4': 'hsl(169 53.1% 90.2%)',
-  '--colors-teal5': 'hsl(170 47.1% 85%)',
-  '--colors-teal6': 'hsl(170 42.6% 77.9%)',
-  '--colors-teal7': 'hsl(170 39.9% 68.1%)',
-  '--colors-teal8': 'hsl(172 42.1% 52.5%)',
-  '--colors-teal9': 'hsl(173 80% 36%)',
-  '--colors-teal10': 'hsl(173 83.4% 32.5%)',
-  '--colors-teal11': 'hsl(174 90% 25.2%)',
-  '--colors-teal12': 'hsl(170 50% 12.5%)',
-  '--colors-green1': 'hsl(136 50% 98.9%)',
-  '--colors-green2': 'hsl(138 62.5% 96.9%)',
-  '--colors-green3': 'hsl(139 55.2% 94.5%)',
-  '--colors-green4': 'hsl(140 48.7% 91%)',
-  '--colors-green5': 'hsl(141 43.7% 86%)',
-  '--colors-green6': 'hsl(143 40.3% 79%)',
-  '--colors-green7': 'hsl(146 38.5% 69%)',
-  '--colors-green8': 'hsl(151 40.2% 54.1%)',
-  '--colors-green9': 'hsl(151 55% 41.5%)',
-  '--colors-green10': 'hsl(152 57.5% 37.6%)',
-  '--colors-green11': 'hsl(153 67% 28.5%)',
-  '--colors-green12': 'hsl(155 40% 14%)',
-  '--colors-grass1': 'hsl(116 50% 98.9%)',
-  '--colors-grass2': 'hsl(120 60% 97.1%)',
-  '--colors-grass3': 'hsl(120 53.6% 94.8%)',
-  '--colors-grass4': 'hsl(121 47.5% 91.4%)',
-  '--colors-grass5': 'hsl(122 42.6% 86.5%)',
-  '--colors-grass6': 'hsl(124 39% 79.7%)',
-  '--colors-grass7': 'hsl(126 37.1% 70.2%)',
-  '--colors-grass8': 'hsl(131 38.1% 56.3%)',
-  '--colors-grass9': 'hsl(131 41% 46.5%)',
-  '--colors-grass10': 'hsl(132 43.1% 42.2%)',
-  '--colors-grass11': 'hsl(133 50% 32.5%)',
-  '--colors-grass12': 'hsl(130 30% 14.9%)',
-  '--colors-lime1': 'hsl(85 50% 98.7%)',
-  '--colors-lime2': 'hsl(85 66.7% 96.5%)',
-  '--colors-lime3': 'hsl(85 76% 92.3%)',
-  '--colors-lime4': 'hsl(84 75.3% 87.5%)',
-  '--colors-lime5': 'hsl(84 71.5% 81.9%)',
-  '--colors-lime6': 'hsl(82 65% 74.6%)',
-  '--colors-lime7': 'hsl(79 53.2% 61.8%)',
-  '--colors-lime8': 'hsl(76 61.7% 45.1%)',
-  '--colors-lime9': 'hsl(81 67% 50%)',
-  '--colors-lime10': 'hsl(80 68.3% 46.9%)',
-  '--colors-lime11': 'hsl(75 80% 26%)',
-  '--colors-lime12': 'hsl(78 70% 11.5%)',
-  '--colors-yellow1': 'hsl(60 54% 98.5%)',
-  '--colors-yellow2': 'hsl(52 100% 95.5%)',
-  '--colors-yellow3': 'hsl(55 100% 90.9%)',
-  '--colors-yellow4': 'hsl(54 100% 86.6%)',
-  '--colors-yellow5': 'hsl(52 97.9% 82%)',
-  '--colors-yellow6': 'hsl(50 89.4% 76.1%)',
-  '--colors-yellow7': 'hsl(47 80.4% 68%)',
-  '--colors-yellow8': 'hsl(48 100% 46.1%)',
-  '--colors-yellow9': 'hsl(53 92% 50%)',
-  '--colors-yellow10': 'hsl(50 100% 48.5%)',
-  '--colors-yellow11': 'hsl(42 100% 29%)',
-  '--colors-yellow12': 'hsl(40 55% 13.5%)',
-  '--colors-amber1': 'hsl(39 70% 99%)',
-  '--colors-amber2': 'hsl(40 100% 96.5%)',
-  '--colors-amber3': 'hsl(44 100% 91.7%)',
-  '--colors-amber4': 'hsl(43 100% 86.8%)',
-  '--colors-amber5': 'hsl(42 100% 81.8%)',
-  '--colors-amber6': 'hsl(38 99.7% 76.3%)',
-  '--colors-amber7': 'hsl(36 86.1% 67.1%)',
-  '--colors-amber8': 'hsl(35 85.2% 55.1%)',
-  '--colors-amber9': 'hsl(39 100% 57%)',
-  '--colors-amber10': 'hsl(35 100% 55.5%)',
-  '--colors-amber11': 'hsl(30 100% 34%)',
-  '--colors-amber12': 'hsl(20 80% 17%)',
-  '--colors-orange1': 'hsl(24 70% 99%)',
-  '--colors-orange2': 'hsl(24 83.3% 97.6%)',
-  '--colors-orange3': 'hsl(24 100% 95.3%)',
-  '--colors-orange4': 'hsl(25 100% 92.2%)',
-  '--colors-orange5': 'hsl(25 100% 88.2%)',
-  '--colors-orange6': 'hsl(25 100% 82.8%)',
-  '--colors-orange7': 'hsl(24 100% 75.3%)',
-  '--colors-orange8': 'hsl(24 94.5% 64.3%)',
-  '--colors-orange9': 'hsl(24 94% 50%)',
-  '--colors-orange10': 'hsl(24 100% 46.5%)',
-  '--colors-orange11': 'hsl(24 100% 37%)',
-  '--colors-orange12': 'hsl(15 60% 17%)',
-  '--colors-brown1': 'hsl(30 40% 99.1%)',
-  '--colors-brown2': 'hsl(30 50% 97.6%)',
-  '--colors-brown3': 'hsl(30 52.5% 94.6%)',
-  '--colors-brown4': 'hsl(30 53% 91.2%)',
-  '--colors-brown5': 'hsl(29 52.9% 86.8%)',
-  '--colors-brown6': 'hsl(29 52.5% 80.9%)',
-  '--colors-brown7': 'hsl(29 51.5% 72.8%)',
-  '--colors-brown8': 'hsl(28 50% 63.1%)',
-  '--colors-brown9': 'hsl(28 34% 51%)',
-  '--colors-brown10': 'hsl(27 31.8% 47.6%)',
-  '--colors-brown11': 'hsl(25 30% 41%)',
-  '--colors-brown12': 'hsl(20 30% 19%)',
-  '--colors-bronze1': 'hsl(15 30% 99.1%)',
-  '--colors-bronze2': 'hsl(17 63.6% 97.8%)',
-  '--colors-bronze3': 'hsl(17 42.1% 95.2%)',
-  '--colors-bronze4': 'hsl(17 35.2% 92.1%)',
-  '--colors-bronze5': 'hsl(17 31.5% 88.2%)',
-  '--colors-bronze6': 'hsl(17 29% 83%)',
-  '--colors-bronze7': 'hsl(17 26.9% 75.6%)',
-  '--colors-bronze8': 'hsl(17 25.1% 66.5%)',
-  '--colors-bronze9': 'hsl(17 20% 54%)',
-  '--colors-bronze10': 'hsl(17 18.1% 50.1%)',
-  '--colors-bronze11': 'hsl(15 20% 43.1%)',
-  '--colors-bronze12': 'hsl(12 22% 21.5%)',
-  '--colors-gold1': 'hsl(50 20% 99.1%)',
-  '--colors-gold2': 'hsl(47 52.9% 96.7%)',
-  '--colors-gold3': 'hsl(46 38.2% 93.7%)',
-  '--colors-gold4': 'hsl(44 32.7% 90.1%)',
-  '--colors-gold5': 'hsl(43 29.9% 85.7%)',
-  '--colors-gold6': 'hsl(41 28.3% 79.8%)',
-  '--colors-gold7': 'hsl(39 27.6% 71.9%)',
-  '--colors-gold8': 'hsl(36 27.2% 61.8%)',
-  '--colors-gold9': 'hsl(36 20% 49.5%)',
-  '--colors-gold10': 'hsl(36 19.8% 45.7%)',
-  '--colors-gold11': 'hsl(36 20% 39%)',
-  '--colors-gold12': 'hsl(36 16% 20%)',
-  '--colors-grayA1': 'hsl(0 0% 0% / 0.012)',
-  '--colors-grayA2': 'hsl(0 0% 0% / 0.027)',
-  '--colors-grayA3': 'hsl(0 0% 0% / 0.047)',
-  '--colors-grayA4': 'hsl(0 0% 0% / 0.071)',
-  '--colors-grayA5': 'hsl(0 0% 0% / 0.09)',
-  '--colors-grayA6': 'hsl(0 0% 0% / 0.114)',
-  '--colors-grayA7': 'hsl(0 0% 0% / 0.141)',
-  '--colors-grayA8': 'hsl(0 0% 0% / 0.22)',
-  '--colors-grayA9': 'hsl(0 0% 0% / 0.439)',
-  '--colors-grayA10': 'hsl(0 0% 0% / 0.478)',
-  '--colors-grayA11': 'hsl(0 0% 0% / 0.565)',
-  '--colors-grayA12': 'hsl(0 0% 0% / 0.91)',
-  '--colors-mauveA1': 'hsl(300 89.3% 18.3% / 0.012)',
-  '--colors-mauveA2': 'hsl(300 78.1% 9% / 0.028)',
-  '--colors-mauveA3': 'hsl(300 99.5% 7.7% / 0.051)',
-  '--colors-mauveA4': 'hsl(270 90.5% 6.1% / 0.071)',
-  '--colors-mauveA5': 'hsl(270 83% 5.2% / 0.091)',
-  '--colors-mauveA6': 'hsl(300 93.5% 3.7% / 0.114)',
-  '--colors-mauveA7': 'hsl(270 82.6% 3.3% / 0.142)',
-  '--colors-mauveA8': 'hsl(255 95.2% 3.7% / 0.22)',
-  '--colors-mauveA9': 'hsl(255 94.8% 3.7% / 0.444)',
-  '--colors-mauveA10': 'hsl(253 96.5% 3.8% / 0.483)',
-  '--colors-mauveA11': 'hsl(247 97.9% 3.2% / 0.569)',
-  '--colors-mauveA12': 'hsl(261 98.7% 3% / 0.918)',
-  '--colors-slateA1': 'hsl(210 92.6% 26.5% / 0.016)',
-  '--colors-slateA2': 'hsl(210 87.7% 16% / 0.028)',
-  '--colors-slateA3': 'hsl(210 98.8% 14.4% / 0.055)',
-  '--colors-slateA4': 'hsl(210 94.1% 11.1% / 0.075)',
-  '--colors-slateA5': 'hsl(216 91.1% 10.9% / 0.099)',
-  '--colors-slateA6': 'hsl(206 96.4% 11.3% / 0.126)',
-  '--colors-slateA7': 'hsl(210 99.1% 10.1% / 0.157)',
-  '--colors-slateA8': 'hsl(205 96.5% 10% / 0.244)',
-  '--colors-slateA9': 'hsl(206 98.8% 5.9% / 0.467)',
-  '--colors-slateA10': 'hsl(206 99.6% 5.4% / 0.506)',
-  '--colors-slateA11': 'hsl(206 97% 4.8% / 0.593)',
-  '--colors-slateA12': 'hsl(202 97% 2.4% / 0.934)',
-  '--colors-sageA1': 'hsl(150 92.6% 26.5% / 0.016)',
-  '--colors-sageA2': 'hsl(150 87.7% 16% / 0.028)',
-  '--colors-sageA3': 'hsl(160 98.4% 10.9% / 0.055)',
-  '--colors-sageA4': 'hsl(140 92.3% 8.5% / 0.075)',
-  '--colors-sageA5': 'hsl(160 86% 6.9% / 0.099)',
-  '--colors-sageA6': 'hsl(156 95.1% 8.2% / 0.126)',
-  '--colors-sageA7': 'hsl(156 98.6% 6.3% / 0.157)',
-  '--colors-sageA8': 'hsl(154 94.6% 6% / 0.24)',
-  '--colors-sageA9': 'hsl(154 98.7% 3% / 0.459)',
-  '--colors-sageA10': 'hsl(154 93.5% 2.9% / 0.499)',
-  '--colors-sageA11': 'hsl(154 95.2% 2.5% / 0.585)',
-  '--colors-sageA12': 'hsl(158 97% 2.4% / 0.934)',
-  '--colors-oliveA1': 'hsl(120 89.3% 18.3% / 0.012)',
-  '--colors-oliveA2': 'hsl(120 87.7% 16% / 0.028)',
-  '--colors-oliveA3': 'hsl(120 99.5% 7.7% / 0.051)',
-  '--colors-oliveA4': 'hsl(120 92.3% 8.5% / 0.075)',
-  '--colors-oliveA5': 'hsl(120 86% 6.9% / 0.099)',
-  '--colors-oliveA6': 'hsl(120 94.8% 6.8% / 0.122)',
-  '--colors-oliveA7': 'hsl(120 99.3% 5.2% / 0.153)',
-  '--colors-oliveA8': 'hsl(110 93.8% 5.2% / 0.24)',
-  '--colors-oliveA9': 'hsl(111 98.7% 3% / 0.459)',
-  '--colors-oliveA10': 'hsl(111 93.5% 2.9% / 0.499)',
-  '--colors-oliveA11': 'hsl(111 95.2% 2.5% / 0.585)',
-  '--colors-oliveA12': 'hsl(110 97.6% 2.6% / 0.93)',
-  '--colors-sandA1': 'hsl(60 89.3% 18.3% / 0.012)',
-  '--colors-sandA2': 'hsl(60 78.1% 9% / 0.028)',
-  '--colors-sandA3': 'hsl(60 99% 3.9% / 0.051)',
-  '--colors-sandA4': 'hsl(60 88.9% 5.9% / 0.075)',
-  '--colors-sandA5': 'hsl(60 86% 6.9% / 0.099)',
-  '--colors-sandA6': 'hsl(60 93.2% 5.2% / 0.122)',
-  '--colors-sandA7': 'hsl(60 98.3% 5.1% / 0.157)',
-  '--colors-sandA8': 'hsl(51 94.1% 6% / 0.244)',
-  '--colors-sandA9': 'hsl(60 99.8% 1.7% / 0.451)',
-  '--colors-sandA10': 'hsl(60 90.7% 1.8% / 0.491)',
-  '--colors-sandA11': 'hsl(45 93.7% 1.5% / 0.577)',
-  '--colors-sandA12': 'hsl(60 98% 0.7% / 0.906)',
-  '--colors-tomatoA1': 'hsl(0 100% 51% / 0.012)',
-  '--colors-tomatoA2': 'hsl(8 100% 51% / 0.032)',
-  '--colors-tomatoA3': 'hsl(7 100% 50.2% / 0.067)',
-  '--colors-tomatoA4': 'hsl(8 100% 50.1% / 0.114)',
-  '--colors-tomatoA5': 'hsl(7 99.5% 47.9% / 0.173)',
-  '--colors-tomatoA6': 'hsl(9 99.9% 46.2% / 0.255)',
-  '--colors-tomatoA7': 'hsl(10 99.8% 43.6% / 0.365)',
-  '--colors-tomatoA8': 'hsl(10 99.5% 41.8% / 0.499)',
-  '--colors-tomatoA9': 'hsl(10 99.9% 43.8% / 0.82)',
-  '--colors-tomatoA10': 'hsl(10 100% 41.8% / 0.859)',
-  '--colors-tomatoA11': 'hsl(10 99.9% 38.8% / 0.922)',
-  '--colors-tomatoA12': 'hsl(10 99% 7.4% / 0.934)',
-  '--colors-redA1': 'hsl(0 100% 51% / 0.012)',
-  '--colors-redA2': 'hsl(0 100% 51% / 0.032)',
-  '--colors-redA3': 'hsl(0 100% 50.2% / 0.063)',
-  '--colors-redA4': 'hsl(0 100% 50% / 0.102)',
-  '--colors-redA5': 'hsl(0 99.9% 47.5% / 0.153)',
-  '--colors-redA6': 'hsl(0 99.5% 44.9% / 0.224)',
-  '--colors-redA7': 'hsl(359 99.7% 42.7% / 0.318)',
-  '--colors-redA8': 'hsl(359 99.6% 41.1% / 0.436)',
-  '--colors-redA9': 'hsl(358 99.9% 42.9% / 0.718)',
-  '--colors-redA10': 'hsl(358 99.9% 41% / 0.761)',
-  '--colors-redA11': 'hsl(358 99.8% 38.3% / 0.832)',
-  '--colors-redA12': 'hsl(355 99.3% 7.9% / 0.926)',
-  '--colors-crimsonA1': 'hsl(340 100% 51% / 0.012)',
-  '--colors-crimsonA2': 'hsl(330 100% 51% / 0.032)',
-  '--colors-crimsonA3': 'hsl(332 99.1% 47.1% / 0.063)',
-  '--colors-crimsonA4': 'hsl(331 99.9% 44.3% / 0.102)',
-  '--colors-crimsonA5': 'hsl(333 99.9% 42.3% / 0.153)',
-  '--colors-crimsonA6': 'hsl(333 99.5% 40.5% / 0.224)',
-  '--colors-crimsonA7': 'hsl(335 99.7% 39.1% / 0.322)',
-  '--colors-crimsonA8': 'hsl(336 99.5% 38.5% / 0.44)',
-  '--colors-crimsonA9': 'hsl(336 99.9% 44.3% / 0.761)',
-  '--colors-crimsonA10': 'hsl(336 100% 42.5% / 0.808)',
-  '--colors-crimsonA11': 'hsl(336 99.8% 40.3% / 0.883)',
-  '--colors-crimsonA12': 'hsl(340 99% 10% / 0.95)',
-  '--colors-pinkA1': 'hsl(320 100% 51% / 0.012)',
-  '--colors-pinkA2': 'hsl(323 100% 51% / 0.032)',
-  '--colors-pinkA3': 'hsl(323 98.9% 47.3% / 0.067)',
-  '--colors-pinkA4': 'hsl(323 99.9% 44.3% / 0.102)',
-  '--colors-pinkA5': 'hsl(324 99.9% 42.3% / 0.153)',
-  '--colors-pinkA6': 'hsl(323 99.5% 39.6% / 0.224)',
-  '--colors-pinkA7': 'hsl(323 99.7% 38.5% / 0.322)',
-  '--colors-pinkA8': 'hsl(323 99.5% 37.7% / 0.444)',
-  '--colors-pinkA9': 'hsl(322 99.7% 39.3% / 0.75)',
-  '--colors-pinkA10': 'hsl(322 100% 39.1% / 0.808)',
-  '--colors-pinkA11': 'hsl(322 99.8% 39% / 0.887)',
-  '--colors-pinkA12': 'hsl(321 99.8% 10% / 0.961)',
-  '--colors-plumA1': 'hsl(280 100% 51% / 0.012)',
-  '--colors-plumA2': 'hsl(300 100% 51% / 0.028)',
-  '--colors-plumA3': 'hsl(300 99% 40.9% / 0.063)',
-  '--colors-plumA4': 'hsl(300 99.9% 38.5% / 0.102)',
-  '--colors-plumA5': 'hsl(298 98.2% 35.9% / 0.15)',
-  '--colors-plumA6': 'hsl(297 99.6% 33.7% / 0.216)',
-  '--colors-plumA7': 'hsl(295 99.7% 32.6% / 0.314)',
-  '--colors-plumA8': 'hsl(292 99.6% 32.4% / 0.432)',
-  '--colors-plumA9': 'hsl(292 99.9% 31% / 0.71)',
-  '--colors-plumA10': 'hsl(292 99.9% 30.8% / 0.765)',
-  '--colors-plumA11': 'hsl(292 99.8% 30.7% / 0.832)',
-  '--colors-plumA12': 'hsl(291 99.9% 9.7% / 0.953)',
-  '--colors-purpleA1': 'hsl(300 94.3% 34.6% / 0.012)',
-  '--colors-purpleA2': 'hsl(276 100% 51% / 0.02)',
-  '--colors-purpleA3': 'hsl(277 99.6% 46.5% / 0.055)',
-  '--colors-purpleA4': 'hsl(274 97.9% 44.3% / 0.095)',
-  '--colors-purpleA5': 'hsl(276 98.6% 42% / 0.142)',
-  '--colors-purpleA6': 'hsl(275 100% 39.2% / 0.2)',
-  '--colors-purpleA7': 'hsl(273 99.2% 38.2% / 0.295)',
-  '--colors-purpleA8': 'hsl(272 99.7% 37.6% / 0.424)',
-  '--colors-purpleA9': 'hsl(272 99.6% 34% / 0.695)',
-  '--colors-purpleA10': 'hsl(272 99.7% 32% / 0.73)',
-  '--colors-purpleA11': 'hsl(272 99.8% 29.7% / 0.773)',
-  '--colors-purpleA12': 'hsl(272 99.2% 11.3% / 0.946)',
-  '--colors-violetA1': 'hsl(270 94.3% 34.6% / 0.012)',
-  '--colors-violetA2': 'hsl(252 100% 51% / 0.02)',
-  '--colors-violetA3': 'hsl(254 100% 50% / 0.051)',
-  '--colors-violetA4': 'hsl(251 98.3% 48.2% / 0.087)',
-  '--colors-violetA5': 'hsl(252 99% 45.7% / 0.13)',
-  '--colors-violetA6': 'hsl(251 99.1% 44% / 0.189)',
-  '--colors-violetA7': 'hsl(252 99.5% 41.7% / 0.279)',
-  '--colors-violetA8': 'hsl(252 100% 40.7% / 0.4)',
-  '--colors-violetA9': 'hsl(252 99.9% 35.8% / 0.663)',
-  '--colors-violetA10': 'hsl(251 99.6% 32.5% / 0.691)',
-  '--colors-violetA11': 'hsl(250 99.8% 28.4% / 0.726)',
-  '--colors-violetA12': 'hsl(254 99.5% 11.9% / 0.926)',
-  '--colors-indigoA1': 'hsl(240 92.6% 26.5% / 0.008)',
-  '--colors-indigoA2': 'hsl(223 100% 51% / 0.028)',
-  '--colors-indigoA3': 'hsl(224 100% 50.1% / 0.059)',
-  '--colors-indigoA4': 'hsl(223 98% 48.5% / 0.099)',
-  '--colors-indigoA5': 'hsl(225 98.6% 46.4% / 0.15)',
-  '--colors-indigoA6': 'hsl(224 99.5% 44.9% / 0.224)',
-  '--colors-indigoA7': 'hsl(225 99.7% 43.9% / 0.318)',
-  '--colors-indigoA8': 'hsl(226 99.5% 43.1% / 0.448)',
-  '--colors-indigoA9': 'hsl(226 100% 41.2% / 0.757)',
-  '--colors-indigoA10': 'hsl(226 99.8% 37.1% / 0.773)',
-  '--colors-indigoA11': 'hsl(226 99.6% 31.1% / 0.797)',
-  '--colors-indigoA12': 'hsl(226 99.3% 11.4% / 0.938)',
-  '--colors-blueA1': 'hsl(210 100% 51% / 0.016)',
-  '--colors-blueA2': 'hsl(210 100% 51% / 0.04)',
-  '--colors-blueA3': 'hsl(210 100% 50.3% / 0.071)',
-  '--colors-blueA4': 'hsl(210 100% 50.1% / 0.118)',
-  '--colors-blueA5': 'hsl(208 99.1% 47.1% / 0.189)',
-  '--colors-blueA6': 'hsl(209 99.5% 45.3% / 0.283)',
-  '--colors-blueA7': 'hsl(208 99.9% 43.8% / 0.412)',
-  '--colors-blueA8': 'hsl(206 99.8% 45.1% / 0.632)',
-  '--colors-blueA9': 'hsl(206 100% 50% / 0.98)',
-  '--colors-blueA10': 'hsl(208 100% 47.2% / 0.98)',
-  '--colors-blueA11': 'hsl(212 100% 43% / 0.98)',
-  '--colors-blueA12': 'hsl(213 100% 14.4% / 0.98)',
-  '--colors-skyA1': 'hsl(190 100% 51% / 0.024)',
-  '--colors-skyA2': 'hsl(193 100% 50.1% / 0.055)',
-  '--colors-skyA3': 'hsl(193 100% 50.1% / 0.106)',
-  '--colors-skyA4': 'hsl(194 99.6% 47.7% / 0.165)',
-  '--colors-skyA5': 'hsl(194 99.2% 45.4% / 0.244)',
-  '--colors-skyA6': 'hsl(194 99.9% 42.3% / 0.357)',
-  '--colors-skyA7': 'hsl(194 99.8% 42.2% / 0.526)',
-  '--colors-skyA8': 'hsl(193 99.9% 43.8% / 0.82)',
-  '--colors-skyA9': 'hsl(193 99.7% 49.4% / 0.593)',
-  '--colors-skyA10': 'hsl(193 99.8% 46.6% / 0.628)',
-  '--colors-skyA11': 'hsl(196 100% 31.2% / 0.98)',
-  '--colors-skyA12': 'hsl(196 100% 12.2% / 0.98)',
-  '--colors-mintA1': 'hsl(168 95.4% 42.8% / 0.024)',
-  '--colors-mintA2': 'hsl(164 99.1% 47.1% / 0.063)',
-  '--colors-mintA3': 'hsl(164 99.3% 43.5% / 0.118)',
-  '--colors-mintA4': 'hsl(164 99.3% 41.3% / 0.177)',
-  '--colors-mintA5': 'hsl(165 99% 37.5% / 0.248)',
-  '--colors-mintA6': 'hsl(165 100% 35% / 0.353)',
-  '--colors-mintA7': 'hsl(166 99.9% 33.5% / 0.51)',
-  '--colors-mintA8': 'hsl(168 99.6% 34.6% / 0.75)',
-  '--colors-mintA9': 'hsl(167 99.9% 39.5% / 0.561)',
-  '--colors-mintA10': 'hsl(167 99.7% 37.4% / 0.589)',
-  '--colors-mintA11': 'hsl(172 99.8% 22.4% / 0.922)',
-  '--colors-mintA12': 'hsl(172 99.7% 8.8% / 0.965)',
-  '--colors-cyanA1': 'hsl(195 95.2% 41.2% / 0.02)',
-  '--colors-cyanA2': 'hsl(185 99.9% 42.3% / 0.051)',
-  '--colors-cyanA3': 'hsl(186 97.8% 42.2% / 0.095)',
-  '--colors-cyanA4': 'hsl(186 99.9% 38.5% / 0.153)',
-  '--colors-cyanA5': 'hsl(187 99.3% 36.6% / 0.232)',
-  '--colors-cyanA6': 'hsl(188 99.4% 35.4% / 0.334)',
-  '--colors-cyanA7': 'hsl(189 99.6% 35% / 0.483)',
-  '--colors-cyanA8': 'hsl(189 99.9% 37.6% / 0.761)',
-  '--colors-cyanA9': 'hsl(190 100% 37.8% / 0.98)',
-  '--colors-cyanA10': 'hsl(191 99.9% 34.6% / 0.969)',
-  '--colors-cyanA11': 'hsl(192 100% 27.6% / 0.953)',
-  '--colors-cyanA12': 'hsl(192 100% 11% / 0.98)',
-  '--colors-tealA1': 'hsl(165 95.2% 41.2% / 0.02)',
-  '--colors-tealA2': 'hsl(169 99.5% 39.4% / 0.055)',
-  '--colors-tealA3': 'hsl(167 97.6% 38.1% / 0.095)',
-  '--colors-tealA4': 'hsl(168 98.1% 34.6% / 0.15)',
-  '--colors-tealA5': 'hsl(170 99.4% 32.3% / 0.22)',
-  '--colors-tealA6': 'hsl(170 99.7% 30.1% / 0.314)',
-  '--colors-tealA7': 'hsl(170 99.3% 28.7% / 0.448)',
-  '--colors-tealA8': 'hsl(172 99.8% 29.7% / 0.675)',
-  '--colors-tealA9': 'hsl(173 99.8% 31.1% / 0.93)',
-  '--colors-tealA10': 'hsl(173 99.7% 28.7% / 0.946)',
-  '--colors-tealA11': 'hsl(174 99.8% 23.3% / 0.977)',
-  '--colors-tealA12': 'hsl(171 98.8% 6.8% / 0.938)',
-  '--colors-greenA1': 'hsl(140 94.9% 38.7% / 0.016)',
-  '--colors-greenA2': 'hsl(138 99.9% 38.5% / 0.051)',
-  '--colors-greenA3': 'hsl(139 97.7% 36.9% / 0.087)',
-  '--colors-greenA4': 'hsl(139 98.5% 32.7% / 0.134)',
-  '--colors-greenA5': 'hsl(141 100% 30.4% / 0.2)',
-  '--colors-greenA6': 'hsl(142 99% 28.9% / 0.295)',
-  '--colors-greenA7': 'hsl(146 99.5% 27.6% / 0.428)',
-  '--colors-greenA8': 'hsl(151 99.5% 28.8% / 0.644)',
-  '--colors-greenA9': 'hsl(151 99.9% 28% / 0.812)',
-  '--colors-greenA10': 'hsl(152 99.6% 25.8% / 0.84)',
-  '--colors-greenA11': 'hsl(153 99.9% 21% / 0.906)',
-  '--colors-greenA12': 'hsl(155 99.4% 6.2% / 0.918)',
-  '--colors-grassA1': 'hsl(120 94.9% 38.7% / 0.016)',
-  '--colors-grassA2': 'hsl(120 94.9% 38.7% / 0.048)',
-  '--colors-grassA3': 'hsl(120 98% 35.5% / 0.079)',
-  '--colors-grassA4': 'hsl(120 98.7% 31.5% / 0.126)',
-  '--colors-grassA5': 'hsl(122 98.5% 29.9% / 0.193)',
-  '--colors-grassA6': 'hsl(125 99.2% 27.9% / 0.283)',
-  '--colors-grassA7': 'hsl(125 99.9% 27% / 0.408)',
-  '--colors-grassA8': 'hsl(131 100% 27.6% / 0.604)',
-  '--colors-grassA9': 'hsl(131 99.7% 26.3% / 0.726)',
-  '--colors-grassA10': 'hsl(132 99.9% 24% / 0.761)',
-  '--colors-grassA11': 'hsl(133 99.5% 19.5% / 0.84)',
-  '--colors-grassA12': 'hsl(128 98% 4.9% / 0.895)',
-  '--colors-limeA1': 'hsl(80 93.8% 31.4% / 0.02)',
-  '--colors-limeA2': 'hsl(85 99.3% 40.2% / 0.059)',
-  '--colors-limeA3': 'hsl(84 98.7% 43.2% / 0.138)',
-  '--colors-limeA4': 'hsl(84 99.6% 43% / 0.22)',
-  '--colors-limeA5': 'hsl(85 99.8% 41.8% / 0.31)',
-  '--colors-limeA6': 'hsl(82 99.8% 39.3% / 0.42)',
-  '--colors-limeA7': 'hsl(79 99.7% 34.6% / 0.585)',
-  '--colors-limeA8': 'hsl(76 99.8% 33.7% / 0.828)',
-  '--colors-limeA9': 'hsl(81 99.8% 40.2% / 0.836)',
-  '--colors-limeA10': 'hsl(80 100% 37.6% / 0.851)',
-  '--colors-limeA11': 'hsl(75 99.5% 22% / 0.95)',
-  '--colors-limeA12': 'hsl(78 99.6% 8.4% / 0.965)',
-  '--colors-yellowA1': 'hsl(60 94.3% 34.6% / 0.024)',
-  '--colors-yellowA2': 'hsl(52 100% 50.4% / 0.091)',
-  '--colors-yellowA3': 'hsl(55 100% 50.2% / 0.181)',
-  '--colors-yellowA4': 'hsl(54 100% 50.1% / 0.267)',
-  '--colors-yellowA5': 'hsl(52 99.9% 49.5% / 0.357)',
-  '--colors-yellowA6': 'hsl(50 100% 47.4% / 0.451)',
-  '--colors-yellowA7': 'hsl(47 99.8% 44.6% / 0.577)',
-  '--colors-yellowA8': 'hsl(48 100% 46% / 0.98)',
-  '--colors-yellowA9': 'hsl(53 100% 48% / 0.961)',
-  '--colors-yellowA10': 'hsl(50 100% 48.4% / 0.98)',
-  '--colors-yellowA11': 'hsl(42 100% 28.6% / 0.98)',
-  '--colors-yellowA12': 'hsl(41 98.9% 8% / 0.942)',
-  '--colors-amberA1': 'hsl(40 94.9% 38.7% / 0.016)',
-  '--colors-amberA2': 'hsl(40 100% 50.3% / 0.071)',
-  '--colors-amberA3': 'hsl(44 100% 50.1% / 0.165)',
-  '--colors-amberA4': 'hsl(43 100% 50% / 0.263)',
-  '--colors-amberA5': 'hsl(42 100% 50% / 0.365)',
-  '--colors-amberA6': 'hsl(38 100% 50.1% / 0.475)',
-  '--colors-amberA7': 'hsl(36 99.9% 46.2% / 0.612)',
-  '--colors-amberA8': 'hsl(35 99.8% 46% / 0.832)',
-  '--colors-amberA9': 'hsl(39 100% 50% / 0.859)',
-  '--colors-amberA10': 'hsl(35 100% 50% / 0.891)',
-  '--colors-amberA11': 'hsl(29 100% 33.6% / 0.98)',
-  '--colors-amberA12': 'hsl(20 99.8% 14.1% / 0.965)',
-  '--colors-orangeA1': 'hsl(20 94.9% 38.7% / 0.016)',
-  '--colors-orangeA2': 'hsl(24 95.8% 46.5% / 0.044)',
-  '--colors-orangeA3': 'hsl(25 100% 50.5% / 0.095)',
-  '--colors-orangeA4': 'hsl(26 100% 50% / 0.157)',
-  '--colors-orangeA5': 'hsl(25 100% 50.1% / 0.236)',
-  '--colors-orangeA6': 'hsl(25 100% 50.1% / 0.346)',
-  '--colors-orangeA7': 'hsl(24 100% 50.1% / 0.495)',
-  '--colors-orangeA8': 'hsl(24 99.7% 48.7% / 0.695)',
-  '--colors-orangeA9': 'hsl(24 99.9% 48.4% / 0.969)',
-  '--colors-orangeA10': 'hsl(23 100% 46.4% / 0.98)',
-  '--colors-orangeA11': 'hsl(23 100% 36.8% / 0.98)',
-  '--colors-orangeA12': 'hsl(15 99.4% 11% / 0.934)',
-  '--colors-brownA1': 'hsl(30 94.3% 34.6% / 0.012)',
-  '--colors-brownA2': 'hsl(30 94.3% 34.6% / 0.036)',
-  '--colors-brownA3': 'hsl(30 97.7% 33.9% / 0.083)',
-  '--colors-brownA4': 'hsl(31 98.5% 34.2% / 0.134)',
-  '--colors-brownA5': 'hsl(29 100% 34.3% / 0.2)',
-  '--colors-brownA6': 'hsl(28 99.2% 34.6% / 0.291)',
-  '--colors-brownA7': 'hsl(29 99.8% 33.8% / 0.412)',
-  '--colors-brownA8': 'hsl(28 100% 33.3% / 0.553)',
-  '--colors-brownA9': 'hsl(28 99.9% 25.5% / 0.655)',
-  '--colors-brownA10': 'hsl(27 99.7% 22.4% / 0.675)',
-  '--colors-brownA11': 'hsl(25 99.8% 17.3% / 0.714)',
-  '--colors-brownA12': 'hsl(21 99.4% 6.6% / 0.867)',
-  '--colors-bronzeA1': 'hsl(0 89.3% 18.3% / 0.012)',
-  '--colors-bronzeA2': 'hsl(17 95.1% 40.1% / 0.036)',
-  '--colors-bronzeA3': 'hsl(18 98.3% 29.8% / 0.067)',
-  '--colors-bronzeA4': 'hsl(17 99.6% 26% / 0.106)',
-  '--colors-bronzeA5': 'hsl(19 99.6% 23.8% / 0.157)',
-  '--colors-bronzeA6': 'hsl(17 99.2% 22.5% / 0.22)',
-  '--colors-bronzeA7': 'hsl(18 99.7% 21.6% / 0.31)',
-  '--colors-bronzeA8': 'hsl(17 99.5% 20.2% / 0.42)',
-  '--colors-bronzeA9': 'hsl(18 99.9% 16.7% / 0.553)',
-  '--colors-bronzeA10': 'hsl(17 99.2% 15.4% / 0.589)',
-  '--colors-bronzeA11': 'hsl(15 99.9% 13.2% / 0.655)',
-  '--colors-bronzeA12': 'hsl(12 98.7% 5.7% / 0.832)',
-  '--colors-goldA1': 'hsl(60 89.3% 18.3% / 0.012)',
-  '--colors-goldA2': 'hsl(47 99.9% 34.6% / 0.051)',
-  '--colors-goldA3': 'hsl(45 97% 27.9% / 0.087)',
-  '--colors-goldA4': 'hsl(46 98% 25.4% / 0.134)',
-  '--colors-goldA5': 'hsl(43 98.4% 22.6% / 0.185)',
-  '--colors-goldA6': 'hsl(41 99.7% 22% / 0.259)',
-  '--colors-goldA7': 'hsl(38 99.8% 21.5% / 0.357)',
-  '--colors-goldA8': 'hsl(36 99.3% 21.5% / 0.487)',
-  '--colors-goldA9': 'hsl(36 99.9% 16.2% / 0.604)',
-  '--colors-goldA10': 'hsl(36 99.2% 14.6% / 0.636)',
-  '--colors-goldA11': 'hsl(35 99.1% 11.2% / 0.687)',
-  '--colors-goldA12': 'hsl(38 98% 3.8% / 0.832)',
-}
-
-export const radix_dark = {
-  '--colors-gray1': 'hsl(0 0% 8.5%)',
-  '--colors-gray2': 'hsl(0 0% 11%)',
-  '--colors-gray3': 'hsl(0 0% 13.6%)',
-  '--colors-gray4': 'hsl(0 0% 15.8%)',
-  '--colors-gray5': 'hsl(0 0% 17.9%)',
-  '--colors-gray6': 'hsl(0 0% 20.5%)',
-  '--colors-gray7': 'hsl(0 0% 24.3%)',
-  '--colors-gray8': 'hsl(0 0% 31.2%)',
-  '--colors-gray9': 'hsl(0 0% 43.9%)',
-  '--colors-gray10': 'hsl(0 0% 49.4%)',
-  '--colors-gray11': 'hsl(0 0% 62.8%)',
-  '--colors-gray12': 'hsl(0 0% 93%)',
-  '--colors-mauve1': 'hsl(246 6% 9%)',
-  '--colors-mauve2': 'hsl(240 5.1% 11.6%)',
-  '--colors-mauve3': 'hsl(241 5% 14.3%)',
-  '--colors-mauve4': 'hsl(242 4.9% 16.5%)',
-  '--colors-mauve5': 'hsl(243 4.9% 18.8%)',
-  '--colors-mauve6': 'hsl(244 4.9% 21.5%)',
-  '--colors-mauve7': 'hsl(245 4.9% 25.4%)',
-  '--colors-mauve8': 'hsl(247 4.8% 32.5%)',
-  '--colors-mauve9': 'hsl(252 4% 45.2%)',
-  '--colors-mauve10': 'hsl(247 3.4% 50.7%)',
-  '--colors-mauve11': 'hsl(253 4% 63.7%)',
-  '--colors-mauve12': 'hsl(256 6% 93.2%)',
-  '--colors-slate1': 'hsl(200 7% 8.8%)',
-  '--colors-slate2': 'hsl(195 7.1% 11%)',
-  '--colors-slate3': 'hsl(197 6.8% 13.6%)',
-  '--colors-slate4': 'hsl(198 6.6% 15.8%)',
-  '--colors-slate5': 'hsl(199 6.4% 17.9%)',
-  '--colors-slate6': 'hsl(201 6.2% 20.5%)',
-  '--colors-slate7': 'hsl(203 6% 24.3%)',
-  '--colors-slate8': 'hsl(207 5.6% 31.6%)',
-  '--colors-slate9': 'hsl(206 6% 43.9%)',
-  '--colors-slate10': 'hsl(206 5.2% 49.5%)',
-  '--colors-slate11': 'hsl(206 6% 63%)',
-  '--colors-slate12': 'hsl(210 6% 93%)',
-  '--colors-sage1': 'hsl(155 7% 8.4%)',
-  '--colors-sage2': 'hsl(150 7.4% 10.6%)',
-  '--colors-sage3': 'hsl(150 6.7% 13.1%)',
-  '--colors-sage4': 'hsl(150 6.4% 15.3%)',
-  '--colors-sage5': 'hsl(150 6.1% 17.4%)',
-  '--colors-sage6': 'hsl(150 5.8% 19.9%)',
-  '--colors-sage7': 'hsl(150 5.5% 23.6%)',
-  '--colors-sage8': 'hsl(150 5.1% 30.6%)',
-  '--colors-sage9': 'hsl(155 6% 42.5%)',
-  '--colors-sage10': 'hsl(153 4.8% 48.2%)',
-  '--colors-sage11': 'hsl(155 5% 61.8%)',
-  '--colors-sage12': 'hsl(155 6% 93%)',
-  '--colors-olive1': 'hsl(110 5% 8.6%)',
-  '--colors-olive2': 'hsl(105 7.4% 10.6%)',
-  '--colors-olive3': 'hsl(106 6.4% 13.1%)',
-  '--colors-olive4': 'hsl(106 5.8% 15.3%)',
-  '--colors-olive5': 'hsl(107 5.3% 17.4%)',
-  '--colors-olive6': 'hsl(107 4.9% 19.9%)',
-  '--colors-olive7': 'hsl(108 4.4% 23.6%)',
-  '--colors-olive8': 'hsl(110 3.8% 30.6%)',
-  '--colors-olive9': 'hsl(110 6% 42.5%)',
-  '--colors-olive10': 'hsl(111 4.8% 48.2%)',
-  '--colors-olive11': 'hsl(110 5% 61.8%)',
-  '--colors-olive12': 'hsl(110 6% 93%)',
-  '--colors-sand1': 'hsl(61 2% 8.3%)',
-  '--colors-sand2': 'hsl(60 3.7% 10.6%)',
-  '--colors-sand3': 'hsl(58 3.7% 13.1%)',
-  '--colors-sand4': 'hsl(57 3.6% 15.3%)',
-  '--colors-sand5': 'hsl(56 3.7% 17.4%)',
-  '--colors-sand6': 'hsl(55 3.7% 19.9%)',
-  '--colors-sand7': 'hsl(53 3.7% 23.6%)',
-  '--colors-sand8': 'hsl(50 3.8% 30.6%)',
-  '--colors-sand9': 'hsl(50 4% 42.7%)',
-  '--colors-sand10': 'hsl(52 3.1% 48.3%)',
-  '--colors-sand11': 'hsl(50 4% 61.8%)',
-  '--colors-sand12': 'hsl(56 4% 92.8%)',
-  '--colors-tomato1': 'hsl(10 23% 9.4%)',
-  '--colors-tomato2': 'hsl(9 44.8% 11.4%)',
-  '--colors-tomato3': 'hsl(8 52% 15.3%)',
-  '--colors-tomato4': 'hsl(7 56.3% 18%)',
-  '--colors-tomato5': 'hsl(7 60.1% 20.6%)',
-  '--colors-tomato6': 'hsl(8 64.8% 24%)',
-  '--colors-tomato7': 'hsl(8 71.2% 29.1%)',
-  '--colors-tomato8': 'hsl(10 80.2% 35.7%)',
-  '--colors-tomato9': 'hsl(10 78% 54%)',
-  '--colors-tomato10': 'hsl(10 81.7% 59%)',
-  '--colors-tomato11': 'hsl(10 85% 62.8%)',
-  '--colors-tomato12': 'hsl(10 89% 96%)',
-  '--colors-red1': 'hsl(353 23% 9.8%)',
-  '--colors-red2': 'hsl(357 34.4% 12%)',
-  '--colors-red3': 'hsl(356 43.4% 16.4%)',
-  '--colors-red4': 'hsl(356 47.6% 19.2%)',
-  '--colors-red5': 'hsl(356 51.1% 21.9%)',
-  '--colors-red6': 'hsl(356 55.2% 25.9%)',
-  '--colors-red7': 'hsl(357 60.2% 31.8%)',
-  '--colors-red8': 'hsl(358 65% 40.4%)',
-  '--colors-red9': 'hsl(358 75% 59%)',
-  '--colors-red10': 'hsl(358 85.3% 64%)',
-  '--colors-red11': 'hsl(358 100% 69.5%)',
-  '--colors-red12': 'hsl(351 89% 96%)',
-  '--colors-crimson1': 'hsl(335 20% 9.6%)',
-  '--colors-crimson2': 'hsl(335 32.2% 11.6%)',
-  '--colors-crimson3': 'hsl(335 42.5% 16.5%)',
-  '--colors-crimson4': 'hsl(335 47.2% 19.3%)',
-  '--colors-crimson5': 'hsl(335 50.9% 21.8%)',
-  '--colors-crimson6': 'hsl(335 55.7% 25.3%)',
-  '--colors-crimson7': 'hsl(336 62.9% 30.8%)',
-  '--colors-crimson8': 'hsl(336 74.9% 39%)',
-  '--colors-crimson9': 'hsl(336 80% 57.8%)',
-  '--colors-crimson10': 'hsl(339 84.1% 62.6%)',
-  '--colors-crimson11': 'hsl(341 90% 67.3%)',
-  '--colors-crimson12': 'hsl(332 87% 96%)',
-  '--colors-pink1': 'hsl(318 25% 9.6%)',
-  '--colors-pink2': 'hsl(319 32.2% 11.6%)',
-  '--colors-pink3': 'hsl(319 41% 16%)',
-  '--colors-pink4': 'hsl(320 45.4% 18.7%)',
-  '--colors-pink5': 'hsl(320 49% 21.1%)',
-  '--colors-pink6': 'hsl(321 53.6% 24.4%)',
-  '--colors-pink7': 'hsl(321 61.1% 29.7%)',
-  '--colors-pink8': 'hsl(322 74.9% 37.5%)',
-  '--colors-pink9': 'hsl(322 65% 54.5%)',
-  '--colors-pink10': 'hsl(323 72.8% 59.2%)',
-  '--colors-pink11': 'hsl(325 90% 66.4%)',
-  '--colors-pink12': 'hsl(322 90% 95.8%)',
-  '--colors-plum1': 'hsl(301 20% 9.4%)',
-  '--colors-plum2': 'hsl(300 29.8% 11.2%)',
-  '--colors-plum3': 'hsl(298 34.4% 15.3%)',
-  '--colors-plum4': 'hsl(297 36.8% 18.3%)',
-  '--colors-plum5': 'hsl(296 38.5% 21.1%)',
-  '--colors-plum6': 'hsl(295 40.4% 24.7%)',
-  '--colors-plum7': 'hsl(294 42.7% 30.6%)',
-  '--colors-plum8': 'hsl(292 45.1% 40%)',
-  '--colors-plum9': 'hsl(292 45% 51%)',
-  '--colors-plum10': 'hsl(295 50% 55.4%)',
-  '--colors-plum11': 'hsl(300 60% 62%)',
-  '--colors-plum12': 'hsl(296 74% 95.7%)',
-  '--colors-purple1': 'hsl(284 20% 9.6%)',
-  '--colors-purple2': 'hsl(283 30% 11.8%)',
-  '--colors-purple3': 'hsl(281 37.5% 16.5%)',
-  '--colors-purple4': 'hsl(280 41.2% 20%)',
-  '--colors-purple5': 'hsl(279 43.8% 23.3%)',
-  '--colors-purple6': 'hsl(277 46.4% 27.5%)',
-  '--colors-purple7': 'hsl(275 49.3% 34.6%)',
-  '--colors-purple8': 'hsl(272 52.1% 45.9%)',
-  '--colors-purple9': 'hsl(272 51% 54%)',
-  '--colors-purple10': 'hsl(273 57.3% 59.1%)',
-  '--colors-purple11': 'hsl(275 80% 71%)',
-  '--colors-purple12': 'hsl(279 75% 95.7%)',
-  '--colors-violet1': 'hsl(250 20% 10.2%)',
-  '--colors-violet2': 'hsl(255 30.3% 12.9%)',
-  '--colors-violet3': 'hsl(253 37% 18.4%)',
-  '--colors-violet4': 'hsl(252 40.1% 22.5%)',
-  '--colors-violet5': 'hsl(252 42.2% 26.2%)',
-  '--colors-violet6': 'hsl(251 44.3% 31.1%)',
-  '--colors-violet7': 'hsl(250 46.8% 38.9%)',
-  '--colors-violet8': 'hsl(250 51.8% 51.2%)',
-  '--colors-violet9': 'hsl(252 56% 57.5%)',
-  '--colors-violet10': 'hsl(251 63.2% 63.2%)',
-  '--colors-violet11': 'hsl(250 95% 76.8%)',
-  '--colors-violet12': 'hsl(252 87% 96.4%)',
-  '--colors-indigo1': 'hsl(229 24% 10%)',
-  '--colors-indigo2': 'hsl(230 36.4% 12.9%)',
-  '--colors-indigo3': 'hsl(228 43.3% 17.5%)',
-  '--colors-indigo4': 'hsl(227 47.2% 21%)',
-  '--colors-indigo5': 'hsl(227 50% 24.1%)',
-  '--colors-indigo6': 'hsl(226 52.9% 28.2%)',
-  '--colors-indigo7': 'hsl(226 56% 34.5%)',
-  '--colors-indigo8': 'hsl(226 58.2% 44.1%)',
-  '--colors-indigo9': 'hsl(226 70% 55.5%)',
-  '--colors-indigo10': 'hsl(227 75.2% 61.6%)',
-  '--colors-indigo11': 'hsl(228 100% 75.9%)',
-  '--colors-indigo12': 'hsl(226 83% 96.3%)',
-  '--colors-blue1': 'hsl(212 35% 9.2%)',
-  '--colors-blue2': 'hsl(216 50% 11.8%)',
-  '--colors-blue3': 'hsl(214 59.4% 15.3%)',
-  '--colors-blue4': 'hsl(214 65.8% 17.9%)',
-  '--colors-blue5': 'hsl(213 71.2% 20.2%)',
-  '--colors-blue6': 'hsl(212 77.4% 23.1%)',
-  '--colors-blue7': 'hsl(211 85.1% 27.4%)',
-  '--colors-blue8': 'hsl(211 89.7% 34.1%)',
-  '--colors-blue9': 'hsl(206 100% 50%)',
-  '--colors-blue10': 'hsl(209 100% 60.6%)',
-  '--colors-blue11': 'hsl(210 100% 66.1%)',
-  '--colors-blue12': 'hsl(206 98% 95.8%)',
-  '--colors-sky1': 'hsl(205 45% 8.6%)',
-  '--colors-sky2': 'hsl(202 71.4% 9.6%)',
-  '--colors-sky3': 'hsl(201 74.6% 12.2%)',
-  '--colors-sky4': 'hsl(201 77.4% 14.4%)',
-  '--colors-sky5': 'hsl(200 80.3% 16.5%)',
-  '--colors-sky6': 'hsl(200 84.1% 18.9%)',
-  '--colors-sky7': 'hsl(199 90.2% 22.1%)',
-  '--colors-sky8': 'hsl(198 100% 26.1%)',
-  '--colors-sky9': 'hsl(193 98% 70%)',
-  '--colors-sky10': 'hsl(192 100% 77%)',
-  '--colors-sky11': 'hsl(192 85% 55.8%)',
-  '--colors-sky12': 'hsl(198 98% 95.8%)',
-  '--colors-mint1': 'hsl(173 50% 6.6%)',
-  '--colors-mint2': 'hsl(176 73% 7.3%)',
-  '--colors-mint3': 'hsl(175 79.3% 8.9%)',
-  '--colors-mint4': 'hsl(174 84.8% 10.3%)',
-  '--colors-mint5': 'hsl(174 90.2% 11.9%)',
-  '--colors-mint6': 'hsl(173 96% 13.8%)',
-  '--colors-mint7': 'hsl(172 100% 16.8%)',
-  '--colors-mint8': 'hsl(170 100% 21.4%)',
-  '--colors-mint9': 'hsl(167 65% 66%)',
-  '--colors-mint10': 'hsl(163 80% 77%)',
-  '--colors-mint11': 'hsl(167 70% 48%)',
-  '--colors-mint12': 'hsl(165 80% 94.8%)',
-  '--colors-cyan1': 'hsl(192 60% 7.2%)',
-  '--colors-cyan2': 'hsl(192 71.4% 8.2%)',
-  '--colors-cyan3': 'hsl(192 75.9% 10.8%)',
-  '--colors-cyan4': 'hsl(192 79.3% 12.8%)',
-  '--colors-cyan5': 'hsl(192 82.5% 14.6%)',
-  '--colors-cyan6': 'hsl(192 86.6% 16.9%)',
-  '--colors-cyan7': 'hsl(192 92.6% 20.1%)',
-  '--colors-cyan8': 'hsl(192 100% 24.5%)',
-  '--colors-cyan9': 'hsl(190 95% 39%)',
-  '--colors-cyan10': 'hsl(188 100% 40%)',
-  '--colors-cyan11': 'hsl(186 100% 42.2%)',
-  '--colors-cyan12': 'hsl(185 73% 93.2%)',
-  '--colors-teal1': 'hsl(168 48% 6.5%)',
-  '--colors-teal2': 'hsl(169 77.8% 7.1%)',
-  '--colors-teal3': 'hsl(170 76.1% 9.2%)',
-  '--colors-teal4': 'hsl(171 75.8% 11%)',
-  '--colors-teal5': 'hsl(171 75.7% 12.8%)',
-  '--colors-teal6': 'hsl(172 75.8% 15.1%)',
-  '--colors-teal7': 'hsl(172 76.7% 18.6%)',
-  '--colors-teal8': 'hsl(173 80.2% 23.7%)',
-  '--colors-teal9': 'hsl(173 80% 36%)',
-  '--colors-teal10': 'hsl(174 83.9% 38.2%)',
-  '--colors-teal11': 'hsl(174 90% 40.7%)',
-  '--colors-teal12': 'hsl(166 73% 93.1%)',
-  '--colors-green1': 'hsl(146 30% 7.4%)',
-  '--colors-green2': 'hsl(155 44.2% 8.4%)',
-  '--colors-green3': 'hsl(155 46.7% 10.9%)',
-  '--colors-green4': 'hsl(154 48.4% 12.9%)',
-  '--colors-green5': 'hsl(154 49.7% 14.9%)',
-  '--colors-green6': 'hsl(154 50.9% 17.6%)',
-  '--colors-green7': 'hsl(153 51.8% 21.8%)',
-  '--colors-green8': 'hsl(151 51.7% 28.4%)',
-  '--colors-green9': 'hsl(151 55% 41.5%)',
-  '--colors-green10': 'hsl(151 49.3% 46.5%)',
-  '--colors-green11': 'hsl(151 50% 53.2%)',
-  '--colors-green12': 'hsl(137 72% 94%)',
-  '--colors-grass1': 'hsl(146 30% 7.4%)',
-  '--colors-grass2': 'hsl(136 33.3% 8.8%)',
-  '--colors-grass3': 'hsl(137 36% 11.4%)',
-  '--colors-grass4': 'hsl(137 37.6% 13.7%)',
-  '--colors-grass5': 'hsl(136 38.7% 16%)',
-  '--colors-grass6': 'hsl(135 39.6% 19.1%)',
-  '--colors-grass7': 'hsl(134 40.3% 23.8%)',
-  '--colors-grass8': 'hsl(131 40.1% 30.8%)',
-  '--colors-grass9': 'hsl(131 41% 46.5%)',
-  '--colors-grass10': 'hsl(131 39% 52.1%)',
-  '--colors-grass11': 'hsl(131 43% 57.2%)',
-  '--colors-grass12': 'hsl(137 72% 94%)',
-  '--colors-lime1': 'hsl(75 55% 6%)',
-  '--colors-lime2': 'hsl(74 56.8% 7.3%)',
-  '--colors-lime3': 'hsl(78 50.2% 9.9%)',
-  '--colors-lime4': 'hsl(79 50.3% 12.1%)',
-  '--colors-lime5': 'hsl(79 52.6% 14.2%)',
-  '--colors-lime6': 'hsl(78 55.7% 16.7%)',
-  '--colors-lime7': 'hsl(77 59.7% 20.1%)',
-  '--colors-lime8': 'hsl(75 64.8% 24.5%)',
-  '--colors-lime9': 'hsl(81 67% 50%)',
-  '--colors-lime10': 'hsl(75 85% 60%)',
-  '--colors-lime11': 'hsl(81 70% 43.8%)',
-  '--colors-lime12': 'hsl(84 79% 92.6%)',
-  '--colors-yellow1': 'hsl(45 100% 5.5%)',
-  '--colors-yellow2': 'hsl(46 100% 6.7%)',
-  '--colors-yellow3': 'hsl(45 100% 8.7%)',
-  '--colors-yellow4': 'hsl(45 100% 10.4%)',
-  '--colors-yellow5': 'hsl(47 100% 12.1%)',
-  '--colors-yellow6': 'hsl(49 100% 14.3%)',
-  '--colors-yellow7': 'hsl(49 90.3% 18.4%)',
-  '--colors-yellow8': 'hsl(50 100% 22%)',
-  '--colors-yellow9': 'hsl(53 92% 50%)',
-  '--colors-yellow10': 'hsl(54 100% 68%)',
-  '--colors-yellow11': 'hsl(48 100% 47%)',
-  '--colors-yellow12': 'hsl(53 100% 91%)',
-  '--colors-amber1': 'hsl(36 100% 6.1%)',
-  '--colors-amber2': 'hsl(35 100% 7.6%)',
-  '--colors-amber3': 'hsl(32 100% 10.2%)',
-  '--colors-amber4': 'hsl(32 100% 12.4%)',
-  '--colors-amber5': 'hsl(33 100% 14.6%)',
-  '--colors-amber6': 'hsl(35 100% 17.1%)',
-  '--colors-amber7': 'hsl(35 91% 21.6%)',
-  '--colors-amber8': 'hsl(36 100% 25.5%)',
-  '--colors-amber9': 'hsl(39 100% 57%)',
-  '--colors-amber10': 'hsl(43 100% 64%)',
-  '--colors-amber11': 'hsl(39 90% 49.8%)',
-  '--colors-amber12': 'hsl(39 97% 93.2%)',
-  '--colors-orange1': 'hsl(30 70% 7.2%)',
-  '--colors-orange2': 'hsl(28 100% 8.4%)',
-  '--colors-orange3': 'hsl(26 91.1% 11.6%)',
-  '--colors-orange4': 'hsl(25 88.3% 14.1%)',
-  '--colors-orange5': 'hsl(24 87.6% 16.6%)',
-  '--colors-orange6': 'hsl(24 88.6% 19.8%)',
-  '--colors-orange7': 'hsl(24 92.4% 24%)',
-  '--colors-orange8': 'hsl(25 100% 29%)',
-  '--colors-orange9': 'hsl(24 94% 50%)',
-  '--colors-orange10': 'hsl(24 100% 58.5%)',
-  '--colors-orange11': 'hsl(24 100% 62.2%)',
-  '--colors-orange12': 'hsl(24 97% 93.2%)',
-  '--colors-brown1': 'hsl(22 15% 8.7%)',
-  '--colors-brown2': 'hsl(20 28.3% 10.4%)',
-  '--colors-brown3': 'hsl(20 28% 14%)',
-  '--colors-brown4': 'hsl(21 28.4% 16.5%)',
-  '--colors-brown5': 'hsl(22 28.7% 18.9%)',
-  '--colors-brown6': 'hsl(23 29% 22.3%)',
-  '--colors-brown7': 'hsl(25 29.5% 27.8%)',
-  '--colors-brown8': 'hsl(27 30.1% 35.9%)',
-  '--colors-brown9': 'hsl(28 34% 51%)',
-  '--colors-brown10': 'hsl(28 41.4% 55.8%)',
-  '--colors-brown11': 'hsl(28 60% 64.5%)',
-  '--colors-brown12': 'hsl(30 67% 94%)',
-  '--colors-bronze1': 'hsl(17 10% 8.8%)',
-  '--colors-bronze2': 'hsl(15 14.8% 10.6%)',
-  '--colors-bronze3': 'hsl(15 16.3% 14.3%)',
-  '--colors-bronze4': 'hsl(16 17.1% 17.2%)',
-  '--colors-bronze5': 'hsl(16 17.6% 19.6%)',
-  '--colors-bronze6': 'hsl(16 18.1% 22.9%)',
-  '--colors-bronze7': 'hsl(17 18.8% 28.8%)',
-  '--colors-bronze8': 'hsl(17 19.6% 38%)',
-  '--colors-bronze9': 'hsl(17 20% 54%)',
-  '--colors-bronze10': 'hsl(18 24% 59%)',
-  '--colors-bronze11': 'hsl(18 35% 68.5%)',
-  '--colors-bronze12': 'hsl(18 57% 94.1%)',
-  '--colors-gold1': 'hsl(44 9% 8.3%)',
-  '--colors-gold2': 'hsl(43 14.3% 9.6%)',
-  '--colors-gold3': 'hsl(42 15.5% 13%)',
-  '--colors-gold4': 'hsl(41 16.4% 15.6%)',
-  '--colors-gold5': 'hsl(41 16.9% 17.8%)',
-  '--colors-gold6': 'hsl(40 17.6% 20.8%)',
-  '--colors-gold7': 'hsl(38 18.5% 26.4%)',
-  '--colors-gold8': 'hsl(36 19.6% 35.1%)',
-  '--colors-gold9': 'hsl(36 20% 49.5%)',
-  '--colors-gold10': 'hsl(36 22.3% 54.5%)',
-  '--colors-gold11': 'hsl(35 30% 64%)',
-  '--colors-gold12': 'hsl(49 52% 93.8%)',
-  '--colors-grayA1': 'hsl(0 0% 100% / 0)',
-  '--colors-grayA2': 'hsl(0 0% 100% / 0.026)',
-  '--colors-grayA3': 'hsl(0 0% 100% / 0.056)',
-  '--colors-grayA4': 'hsl(0 0% 100% / 0.077)',
-  '--colors-grayA5': 'hsl(0 0% 100% / 0.103)',
-  '--colors-grayA6': 'hsl(0 0% 100% / 0.129)',
-  '--colors-grayA7': 'hsl(0 0% 100% / 0.172)',
-  '--colors-grayA8': 'hsl(0 0% 100% / 0.249)',
-  '--colors-grayA9': 'hsl(0 0% 100% / 0.386)',
-  '--colors-grayA10': 'hsl(0 0% 100% / 0.446)',
-  '--colors-grayA11': 'hsl(0 0% 100% / 0.592)',
-  '--colors-grayA12': 'hsl(0 0% 100% / 0.923)',
-  '--colors-mauveA1': 'hsl(0 0% 0% / 0)',
-  '--colors-mauveA2': 'hsl(240 76.7% 91.2% / 0.031)',
-  '--colors-mauveA3': 'hsl(240 86% 95.8% / 0.061)',
-  '--colors-mauveA4': 'hsl(240 91.8% 94.7% / 0.087)',
-  '--colors-mauveA5': 'hsl(240 91.5% 95.8% / 0.113)',
-  '--colors-mauveA6': 'hsl(240 92% 93.8% / 0.148)',
-  '--colors-mauveA7': 'hsl(240 94.8% 95.3% / 0.191)',
-  '--colors-mauveA8': 'hsl(249 98.1% 95.2% / 0.273)',
-  '--colors-mauveA9': 'hsl(248 97.6% 96.2% / 0.416)',
-  '--colors-mauveA10': 'hsl(248 95.5% 96.6% / 0.477)',
-  '--colors-mauveA11': 'hsl(250 98% 98% / 0.615)',
-  '--colors-mauveA12': 'hsl(240 93.9% 99.6% / 0.931)',
-  '--colors-slateA1': 'hsl(0 0% 0% / 0)',
-  '--colors-slateA2': 'hsl(181 98.9% 91.8% / 0.026)',
-  '--colors-slateA3': 'hsl(182 86.7% 91.4% / 0.057)',
-  '--colors-slateA4': 'hsl(209 86.7% 93.9% / 0.083)',
-  '--colors-slateA5': 'hsl(200 90.3% 93.4% / 0.109)',
-  '--colors-slateA6': 'hsl(209 95.3% 93.5% / 0.139)',
-  '--colors-slateA7': 'hsl(204 98.5% 93.9% / 0.182)',
-  '--colors-slateA8': 'hsl(209 94% 94.7% / 0.265)',
-  '--colors-slateA9': 'hsl(207 97.3% 94% / 0.412)',
-  '--colors-slateA10': 'hsl(209 99.4% 95.2% / 0.472)',
-  '--colors-slateA11': 'hsl(208 98.7% 96.8% / 0.615)',
-  '--colors-slateA12': 'hsl(211 86.7% 99.6% / 0.927)',
-  '--colors-sageA1': 'hsl(0 0% 0% / 0)',
-  '--colors-sageA2': 'hsl(123 94.4% 91.4% / 0.026)',
-  '--colors-sageA3': 'hsl(123 82.9% 91% / 0.057)',
-  '--colors-sageA4': 'hsl(124 97.9% 94.5% / 0.082)',
-  '--colors-sageA5': 'hsl(125 90% 95.2% / 0.104)',
-  '--colors-sageA6': 'hsl(142 95.1% 94.8% / 0.134)',
-  '--colors-sageA7': 'hsl(143 92.8% 95.7% / 0.173)',
-  '--colors-sageA8': 'hsl(146 94.7% 95.3% / 0.255)',
-  '--colors-sageA9': 'hsl(151 98.2% 94.4% / 0.397)',
-  '--colors-sageA10': 'hsl(148 99.5% 95.5% / 0.457)',
-  '--colors-sageA11': 'hsl(152 95.1% 97.3% / 0.6)',
-  '--colors-sageA12': 'hsl(149 93.3% 99.6% / 0.927)',
-  '--colors-oliveA1': 'hsl(0 0% 0% / 0)',
-  '--colors-oliveA2': 'hsl(91 97% 84% / 0.026)',
-  '--colors-oliveA3': 'hsl(101 87.4% 87.7% / 0.057)',
-  '--colors-oliveA4': 'hsl(92 91.8% 94.1% / 0.078)',
-  '--colors-oliveA5': 'hsl(101 92.6% 93.5% / 0.104)',
-  '--colors-oliveA6': 'hsl(102 91.1% 94.6% / 0.13)',
-  '--colors-oliveA7': 'hsl(102 92.5% 95.9% / 0.173)',
-  '--colors-oliveA8': 'hsl(107 100% 96.5% / 0.25)',
-  '--colors-oliveA9': 'hsl(110 98.3% 94.1% / 0.397)',
-  '--colors-oliveA10': 'hsl(109 99.6% 95.3% / 0.457)',
-  '--colors-oliveA11': 'hsl(113 95.3% 97.2% / 0.6)',
-  '--colors-oliveA12': 'hsl(120 93.5% 99.6% / 0.927)',
-  '--colors-sandA1': 'hsl(0 0% 0% / 0)',
-  '--colors-sandA2': 'hsl(60 89.8% 91.4% / 0.026)',
-  '--colors-sandA3': 'hsl(60 95.5% 92.5% / 0.056)',
-  '--colors-sandA4': 'hsl(60 75.6% 96.4% / 0.078)',
-  '--colors-sandA5': 'hsl(60 81.9% 95.2% / 0.104)',
-  '--colors-sandA6': 'hsl(41 87.6% 94.8% / 0.134)',
-  '--colors-sandA7': 'hsl(60 95.4% 96.2% / 0.172)',
-  '--colors-sandA8': 'hsl(49 93.5% 95.7% / 0.254)',
-  '--colors-sandA9': 'hsl(52 97.3% 96.2% / 0.391)',
-  '--colors-sandA10': 'hsl(52 97.8% 96.7% / 0.451)',
-  '--colors-sandA11': 'hsl(51 97% 97.8% / 0.597)',
-  '--colors-sandA12': 'hsl(60 88.7% 99.8% / 0.923)',
-  '--colors-tomatoA1': 'hsl(0 0% 0% / 0)',
-  '--colors-tomatoA2': 'hsl(5 100% 49.6% / 0.058)',
-  '--colors-tomatoA3': 'hsl(6 99.6% 54.9% / 0.133)',
-  '--colors-tomatoA4': 'hsl(6 99.2% 55.4% / 0.191)',
-  '--colors-tomatoA5': 'hsl(6 99.5% 55.8% / 0.244)',
-  '--colors-tomatoA6': 'hsl(7 99.7% 55.9% / 0.319)',
-  '--colors-tomatoA7': 'hsl(8 99.8% 54.8% / 0.434)',
-  '--colors-tomatoA8': 'hsl(10 99.8% 53.5% / 0.598)',
-  '--colors-tomatoA9': 'hsl(10 100% 59.7% / 0.885)',
-  '--colors-tomatoA10': 'hsl(10 100% 63.6% / 0.916)',
-  '--colors-tomatoA11': 'hsl(10 99.7% 66.4% / 0.939)',
-  '--colors-tomatoA12': 'hsl(12 100% 97.1% / 0.98)',
-  '--colors-redA1': 'hsl(0 0% 0% / 0)',
-  '--colors-redA2': 'hsl(5 98.5% 53.8% / 0.045)',
-  '--colors-redA3': 'hsl(359 99.1% 61.1% / 0.13)',
-  '--colors-redA4': 'hsl(358 98.8% 61% / 0.184)',
-  '--colors-redA5': 'hsl(357 99.6% 60.3% / 0.237)',
-  '--colors-redA6': 'hsl(358 99.6% 60.3% / 0.322)',
-  '--colors-redA7': 'hsl(357 100% 59.5% / 0.442)',
-  '--colors-redA8': 'hsl(358 99.8% 59.1% / 0.621)',
-  '--colors-redA9': 'hsl(358 100% 65.5% / 0.884)',
-  '--colors-redA10': 'hsl(358 100% 67.5% / 0.942)',
-  '--colors-redA11': 'hsl(358 100% 69.7% / 0.98)',
-  '--colors-redA12': 'hsl(352 100% 97.1% / 0.98)',
-  '--colors-crimsonA1': 'hsl(0 0% 0% / 0)',
-  '--colors-crimsonA2': 'hsl(336 96.8% 53.2% / 0.045)',
-  '--colors-crimsonA3': 'hsl(335 98.7% 59.3% / 0.138)',
-  '--colors-crimsonA4': 'hsl(336 99.1% 59.9% / 0.191)',
-  '--colors-crimsonA5': 'hsl(335 99.4% 59.4% / 0.244)',
-  '--colors-crimsonA6': 'hsl(335 99.4% 59.4% / 0.315)',
-  '--colors-crimsonA7': 'hsl(336 99.5% 57.8% / 0.439)',
-  '--colors-crimsonA8': 'hsl(336 99.9% 55.4% / 0.642)',
-  '--colors-crimsonA9': 'hsl(336 99.9% 62.8% / 0.903)',
-  '--colors-crimsonA10': 'hsl(339 99.9% 66.3% / 0.934)',
-  '--colors-crimsonA11': 'hsl(341 99.9% 69.5% / 0.965)',
-  '--colors-crimsonA12': 'hsl(327 100% 97.1% / 0.98)',
-  '--colors-pinkA1': 'hsl(0 0% 0% / 0)',
-  '--colors-pinkA2': 'hsl(320 98.1% 64.1% / 0.036)',
-  '--colors-pinkA3': 'hsl(320 99.1% 63.1% / 0.121)',
-  '--colors-pinkA4': 'hsl(320 99.5% 62.7% / 0.17)',
-  '--colors-pinkA5': 'hsl(319 99.7% 61.5% / 0.219)',
-  '--colors-pinkA6': 'hsl(322 99.4% 60.8% / 0.291)',
-  '--colors-pinkA7': 'hsl(321 99.6% 58.7% / 0.407)',
-  '--colors-pinkA8': 'hsl(322 99.7% 55.4% / 0.608)',
-  '--colors-pinkA9': 'hsl(322 100% 64.6% / 0.817)',
-  '--colors-pinkA10': 'hsl(323 100% 66.3% / 0.875)',
-  '--colors-pinkA11': 'hsl(325 99.9% 68.6% / 0.96)',
-  '--colors-pinkA12': 'hsl(314 100% 96.9% / 0.98)',
-  '--colors-plumA1': 'hsl(0 0% 0% / 0)',
-  '--colors-plumA2': 'hsl(300 96.4% 58.4% / 0.036)',
-  '--colors-plumA3': 'hsl(300 99.4% 67.1% / 0.102)',
-  '--colors-plumA4': 'hsl(295 99.8% 66.3% / 0.155)',
-  '--colors-plumA5': 'hsl(295 99.4% 67.1% / 0.204)',
-  '--colors-plumA6': 'hsl(294 99% 67.8% / 0.262)',
-  '--colors-plumA7': 'hsl(294 99.9% 67.7% / 0.363)',
-  '--colors-plumA8': 'hsl(292 99.8% 67.5% / 0.527)',
-  '--colors-plumA9': 'hsl(292 99.9% 69.2% / 0.695)',
-  '--colors-plumA10': 'hsl(295 99.9% 70.8% / 0.748)',
-  '--colors-plumA11': 'hsl(300 99.8% 72.9% / 0.828)',
-  '--colors-plumA12': 'hsl(300 100% 97.1% / 0.98)',
-  '--colors-purpleA1': 'hsl(0 0% 0% / 0)',
-  '--colors-purpleA2': 'hsl(280 96.5% 57.5% / 0.045)',
-  '--colors-purpleA3': 'hsl(279 98.7% 62.8% / 0.129)',
-  '--colors-purpleA4': 'hsl(279 99.1% 64% / 0.191)',
-  '--colors-purpleA5': 'hsl(278 99.8% 64.2% / 0.248)',
-  '--colors-purpleA6': 'hsl(276 99.6% 64.6% / 0.328)',
-  '--colors-purpleA7': 'hsl(274 99.9% 64.6% / 0.456)',
-  '--colors-purpleA8': 'hsl(272 99.7% 64.6% / 0.66)',
-  '--colors-purpleA9': 'hsl(272 99.9% 69.1% / 0.748)',
-  '--colors-purpleA10': 'hsl(273 100% 71.3% / 0.801)',
-  '--colors-purpleA11': 'hsl(275 99.9% 75.3% / 0.934)',
-  '--colors-purpleA12': 'hsl(286 100% 97.1% / 0.98)',
-  '--colors-violetA1': 'hsl(0 0% 0% / 0)',
-  '--colors-violetA2': 'hsl(258 98.2% 61% / 0.054)',
-  '--colors-violetA3': 'hsl(252 98.8% 65.8% / 0.148)',
-  '--colors-violetA4': 'hsl(253 99.7% 65.7% / 0.219)',
-  '--colors-violetA5': 'hsl(252 99.7% 66.4% / 0.286)',
-  '--colors-violetA6': 'hsl(251 99.7% 66.2% / 0.371)',
-  '--colors-violetA7': 'hsl(250 99.7% 66.3% / 0.514)',
-  '--colors-violetA8': 'hsl(250 99.7% 66.1% / 0.733)',
-  '--colors-violetA9': 'hsl(252 99.9% 70.3% / 0.786)',
-  '--colors-violetA10': 'hsl(251 99.9% 72.9% / 0.844)',
-  '--colors-violetA11': 'hsl(250 100% 77.9% / 0.98)',
-  '--colors-violetA12': 'hsl(254 100% 97.5% / 0.98)',
-  '--colors-indigoA1': 'hsl(0 0% 0% / 0)',
-  '--colors-indigoA2': 'hsl(234 97.4% 59.9% / 0.059)',
-  '--colors-indigoA3': 'hsl(228 99.2% 61.7% / 0.144)',
-  '--colors-indigoA4': 'hsl(227 99.7% 62% / 0.211)',
-  '--colors-indigoA5': 'hsl(227 99.2% 62.3% / 0.27)',
-  '--colors-indigoA6': 'hsl(226 99.9% 62.1% / 0.35)',
-  '--colors-indigoA7': 'hsl(226 99.9% 62% / 0.471)',
-  '--colors-indigoA8': 'hsl(226 99.9% 62.1% / 0.655)',
-  '--colors-indigoA9': 'hsl(226 99.9% 63.6% / 0.848)',
-  '--colors-indigoA10': 'hsl(227 99.8% 67.7% / 0.893)',
-  '--colors-indigoA11': 'hsl(227 100% 76.3% / 0.98)',
-  '--colors-indigoA12': 'hsl(226 100% 97.5% / 0.98)',
-  '--colors-blueA1': 'hsl(0 0% 0% / 0)',
-  '--colors-blueA2': 'hsl(221 97.8% 52.4% / 0.059)',
-  '--colors-blueA3': 'hsl(215 99.3% 54.2% / 0.135)',
-  '--colors-blueA4': 'hsl(215 99.3% 53.8% / 0.198)',
-  '--colors-blueA5': 'hsl(213 99.4% 52.8% / 0.252)',
-  '--colors-blueA6': 'hsl(212 99.9% 51.7% / 0.323)',
-  '--colors-blueA7': 'hsl(211 100% 50.7% / 0.435)',
-  '--colors-blueA8': 'hsl(211 99.8% 50.9% / 0.597)',
-  '--colors-blueA9': 'hsl(205 100% 50% / 0.98)',
-  '--colors-blueA10': 'hsl(208 100% 60.7% / 0.98)',
-  '--colors-blueA11': 'hsl(209 100% 66.3% / 0.98)',
-  '--colors-blueA12': 'hsl(196 100% 96.8% / 0.98)',
-  '--colors-skyA1': 'hsl(0 0% 0% / 0)',
-  '--colors-skyA2': 'hsl(208 100% 49.8% / 0.045)',
-  '--colors-skyA3': 'hsl(201 100% 49.8% / 0.099)',
-  '--colors-skyA4': 'hsl(201 100% 50% / 0.148)',
-  '--colors-skyA5': 'hsl(200 100% 49.8% / 0.198)',
-  '--colors-skyA6': 'hsl(199 100% 49.9% / 0.256)',
-  '--colors-skyA7': 'hsl(199 100% 49.9% / 0.337)',
-  '--colors-skyA8': 'hsl(199 100% 50% / 0.453)',
-  '--colors-skyA9': 'hsl(192 100% 70.8% / 0.98)',
-  '--colors-skyA10': 'hsl(190 100% 77.6% / 0.98)',
-  '--colors-skyA11': 'hsl(192 99.9% 59.6% / 0.924)',
-  '--colors-skyA12': 'hsl(189 100% 96.8% / 0.98)',
-  '--colors-mintA1': 'hsl(0 0% 0% / 0)',
-  '--colors-mintA2': 'hsl(180 100% 49.2% / 0.031)',
-  '--colors-mintA3': 'hsl(176 100% 49.7% / 0.07)',
-  '--colors-mintA4': 'hsl(173 100% 49.7% / 0.105)',
-  '--colors-mintA5': 'hsl(173 100% 49.8% / 0.144)',
-  '--colors-mintA6': 'hsl(172 100% 49.8% / 0.192)',
-  '--colors-mintA7': 'hsl(171 100% 49.9% / 0.266)',
-  '--colors-mintA8': 'hsl(169 100% 49.9% / 0.366)',
-  '--colors-mintA9': 'hsl(167 99.8% 75% / 0.87)',
-  '--colors-mintA10': 'hsl(163 99.9% 80.7% / 0.948)',
-  '--colors-mintA11': 'hsl(167 99.9% 58.7% / 0.796)',
-  '--colors-mintA12': 'hsl(169 100% 96.2% / 0.98)',
-  '--colors-cyanA1': 'hsl(0 0% 0% / 0)',
-  '--colors-cyanA2': 'hsl(196 100% 50% / 0.031)',
-  '--colors-cyanA3': 'hsl(192 98% 50.9% / 0.085)',
-  '--colors-cyanA4': 'hsl(194 99.6% 51.3% / 0.133)',
-  '--colors-cyanA5': 'hsl(192 99.5% 51.3% / 0.173)',
-  '--colors-cyanA6': 'hsl(193 99.7% 50.4% / 0.226)',
-  '--colors-cyanA7': 'hsl(192 100% 50% / 0.31)',
-  '--colors-cyanA8': 'hsl(193 100% 50% / 0.425)',
-  '--colors-cyanA9': 'hsl(190 99.8% 50.8% / 0.731)',
-  '--colors-cyanA10': 'hsl(188 100% 50% / 0.775)',
-  '--colors-cyanA11': 'hsl(186 100% 49.9% / 0.824)',
-  '--colors-cyanA12': 'hsl(185 99.8% 95.1% / 0.978)',
-  '--colors-tealA1': 'hsl(0 0% 0% / 0)',
-  '--colors-tealA2': 'hsl(171 100% 49.2% / 0.031)',
-  '--colors-tealA3': 'hsl(172 100% 49.7% / 0.07)',
-  '--colors-tealA4': 'hsl(175 100% 49.7% / 0.105)',
-  '--colors-tealA5': 'hsl(174 98.9% 50.1% / 0.14)',
-  '--colors-tealA6': 'hsl(174 100% 51.8% / 0.187)',
-  '--colors-tealA7': 'hsl(173 99.6% 53.2% / 0.257)',
-  '--colors-tealA8': 'hsl(174 99.6% 53.3% / 0.366)',
-  '--colors-tealA9': 'hsl(173 99.9% 54.6% / 0.609)',
-  '--colors-tealA10': 'hsl(174 99.9% 53.8% / 0.67)',
-  '--colors-tealA11': 'hsl(174 100% 52% / 0.748)',
-  '--colors-tealA12': 'hsl(166 98.6% 95% / 0.979)',
-  '--colors-greenA1': 'hsl(0 0% 0% / 0)',
-  '--colors-greenA2': 'hsl(169 100% 48.5% / 0.027)',
-  '--colors-greenA3': 'hsl(162 98.7% 57.9% / 0.07)',
-  '--colors-greenA4': 'hsl(158 98.6% 59.7% / 0.105)',
-  '--colors-greenA5': 'hsl(158 98.6% 60.7% / 0.14)',
-  '--colors-greenA6': 'hsl(156 99.9% 62% / 0.187)',
-  '--colors-greenA7': 'hsl(154 99.5% 63.1% / 0.257)',
-  '--colors-greenA8': 'hsl(152 99.7% 64.2% / 0.37)',
-  '--colors-greenA9': 'hsl(151 99.7% 63.8% / 0.605)',
-  '--colors-greenA10': 'hsl(152 99.9% 66.5% / 0.661)',
-  '--colors-greenA11': 'hsl(151 99.7% 69.2% / 0.74)',
-  '--colors-greenA12': 'hsl(137 100% 95.8% / 0.98)',
-  '--colors-grassA1': 'hsl(0 0% 0% / 0)',
-  '--colors-grassA2': 'hsl(107 97.2% 61.9% / 0.022)',
-  '--colors-grassA3': 'hsl(128 96.5% 69.8% / 0.066)',
-  '--colors-grassA4': 'hsl(130 100% 70.2% / 0.1)',
-  '--colors-grassA5': 'hsl(130 98.2% 69.1% / 0.14)',
-  '--colors-grassA6': 'hsl(132 99.9% 69.3% / 0.187)',
-  '--colors-grassA7': 'hsl(132 99.9% 69.8% / 0.261)',
-  '--colors-grassA8': 'hsl(130 99.6% 70.5% / 0.37)',
-  '--colors-grassA9': 'hsl(130 99.7% 70.6% / 0.618)',
-  '--colors-grassA10': 'hsl(131 100% 73.5% / 0.674)',
-  '--colors-grassA11': 'hsl(130 99.7% 75.6% / 0.731)',
-  '--colors-grassA12': 'hsl(137 100% 95.8% / 0.98)',
-  '--colors-limeA1': 'hsl(0 0% 0% / 0)',
-  '--colors-limeA2': 'hsl(75 96.4% 59.6% / 0.022)',
-  '--colors-limeA3': 'hsl(88 98% 70.4% / 0.061)',
-  '--colors-limeA4': 'hsl(81 97.8% 67.4% / 0.096)',
-  '--colors-limeA5': 'hsl(82 98.4% 65.6% / 0.135)',
-  '--colors-limeA6': 'hsl(79 99.7% 64.3% / 0.182)',
-  '--colors-limeA7': 'hsl(77 99.1% 62.1% / 0.252)',
-  '--colors-limeA8': 'hsl(75 100% 60% / 0.342)',
-  '--colors-limeA9': 'hsl(81 99.8% 59.7% / 0.819)',
-  '--colors-limeA10': 'hsl(75 99.8% 63.7% / 0.936)',
-  '--colors-limeA11': 'hsl(81 99.9% 58.7% / 0.719)',
-  '--colors-limeA12': 'hsl(83 100% 94.2% / 0.98)',
-  '--colors-yellowA1': 'hsl(0 0% 0% / 0)',
-  '--colors-yellowA2': 'hsl(49 100% 49.1% / 0.027)',
-  '--colors-yellowA3': 'hsl(45 100% 49.7% / 0.071)',
-  '--colors-yellowA4': 'hsl(46 100% 49.7% / 0.111)',
-  '--colors-yellowA5': 'hsl(47 100% 49.9% / 0.15)',
-  '--colors-yellowA6': 'hsl(51 100% 49.8% / 0.199)',
-  '--colors-yellowA7': 'hsl(51 99.8% 53.6% / 0.269)',
-  '--colors-yellowA8': 'hsl(51 100% 49.9% / 0.371)',
-  '--colors-yellowA9': 'hsl(53 100% 52% / 0.956)',
-  '--colors-yellowA10': 'hsl(56 100% 68.4% / 0.98)',
-  '--colors-yellowA11': 'hsl(48 100% 50% / 0.934)',
-  '--colors-yellowA12': 'hsl(60 100% 91.8% / 0.98)',
-  '--colors-amberA1': 'hsl(0 0% 0% / 0)',
-  '--colors-amberA2': 'hsl(31 100% 49.7% / 0.036)',
-  '--colors-amberA3': 'hsl(27 100% 49.9% / 0.094)',
-  '--colors-amberA4': 'hsl(29 100% 50% / 0.143)',
-  '--colors-amberA5': 'hsl(31 100% 50% / 0.192)',
-  '--colors-amberA6': 'hsl(35 100% 50% / 0.25)',
-  '--colors-amberA7': 'hsl(34 99.6% 52.9% / 0.331)',
-  '--colors-amberA8': 'hsl(36 100% 50% / 0.442)',
-  '--colors-amberA9': 'hsl(40 100% 57.2% / 0.98)',
-  '--colors-amberA10': 'hsl(44 100% 64.2% / 0.98)',
-  '--colors-amberA11': 'hsl(39 99.9% 52.7% / 0.938)',
-  '--colors-amberA12': 'hsl(45 100% 94.2% / 0.98)',
-  '--colors-orangeA1': 'hsl(0 0% 0% / 0)',
-  '--colors-orangeA2': 'hsl(13 100% 49.7% / 0.054)',
-  '--colors-orangeA3': 'hsl(20 100% 49.7% / 0.117)',
-  '--colors-orangeA4': 'hsl(23 100% 49.8% / 0.166)',
-  '--colors-orangeA5': 'hsl(23 99.4% 50.1% / 0.215)',
-  '--colors-orangeA6': 'hsl(23 99.8% 51.1% / 0.286)',
-  '--colors-orangeA7': 'hsl(23 99.7% 50.6% / 0.389)',
-  '--colors-orangeA8': 'hsl(24 100% 49.9% / 0.523)',
-  '--colors-orangeA9': 'hsl(24 99.9% 51.6% / 0.965)',
-  '--colors-orangeA10': 'hsl(25 100% 58.6% / 0.98)',
-  '--colors-orangeA11': 'hsl(24 100% 62.4% / 0.98)',
-  '--colors-orangeA12': 'hsl(26 100% 94.2% / 0.98)',
-  '--colors-brownA1': 'hsl(0 0% 0% / 0)',
-  '--colors-brownA2': 'hsl(22 99.6% 53.6% / 0.035)',
-  '--colors-brownA3': 'hsl(18 97.8% 69% / 0.088)',
-  '--colors-brownA4': 'hsl(21 98.2% 71% / 0.123)',
-  '--colors-brownA5': 'hsl(25 98.4% 72.1% / 0.158)',
-  '--colors-brownA6': 'hsl(25 98.7% 73.5% / 0.206)',
-  '--colors-brownA7': 'hsl(25 99% 74.6% / 0.289)',
-  '--colors-brownA8': 'hsl(28 99.2% 75.3% / 0.407)',
-  '--colors-brownA9': 'hsl(28 100% 74.8% / 0.642)',
-  '--colors-brownA10': 'hsl(28 99.9% 74.9% / 0.712)',
-  '--colors-brownA11': 'hsl(28 99.9% 74.9% / 0.843)',
-  '--colors-brownA12': 'hsl(32 98.2% 95.7% / 0.979)',
-  '--colors-bronzeA1': 'hsl(0 0% 0% / 0)',
-  '--colors-bronzeA2': 'hsl(20 88.2% 74.2% / 0.027)',
-  '--colors-bronzeA3': 'hsl(10 99.4% 83% / 0.074)',
-  '--colors-bronzeA4': 'hsl(18 96% 81.1% / 0.114)',
-  '--colors-bronzeA5': 'hsl(18 99.4% 81.7% / 0.148)',
-  '--colors-bronzeA6': 'hsl(15 98.1% 82.4% / 0.192)',
-  '--colors-bronzeA7': 'hsl(16 99.2% 82.9% / 0.27)',
-  '--colors-bronzeA8': 'hsl(18 99.5% 82.6% / 0.396)',
-  '--colors-bronzeA9': 'hsl(18 99.3% 85% / 0.592)',
-  '--colors-bronzeA10': 'hsl(18 99.6% 85.2% / 0.657)',
-  '--colors-bronzeA11': 'hsl(17 99.9% 86.1% / 0.774)',
-  '--colors-bronzeA12': 'hsl(20 99.8% 96.4% / 0.974)',
-  '--colors-goldA1': 'hsl(0 0% 0% / 0)',
-  '--colors-goldA2': 'hsl(40 93.7% 70.6% / 0.022)',
-  '--colors-goldA3': 'hsl(40 97.5% 80.6% / 0.065)',
-  '--colors-goldA4': 'hsl(40 95.9% 80.8% / 0.1)',
-  '--colors-goldA5': 'hsl(38 97.3% 82.1% / 0.13)',
-  '--colors-goldA6': 'hsl(39 97.2% 82.5% / 0.169)',
-  '--colors-goldA7': 'hsl(37 99.3% 82.4% / 0.246)',
-  '--colors-goldA8': 'hsl(35 98.7% 82.2% / 0.363)',
-  '--colors-goldA9': 'hsl(36 99.7% 82.8% / 0.552)',
-  '--colors-goldA10': 'hsl(35 99.2% 83.7% / 0.613)',
-  '--colors-goldA11': 'hsl(35 99.3% 85.3% / 0.725)',
-  '--colors-goldA12': 'hsl(49 98.6% 96.7% / 0.966)',
-}
diff --git a/packages/ui/src/components/Badge/Badge.stories.tsx b/packages/ui/src/components/Badge/Badge.stories.tsx
index d27bcd12adc..32c5042e3bb 100644
--- a/packages/ui/src/components/Badge/Badge.stories.tsx
+++ b/packages/ui/src/components/Badge/Badge.stories.tsx
@@ -1,3 +1,4 @@
+import { COLORS } from '../../lib/constants'
 import { Badge } from './'
 
 export default {
@@ -5,39 +6,6 @@ export default {
   component: Badge,
 }
 
-const colors = [
-  'brand',
-  'scale',
-  'tomato',
-  'red',
-  'crimson',
-  'pink',
-  'plum',
-  'purple',
-  'violet',
-  'indigo',
-  'blue',
-  'cyan',
-  'teal',
-  'green',
-  'grass',
-  'brown',
-  'orange',
-  'sky',
-  'mint',
-  'lime',
-  'yellow',
-  'amber',
-  'gold',
-  'bronze',
-  'gray',
-  'mauve',
-  'slate',
-  'sage',
-  'olive',
-  'sand',
-]
-
 const sizes: string[] = ['small', 'large']
 
 export const Default = (args: any) => <Badge {...args}>Hello world</Badge>
@@ -50,9 +18,7 @@ export const large = (args: any) => <Badge {...args}>Hello world</Badge>
 
 export const withDotLarge = (args: any) => <Badge {...args}>Hello world</Badge>
 
-export const withCustomClassNames = (args: any) => (
-  <Badge {...args}>Hello world</Badge>
-)
+export const withCustomClassNames = (args: any) => <Badge {...args}>Hello world</Badge>
 
 export const allBadges = () => (
   <>
@@ -61,7 +27,7 @@ export const allBadges = () => (
         <>
           <h3 className="text-scale-900">{size}</h3>
           <div className="flex flex-col gap-2">
-            {colors.map((x, colorIndex) => (
+            {COLORS.map((x, colorIndex) => (
               // @ts-ignore
               <Badge size={sizes[sizeIndex]} color={colors[colorIndex]}>
                 Supabase
@@ -94,5 +60,5 @@ withDotLarge.args = {
 }
 
 withCustomClassNames.args = {
-  className: 'border-teal-100 border-2'
+  className: 'border-teal-100 border-2',
 }
diff --git a/packages/ui/src/components/Badge/Badge.tsx b/packages/ui/src/components/Badge/Badge.tsx
index 39f2d26318b..af526dc7747 100644
--- a/packages/ui/src/components/Badge/Badge.tsx
+++ b/packages/ui/src/components/Badge/Badge.tsx
@@ -1,37 +1,8 @@
+import { AvailableColors } from '../../lib/constants'
 import styleHandler from '../../lib/theme/styleHandler'
 
 interface Props {
-  color?:
-    | 'brand'
-    | 'scale'
-    | 'tomato'
-    | 'red'
-    | 'crimson'
-    | 'pink'
-    | 'plum'
-    | 'purple'
-    | 'violet'
-    | 'indigo'
-    | 'blue'
-    | 'cyan'
-    | 'teal'
-    | 'green'
-    | 'grass'
-    | 'brown'
-    | 'orange'
-    | 'sky'
-    | 'mint'
-    | 'lime'
-    | 'yellow'
-    | 'amber'
-    | 'gold'
-    | 'bronze'
-    | 'gray'
-    | 'mauve'
-    | 'slate'
-    | 'sage'
-    | 'olive'
-    | 'sand'
+  color?: AvailableColors
   children: string | React.ReactNode
   size?: 'large' | 'small'
   dot?: boolean
diff --git a/packages/ui/src/lib/constants.ts b/packages/ui/src/lib/constants.ts
index 2423d7bb86c..594293ae9d6 100644
--- a/packages/ui/src/lib/constants.ts
+++ b/packages/ui/src/lib/constants.ts
@@ -1 +1,42 @@
 export const HIDDEN_PLACEHOLDER = '**** **** **** ****'
+export const COLORS = [
+  'brand',
+  'scale',
+  'tomato',
+  'red',
+  'crimson',
+  'pink',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'green',
+  'grass',
+  'orange',
+  'sky',
+  'yellow',
+  'amber',
+  'gold',
+  'gray',
+  'slate',
+]
+export type AvailableColors =
+  | 'brand'
+  | 'scale'
+  | 'tomato'
+  | 'red'
+  | 'crimson'
+  | 'pink'
+  | 'purple'
+  | 'violet'
+  | 'indigo'
+  | 'blue'
+  | 'green'
+  | 'grass'
+  | 'orange'
+  | 'sky'
+  | 'yellow'
+  | 'amber'
+  | 'gold'
+  | 'gray'
+  | 'slate'
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 0aa584b767f..4cdaeaca7f0 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -222,30 +222,18 @@ export default {
       red: `bg-red-200 text-red-1100 border border-red-700`,
       crimson: `bg-crimson-200 text-crimson-1100 border border-crimson-700`,
       pink: `bg-pink-200 text-pink-1100 border border-pink-700`,
-      plum: `bg-plum-200 text-plum-1100 border border-plum-700`,
       purple: `bg-purple-200 text-purple-1100 border border-purple-700`,
       violet: `bg-violet-200 text-violet-1100 border border-violet-700`,
       indigo: `bg-indigo-200 text-indigo-1100 border border-indigo-700`,
       blue: `bg-blue-200 text-blue-1100 border border-blue-700`,
-      cyan: `bg-cyan-200 text-cyan-1100 border border-cyan-700`,
-      teal: `bg-teal-200 text-teal-1100 border border-teal-700`,
       green: `bg-green-200 text-green-1100 border border-green-700`,
       grass: `bg-grass-200 text-grass-1100 border border-grass-700`,
-      brown: `bg-brown-200 text-brown-1100 border border-brown-700`,
       orange: `bg-orange-200 text-orange-1100 border border-orange-700`,
-      sky: `bg-sky-200 text-sky-1100 border border-sky-700`,
-      mint: `bg-mint-200 text-mint-1100 border border-mint-700`,
-      lime: `bg-lime-200 text-lime-1100 border border-lime-700`,
       yellow: `bg-yellow-200 text-yellow-1100 border border-yellow-700`,
       amber: `bg-amber-200 text-amber-1100 border border-amber-700`,
       gold: `bg-gold-200 text-gold-1100 border border-gold-700`,
-      bronze: `bg-bronze-200 text-bronze-1100 border border-bronze-700`,
       gray: `bg-gray-200 text-gray-1100 border border-gray-700`,
-      mauve: `bg-mauve-200 text-mauve-1100 border border-mauve-700`,
       slate: `bg-slate-200 text-slate-1100 border border-slate-700`,
-      sage: `bg-sage-200 text-sage-1100 border border-sage-700`,
-      olive: `bg-olive-200 text-olive-1100 border border-olive-700`,
-      sand: `bg-sand-200 text-sand-1100 border border-sand-700`,
     },
   },
 
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index c1a046ced35..9c2af498997 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,477 +1 @@
-const gray = {
-  100: '#eeeeee',
-  200: '#e0e0e0',
-  300: '#bbbbbb',
-  400: '#666666',
-  500: '#444444',
-  650: '#333',
-  600: '#2a2a2a',
-  700: '#1f1f1f',
-  800: '#181818',
-  900: '#0f0f0f',
-}
-const brand = {
-  100: '#c5f1dd',
-  200: '#c5f1dd',
-  300: '#9fe7c7',
-  400: '#65d9a5',
-  500: '#24b47e',
-  600: '#38bc81',
-  700: '#1c8656',
-  800: '#10633e',
-  900: '#10633e',
-}
-
-const blueGray = {
-  50: '#F8FAFC',
-  100: '#F1F5F9',
-  200: '#E2E8F0',
-  300: '#CBD5E1',
-  400: '#94A3B8',
-  500: '#64748B',
-  600: '#475569',
-  700: '#334155',
-  800: '#1E293B',
-  900: '#0F172A',
-}
-
-const coolGray = {
-  50: '#F9FAFB',
-  100: '#F3F4F6',
-  200: '#E5E7EB',
-  300: '#D1D5DB',
-  400: '#9CA3AF',
-  500: '#6B7280',
-  600: '#4B5563',
-  700: '#374151',
-  800: '#1F2937',
-  900: '#111827',
-}
-
-const colors = {
-  // transparent: 'transparent',
-  // white: '#ffffff',
-  // black: '#000000',
-  // gray: {
-  //   '50': '#f9fafb',
-  //   '100': '#f4f5f7',
-  //   '200': '#e5e7eb',
-  //   '300': '#d5d6d7',
-  //   '400': '#9e9e9e',
-  //   '500': '#707275',
-  //   '600': '#4c4f52',
-  //   '700': '#24262d',
-  //   '800': '#1a1c23',
-  //   '900': '#121317',
-  //   // default values from Tailwind UI palette
-  //   // '300': '#d2d6dc',
-  //   // '400': '#9fa6b2',
-  //   // '500': '#6b7280',
-  //   // '600': '#4b5563',
-  //   // '700': '#374151',
-  //   // '800': '#252f3f',
-  //   // '900': '#161e2e',
-  // },
-  red: {
-    50: '#fdf2f2',
-    100: '#fde8e8',
-    200: '#fbd5d5',
-    300: '#f8b4b4',
-    400: '#f98080',
-    500: '#f05252',
-    600: '#e02424',
-    700: '#c81e1e',
-    800: '#9b1c1c',
-    900: '#771d1d',
-  },
-  orange: {
-    50: '#fff8f1',
-    100: '#feecdc',
-    200: '#fcd9bd',
-    300: '#fdba8c',
-    400: '#ff8a4c',
-    500: '#ff5a1f',
-    600: '#d03801',
-    700: '#b43403',
-    800: '#8a2c0d',
-    900: '#771d1d',
-  },
-  yellow: {
-    50: '#fdfdea',
-    100: '#fdf6b2',
-    200: '#fce96a',
-    300: '#faca15',
-    400: '#e3a008',
-    500: '#c27803',
-    600: '#9f580a',
-    700: '#8e4b10',
-    800: '#723b13',
-    900: '#633112',
-  },
-  green: {
-    50: '#f3faf7',
-    100: '#def7ec',
-    200: '#bcf0da',
-    300: '#84e1bc',
-    400: '#31c48d',
-    500: '#0e9f6e',
-    600: '#057a55',
-    700: '#046c4e',
-    800: '#03543f',
-    900: '#014737',
-  },
-  teal: {
-    50: '#edfafa',
-    100: '#d5f5f6',
-    200: '#afecef',
-    300: '#7edce2',
-    400: '#16bdca',
-    500: '#0694a2',
-    600: '#047481',
-    700: '#036672',
-    800: '#05505c',
-    900: '#014451',
-  },
-  blue: {
-    50: '#ebf5ff',
-    100: '#e1effe',
-    200: '#c3ddfd',
-    300: '#a4cafe',
-    400: '#76a9fa',
-    500: '#3f83f8',
-    600: '#1c64f2',
-    700: '#1a56db',
-    800: '#1e429f',
-    900: '#233876',
-  },
-  indigo: {
-    50: '#f0f5ff',
-    100: '#e5edff',
-    200: '#cddbfe',
-    300: '#b4c6fc',
-    400: '#8da2fb',
-    500: '#6875f5',
-    600: '#5850ec',
-    700: '#5145cd',
-    800: '#42389d',
-    900: '#362f78',
-  },
-  purple: {
-    50: '#f6f5ff',
-    100: '#edebfe',
-    200: '#dcd7fe',
-    300: '#cabffd',
-    400: '#ac94fa',
-    500: '#9061f9',
-    600: '#7e3af2',
-    700: '#6c2bd9',
-    800: '#5521b5',
-    900: '#4a1d96',
-  },
-  pink: {
-    50: '#fdf2f8',
-    100: '#fce8f3',
-    200: '#fad1e8',
-    300: '#f8b4d9',
-    400: '#f17eb8',
-    500: '#e74694',
-    600: '#d61f69',
-    700: '#bf125d',
-    800: '#99154b',
-    900: '#751a3d',
-  },
-}
-
-const dark = {
-  50: '#eeeeee',
-  100: '#eeeeee',
-  200: '#e0e0e0',
-  300: '#bbbbbb',
-  400: '#666666',
-  500: '#444444',
-  600: '#2a2a2a',
-  700: '#1f1f1f',
-  800: '#181818',
-  900: '#0f0f0f',
-}
-
-const sbui_border = {
-  100: 'var(--border-1)',
-  200: 'var(--border-2)',
-  300: 'var(--border-3)',
-  400: 'var(--border-4)',
-  500: 'var(--border-5)',
-  600: 'var(--border-6)',
-  700: 'var(--border-7)',
-  800: 'var(--border-8)',
-  900: 'var(--border-9)',
-  1000: 'var(--border-10)',
-  1100: 'var(--border-11)',
-  1200: 'var(--border-12)',
-}
-
-const sbui_background = {
-  100: 'var(--background-1)',
-  200: 'var(--background-2)',
-  300: 'var(--background-3)',
-  400: 'var(--background-4)',
-  500: 'var(--background-5)',
-  600: 'var(--background-6)',
-  700: 'var(--background-7)',
-  800: 'var(--background-8)',
-  900: 'var(--background-9)',
-  1000: 'var(--background-10)',
-  1100: 'var(--background-11)',
-  1200: 'var(--background-12)',
-}
-
-const sbui_brand = {
-  100: 'var(--brand-1)',
-  200: 'var(--brand-2)',
-  300: 'var(--brand-3)',
-  400: 'var(--brand-4)',
-  500: 'var(--brand-5)',
-  600: 'var(--brand-6)',
-  700: 'var(--brand-7)',
-  800: 'var(--brand-8)',
-  900: 'var(--brand-9)',
-  1000: 'var(--brand-10)',
-  1100: 'var(--brand-11)',
-  1200: 'var(--brand-12)',
-}
-
-const sbui_brand_fixed = {
-  100: 'var(--brand-fixed-1)',
-  200: 'var(--brand-fixed-2)',
-  300: 'var(--brand-fixed-3)',
-  400: 'var(--brand-fixed-4)',
-  500: 'var(--brand-fixed-5)',
-  600: 'var(--brand-fixed-6)',
-  700: 'var(--brand-fixed-7)',
-  800: 'var(--brand-fixed-8)',
-  900: 'var(--brand-fixed-9)',
-  1000: 'var(--brand-fixed-10)',
-  1100: 'var(--brand-fixed-11)',
-  1200: 'var(--brand-fixed-12)',
-}
-
-function generateRadixVariables() {
-  const colors = [
-    'brand',
-    'brand-fixed',
-    'scale',
-    'tomato',
-    'red',
-    'crimson',
-    'pink',
-    'plum',
-    'purple',
-    'violet',
-    'indigo',
-    'blue',
-    'cyan',
-    'teal',
-    'green',
-    'grass',
-    'brown',
-    'orange',
-    'sky',
-    'mint',
-    'lime',
-    'yellow',
-    'amber',
-    'gold',
-    'bronze',
-    'gray',
-    'mauve',
-    'slate',
-    'sage',
-    'olive',
-    'sand',
-  ]
-
-  let mappedColors = {}
-
-  colors.map((x) => {
-    mappedColors[x] = {}
-  })
-
-  colors.map((x) => {
-    for (let index = 0; index < 12; index++) {
-      const step = index + 1
-      mappedColors[x][step * 100] = `var(--colors-${x}${step})`
-    }
-  })
-
-  return mappedColors
-}
-
-const custom_colors = generateRadixVariables()
-
-// console.log('radix colors', custom_colors)
-
-const ui = require('./ui.config.js')
-
-module.exports = ui({
-  content: {
-    // enabled: true,
-    content: [
-      './src/**/**/*.{js,ts,jsx,tsx,html,mdx}',
-      './src/**/*.{js,ts,jsx,tsx,html,mdx}',
-      './src/**/*.{js,ts,jsx,tsx,html,mdx}',
-      './src/lib/theme/defaultTheme.ts',
-    ],
-    // safelist: ['space-x-1'],
-  },
-  darkMode: 'class',
-  theme: {
-    // colors: {
-    //   gray: { ...custom_colors.gray },
-    //   slate: { ...custom_colors.slate },
-    // },
-    extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            'code::before': {
-              content: '""',
-            },
-            'code::after': {
-              content: '""',
-            },
-          },
-        },
-      },
-      colors: {
-        /* 
-          main
-        */
-        ['brandColor']: '#EC6F0D',
-
-        ['brandScale']: { ...sbui_brand },
-        ['brandScaleFixed']: { ...sbui_brand_fixed },
-
-        // used for backgrounds
-        ['bgScale']: { ...sbui_background },
-        ['bgScaleDark']: { ...dark },
-
-        // used for borders, inputs and text
-        ['grayScale']: { ...sbui_border },
-        ['grayScaleDark']: { ...gray },
-
-        /* 
-          typography
-        */
-        'typography-body': {
-          light: coolGray[600],
-          dark: gray[100],
-        },
-        'typography-body-secondary': {
-          light: coolGray[500],
-          dark: gray[300],
-        },
-        'typography-body-strong': {
-          light: coolGray[100],
-          dark: 'white',
-        },
-        'typography-body-faded': {
-          light: coolGray[400],
-          dark: gray[400],
-        },
-
-        /* 
-          app backgrounds
-        */
-        'bg-primary': {
-          light: 'white',
-          dark: gray[800],
-        },
-        'bg-secondary': {
-          light: blueGray[100],
-          dark: gray[700],
-        },
-        'bg-alt': {
-          light: blueGray[50], // gray[100],
-          dark: gray[600],
-        },
-
-        /* 
-          Forms
-        */
-        'input-value': {
-          light: coolGray[600],
-          dark: gray[200],
-        },
-        'input-placeholder': {
-          light: coolGray[300],
-          dark: gray[400],
-        },
-        'input-border': {
-          light: coolGray[300],
-          dark: gray[500],
-        },
-        'input-label': {
-          light: coolGray[600],
-          dark: gray[200],
-        },
-        'input-border-hover': {
-          light: coolGray[400],
-          dark: gray[400],
-        },
-        'input-border-focus': {
-          light: brand[300],
-          dark: brand[300],
-        },
-
-        // ['brandColor']: '#7c3aed',
-        transparent: 'transparent',
-        current: 'currentColor',
-
-        black: '#000',
-        white: '#fff',
-
-        // gray: { ...gray },
-        // brand: { ...brand },
-        // blueGray: { ...blueGray },
-        // coolGray: { ...coolGray },
-
-        dark: {
-          100: '#eeeeee',
-          200: '#e0e0e0',
-          300: '#bbbbbb',
-          400: '#666666',
-          500: '#444444',
-          600: '#2a2a2a',
-          700: '#1f1f1f',
-          800: '#181818',
-          900: '#0f0f0f',
-        },
-
-        'secondary-text': {
-          light: '#71767F',
-          dark: '#878787',
-        },
-
-        // brand: {
-        //   50: '#82dab0',
-        //   100: '#82dab0',
-        //   200: '#69d3a0',
-        //   300: '#50cb90',
-        //   400: '#C5F1DD',
-        //   500: '#9FE7C7',
-        //   600: '#65D9A5',
-        //   700: '#3ECF8E',
-        //   800: '#24b47e', // green-500 in dashboard
-        //   900: '#2c9c6a',
-        // },
-
-        // ...custom_colors,
-      },
-
-      // transitionProperty: {
-      //   'max-height': 'max-height',
-      // },
-    },
-  },
-  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
-})
+module.exports = require('config/tailwind.config')
diff --git a/packages/ui/ui.config.js b/packages/ui/ui.config.js
deleted file mode 100644
index 63219022ff1..00000000000
--- a/packages/ui/ui.config.js
+++ /dev/null
@@ -1,399 +0,0 @@
-const deepMerge = require('deepmerge')
-const forms = require('@tailwindcss/forms')
-const plugin = require('tailwindcss/plugin')
-const radixUiColors = require('@radix-ui/colors')
-const brandColors = require('./default-colors')
-
-const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette')
-
-// console.log(Object.keys(radixUiColors))
-
-// generates fixed scales
-// based on the root/light mode version
-const fixedOptions = ['scale', 'scaleA', 'brand']
-
-function radixColorKeys() {
-  let keys = Object.keys(radixUiColors)
-
-  /**
-   * Filter array items based on search criteria (query)
-   */
-  function filterItems(arr, query) {
-    return arr.filter(function (el) {
-      return el.toLowerCase().indexOf(query.toLowerCase()) == -1
-    })
-  }
-
-  keys = filterItems(keys, 'Dark')
-
-  // console.log('radixColorKeys', keys)
-  return keys
-}
-
-function generateColorClasses() {
-  const brandColors = ['brand', 'scale', 'scaleA']
-  const colors = [...radixColorKeys(), ...brandColors]
-
-  let mappedColors = {}
-
-  // generate the shape of the colors object
-  colors.map((x) => {
-    // create empty obj for each color
-    mappedColors[x] = {}
-    // create empty obj for each fixed color
-    if (
-      fixedOptions.some(function (v) {
-        return x.indexOf(v) >= 0
-      })
-    ) {
-      mappedColors[`${x}-fixed`] = {}
-    }
-  })
-
-  colors.map((x) => {
-    for (let index = 0; index < 12; index++) {
-      const step = index + 1
-      mappedColors[x][step * 100] = `var(--colors-${x.toLowerCase()}${step})`
-
-      if (
-        fixedOptions.some(function (v) {
-          return x.indexOf(v) >= 0
-        })
-      ) {
-        // console.log(x)
-        mappedColors[`${x}-fixed`][step * 100] = `var(--colors-fixed-${x}${step})`
-      }
-    }
-  })
-
-  return mappedColors
-}
-
-const colorClasses = generateColorClasses()
-
-/*
- * generateCssVariables()
- *
- * generate the CSS variables for tailwind to use
- *
- */
-
-function generateCssVariables() {
-  // potential options
-  // { fixedOptions, brandColors }
-
-  let rootColors = {}
-  let darkColors = {}
-
-  const radixArray = Object.values(radixUiColors)
-  const brandArray = Object.values(brandColors)
-
-  function generateColors(colors, index, colorSet) {
-    const key = Object.keys(colorSet)[index]
-
-    if (key.includes('Dark')) {
-      darkColors = { ...darkColors, ...colors }
-    } else {
-      rootColors = { ...rootColors, ...colors }
-
-      // generate an optional 'fixed' scale of colors
-      if (
-        fixedOptions.some(function (v) {
-          return key.indexOf(v) >= 0
-        })
-      ) {
-        rootColors.fixed = { ...rootColors?.fixed, ...colors }
-      }
-    }
-  }
-
-  radixArray.map((x, i) => {
-    generateColors(x, i, radixUiColors)
-  })
-
-  brandArray.map((x, i) => {
-    generateColors(x, i, brandColors)
-  })
-
-  return {
-    root: { ...rootColors },
-    dark: { ...darkColors },
-  }
-}
-
-const variables = generateCssVariables()
-
-const uiConfig = {
-  theme: {
-    variables: {
-      DEFAULT: {
-        width: {
-          listbox: '320px',
-        },
-        colors: { ...variables.root },
-      },
-      '.dark': {
-        colors: { ...variables.dark },
-      },
-    },
-    extend: {
-      // dropdown extensions
-      transformOrigin: {
-        // tailwind class for this is `origin-dropdown`
-        dropdown: 'var(--radix-dropdown-menu-content-transform-origin)',
-        popover: 'var(--radix-popover-menu-content-transform-origin);',
-      },
-      width: {
-        listbox: 'var(--width-listbox);',
-      },
-      keyframes: {
-        fadeIn: {
-          '0%': { transform: 'scale(0.95)', opacity: 0 },
-          '100%': { transform: 'scale(1)', opacity: 1 },
-        },
-        fadeOut: {
-          '0%': { transform: 'scale(1)', opacity: 1 },
-          '100%': { transform: 'scale(0.95)', opacity: 0 },
-        },
-        overlayContentShow: {
-          '0%': { opacity: 0, transform: 'translate(0%, -2%) scale(.96)' },
-          '100%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
-        },
-        overlayContentHide: {
-          '0%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
-          '100%': { opacity: 0, transform: 'translate(0%, -2%) scale(.96)' },
-        },
-        dropdownFadeIn: {
-          '0%': { transform: 'scale(0.95)', opacity: 0 },
-          '100%': { transform: 'scale(1)', opacity: 1 },
-        },
-        dropdownFadeOut: {
-          '0%': { transform: 'scale(1)', opacity: 1 },
-          '100%': { transform: 'scale(0.95)', opacity: 0 },
-        },
-        fadeInOverlayBg: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 0.75 },
-        },
-        fadeOutOverlayBg: {
-          '0%': { opacity: 0.75 },
-          '100%': { opacity: 0 },
-        },
-        slideDown: {
-          '0%': { height: 0, opacity: 0 },
-          '100%': {
-            height: 'var(--radix-accordion-content-height)',
-            opacity: 1,
-          },
-        },
-        slideUp: {
-          '0%': { height: 'var(--radix-accordion-content-height)', opacity: 1 },
-          '100%': { height: 0, opacity: 0 },
-        },
-
-        slideDownNormal: {
-          '0%': { height: 0, opacity: 0 },
-          '100%': {
-            height: 'inherit',
-            opacity: 1,
-          },
-        },
-        slideUpNormal: {
-          '0%': { height: 'inherit', opacity: 1 },
-          '100%': { height: 0, opacity: 0 },
-        },
-
-        panelSlideLeftOut: {
-          '0%': { transform: 'translateX(-100%)', opacity: 0 },
-          '100%': {
-            transform: 'translate-x-0',
-            opacity: 1,
-          },
-        },
-        panelSlideLeftIn: {
-          '0%': { transform: 'translate-x-0', opacity: 1 },
-          '100%': { transform: 'translateX(-100%)', opacity: 0 },
-        },
-        panelSlideRightOut: {
-          '0%': { transform: 'translateX(100%)', opacity: 0 },
-          '100%': {
-            transform: 'translate-x-0',
-            opacity: 1,
-          },
-        },
-        panelSlideRightIn: {
-          '0%': { transform: 'translate-x-0', opacity: 1 },
-          '100%': { transform: 'translateX(100%)', opacity: 0 },
-        },
-      },
-      animation: {
-        'fade-in': 'fadeIn 300ms',
-        'fade-out': 'fadeOut 300ms',
-
-        'dropdown-content-show': 'overlayContentShow 100ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'dropdown-content-hide': 'overlayContentHide 100ms cubic-bezier(0.16, 1, 0.3, 1)',
-
-        'overlay-show': 'overlayContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'overlay-hide': 'overlayContentHide 300ms cubic-bezier(0.16, 1, 0.3, 1)',
-
-        'fade-in-overlay-bg': 'fadeInOverlayBg 300ms',
-        'fade-out-overlay-bg': 'fadeOutOverlayBg 300ms',
-
-        'slide-down': 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'slide-up': 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-
-        'slide-down-normal': 'slideDownNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'slide-up-normal': 'slideUpNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-
-        'panel-slide-left-out': 'panelSlideLeftOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'panel-slide-left-in': 'panelSlideLeftIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'panel-slide-right-out': 'panelSlideRightOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'panel-slide-right-in': 'panelSlideRightIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
-
-        // tailwind class for this is `animate-dropdownFadeIn`
-        dropdownFadeIn: 'dropdownFadeIn 0.1s ease-out',
-        // tailwind class for this is `animate-dropdownFadeOut`
-        dropdownFadeOut: 'dropdownFadeOut 0.1s ease-out',
-      },
-      colors: {
-        ...colorClasses,
-        'hi-contrast': `var(--colors-fixed-scale12)`,
-        'lo-contrast': `var(--colors-fixed-scale1)`,
-      },
-    },
-  },
-  plugins: [
-    require('@mertasan/tailwindcss-variables'),
-    function ({ addUtilities, addVariant }) {
-      // addVariant('data-open', '&:[data-state=open]')
-      addUtilities({
-        ".dropdown-content[data-state='open']": {
-          animation: 'fadeIn 50ms ease-out',
-        },
-        ".dropdown-content[data-state='closed']": {
-          animation: 'fadeOut 50ms ease-in',
-        },
-
-        "[data-state='open'] .accordion-content-animation": {
-          animation: 'slideDown 200ms ease-out',
-        },
-        "[data-state='closed'] .accordion-content-animation": {
-          animation: 'slideUp 200ms ease-in',
-        },
-        '.text-code': {
-          margin: '0 0.2em',
-          padding: '0.2em 0.4em 0.1em',
-          background: 'hsla(0, 0%, 58.8%, 0.1)',
-          border: '1px solid hsla(0, 0%, 39.2%, 0.2)',
-          borderRadius: '3px',
-        },
-        '.no-scrollbar': {
-          /* Hide scrollbar for IE, Edge*/
-          '-ms-overflow-style': 'none',
-
-          /* Firefox */
-          'scrollbar-width': 'none' /* Firefox */,
-
-          /* Hide scrollbar for Chrome, Safari and Opera */
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-        },
-        /* Add fadeout effect */
-        '.mask-fadeout-right': {
-          '-webkit-mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
-          'mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
-        },
-        '.mask-fadeout-left': {
-          '-webkit-mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
-          'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
-        },
-        'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button':
-          {
-            '-webkit-appearance': 'none',
-            margin: '0',
-          },
-      })
-      addVariant('data-open-parent', '[data-state="open"] &')
-      addVariant('data-closed-parent', '[data-state="closed"] &')
-      addVariant('data-open', '&[data-state="open"]')
-      addVariant('data-closed', '&[data-state="closed"]')
-      addVariant('data-show', '&[data-state="show"]')
-      addVariant('data-hide', '&[data-state="hide"]')
-      addVariant('data-checked', '&[data-state="checked"]')
-      addVariant('data-unchecked', '&[data-state="unchecked"]')
-      addVariant('aria-expanded', '&[aria-expanded="true"]')
-      // addVariant('parent-data-open', '[data-state="open"]&')
-    },
-    function ({ matchUtilities, theme }) {
-      matchUtilities(
-        {
-          highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),
-        },
-        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
-      ),
-        matchUtilities(
-          {
-            subhighlight: (value) => ({
-              boxShadow: `inset 0 -1px 0 0 ${value}`,
-            }),
-          },
-          {
-            values: flattenColorPalette(theme('backgroundColor')),
-            type: 'color',
-          }
-        ),
-        matchUtilities(
-          {
-            bordershadow: (value) => {
-              return {
-                boxShadow: `
-                var(--colors-blacka1) 0px 0px 0px 0px, 
-                var(--colors-blacka1) 0px 0px 0px 0px, 
-                var(--colors-blacka8) 0px 1px 1px 0px, 
-                ${value} 0px 0px 0px 1px, 
-                var(--colors-blacka1) 0px 0px 0px 0px, 
-                var(--colors-blacka1) 0px 0px 0px 0px, 
-                rgb(64 68 82 / 8%) 0px 2px 5px 0px;
-                `,
-              }
-            },
-          },
-          {
-            values: flattenColorPalette(theme('backgroundColor')),
-            type: 'color',
-          }
-        )
-    },
-    require('tailwindcss-radix')(),
-    forms,
-  ],
-}
-
-function arrayMergeFn(destinationArray, sourceArray) {
-  return destinationArray.concat(sourceArray).reduce((acc, cur) => {
-    if (acc.includes(cur)) return acc
-    return [...acc, cur]
-  }, [])
-}
-
-/**
- * Merge Supabase UI and Tailwind CSS configurations
- * @param {object} tailwindConfig - Tailwind config object
- * @return {object} new config object
- */
-function wrapper(tailwindConfig) {
-  let purge
-  if (Array.isArray(tailwindConfig.purge)) {
-    purge = {
-      content: tailwindConfig.purge,
-    }
-  } else {
-    purge = tailwindConfig.purge
-  }
-  return deepMerge({ ...tailwindConfig, purge }, uiConfig, {
-    arrayMerge: arrayMergeFn,
-  })
-}
-
-module.exports = wrapper
diff --git a/studio/.env b/studio/.env
index 66bb50c8cbe..8e5892b00b6 100644
--- a/studio/.env
+++ b/studio/.env
@@ -16,7 +16,6 @@ LOGFLARE_API_KEY=api-key
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 NEXT_PUBLIC_GOTRUE_URL=$SUPABASE_PUBLIC_URL/auth/v1
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY=10000000-ffff-ffff-ffff-000000000001
-NEXT_PUBLIC_ENABLE_LOGS=true
 
 # CmdK / AI
 NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhndWloeHV6cWlid3hqbmlteGV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzUwOTQ4MzUsImV4cCI6MTk5MDY3MDgzNX0.0PMlOxtKL4O9GGZuAP_Xl4f-Tut1qOnW4bNEmAtoB8w
diff --git a/studio/components/grid/components/menu/RowContextMenu.tsx b/studio/components/grid/components/menu/RowContextMenu.tsx
index b8f4023a4d2..7e45bad08d9 100644
--- a/studio/components/grid/components/menu/RowContextMenu.tsx
+++ b/studio/components/grid/components/menu/RowContextMenu.tsx
@@ -1,4 +1,4 @@
-import { Menu, Item, ItemParams, PredicateParams } from 'react-contexify'
+import { Menu, Item, ItemParams, PredicateParams, Separator } from 'react-contexify'
 import { IconTrash, IconClipboard, IconEdit } from 'ui'
 import { useDispatch, useTrackedState } from '../../store'
 import { formatClipboardValue, copyToClipboard } from '../../utils'
@@ -84,11 +84,7 @@ const RowContextMenu = ({ table, rows }: RowContextMenuProps) => {
 
   return (
     <>
-      <Menu
-        id={ROW_CONTEXT_MENU_ID}
-        animation={false}
-        className="!bg-scale-300 border border-scale-500"
-      >
+      <Menu id={ROW_CONTEXT_MENU_ID} animation={false}>
         <Item onClick={onCopyCellContent}>
           <IconClipboard size="tiny" />
           <span className="ml-2 text-xs">Copy cell content</span>
@@ -97,6 +93,7 @@ const RowContextMenu = ({ table, rows }: RowContextMenuProps) => {
           <IconEdit size="tiny" />
           <span className="ml-2 text-xs">Edit row</span>
         </Item>
+        <Separator />
         <Item onClick={onDeleteRow} hidden={isItemHidden} data="delete">
           <IconTrash size="tiny" stroke="red" />
           <span className="ml-2 text-xs">Delete row</span>
diff --git a/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
index 8483d0df26d..8f163297628 100644
--- a/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
+++ b/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
@@ -14,7 +14,7 @@ const RedirectUrls = () => {
   const { authConfig, ui } = useStore()
 
   const URI_ALLOW_LIST_ARRAY = authConfig.config.URI_ALLOW_LIST
-    ? authConfig.config.URI_ALLOW_LIST.split(',')
+    ? authConfig.config.URI_ALLOW_LIST.split(/\s*[,]+\s*/).filter((url: string) => url)
     : []
 
   const [open, setOpen] = useState(false)
@@ -28,9 +28,14 @@ const RedirectUrls = () => {
   })
 
   const onAddNewUrl = async (values: any, { setSubmitting }: any) => {
+    if (!values.url) {
+      return
+    }
+
     setSubmitting(true)
     const payload = URI_ALLOW_LIST_ARRAY
-    payload.push(values.url)
+    // remove any trailing commas
+    payload.push(values.url.replace(/,\s*$/, ''))
 
     const payloadString = payload.toString()
 
diff --git a/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx b/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
index 16385900ce6..76cf60caba5 100644
--- a/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
+++ b/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
@@ -24,6 +24,24 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
     return (
       <div className="bg-table-header-light dark:bg-table-header-dark">
         <p className="m-0 border-0 px-6 py-4 font-mono">{result.error.message ?? result.error}</p>
+        {(result.error.message ?? result.error)?.includes(
+          'canceling statement due to statement timeout'
+        ) && (
+          <p className="m-0 border-0 px-6 py-4 font-mono">
+            You can either{' '}
+            <a
+              className="underline"
+              href="https://supabase.com/docs/guides/platform/performance#examining-query-performance"
+            >
+              optimize your query
+            </a>
+            , or{' '}
+            <a className="underline" href="https://supabase.com/docs/guides/database/timeouts">
+              increase the statement timeout
+            </a>
+            .
+          </p>
+        )}
       </div>
     )
   } else if (!result) {
diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index c1cb707456d..4801a389379 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -667,4 +667,4 @@ export const TIER_QUERY_LIMITS: {
   ENTERPRISE: { text: '90 days', value: 90, unit: 'day', promptUpgrade: false },
 }
 
-export const SHOW_O11Y = IS_PLATFORM ? true : process.env.NEXT_PUBLIC_ENABLE_LOGS == 'true'
+export const SHOW_O11Y = IS_PLATFORM || process.env.NEXT_PUBLIC_ENABLE_LOGS == 'true'
diff --git a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index 0168c0234b2..7258a5e9a2a 100644
--- a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -131,7 +131,7 @@ const LogsQueryPanel = ({
                 <Button type="default" onClick={onClear}>
                   Clear query
                 </Button>
-                {IS_PLATFORM &&  onSave && (
+                {IS_PLATFORM && onSave && (
                   <Tooltip.Root delayDuration={0}>
                     <Tooltip.Trigger>
                       <Button
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index cca74f59704..eeb1a84654a 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -214,7 +214,7 @@ const Column: FC<Props> = ({
                     </>
                   )}
 
-                  {isNewRecord && (
+                  {column.isNewColumn && (
                     <>
                       <Checkbox
                         label="Is Unique"
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index f6eaad649a7..0d25a24ef4f 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -97,7 +97,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                   <div className="ml-2">
                     <Link href={`/project/${projectRef}/settings/billing/usage`}>
                       <a>
-                        <Badge color="red">Project has exceeded usage limits </Badge>
+                        <Badge color="red">Exceeding usage limits</Badge>
                       </a>
                     </Link>
                   </div>
diff --git a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js b/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js
deleted file mode 100644
index e64e062da57..00000000000
--- a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from 'react'
-import { Modal } from 'ui'
-
-export default function ConfirmModal({
-  title,
-  message,
-  onConfirm,
-  onClose,
-  onAsyncConfirm,
-  visible,
-}) {
-  const [loading, setLoading] = useState(false)
-
-  function onCancelClick() {
-    if (!loading) onClose()
-  }
-
-  async function onConfirmClick() {
-    if (onAsyncConfirm) {
-      setLoading(true)
-      await onAsyncConfirm()
-
-      onClose()
-    } else if (onConfirm) {
-      onConfirm()
-    }
-  }
-
-  return (
-    <Modal
-      variant="warning"
-      visible={visible}
-      title={title}
-      description={message}
-      showIcon={false}
-      size="small"
-      onConfirmText="OK"
-      onCancelText="Cancel"
-      onCancel={onCancelClick}
-      onConfirm={onConfirmClick}
-      loading={loading}
-    />
-  )
-}
diff --git a/studio/components/to-be-cleaned/ModalsDeprecated/Modal.js b/studio/components/to-be-cleaned/ModalsDeprecated/Modal.js
deleted file mode 100644
index e4ea5e741ce..00000000000
--- a/studio/components/to-be-cleaned/ModalsDeprecated/Modal.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Transition } from '@headlessui/react'
-import { clickOutsideListener, useKeyboardShortcuts } from 'hooks'
-
-/**
- * Base modal with trigger button and close button
- *
- * @param {Boolean}                     open              // The parent should hold the open state
- * @param {Function}                    handleCloseEvent  // Delegate the close event to the parent
- * @param {JSX.Element|JSX.Element[]}   children
- */
-
-export default function Modal({ children, open, handleCloseEvent }) {
-  const ref = clickOutsideListener(handleCloseEvent)
-
-  useKeyboardShortcuts({
-    Escape: handleCloseEvent,
-  })
-
-  return (
-    <div className="relative">
-      <Transition
-        show={open}
-        enter="ease-out duration-200"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="ease-in duration-200"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <div className="fixed z-50 inset-0 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div className="fixed inset-0 transition-opacity">
-              <div className="absolute inset-0 bg-black opacity-75"></div>
-            </div>
-            <div className="absolute top-0 right-0 pt-4 pr-4">
-              <button type="button" aria-label="Close">
-                <svg
-                  className="h-6 w-6 text-gray-200"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-
-            <div
-              ref={ref}
-              className="flex justify-center items-center w-full h-screen"
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="modal-headline"
-              style={{
-                maxHeight: '100vh',
-                overflow: 'auto',
-              }}
-            >
-              <div className="text-left rounded m-auto shadow-xl transform transition-all bg-gray-700 w-[28rem]">
-                {children}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  )
-}
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.tsx
index 4f13edbf96b..b23ece8c300 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.tsx
@@ -10,7 +10,14 @@ import {
   STORAGE_ROW_TYPES,
 } from '../Storage.constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import { IconFolderPlus } from 'ui'
+import {
+  IconEye,
+  IconChevronRight,
+  IconFolderPlus,
+  IconClipboard,
+  IconChevronsUp,
+  IconChevronsDown,
+} from 'ui'
 
 interface Props {
   id: string
@@ -57,21 +64,24 @@ const ColumnContextMenu: FC<Props> = ({ id = '' }) => {
   }
 
   return (
-    <Menu id={id} animation="fade" className="!bg-scale-300 border border-scale-500">
+    <Menu id={id} animation="fade">
       <Item onClick={({ props }) => onSelectCreateFolder(props.index)}>
         <IconFolderPlus size="tiny" />
         <span className="ml-2 text-xs">New folder</span>
       </Item>
       <Separator />
       <Item onClick={({ props }) => onSelectAllItemsInColumn(props.index)}>
+        <IconClipboard size="tiny" />
         <span className="ml-2 text-xs">Select all items</span>
       </Item>
       <Submenu
         label={
-          <div>
-            <span className="ml-2 text-xs">View</span>
+          <div className="flex items-center space-x-2">
+            <IconEye size="tiny" />
+            <span className="text-xs">View</span>
           </div>
         }
+        arrow={<IconChevronRight size="tiny" />}
       >
         <Item onClick={() => setView(STORAGE_VIEWS.COLUMNS)}>
           <span className="ml-2 text-xs">As columns</span>
@@ -82,10 +92,12 @@ const ColumnContextMenu: FC<Props> = ({ id = '' }) => {
       </Submenu>
       <Submenu
         label={
-          <div>
+          <div className="flex items-center space-x-2">
+            <IconChevronsDown size="tiny" />
             <span className="ml-2 text-xs">Sort by</span>
           </div>
         }
+        arrow={<IconChevronRight size="tiny" />}
       >
         <Item onClick={() => setSortBy(STORAGE_SORT_BY.NAME)}>
           <span className="ml-2 text-xs">Name</span>
@@ -102,10 +114,12 @@ const ColumnContextMenu: FC<Props> = ({ id = '' }) => {
       </Submenu>
       <Submenu
         label={
-          <div>
+          <div className="flex items-center space-x-2">
+            <IconChevronsUp size="tiny" />
             <span className="ml-2 text-xs">Sort by order</span>
           </div>
         }
+        arrow={<IconChevronRight size="tiny" />}
       >
         <Item onClick={() => setSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}>
           <span className="ml-2 text-xs">Ascending</span>
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
index a396c81f47a..10f92cc7b3e 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.tsx
@@ -17,7 +17,7 @@ const FolderContextMenu: FC<Props> = ({ id = '' }) => {
   const canUpdateFiles = checkPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
 
   return (
-    <Menu id={id} animation="fade" className="!bg-scale-300 border border-scale-500">
+    <Menu id={id} animation="fade">
       {canUpdateFiles && (
         <Item onClick={({ props }) => setSelectedItemToRename(props.item)}>
           <IconEdit size="tiny" />
@@ -31,7 +31,7 @@ const FolderContextMenu: FC<Props> = ({ id = '' }) => {
       {canUpdateFiles && [
         <Separator />,
         <Item onClick={({ props }) => setSelectedItemsToDelete([props.item])}>
-          <IconTrash2 size="tiny" />
+          <IconTrash2 size="tiny" stroke="red" />
           <span className="ml-2 text-xs">Delete</span>
         </Item>,
       ]}
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.tsx
index 7d1b090565d..bd0ad8fec92 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.tsx
@@ -45,7 +45,7 @@ const ItemContextMenu: FC<Props> = ({ id = '' }) => {
   }
 
   return (
-    <Menu id={id} animation="fade" className="!bg-scale-300 border border-scale-500">
+    <Menu id={id} animation="fade">
       {isPublic ? (
         <Item onClick={({ props }) => onHandleClick('copy', props.item)}>
           <IconClipboard size="tiny" />
@@ -96,7 +96,7 @@ const ItemContextMenu: FC<Props> = ({ id = '' }) => {
         </Item>,
         <Separator key="file-separator" />,
         <Item key="delete-file" onClick={({ props }) => setSelectedItemsToDelete([props.item])}>
-          <IconTrash2 size="tiny" />
+          <IconTrash2 size="tiny" stroke="red" />
           <span className="ml-2 text-xs">Delete</span>
         </Item>,
       ]}
diff --git a/studio/components/ui/PageTelemetry.tsx b/studio/components/ui/PageTelemetry.tsx
index 200eff94301..bc819a6d77a 100644
--- a/studio/components/ui/PageTelemetry.tsx
+++ b/studio/components/ui/PageTelemetry.tsx
@@ -10,8 +10,9 @@ const PageTelemetry: FC = ({ children }) => {
   const { ui } = useStore()
 
   useEffect(() => {
-    function handleRouteChange(url: string) {
-      handlePageTelemetry(url)
+    function handleRouteChange() {
+      // We want to send dynamic route path
+      handlePageTelemetry(router.route)
     }
 
     // Listen for page changes after a navigation or when the query changes
@@ -19,18 +20,19 @@ const PageTelemetry: FC = ({ children }) => {
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [router.events])
+  }, [router])
 
   useEffect(() => {
-    /**
-     * Send page telemetry on first page load
-     * if the route is not ready. Don't need to send it will be picked up by router.event above
-     */
-    if (router.isReady) {
-      handlePageTelemetry(router.asPath)
-    }
+    // Send page telemetry on first page load
+    // We want to send dynamic route path
+    handlePageTelemetry(router.route)
   }, [])
 
+  /**
+   * send page_view event
+   *
+   * @param route: dynamic route path. Don't use the browser url
+   * */
   const handlePageTelemetry = async (route?: string) => {
     if (IS_PLATFORM) {
       /**
@@ -40,9 +42,6 @@ const PageTelemetry: FC = ({ children }) => {
 
       /**
        * Send page telemetry
-       *
-       * TODO: document.title is lagging behind routeChangeComplete
-       * that means the page title is the previous one instead of the new page title
        */
       post(`${API_URL}/telemetry/page`, {
         referrer: referrer,
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index 2f462f2f535..6651b06fcaf 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -181,7 +181,7 @@ const JoinOrganizationPage = () => {
       </div>
 
       <div
-        className={['border-t border-scale-400', isError ? 'bg-sand-100' : 'bg-transparent'].join(
+        className={['border-t border-scale-400', isError ? 'bg-scale-100' : 'bg-transparent'].join(
           ' '
         )}
       >
diff --git a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
index a5d6d7118be..750ff44fa62 100644
--- a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
+++ b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
@@ -24,6 +24,12 @@ const PROVIDER_EMAIL = {
       If disabled, only the new email is required to confirm.`,
       type: 'boolean',
     },
+    SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: {
+      title: 'Secure password change',
+      description: `Users will need to be recently logged in to change their password.
+      If disabled, a user can change their password at any time.`,
+      type: 'boolean',
+    },
     MAILER_OTP_EXP: {
       title: 'Mailer OTP Expiration',
       type: 'number',
diff --git a/studio/stores/pgmeta/MetaStore.ts b/studio/stores/pgmeta/MetaStore.ts
index cbd0f68ff70..6a5746e1be2 100644
--- a/studio/stores/pgmeta/MetaStore.ts
+++ b/studio/stores/pgmeta/MetaStore.ts
@@ -288,8 +288,8 @@ export default class MetaStore implements IMetaStore {
   }
 
   async addPrimaryKey(schema: string, table: string, columns: string[]) {
-    const primaryKeyColumns = columns.join(',')
-    const query = `ALTER TABLE "${schema}"."${table}" ADD PRIMARY KEY (${primaryKeyColumns})`
+    const primaryKeyColumns = columns.join('","')
+    const query = `ALTER TABLE "${schema}"."${table}" ADD PRIMARY KEY ("${primaryKeyColumns}")`
     return await this.query(query)
   }
 
@@ -498,11 +498,15 @@ export default class MetaStore implements IMetaStore {
           const removePK = await this.removePrimaryKey(column.schema, column.table)
           if (removePK.error) throw removePK.error
         }
+
         const primaryKeyColumns = isPrimaryKey
           ? existingPrimaryKeys.concat([column.name])
           : existingPrimaryKeys.filter((x) => x !== column.name)
-        const addPK = await this.addPrimaryKey(column.schema, column.table, primaryKeyColumns)
-        if (addPK.error) throw addPK.error
+
+        if (primaryKeyColumns.length) {
+          const addPK = await this.addPrimaryKey(column.schema, column.table, primaryKeyColumns)
+          if (addPK.error) throw addPK.error
+        }
       }
 
       // For updating of foreign key relationship, we remove the original one by default
@@ -647,7 +651,7 @@ export default class MetaStore implements IMetaStore {
       // Then add the primary key constraints here to support composite keys
       const primaryKeyColumns = columns
         .filter((column: ColumnField) => column.isPrimaryKey)
-        .map((column: ColumnField) => `"${column.name}"`)
+        .map((column: ColumnField) => column.name)
       if (primaryKeyColumns.length > 0) {
         const primaryKeys = await this.addPrimaryKey(table.schema, table.name, primaryKeyColumns)
         if (primaryKeys.error) throw primaryKeys.error
@@ -747,11 +751,9 @@ export default class MetaStore implements IMetaStore {
     // Prepare a check to see if primary keys to the tables were updated or not
     const primaryKeyColumns = columns
       .filter((column) => column.isPrimaryKey)
-      .map((column) => `"${column.name}"`)
+      .map((column) => column.name)
     // @ts-ignore
-    const existingPrimaryKeyColumns = table.primary_keys.map(
-      (pk: PostgresPrimaryKey) => `"${pk.name}"`
-    )
+    const existingPrimaryKeyColumns = table.primary_keys.map((pk: PostgresPrimaryKey) => pk.name)
     const isPrimaryKeyUpdated = !isEqual(primaryKeyColumns, existingPrimaryKeyColumns)
 
     if (isPrimaryKeyUpdated) {
diff --git a/studio/styles/contextMenu.scss b/studio/styles/contextMenu.scss
index 418b2fcd9a0..2acf83d7d31 100644
--- a/studio/styles/contextMenu.scss
+++ b/studio/styles/contextMenu.scss
@@ -1,5 +1,5 @@
 .react-contexify {
-  @apply dark:bg-gray-700;
+  @apply dark:bg-scale-300 border border-scale-500;
   .react-contexify__item {
     .react-contexify__item__content {
       @apply dark:text-white text-sm;