Merge branch 'master' into chore/improve-search-input-table-editor

apps/docs/content/guides/auth/social-login/auth-apple.mdx

@@ -240,15 +240,16 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
     1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
     2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
 
-    <Admonition type="note">
-
-    If you're building a native app only, you do not need to configure the OAuth settings.
-
-    </Admonition>
-
     ## Apple sign in on Android, Web, Windows and Linux
 
     For platforms that doesn't support native Apple sign in, you can use the `signInWithOAuth()` method to perform the Apple sign in.
+
+    <Admonition type="note">
+
+    Do **NOT** follow the Android or Web setup instructions on [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package README for these platforms.　sign_in_with_apple package is not used for performing Apple sign-in on non-Apple platforms for Supabase.
+
+    </Admonition>
+
     This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via [deep linking](/docs/guides/auth/native-mobile-deep-linking?platform=flutter).
 
     ```dart

apps/docs/next.config.mjs

@@ -68,6 +68,7 @@ const nextConfig = {
     'mdx-mermaid',
     'dayjs',
     'shared-data',
+    'icons',
   ],
   async headers() {
     return [

apps/docs/package.json

@@ -68,6 +68,7 @@
     "remark-gfm": "^3.0.1",
     "shared-data": "*",
     "ui": "*",
+    "icons": "*",
     "ui-patterns": "*",
     "unist-builder": "^3.0.1",
     "unist-util-filter": "^4.0.1",

apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx

@@ -4,7 +4,6 @@ import { AnimatePresence, motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import Split from 'react-split'
 import { format } from 'sql-formatter'
 
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
@@ -20,7 +19,6 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { isError } from 'data/utils/error-check'
 import {
   useFlag,
-  useLocalStorage,
   useLocalStorageQuery,
   useSelectedOrganization,
   useSelectedProject,
@@ -50,6 +48,9 @@ import {
   IconSettings,
   IconX,
   Input_Shadcn_,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
   cn,
 } from 'ui'
 import { subscriptionHasHipaaAddon } from '../Billing/Subscription/Subscription.utils'
@@ -178,13 +179,6 @@ const SQLEditor = () => {
 
   const isDiffOpen = !!sqlDiff
 
-  const [savedSplitSize, setSavedSplitSize] = useLocalStorage(
-    LOCAL_STORAGE_KEYS.SQL_EDITOR_SPLIT_SIZE,
-    `[50, 50]`
-  )
-
-  const splitSize = savedSplitSize ? JSON.parse(savedSplitSize) : undefined
-
   const { mutate: execute, isLoading: isExecuting } = useExecuteSqlMutation({
     onSuccess(data) {
       if (id) snap.addResult(id, data.result)
@@ -230,20 +224,10 @@ const SQLEditor = () => {
     },
   })
 
-  const minSize = 44
   const snippet = id ? snap.snippets[id] : null
-  const snapOffset = 50
 
   const isLoading = urlId === 'new' ? false : !(id && ref && snap.loaded[ref])
 
-  const onDragEnd = useCallback(
-    (sizes: number[]) => {
-      if (id) snap.setSplitSizes(id, sizes)
-      setSavedSplitSize(JSON.stringify(sizes))
-    },
-    [id]
-  )
-
   const editorRef = useRef<IStandaloneCodeEditor | null>(null)
   const monacoRef = useRef<Monaco | null>(null)
   const diffEditorRef = useRef<IStandaloneDiffEditor | null>(null)
@@ -866,19 +850,12 @@ const SQLEditor = () => {
             </motion.div>
           </AISchemaSuggestionPopover>
         )}
-        <Split
-          style={{ height: '100%' }}
+        <ResizablePanelGroup
+          className="h-full"
           direction="vertical"
-          gutterSize={2}
-          sizes={
-            (splitSize ? splitSize : (snippet?.splitSizes as number[] | undefined)) ?? [50, 50]
-          }
-          minSize={minSize}
-          snapOffset={snapOffset}
-          expandToMin={true}
-          onDragEnd={onDragEnd}
+          autoSaveId={LOCAL_STORAGE_KEYS.SQL_EDITOR_SPLIT_SIZE}
         >
-          <div className="flex-grow overflow-y-auto border-b">
+          <ResizablePanel collapsible collapsedSize={10} minSize={20}>
             {!isAiOpen && (
               <motion.button
                 layoutId="ask-ai-input-icon"
@@ -1006,8 +983,9 @@ const SQLEditor = () => {
                 </motion.div>
               </>
             )}
-          </div>
-          <div className="flex flex-col">
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel collapsible collapsedSize={10} minSize={20}>
             {isLoading ? (
               <div className="flex h-full w-full items-center justify-center">Loading...</div>
             ) : (
@@ -1020,8 +998,8 @@ const SQLEditor = () => {
                 executeQuery={executeQuery}
               />
             )}
-          </div>
-        </Split>
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
     </SQLEditorContext.Provider>
   )

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -40,6 +40,11 @@ import {
 import ColumnForeignKey from './ColumnForeignKey'
 import ColumnType from './ColumnType'
 import HeaderTitle from './HeaderTitle'
+import {
+  CONSTRAINT_TYPE,
+  Constraint,
+  useTableConstraintsQuery,
+} from 'data/database/constraints-query'
 
 export interface ColumnEditorProps {
   column?: PostgresColumn
@@ -50,7 +55,8 @@ export interface ColumnEditorProps {
     payload: CreateColumnPayload | UpdateColumnPayload,
     isNewRecord: boolean,
     configuration: {
-      columnId: string | undefined
+      columnId?: string
+      primaryKey?: Constraint
     },
     resolve: any
   ) => void
@@ -80,6 +86,16 @@ const ColumnEditor = ({
     (type) => !EXCLUDED_SCHEMAS_WITHOUT_EXTENSIONS.includes(type.schema)
   )
 
+  const { data: constraints } = useTableConstraintsQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+    schema: selectedTable?.schema,
+    table: selectedTable?.name,
+  })
+  const primaryKey = (constraints ?? []).find(
+    (constraint) => constraint.type === CONSTRAINT_TYPE.PRIMARY_KEY_CONSTRAINT
+  )
+
   const { data } = useForeignKeyConstraintsQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
@@ -131,7 +147,7 @@ const ColumnEditor = ({
         const payload = isNewRecord
           ? generateCreateColumnPayload(selectedTable.id, columnFields)
           : generateUpdateColumnPayload(column!, selectedTable, columnFields)
-        const configuration = { columnId: column?.id }
+        const configuration = { columnId: column?.id, primaryKey }
         saveChanges(payload, isNewRecord, configuration, resolve)
       } else {
         resolve()

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx

@@ -38,6 +38,7 @@ import {
   updateTable,
 } from './SidePanelEditor.utils'
 import { ImportContent } from './TableEditor/TableEditor.types'
+import { Constraint } from 'data/database/constraints-query'
 
 export interface SidePanelEditorProps {
   editable?: boolean
@@ -201,11 +202,11 @@ const SidePanelEditor = ({
   const saveColumn = async (
     payload: CreateColumnPayload | UpdateColumnPayload,
     isNewRecord: boolean,
-    configuration: { columnId?: string },
+    configuration: { columnId?: string; primaryKey?: Constraint },
     resolve: any
   ) => {
     const selectedColumnToEdit = snap.sidePanel?.type === 'column' && snap.sidePanel.column
-    const { columnId } = configuration
+    const { columnId, primaryKey } = configuration
 
     const response = isNewRecord
       ? await createColumn({
@@ -213,6 +214,7 @@ const SidePanelEditor = ({
           connectionString: project?.connectionString,
           payload: payload as CreateColumnPayload,
           selectedTable: selectedTable as PostgresTable,
+          primaryKey,
         })
       : await updateColumn({
           projectRef: project?.ref!,
@@ -220,6 +222,7 @@ const SidePanelEditor = ({
           id: columnId as string,
           payload: payload as UpdateColumnPayload,
           selectedTable: selectedTable as PostgresTable,
+          primaryKey,
         })
 
     if (response?.error) {
@@ -361,6 +364,7 @@ const SidePanelEditor = ({
       isRealtimeEnabled: boolean
       isDuplicateRows: boolean
       existingForeignKeyRelations: ForeignKeyConstraint[]
+      primaryKey?: Constraint
     },
     resolve: any
   ) => {
@@ -372,6 +376,7 @@ const SidePanelEditor = ({
       isRealtimeEnabled,
       isDuplicateRows,
       existingForeignKeyRelations,
+      primaryKey,
     } = configuration
 
     try {
@@ -436,6 +441,7 @@ const SidePanelEditor = ({
           columns,
           foreignKeyRelations,
           existingForeignKeyRelations,
+          primaryKey,
         })
 
         await updateTableRealtime(table, isRealtimeEnabled)

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx

@@ -33,6 +33,7 @@ import { ForeignKey } from './ForeignKeySelector/ForeignKeySelector.types'
 import { ColumnField, CreateColumnPayload, UpdateColumnPayload } from './SidePanelEditor.types'
 import { checkIfRelationChanged } from './TableEditor/ForeignKeysManagement/ForeignKeysManagement.utils'
 import { ImportContent } from './TableEditor/TableEditor.types'
+import { Constraint } from 'data/database/constraints-query'
 
 const BATCH_SIZE = 1000
 const CHUNK_SIZE = 1024 * 1024 * 0.1 // 0.1MB
@@ -112,18 +113,19 @@ export const addPrimaryKey = async (
   })
 }
 
-export const removePrimaryKey = async (
+export const dropConstraint = async (
   projectRef: string,
   connectionString: string | undefined,
   schema: string,
-  table: string
+  table: string,
+  name: string
 ) => {
-  const query = `ALTER TABLE "${schema}"."${table}" DROP CONSTRAINT "${table}_pkey"`
+  const query = `ALTER TABLE "${schema}"."${table}" DROP CONSTRAINT "${name}"`
   return await executeSql({
     projectRef: projectRef,
     connectionString: connectionString,
     sql: query,
-    queryKey: ['primary-keys'],
+    queryKey: ['drop-constraint'],
   })
 }
 
@@ -266,11 +268,13 @@ export const createColumn = async ({
   connectionString,
   payload,
   selectedTable,
+  primaryKey,
 }: {
   projectRef: string
   connectionString: string | undefined
   payload: CreateColumnPayload
   selectedTable: PostgresTable
+  primaryKey?: Constraint
 }) => {
   const toastId = toast.loading(`Creating column "${payload.name}"...`)
   try {
@@ -288,8 +292,14 @@ export const createColumn = async ({
       // Same logic in createTable: Remove any primary key constraints first (we'll add it back later)
       const existingPrimaryKeys = selectedTable.primary_keys.map((x) => x.name)
 
-      if (existingPrimaryKeys.length > 0) {
-        await removePrimaryKey(projectRef, connectionString, column.schema, column.table)
+      if (existingPrimaryKeys.length > 0 && primaryKey !== undefined) {
+        await dropConstraint(
+          projectRef,
+          connectionString,
+          column.schema,
+          column.table,
+          primaryKey.name
+        )
       }
 
       const primaryKeyColumns = existingPrimaryKeys.concat([column.name])
@@ -314,6 +324,7 @@ export const updateColumn = async ({
   id,
   payload,
   selectedTable,
+  primaryKey,
   skipPKCreation,
   skipSuccessMessage = false,
 }: {
@@ -322,6 +333,7 @@ export const updateColumn = async ({
   id: string
   payload: UpdateColumnPayload
   selectedTable: PostgresTable
+  primaryKey?: Constraint
   skipPKCreation?: boolean
   skipSuccessMessage?: boolean
 }) => {
@@ -338,8 +350,14 @@ export const updateColumn = async ({
       const existingPrimaryKeys = selectedTable.primary_keys.map((x) => x.name)
 
       // Primary key is getting updated for the column
-      if (existingPrimaryKeys.length > 0) {
-        await removePrimaryKey(projectRef, connectionString, column.schema, column.table)
+      if (existingPrimaryKeys.length > 0 && primaryKey !== undefined) {
+        await dropConstraint(
+          projectRef,
+          connectionString,
+          column.schema,
+          column.table,
+          primaryKey.name
+        )
       }
 
       const primaryKeyColumns = isPrimaryKey
@@ -632,6 +650,7 @@ export const updateTable = async ({
   columns,
   foreignKeyRelations,
   existingForeignKeyRelations,
+  primaryKey,
 }: {
   projectRef: string
   connectionString: string | undefined
@@ -641,6 +660,7 @@ export const updateTable = async ({
   columns: ColumnField[]
   foreignKeyRelations: ForeignKey[]
   existingForeignKeyRelations: ForeignKeyConstraint[]
+  primaryKey?: Constraint
 }) => {
   // Prepare a check to see if primary keys to the tables were updated or not
   const primaryKeyColumns = columns
@@ -655,8 +675,8 @@ export const updateTable = async ({
     // If we do it later, and if the user deleted a PK column, we'd need to do
     // an additional check when removing PK if the column in the PK was removed
     // So doing this one step earlier, lets us skip that additional check.
-    if (table.primary_keys.length > 0) {
-      await removePrimaryKey(projectRef, connectionString, table.schema, table.name)
+    if (primaryKey !== undefined) {
+      await dropConstraint(projectRef, connectionString, table.schema, table.name, primaryKey.name)
     }
   }
 

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx

@@ -32,6 +32,11 @@ import {
   generateTableFieldFromPostgresTable,
   validateFields,
 } from './TableEditor.utils'
+import {
+  CONSTRAINT_TYPE,
+  Constraint,
+  useTableConstraintsQuery,
+} from 'data/database/constraints-query'
 
 export interface TableEditorProps {
   table?: PostgresTable
@@ -54,6 +59,7 @@ export interface TableEditorProps {
       isRealtimeEnabled: boolean
       isDuplicateRows: boolean
       existingForeignKeyRelations: ForeignKeyConstraint[]
+      primaryKey?: Constraint
     },
     resolve: any
   ) => void
@@ -103,6 +109,16 @@ const TableEditor = ({
   const [isImportingSpreadsheet, setIsImportingSpreadsheet] = useState<boolean>(false)
   const [rlsConfirmVisible, setRlsConfirmVisible] = useState<boolean>(false)
 
+  const { data: constraints } = useTableConstraintsQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+    schema: table?.schema,
+    table: table?.name,
+  })
+  const primaryKey = (constraints ?? []).find(
+    (constraint) => constraint.type === CONSTRAINT_TYPE.PRIMARY_KEY_CONSTRAINT
+  )
+
   const { data: foreignKeyMeta } = useForeignKeyConstraintsQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
@@ -173,6 +189,7 @@ const TableEditor = ({
           isRealtimeEnabled: tableFields.isRealtimeEnabled,
           isDuplicateRows: isDuplicateRows,
           existingForeignKeyRelations: foreignKeys,
+          primaryKey,
         }
 
         saveChanges(payload, tableFields.columns, fkRelations, isNewRecord, configuration, resolve)

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

@@ -39,6 +39,10 @@ import {
   generateToolRoutes,
 } from './NavigationBar.utils'
 import NavigationIconButton from './NavigationIconButton'
+import { Home } from 'icons'
+
+export const ICON_SIZE = 20
+export const ICON_STROKE_WIDTH = 1.5
 
 const NavigationBar = () => {
   const os = detectOS()
@@ -96,7 +100,7 @@ const NavigationBar = () => {
           route={{
             key: 'HOME',
             label: 'Home',
-            icon: <IconHome size={18} strokeWidth={2} />,
+            icon: <Home size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: `/project/${projectRef}`,
           }}
         />

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx

@@ -1,10 +1,20 @@
-import SVG from 'react-inlinesvg'
-import { products } from 'shared-data'
-import { IconBarChart, IconFileText, IconList, IconSettings } from 'ui'
-
 import { Route } from 'components/ui/ui.types'
 import { Project } from 'data/projects/project-detail-query'
-import { BASE_PATH, IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import {
+  ApiDocs,
+  Auth,
+  Database,
+  EdgeFunctions,
+  Logs,
+  Realtime,
+  Reports,
+  Settings,
+  SqlEditor,
+  Storage,
+  TableEditor,
+} from 'icons'
+import { ICON_SIZE, ICON_STROKE_WIDTH } from './NavigationBar'
 
 export const generateToolRoutes = (ref?: string, project?: Project): Route[] => {
   const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
@@ -14,25 +24,13 @@ export const generateToolRoutes = (ref?: string, project?: Project): Route[] =>
     {
       key: 'editor',
       label: 'Table Editor',
-      icon: (
-        <SVG
-          src={`${BASE_PATH}/img/table-editor.svg`}
-          style={{ width: `${18}px`, height: `${18}px` }}
-          preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
-        />
-      ),
+      icon: <TableEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/editor`),
     },
     {
       key: 'sql',
       label: 'SQL Editor',
-      icon: (
-        <SVG
-          src={`${BASE_PATH}/img/sql-editor.svg`}
-          style={{ width: `${18}px`, height: `${18}px`, strokeWidth: `4` }}
-          preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
-        />
-      ),
+      icon: <SqlEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: !IS_PLATFORM
         ? `/project/${ref}/sql/1`
         : ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/sql/new`),
@@ -56,24 +54,7 @@ export const generateProductRoutes = (
     {
       key: 'database',
       label: 'Database',
-      icon: (
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 18 18"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d={products.database.icon[18]}
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeMiterlimit="10"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      ),
+      icon: <Database size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/database/tables`),
     },
     ...(authEnabled
@@ -81,24 +62,7 @@ export const generateProductRoutes = (
           {
             key: 'auth',
             label: 'Authentication',
-            icon: (
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={products.authentication.icon[24]}
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeMiterlimit="10"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            ),
+            icon: <Auth size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/auth/users`),
           },
         ]
@@ -108,24 +72,7 @@ export const generateProductRoutes = (
           {
             key: 'storage',
             label: 'Storage',
-            icon: (
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 18 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={products.storage.icon[18]}
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeMiterlimit="10"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            ),
+            icon: <Storage size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/storage/buckets`),
           },
         ]
@@ -135,24 +82,7 @@ export const generateProductRoutes = (
           {
             key: 'functions',
             label: 'Edge Functions',
-            icon: (
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 18 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={products.functions.icon[18]}
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeMiterlimit="10"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            ),
+            icon: <EdgeFunctions size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/functions`),
           },
         ]
@@ -162,24 +92,7 @@ export const generateProductRoutes = (
           {
             key: 'realtime',
             label: 'Realtime',
-            icon: (
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 18 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={products.realtime.icon[18]}
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeMiterlimit="10"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            ),
+            icon: <Realtime size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/realtime/inspector`),
           },
         ]
@@ -197,7 +110,7 @@ export const generateOtherRoutes = (ref?: string, project?: Project): Route[] =>
           {
             key: 'reports',
             label: 'Reports',
-            icon: <IconBarChart size={18} strokeWidth={2.5} />,
+            icon: <Reports size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/reports`),
           },
         ]
@@ -205,13 +118,13 @@ export const generateOtherRoutes = (ref?: string, project?: Project): Route[] =>
     {
       key: 'logs',
       label: 'Logs',
-      icon: <IconList size={18} strokeWidth={2.5} />,
+      icon: <Logs size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs/explorer`),
     },
     {
       key: 'api',
       label: 'API Docs',
-      icon: <IconFileText size={18} strokeWidth={2} />,
+      icon: <ApiDocs size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/api`),
     },
     ...(IS_PLATFORM
@@ -219,7 +132,7 @@ export const generateOtherRoutes = (ref?: string, project?: Project): Route[] =>
           {
             key: 'settings',
             label: 'Project Settings',
-            icon: <IconSettings size={18} strokeWidth={2.5} />,
+            icon: <Settings size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
             link: ref && `/project/${ref}/settings/general`,
           },
         ]

apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx

@@ -8,7 +8,7 @@ const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarPro
   return (
     <div
       className={[
-        'hide-scrollbar flex w-64 flex-col border-r', // Layout
+        'hide-scrollbar flex flex-col w-full h-full', // Layout
         'bg-studio',
         'border-default ',
       ].join(' ')}

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -23,6 +23,7 @@ import { ProjectContextProvider } from './ProjectContext'
 import ProjectPausedState from './ProjectPausedState'
 import RestoringState from './RestoringState'
 import UpgradingState from './UpgradingState'
+import { ResizableHandle, ResizablePanelGroup, ResizablePanel, cn } from 'ui'
 
 // [Joshen] This is temporary while we unblock users from managing their project
 // if their project is not responding well for any reason. Eventually needs a bit of an overhaul
@@ -57,6 +58,7 @@ export interface ProjectLayoutProps {
   hideHeader?: boolean
   hideIconBar?: boolean
   selectedTable?: string
+  resizableSidebar?: boolean
 }
 
 const ProjectLayout = ({
@@ -69,6 +71,7 @@ const ProjectLayout = ({
   hideHeader = false,
   hideIconBar = false,
   selectedTable,
+  resizableSidebar = false,
 }: PropsWithChildren<ProjectLayoutProps>) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
@@ -105,26 +108,46 @@ const ProjectLayout = ({
           {/* Left-most navigation side bar to access products */}
           {!hideIconBar && <NavigationBar />}
           {/* Product menu bar */}
-          {!showPausedState && (
-            <MenuBarWrapper isLoading={isLoading} isBlocking={isBlocking} productMenu={productMenu}>
-              <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-            </MenuBarWrapper>
-          )}
-          <main className="flex flex-col flex-1 w-full overflow-x-hidden">
-            {!navLayoutV2 && !hideHeader && IS_PLATFORM && <LayoutHeader />}
-            {showPausedState ? (
-              <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
-                <div className="w-full">
-                  <ProjectPausedState product={product} />
-                </div>
-              </div>
-            ) : (
-              <ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
-                <ResourceExhaustionWarningBanner />
-                {children}
-              </ContentWrapper>
+          <ResizablePanelGroup
+            className="flex h-full"
+            direction="horizontal"
+            autoSaveId="project-layout"
+          >
+            {!showPausedState && productMenu && (
+              <>
+                <ResizablePanel
+                  className={cn(resizableSidebar ? 'min-w-64 max-w-[32rem]' : 'min-w-64 max-w-64')}
+                  defaultSize={1} // forces panel to smallest width possible, at w-64
+                >
+                  <MenuBarWrapper
+                    isLoading={isLoading}
+                    isBlocking={isBlocking}
+                    productMenu={productMenu}
+                  >
+                    <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
+                  </MenuBarWrapper>
+                </ResizablePanel>
+                <ResizableHandle withHandle disabled={resizableSidebar ? false : true} />
+              </>
             )}
-          </main>
+            <ResizablePanel className="h-full">
+              <main className="h-full flex flex-col flex-1 w-full overflow-x-hidden">
+                {!navLayoutV2 && !hideHeader && IS_PLATFORM && <LayoutHeader />}
+                {showPausedState ? (
+                  <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
+                    <div className="w-full">
+                      <ProjectPausedState product={product} />
+                    </div>
+                  </div>
+                ) : (
+                  <ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
+                    <ResourceExhaustionWarningBanner />
+                    {children}
+                  </ContentWrapper>
+                )}
+              </main>
+            </ResizablePanel>
+          </ResizablePanelGroup>
         </div>
 
         <EnableBranchingModal />

apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx

@@ -17,6 +17,7 @@ const SQLEditorLayout = ({ title, children }: SQLEditorLayoutProps) => {
       product="SQL Editor"
       productMenu={productMenu}
       isBlocking={false}
+      resizableSidebar
     >
       {children}
     </ProjectLayout>

apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx

@@ -23,7 +23,12 @@ const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
   }
 
   return (
-    <ProjectLayoutWithAuth product="Table Editor" productMenu={tableEditorMenu} isBlocking={false}>
+    <ProjectLayoutWithAuth
+      product="Table Editor"
+      productMenu={tableEditorMenu}
+      isBlocking={false}
+      resizableSidebar
+    >
       {children}
     </ProjectLayoutWithAuth>
   )

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx

@@ -6,9 +6,13 @@ import {
   Button,
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuSeparator,
   DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  IconCheck,
   IconChevronLeft,
   IconChevronRight,
   IconColumns,
@@ -21,18 +25,14 @@ import {
   IconUpload,
   IconX,
   Input,
-  IconCheck,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
 } from 'ui'
 
+import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import APIDocsButton from 'components/ui/APIDocsButton'
 import { useCheckPermissions } from 'hooks'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import { STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER, STORAGE_VIEWS } from '../Storage.constants'
-import APIDocsButton from 'components/ui/APIDocsButton'
-import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 
 const VIEW_OPTIONS = [
   { key: STORAGE_VIEWS.COLUMNS, name: 'As columns' },

apps/studio/data/database/constraints-query.ts

@@ -0,0 +1,69 @@
+import { UseQueryOptions } from '@tanstack/react-query'
+import { ExecuteSqlData, useExecuteSqlQuery } from '../sql/execute-sql-query'
+
+type GetTableConstraintsVariables = {
+  schema?: string
+  table?: string
+}
+
+export type Constraint = {
+  id: number
+  name: string
+  type: string
+}
+
+export enum CONSTRAINT_TYPE {
+  CHECK_CONSTRAINT = 'c',
+  FOREIGN_KEY_CONSTRAINT = 'f',
+  PRIMARY_KEY_CONSTRAINT = 'p',
+  UNIQUE_CONSTRAINT = 'u',
+  CONSTRAINT_TRIGGER = 't',
+  EXCLUSION_CONSTRAINT = 'x',
+}
+
+export const getTableConstraints = ({ schema, table }: GetTableConstraintsVariables) => {
+  const sql = /* SQL */ `
+  SELECT 
+    con.oid as id,
+    con.conname as name,
+    con.contype as type
+  FROM pg_catalog.pg_constraint con
+  INNER JOIN pg_catalog.pg_class rel
+            ON rel.oid = con.conrelid
+  INNER JOIN pg_catalog.pg_namespace nsp
+            ON nsp.oid = connamespace
+  WHERE nsp.nspname = '${schema}'
+        AND rel.relname = '${table}';
+`.trim()
+
+  return sql
+}
+
+export type TableConstraintsVariables = GetTableConstraintsVariables & {
+  projectRef?: string
+  connectionString?: string
+}
+
+export type TableConstraintsData = Constraint[]
+export type TableConstraintsError = unknown
+
+export const useTableConstraintsQuery = <TData extends TableConstraintsData = TableConstraintsData>(
+  { projectRef, connectionString, schema, table }: TableConstraintsVariables,
+  options: UseQueryOptions<ExecuteSqlData, TableConstraintsError, TData> = {}
+) => {
+  return useExecuteSqlQuery(
+    {
+      projectRef,
+      connectionString,
+      sql: getTableConstraints({ schema, table }),
+      queryKey: ['table-constraints'],
+    },
+    {
+      enabled: typeof schema !== 'undefined' && typeof table !== 'undefined',
+      select(data) {
+        return (data as any)?.result ?? []
+      },
+      ...options,
+    }
+  )
+}

apps/studio/data/database/database-query-constants.ts

@@ -10,15 +10,6 @@ export enum FOREIGN_KEY_CASCADE_ACTION {
   SET_DEFAULT = 'd',
 }
 
-export enum CONSTRAINT_TYPE {
-  CHECK_CONSTRAINT = 'c',
-  FOREIGN_KEY_CONSTRAINT = 'f',
-  PRIMARY_KEY_CONSTRAINT = 'p',
-  UNIQUE_CONSTRAINT = 'u',
-  CONSTRAINT_TRIGGER = 't',
-  EXCLUSION_CONSTRAINT = 'x',
-}
-
 // Derived from https://github.com/MichaelDBA/pg_get_tabledef
 // NOTE: when updating, \n must be replaced with \\n in the SQL below
 

apps/studio/lib/constants/index.ts

@@ -36,6 +36,7 @@ export const LOCAL_STORAGE_KEYS = {
   UI_PREVIEW_CLS: 'supabase-ui-cls',
 
   SQL_EDITOR_SPLIT_SIZE: 'supabase_sql-editor-split-size',
+  LOG_EXPLORER_SPLIT_SIZE: 'supabase_log-explorer-split-size',
   GRAPHIQL_RLS_BYPASS_WARNING: 'graphiql-rls-bypass-warning-dismissed',
   CLS_DIFF_WARNING: 'cls-diff-warning-dismissed',
   CLS_SELECT_STAR_WARNING: 'cls-select-star-warning-dismissed',

apps/studio/lib/role-impersonation.ts

@@ -112,7 +112,49 @@ export function wrapWithRoleImpersonation(
   `
 }
 
-export async function getRoleImpersonationJWT(
+function encodeText(data: string) {
+  return new TextEncoder().encode(data)
+}
+
+function encodeBase64Url(data: ArrayBuffer | Uint8Array | string): string {
+  return btoa(
+    String.fromCharCode(...new Uint8Array(typeof data === 'string' ? encodeText(data) : data))
+  )
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '')
+}
+
+function genKey(rawKey: string) {
+  return window.crypto.subtle.importKey(
+    'raw',
+    encodeText(rawKey),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign', 'verify']
+  )
+}
+
+async function createToken(jwtPayload: object, key: string) {
+  const headerAndPayload =
+    encodeBase64Url(encodeText(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))) +
+    '.' +
+    encodeBase64Url(encodeText(JSON.stringify(jwtPayload)))
+
+  const signature = encodeBase64Url(
+    new Uint8Array(
+      await window.crypto.subtle.sign(
+        { name: 'HMAC' },
+        await genKey(key),
+        encodeText(headerAndPayload)
+      )
+    )
+  )
+
+  return `${headerAndPayload}.${signature}`
+}
+
+export function getRoleImpersonationJWT(
   projectRef: string,
   jwtSecret: string,
   role: PostgrestImpersonationRole
@@ -120,50 +162,3 @@ export async function getRoleImpersonationJWT(
   const claims = getPostgrestClaims(projectRef, role)
   return createToken(claims, jwtSecret)
 }
-
-async function createToken(payload: object, key: string) {
-  const header = { typ: 'JWT', alg: 'HS256' }
-
-  const segments = []
-  segments.push(btoa(JSON.stringify(header)).replace(/=/g, ''))
-  segments.push(btoa(JSON.stringify(payload)).replace(/=/g, ''))
-
-  const footer = await sign(segments.join('.'), btoa(key).replace(/=/g, ''))
-  segments.push(footer.replace(/=/g, ''))
-  return segments.join('.')
-}
-
-async function sign(data: string, key: string) {
-  return window.crypto.subtle
-    .importKey(
-      'jwk',
-      {
-        //this is an example jwk key, "raw" would be an ArrayBuffer
-        kty: 'oct',
-        k: key,
-        alg: 'HS256',
-      },
-      {
-        name: 'HMAC',
-        hash: { name: 'SHA-256' },
-      },
-      false,
-      ['sign', 'verify']
-    )
-    .then((key) => {
-      const jsonString = JSON.stringify(data)
-      const encodedData = new TextEncoder().encode(jsonString)
-      return window.crypto.subtle.sign(
-        {
-          name: 'HMAC',
-        },
-        key,
-        encodedData
-      )
-    })
-    .then((token) => {
-      const u8 = new Uint8Array(token)
-      const b64encoded = btoa(String.fromCharCode(...u8))
-      return b64encoded
-    })
-}

apps/studio/localStores/storageExplorer/StorageExplorerStore.ts

@@ -5,6 +5,7 @@ import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js'
 import { chunk, compact, find, findIndex, has, isEqual, some, uniq, uniqBy } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import toast from 'react-hot-toast'
+import { toast as UiToast } from 'ui'
 
 import {
   STORAGE_ROW_STATUS,
@@ -283,22 +284,13 @@ class StorageExplorerStore {
     if (formattedName === null) return
 
     if (!/^[a-zA-Z0-9_-\s]*$/.test(formattedName)) {
-      return this.ui.setNotification({
-        message: 'Folder name contains invalid special characters',
-        category: 'error',
-        duration: 8000,
-      })
-    }
-    /**
-     * todo: move this to a util file, as renameFolder() uses same logic
-     */
-    if (formattedName.includes('/') || formattedName.includes('\\')) {
-      return this.ui.setNotification({
-        message: 'Folder names should not have forward or back slashes.',
-        category: 'error',
-        duration: 8000,
+      return UiToast({
+        variant: 'destructive',
+        description: 'Folder name contains invalid special characters',
+        duration: 6000,
       })
     }
+
     if (formattedName.length === 0) {
       return this.removeTempRows(columnIndex)
     }
@@ -425,10 +417,7 @@ class StorageExplorerStore {
 
   // https://stackoverflow.com/a/53058574
   getFilesDataTransferItems = async (items) => {
-    const toastId = this.ui.setNotification({
-      category: 'loading',
-      message: 'Retrieving items to upload...',
-    })
+    const { dismiss } = UiToast({ description: 'Retrieving items to upload...' })
     const files = []
     const queue = []
     for (const item of items) {
@@ -446,7 +435,7 @@ class StorageExplorerStore {
         queue.push(...(await this.readAllDirectoryEntries(entry.createReader())))
       }
     }
-    toast.dismiss(toastId)
+    dismiss()
     return files
   }
 
@@ -663,7 +652,8 @@ class StorageExplorerStore {
     let numberOfFilesMovedFail = 0
     this.clearSelectedItems()
 
-    const infoToastId = toast('Please do not close the browser until the move is completed', {
+    const { dismiss } = UiToast({
+      description: 'Please do not close the browser until the move is completed',
       duration: Infinity,
     })
 
@@ -690,20 +680,16 @@ class StorageExplorerStore {
     )
 
     if (numberOfFilesMovedFail === this.selectedItemsToMove.length) {
-      this.ui.setNotification({
-        message: 'Failed to move files',
-        category: 'error',
-      })
+      UiToast({ variant: 'destructive', description: 'Failed to move files' })
     } else {
-      this.ui.setNotification({
-        message: `Successfully moved ${
+      UiToast({
+        description: `Successfully moved ${
           this.selectedItemsToMove.length - numberOfFilesMovedFail
-        } to ${formattedNewPathToFile}`,
-        category: 'success',
+        } files to ${formattedNewPathToFile.length > 0 ? formattedNewPathToFile : 'the root of your bucket'}`,
       })
     }
 
-    toast.dismiss(infoToastId)
+    dismiss()
 
     // Clear file preview cache if moved files exist in cache
     const idsOfItemsToMove = this.selectedItemsToMove.map((item) => item.id)

apps/studio/next.config.js

@@ -390,7 +390,7 @@ const nextConfig = {
       'vercel.com',
     ],
   },
-  transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data'],
+  transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data', 'icons'],
   webpack(config) {
     config.module?.rules
       .find((rule) => rule.oneOf)

apps/studio/package.json

@@ -29,8 +29,8 @@
     "@scaleleap/pg-format": "^1.0.0",
     "@sentry/nextjs": "^7.77.0",
     "@serafin/schema-builder": "^0.18.2",
-    "@stripe/react-stripe-js": "^2.3.1",
-    "@stripe/stripe-js": "^2.1.11",
+    "@stripe/react-stripe-js": "^2.5.0",
+    "@stripe/stripe-js": "^3.0.5",
     "@supabase/auth-helpers-react": "^0.4.2",
     "@supabase/shared-types": "0.1.55",
     "@supabase/supabase-js": "^2.39.3",
@@ -87,7 +87,6 @@
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.3",
     "react-simple-maps": "4.0.0-beta.6",
-    "react-split": "^2.0.13",
     "react-tracked": "^1.7.11",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.6",
@@ -100,6 +99,7 @@
     "sqlstring": "^2.3.2",
     "ui": "*",
     "ui-patterns": "*",
+    "icons": "*",
     "uuid": "^9.0.1",
     "valtio": "^1.11.2",
     "yup": "^0.32.11",

apps/studio/pages/_app.tsx

@@ -59,6 +59,7 @@ import { useAppStateSnapshot } from 'state/app-state'
 import { RootStore } from 'stores'
 import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { AppPropsWithLayout } from 'types'
+import { Toaster } from 'ui'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -182,6 +183,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 </PageTelemetry>
 
                 <HCaptchaLoadedStore />
+                <Toaster />
                 <PortalToast />
                 {!isTestEnv && <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />}
               </FlagProvider>

apps/studio/pages/project/[ref]/logs/explorer/index.tsx

@@ -1,20 +1,28 @@
+import { useParams } from 'common/hooks'
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { Button, Form, Input, Modal } from 'ui'
-import Split from 'react-split'
-import { useParams } from 'common/hooks'
+import {
+  Button,
+  Form,
+  Input,
+  Modal,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from 'ui'
+
 import {
   DatePickerToFrom,
-  LogsQueryPanel,
-  LogsTableName,
-  LogsWarning,
   LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD,
   LogTable,
   LogTemplate,
-  maybeShowUpgradePrompt,
+  LogsQueryPanel,
+  LogsTableName,
+  LogsWarning,
   TEMPLATES,
+  maybeShowUpgradePrompt,
   useEditorHints,
 } from 'components/interfaces/Settings/Logs'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
@@ -23,12 +31,13 @@ import CodeEditor from 'components/ui/CodeEditor'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
 import ShimmerLine from 'components/ui/ShimmerLine'
 import { useContentInsertMutation } from 'data/content/content-insert-mutation'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useLocalStorage, useSelectedOrganization, useStore } from 'hooks'
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
 import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { uuidv4 } from 'lib/helpers'
 import { LogSqlSnippets, NextPageWithLayout } from 'types'
-import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 
 const PLACEHOLDER_QUERY =
   'select\n  cast(timestamp as datetime) as timestamp,\n  event_message, metadata \nfrom edge_logs \nlimit 5'
@@ -187,17 +196,12 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
 
   return (
     <div className="w-full h-full mx-auto">
-      <Split
-        className="w-full"
-        style={{ height: '100%' }}
+      <ResizablePanelGroup
+        className="w-full h-full"
         direction="vertical"
-        gutterSize={2}
-        sizes={[50, 50]}
-        minSize={44}
-        snapOffset={50}
-        expandToMin={true}
+        autoSaveId={LOCAL_STORAGE_KEYS.LOG_EXPLORER_SPLIT_SIZE}
       >
-        <div className="flex-grow overflow-y-auto border-b">
+        <ResizablePanel collapsible minSize={5}>
           <LogsQueryPanel
             defaultFrom={params.iso_timestamp_start || ''}
             defaultTo={params.iso_timestamp_end || ''}
@@ -220,8 +224,9 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
             onInputChange={(v) => setEditorValue(v || '')}
             onInputRun={handleRun}
           />
-        </div>
-        <div className="flex flex-col flex-grow">
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel collapsible minSize={5} className="flex flex-col flex-grow">
           <LoadingOpacity active={isLoading}>
             <div className="flex flex-grow">
               <LogTable
@@ -238,8 +243,8 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
           <div className="flex flex-row justify-end mt-2">
             <UpgradePrompt show={showUpgradePrompt} setShowUpgradePrompt={setShowUpgradePrompt} />
           </div>
-        </div>
-      </Split>
+        </ResizablePanel>
+      </ResizablePanelGroup>
 
       <Modal
         size="medium"

apps/studio/pages/project/[ref]/sql/[id].tsx

@@ -126,7 +126,7 @@ const SqlEditor: NextPageWithLayout = () => {
   }, [isPgInfoReady])
 
   return (
-    <div className="SQLTabContainer flex-1">
+    <div className="flex-1">
       <SQLEditor />
     </div>
   )

apps/studio/public/img/libraries/sveltekit-icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.1 118" style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF3E00;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"/>
+<path class="st1" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
+	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
+	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
+	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
+	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
+	c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
+	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"/>
+</svg>

apps/studio/styles/monaco.scss

@@ -3,11 +3,6 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.gutter {
-  @apply bg-border-control;
-  cursor: row-resize;
-}
-
 .grid-monaco-editor,
 .monaco-editor p,
 label,

apps/studio/styles/ui.scss

@@ -349,14 +349,6 @@
   scrollbar-width: none; // auto | thin | none | <length>;
 }
 
-.SQLTabContainer {
-  height: calc(100vh - 3rem);
-  min-height: calc(100vh - 3rem);
-  .gutter {
-    cursor: row-resize;
-  }
-}
-
 .radix-tooltip-arrow {
   polygon {
     @apply fill-background-alternative [[data-theme*=dark]_&]:fill-background-alternative;

apps/www/next.config.mjs

@@ -41,7 +41,7 @@ const nextConfig = {
   basePath: '',
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   trailingSlash: false,
-  transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data'],
+  transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data', 'icons'],
   images: {
     dangerouslyAllowSVG: true,
     domains: [

apps/www/package.json

@@ -64,6 +64,7 @@
     "typescript": "^5.2.2",
     "ui": "*",
     "ui-patterns": "*",
+    "icons": "*",
     "use-debounce": "^7.0.1",
     "vanilla-tilt": "1.7.0",
     "yup": "^0.32.11"

package-lock.json

@@ -480,6 +480,7 @@
         "github-slugger": "^2.0.0",
         "gray-matter": "^4.0.3",
         "hast-util-has-property": "^2.0.1",
+        "icons": "*",
         "isbot": "^3.6.5",
         "jsrsasign": "^11.0.0",
         "lodash": "^4.17.21",
@@ -770,8 +771,8 @@
         "@scaleleap/pg-format": "^1.0.0",
         "@sentry/nextjs": "^7.77.0",
         "@serafin/schema-builder": "^0.18.2",
-        "@stripe/react-stripe-js": "^2.3.1",
-        "@stripe/stripe-js": "^2.1.11",
+        "@stripe/react-stripe-js": "^2.5.0",
+        "@stripe/stripe-js": "^3.0.5",
         "@supabase/auth-helpers-react": "^0.4.2",
         "@supabase/shared-types": "0.1.55",
         "@supabase/supabase-js": "^2.39.3",
@@ -793,6 +794,7 @@
         "framer-motion": "^11.0.3",
         "generate-password-browser": "^1.1.0",
         "html-to-image": "^1.10.8",
+        "icons": "*",
         "immutability-helper": "^3.1.1",
         "ip-num": "^1.5.1",
         "json-logic-js": "^2.0.2",
@@ -828,7 +830,6 @@
         "react-intersection-observer": "^9.5.3",
         "react-markdown": "^8.0.3",
         "react-simple-maps": "4.0.0-beta.6",
-        "react-split": "^2.0.13",
         "react-tracked": "^1.7.11",
         "react-virtualized-auto-sizer": "^1.0.20",
         "react-window": "^1.8.6",
@@ -1095,6 +1096,7 @@
         "framer-motion": "^11.0.3",
         "globby": "^13.2.2",
         "gray-matter": "^4.0.3",
+        "icons": "*",
         "markdown-toc": "^1.2.0",
         "next": "^13.5.6",
         "next-mdx-remote": "^4.4.1",
@@ -10831,20 +10833,25 @@
       }
     },
     "node_modules/@stripe/react-stripe-js": {
-      "version": "2.3.1",
-      "license": "MIT",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.5.0.tgz",
+      "integrity": "sha512-ys5bnrufNoBlUPRblWkiN7dUCX3s2noBZS0Lf5GkHYO9x3SXJMZccif53IdP4X6tZyNLn7aSMgZBUZqsdzrvhg==",
       "dependencies": {
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "@stripe/stripe-js": "^1.44.1 || ^2.0.0",
+        "@stripe/stripe-js": "^1.44.1 || ^2.0.0 || ^3.0.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@stripe/stripe-js": {
-      "version": "2.1.11",
-      "license": "MIT"
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.5.tgz",
+      "integrity": "sha512-0BTd2bC+8gSKty7jXKRntLnvmWgFTmpZkY0oP7ADBYfdV0JtuGoDbfQawui0W5eUlwT3CcKh2IeRV4SPOBIeXQ==",
+      "engines": {
+        "node": ">=12.16"
+      }
     },
     "node_modules/@supabase/auth-helpers-react": {
       "version": "0.4.2",
@@ -10873,6 +10880,10 @@
         "@supabase/supabase-js": "^2.21.0"
       }
     },
+    "node_modules/@supabase/build-icons": {
+      "resolved": "packages/build-icons",
+      "link": true
+    },
     "node_modules/@supabase/functions-js": {
       "version": "2.1.5",
       "license": "MIT",
@@ -11411,6 +11422,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "license": "MIT",
@@ -15938,6 +15958,39 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "dev": true,
@@ -16390,6 +16443,15 @@
       "version": "0.7.9",
       "license": "Apache-2.0"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "dev": true,
@@ -16524,6 +16586,31 @@
       "version": "0.1.4",
       "license": "MIT"
     },
+    "node_modules/deep-rename-keys": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/deep-rename-keys/-/deep-rename-keys-0.2.1.tgz",
+      "integrity": "sha512-RHd9ABw4Fvk+gYDWqwOftG849x0bYOySl/RgX0tLI9i27ZIeSO91mLZJEp7oPHOMFqHvpgu21YptmDt0FYD/0A==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2",
+        "rename-keys": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/deep-rename-keys/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "license": "MIT",
@@ -20685,6 +20772,10 @@
       "version": "1.0.4",
       "license": "BSD-3-Clause"
     },
+    "node_modules/icons": {
+      "resolved": "packages/icons",
+      "link": true
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "license": "MIT",
@@ -30137,6 +30228,15 @@
         "react": ">= 16.3"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.0.11.tgz",
+      "integrity": "sha512-tA3OvGFEK/U9rKuEg6TpXcr+i+cN5X8B4UIvs7jqr5lby629pDTGvqRjo1EJLhBpRZfkg0Zz1INJlSYigaS99g==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-resize-detector": {
       "version": "8.1.0",
       "license": "MIT",
@@ -30198,17 +30298,6 @@
         "react-dom": ">=15.0.0"
       }
     },
-    "node_modules/react-split": {
-      "version": "2.0.14",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.5.7",
-        "split.js": "^1.6.0"
-      },
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "license": "MIT",
@@ -31901,6 +31990,15 @@
       "version": "0.4.2",
       "license": "MIT"
     },
+    "node_modules/rename-keys": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/rename-keys/-/rename-keys-1.2.0.tgz",
+      "integrity": "sha512-U7XpAktpbSgHTRSNRrjKSrjYkZKuhUukfoBlXWXUExCAqhzh1TU3BDRAfJmarcl5voKS+pbKU9MvyLWKZ4UEEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "dev": true,
@@ -32873,10 +32971,6 @@
         "tiny-updater": "^3.5.1"
       }
     },
-    "node_modules/split.js": {
-      "version": "1.6.5",
-      "license": "MIT"
-    },
     "node_modules/split2": {
       "version": "4.2.0",
       "dev": true,
@@ -33675,14 +33769,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/supabase/node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/supabase/node_modules/https-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
@@ -33799,6 +33885,119 @@
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "peer": true
     },
+    "node_modules/svgo": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+      "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
+    "node_modules/svgson": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/svgson/-/svgson-5.3.1.tgz",
+      "integrity": "sha512-qdPgvUNWb40gWktBJnbJRelWcPzkLed/ShhnRsjbayXz8OtdPOzbil9jtiZdrYvSDumAz/VNQr6JaNfPx/gvPA==",
+      "dev": true,
+      "dependencies": {
+        "deep-rename-keys": "^0.2.1",
+        "xml-reader": "2.4.3"
+      }
+    },
     "node_modules/swagger2openapi": {
       "version": "7.0.8",
       "resolved": "https://registry.npmjs.org/swagger2openapi/-/swagger2openapi-7.0.8.tgz",
@@ -36851,6 +37050,21 @@
       "resolved": "apps/www",
       "link": true
     },
+    "node_modules/xml-lexer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xml-lexer/-/xml-lexer-0.2.2.tgz",
+      "integrity": "sha512-G0i98epIwiUEiKmMcavmVdhtymW+pCAohMRgybyIME9ygfVu8QheIi+YoQh3ngiThsT0SQzJT4R0sKDEv8Ou0w==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^2.0.0"
+      }
+    },
+    "node_modules/xml-lexer/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "dev": true
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "dev": true,
@@ -36859,6 +37073,22 @@
         "node": ">=12"
       }
     },
+    "node_modules/xml-reader": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/xml-reader/-/xml-reader-2.4.3.tgz",
+      "integrity": "sha512-xWldrIxjeAMAu6+HSf9t50ot1uL5M+BtOidRCWHXIeewvSeIpscWCsp4Zxjk8kHHhdqFBrfK8U0EJeCcnyQ/gA==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^2.0.0",
+        "xml-lexer": "^0.2.2"
+      }
+    },
+    "node_modules/xml-reader/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "dev": true
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "dev": true,
@@ -37090,6 +37320,57 @@
         "sql-formatter": "bin/sql-formatter-cli.cjs"
       }
     },
+    "packages/build-icons": {
+      "name": "@supabase/build-icons",
+      "version": "1.0.0",
+      "license": "ISC",
+      "bin": {
+        "build-icons": "src/main.mjs"
+      },
+      "devDependencies": {
+        "minimist": "^1.2.7",
+        "node-fetch": "^3.2.10",
+        "prettier": "2.7.1",
+        "svgo": "^3.0.0",
+        "svgson": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "packages/build-icons/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dev": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "packages/build-icons/node_modules/prettier": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "packages/common": {
       "version": "0.0.0",
       "license": "MIT",
@@ -37285,6 +37566,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "packages/icons": {
+      "dependencies": {
+        "@supabase/build-icons": "*",
+        "typescript": "^5.2.2"
+      }
+    },
     "packages/shared-data": {
       "version": "0.0.0",
       "license": "MIT"
@@ -37352,6 +37639,7 @@
         "react-hook-form": "^7.45.0",
         "react-hot-toast": "^2.4.1",
         "react-markdown": "^8.0.3",
+        "react-resizable-panels": "^2.0.11",
         "react-syntax-highlighter": "^15.5.0",
         "react-tooltip": "^4.2.17",
         "reactflow": "^11.10.1",

packages/build-icons/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@supabase/build-icons",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.mjs",
+  "type": "module",
+  "bin": {
+    "build-icons": "src/main.mjs"
+  },
+  "engines": {
+    "node": ">= 16"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "minimist": "^1.2.7",
+    "node-fetch": "^3.2.10",
+    "prettier": "2.7.1",
+    "svgo": "^3.0.0",
+    "svgson": "^5.2.1"
+  }
+}

packages/build-icons/src/building/generateAliasesFile.mjs

@@ -0,0 +1,102 @@
+import fs from 'fs'
+import path from 'path'
+import { appendFile, resetFile, toPascalCase } from '../utils/helpers.mjs'
+
+const getImportString = (componentName, iconName, aliasImportFileExtension = '') =>
+  `export { default as ${componentName} } from './icons/${iconName}${aliasImportFileExtension}';\n`
+
+export default async function generateAliasesFile({
+  iconNodes,
+  outputDirectory,
+  fileExtension,
+  iconFileExtension = '.js',
+  iconMetaData,
+  aliasImportFileExtension,
+  aliasNamesOnly = false,
+  separateAliasesFile = false,
+  showLog = true,
+}) {
+  const iconsDistDirectory = path.join(outputDirectory, `icons`)
+  const fileName = path.basename(`aliases${fileExtension}`)
+  const icons = Object.keys(iconNodes)
+
+  // Reset file
+  resetFile(fileName, outputDirectory)
+
+  // Generate Import for Icon VNodes
+  await Promise.all(
+    icons.map(async (iconName, index) => {
+      const componentName = toPascalCase(iconName)
+      const iconAliases = iconMetaData[iconName]?.aliases
+
+      let importString = ''
+
+      if ((iconAliases != null && Array.isArray(iconAliases)) || !aliasNamesOnly) {
+        if (index > 0) {
+          importString += '\n'
+        }
+
+        importString += `// ${componentName} aliases\n`
+      }
+
+      if (!aliasNamesOnly) {
+        importString += getImportString(`${componentName}Icon`, iconName, aliasImportFileExtension)
+        importString += getImportString(
+          `Lucide${componentName}`,
+          iconName,
+          aliasImportFileExtension
+        )
+      }
+
+      if (iconAliases != null && Array.isArray(iconAliases)) {
+        await Promise.all(
+          iconAliases.map(async (alias) => {
+            const componentNameAlias = toPascalCase(alias)
+
+            if (separateAliasesFile) {
+              const output = `export { default } from "./${iconName}"`
+              const location = path.join(iconsDistDirectory, `${alias}${iconFileExtension}`)
+
+              await fs.promises.writeFile(location, output, 'utf-8')
+            }
+
+            // Don't import the same icon twice
+            if (componentName === componentNameAlias) {
+              return
+            }
+
+            const exportFileIcon = separateAliasesFile ? alias : iconName
+
+            importString += getImportString(
+              componentNameAlias,
+              exportFileIcon,
+              aliasImportFileExtension
+            )
+
+            if (!aliasNamesOnly) {
+              importString += getImportString(
+                `${componentNameAlias}Icon`,
+                exportFileIcon,
+                aliasImportFileExtension
+              )
+
+              importString += getImportString(
+                `Lucide${componentNameAlias}`,
+                exportFileIcon,
+                aliasImportFileExtension
+              )
+            }
+          })
+        )
+      }
+
+      appendFile(importString, fileName, outputDirectory)
+    })
+  )
+
+  appendFile('\n', fileName, outputDirectory)
+
+  if (showLog) {
+    console.log(`Successfully generated ${fileName} file`)
+  }
+}

packages/build-icons/src/building/generateDynamicImports.mjs

@@ -0,0 +1,30 @@
+import path from 'path'
+import { appendFile, resetFile } from '../utils/helpers.mjs'
+
+export default function generateDynamicImports({
+  iconNodes,
+  outputDirectory,
+  fileExtension,
+  showLog = true,
+}) {
+  const fileName = path.basename(`dynamicIconImports${fileExtension}`)
+  const icons = Object.keys(iconNodes)
+
+  // Reset file
+  resetFile(fileName, outputDirectory)
+
+  let importString = `const dynamicIconImports = {\n`
+
+  // Generate Import for Icon VNodes
+  icons.forEach((iconName) => {
+    importString += `  '${iconName}': () => import('./icons/${iconName}'),\n`
+  })
+
+  importString += '};\nexport default dynamicIconImports;\n'
+
+  appendFile(importString, fileName, outputDirectory)
+
+  if (showLog) {
+    console.log(`Successfully generated ${fileName} file`)
+  }
+}

packages/build-icons/src/building/generateExportsFile.mjs

@@ -0,0 +1,23 @@
+import path from 'path'
+
+import { appendFile, resetFile, toPascalCase } from '../utils/helpers.mjs'
+
+export default (inputEntry, outputDirectory, iconNodes, iconFileExtension = '') => {
+  const fileName = path.basename(inputEntry)
+
+  // Reset file
+  resetFile(fileName, outputDirectory)
+
+  const icons = Object.keys(iconNodes)
+
+  // Generate Import for Icon VNodes
+  icons.forEach((iconName) => {
+    const componentName = toPascalCase(iconName)
+    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`
+    appendFile(importString, fileName, outputDirectory)
+  })
+
+  appendFile('\n', fileName, outputDirectory)
+
+  console.log(`Successfully generated ${fileName} file`)
+}

packages/build-icons/src/building/generateIconFiles.mjs

@@ -0,0 +1,57 @@
+import fs from 'fs'
+import path from 'path'
+import prettier from 'prettier'
+import { readSvg, toPascalCase } from '../utils/helpers.mjs'
+
+export default ({
+  iconNodes,
+  outputDirectory,
+  template,
+  showLog = true,
+  iconFileExtension = '.js',
+  pretty = true,
+  iconsDir,
+  iconMetaData,
+}) => {
+  const icons = Object.keys(iconNodes)
+  const iconsDistDirectory = path.join(outputDirectory, `icons`)
+
+  if (!fs.existsSync(iconsDistDirectory)) {
+    fs.mkdirSync(iconsDistDirectory)
+  }
+
+  const writeIconFiles = icons.map(async (iconName) => {
+    const location = path.join(iconsDistDirectory, `${iconName}${iconFileExtension}`)
+
+    const componentName = toPascalCase(iconName)
+
+    let { children } = iconNodes[iconName]
+    children = children.map(({ name, attributes }) => [name, attributes])
+
+    const getSvg = () => readSvg(`${iconName}.svg`, iconsDir)
+    // const { deprecated = false } = iconMetaData[iconName]
+    const deprecated = false
+
+    const elementTemplate = template({ componentName, iconName, children, getSvg, deprecated })
+    const output = pretty
+      ? prettier.format(elementTemplate, {
+          singleQuote: true,
+          trailingComma: 'all',
+          printWidth: 100,
+          parser: 'babel',
+        })
+      : elementTemplate
+
+    await fs.promises.writeFile(location, output, 'utf-8')
+  })
+
+  Promise.all(writeIconFiles)
+    .then(() => {
+      if (showLog) {
+        console.log('Successfully built', icons.length, 'icons.')
+      }
+    })
+    .catch((error) => {
+      throw new Error(`Something went wrong generating icon files,\n ${error}`)
+    })
+}

packages/build-icons/src/index.mjs

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as base64SVG } from './utils/base64SVG.mjs'
+export { default as getIconMetaData } from './utils/getIconMetaData.mjs'

packages/build-icons/src/main.mjs

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+import fs from 'fs'
+import getArgumentOptions from 'minimist'
+import path from 'path'
+
+import generateExportsFile from './building/generateExportsFile.mjs'
+import generateIconFiles from './building/generateIconFiles.mjs'
+import renderIconsObject from './render/renderIconsObject.mjs'
+
+import generateAliasesFile from './building/generateAliasesFile.mjs'
+import generateDynamicImports from './building/generateDynamicImports.mjs'
+import getIconMetaData from './utils/getIconMetaData.mjs'
+import { readSvgDirectory } from './utils/helpers.mjs'
+
+const cliArguments = getArgumentOptions(process.argv.slice(2))
+
+const ICONS_DIR = path.resolve(process.cwd(), 'src/raw-icons')
+const OUTPUT_DIR = path.resolve(process.cwd(), cliArguments.output || 'src')
+
+if (!fs.existsSync(OUTPUT_DIR)) {
+  fs.mkdirSync(OUTPUT_DIR)
+}
+
+const {
+  renderUniqueKey = false,
+  templateSrc,
+  silent = false,
+  iconFileExtension = '.js',
+  importImportFileExtension = '',
+  exportFileName = 'index.js',
+  withAliases = false,
+  aliasNamesOnly = false,
+  withDynamicImports = false,
+  separateAliasesFile = false,
+  aliasesFileExtension = '.js',
+  aliasImportFileExtension = '',
+  pretty = true,
+} = cliArguments
+
+async function buildIcons() {
+  if (templateSrc == null) {
+    throw new Error('No `templateSrc` argument given.')
+  }
+  const svgFiles = readSvgDirectory(ICONS_DIR)
+
+  const icons = renderIconsObject(svgFiles, ICONS_DIR, renderUniqueKey)
+
+  const { default: iconFileTemplate } = await import(path.resolve(process.cwd(), templateSrc))
+
+  const iconMetaData = await getIconMetaData(ICONS_DIR)
+
+  // Generates iconsNodes files for each icon
+  generateIconFiles({
+    iconNodes: icons,
+    outputDirectory: OUTPUT_DIR,
+    template: iconFileTemplate,
+    showLog: !silent,
+    iconFileExtension,
+    pretty: JSON.parse(pretty),
+    iconsDir: ICONS_DIR,
+    iconMetaData,
+  })
+
+  if (withAliases) {
+    await generateAliasesFile({
+      iconNodes: icons,
+      iconMetaData,
+      aliasNamesOnly,
+      iconFileExtension,
+      outputDirectory: OUTPUT_DIR,
+      fileExtension: aliasesFileExtension,
+      aliasImportFileExtension,
+      separateAliasesFile,
+      showLog: !silent,
+    })
+  }
+
+  if (withDynamicImports) {
+    generateDynamicImports({
+      iconNodes: icons,
+      outputDirectory: OUTPUT_DIR,
+      fileExtension: aliasesFileExtension,
+      showLog: !silent,
+    })
+  }
+
+  // Generates entry files for the compiler filled with icons exports
+  generateExportsFile(
+    path.join(OUTPUT_DIR, 'icons', exportFileName),
+    path.join(OUTPUT_DIR, 'icons'),
+    icons,
+    importImportFileExtension
+  )
+}
+
+try {
+  buildIcons()
+} catch (error) {
+  console.error(error)
+}

packages/build-icons/src/render/default-attrs.json

@@ -0,0 +1,11 @@
+{
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": 24,
+  "height": 24,
+  "viewBox": "0 0 24 24",
+  "fill": "none",
+  "stroke": "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}

packages/build-icons/src/render/renderIconsObject.mjs

@@ -0,0 +1,39 @@
+import { basename } from 'path'
+import { parseSync } from 'svgson'
+import { generateHashedKey, hasDuplicatedChildren, readSvg } from '../utils/helpers.mjs'
+
+/**
+ * Build an object in the format: `{ <name>: <contents> }`.
+ * @param {string[]} svgFiles - A list of filenames.
+ * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
+ * @returns {Object}
+ */
+export default (svgFiles, iconsDirectory, renderUniqueKey = false) =>
+  svgFiles
+    .map((svgFile) => {
+      const name = basename(svgFile, '.svg')
+      const svg = readSvg(svgFile, iconsDirectory)
+      const contents = parseSync(svg)
+
+      if (!(contents.children && contents.children.length)) {
+        throw new Error(`${name}.svg has no children!`)
+      }
+
+      if (hasDuplicatedChildren(contents.children)) {
+        throw new Error(`Duplicated children in ${name}.svg`)
+      }
+
+      if (renderUniqueKey) {
+        contents.children = contents.children.map((child) => {
+          child.attributes.key = generateHashedKey(child)
+
+          return child
+        })
+      }
+
+      return { name, contents }
+    })
+    .reduce((icons, icon) => {
+      icons[icon.name] = icon.contents
+      return icons
+    }, {})

packages/build-icons/src/utils/base64SVG.mjs

@@ -0,0 +1,11 @@
+const base64SVG = (svgContents) =>
+  Buffer.from(
+    svgContents
+      .replace('\n', '')
+      .replace(
+        'stroke="currentColor"',
+        'stroke="#000" style="background-color: #fff; border-radius: 2px"',
+      ),
+  ).toString('base64');
+
+export default base64SVG;

packages/build-icons/src/utils/getIconMetaData.mjs

@@ -0,0 +1,16 @@
+import path from 'path'
+import { readSvgDirectory } from '../utils/helpers.mjs'
+
+async function getIconMetaData(iconDirectory) {
+  const iconJsons = readSvgDirectory(iconDirectory, '.json')
+  const aliasesEntries = await Promise.all(
+    iconJsons.map(async (jsonFile) => {
+      const file = await import(path.join(iconDirectory, jsonFile), { assert: { type: 'json' } })
+      return [path.basename(jsonFile, '.json'), file.default]
+    })
+  )
+
+  return Object.fromEntries(aliasesEntries)
+}
+
+export default getIconMetaData

packages/build-icons/src/utils/helpers.mjs

@@ -0,0 +1,131 @@
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * Converts string to CamelCase
+ *
+ * @param {string} string
+ * @returns {string} A camelized string
+ */
+const toCamelCase = (string) =>
+  string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
+    p2 ? p2.toUpperCase() : p1.toLowerCase()
+  )
+
+/**
+ * Converts string to PascalCase
+ *
+ * @param {string} string
+ * @returns {string} A pascalized string
+ */
+export const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string)
+
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1)
+}
+
+/**
+ * Converts string to KebabCase
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+/**
+ * Resets the file contents.
+ *
+ * @param {string} fileName
+ * @param {string} outputDirectory
+ */
+export const resetFile = (fileName, outputDirectory) =>
+  fs.writeFileSync(path.join(outputDirectory, fileName), '', 'utf-8')
+
+/**
+ * Reads the file contents.
+ *
+ * @param {string} path
+ * @returns {string} The contents of a file
+ */
+const readFile = (entry) => fs.readFileSync(path.resolve(__dirname, '../', entry), 'utf-8')
+
+/**
+ * append content to a file
+ *
+ * @param {string} content
+ * @param {string} fileName
+ * @param {string} outputDirectory
+ */
+export const appendFile = (content, fileName, outputDirectory) =>
+  fs.appendFileSync(path.join(outputDirectory, fileName), content, 'utf-8')
+
+/**
+ * writes content to a file
+ *
+ * @param {string} content
+ * @param {string} fileName
+ * @param {string} outputDirectory
+ */
+const writeFile = (content, fileName, outputDirectory) =>
+  fs.writeFileSync(path.join(outputDirectory, fileName), content, 'utf-8')
+
+/**
+ * reads the icon directory
+ *
+ * @param {string} directory
+ * @returns {array} An array of file paths containing svgs
+ */
+export const readSvgDirectory = (directory, fileExtension = '.svg') =>
+  fs.readdirSync(directory).filter((file) => path.extname(file) === fileExtension)
+
+/**
+ * Read svg from directory
+ *
+ * @param {string} fileName
+ * @param {string} directory
+ */
+export const readSvg = (fileName, directory) =>
+  fs.readFileSync(path.join(directory, fileName), 'utf-8')
+
+/**
+ * djb2 hashing function
+ *
+ * @param {string} string
+ * @param {number} seed
+ * @returns {string} A hashed string of 6 characters
+ */
+const hash = (string, seed = 5381) => {
+  let i = string.length
+
+  while (i) {
+    // eslint-disable-next-line no-bitwise, no-plusplus
+    seed = (seed * 33) ^ string.charCodeAt(--i)
+  }
+
+  // eslint-disable-next-line no-bitwise
+  return (seed >>> 0).toString(36).substr(0, 6)
+}
+
+/**
+ * Generate Hashed string based on name and attributes
+ *
+ * @param {object} seed
+ * @param {string} seed.name A name, for example an icon name
+ * @param {object} seed.attributes An object of SVGElement Attrbutes
+ * @returns {string} A hashed string of 6 characters
+ */
+export const generateHashedKey = ({ name, attributes }) => hash(JSON.stringify([name, attributes]))
+
+/**
+ * Checks if array of items contains duplicated items
+ *
+ * @param {array} children an array of items
+ * @returns {Boolean} if items contains duplicated items.
+ */
+export const hasDuplicatedChildren = (children) => {
+  const hashedKeys = children.map(generateHashedKey)
+
+  return !hashedKeys.every(
+    (key, index) => index === hashedKeys.findIndex((childKey) => childKey === key)
+  )
+}

packages/icons/README.md

@@ -0,0 +1,122 @@
+# ./packages/icons
+
+This package is for custom Supabase icons
+They can be used alongside any other icon packages
+
+## example use
+
+```jsx
+import { ReplaceCode, InsertCode } from 'icons'
+
+function app() {
+  return (
+    <>
+      <ReplaceCode className="text-light" strokeWidth={1} size={16} />
+      <InsertCode className="text-light" strokeWidth={1} size={16} />
+    </>
+  )
+}
+```
+
+## adding new icons
+
+Add new icons into ./src/raw-icons
+
+Make sure there are no inline stroke/border/fill colors (see below)
+
+run this in ./internal/build-icons
+
+```bash
+npm run build
+```
+
+This will output icons into ./src/icons and update import names/paths
+
+### Design spec
+
+Icons should:
+
+- always be exported 24x24px,
+- and have an icon inside that frame that's around 18x18px(ish)
+
+### ❌ bad example
+
+Notice the stroke, stroke-linecap, fills, etc.
+These need to be in the parent <svg> so the react component can easily control it.
+The SVG child elements will then respect their parent's attributes.
+
+```svg
+<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect <-- silly backgrounds figma adds in
+            width="24"
+            height="24"
+            fill="#1E1E1E"
+        />
+        <path <--  silly backgrounds figma adds in
+            d="M-20439
+            -11141C-20439..."
+            fill="#404040"
+        />
+        <path
+            d="M-20437 -11142H12131V-11144H-20437V-11142ZM12132 ...."
+            fill="white"
+            fill-opacity="0.1"
+        />
+        <path
+            d="M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086..."
+            stroke="#EDEDED"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <rect
+            x="0.5"
+            y="14.0625"
+            width="16"
+            height="8"
+            rx="1"
+            stroke="#EDEDED"
+            stroke-linejoin="round"
+        />
+        <rect
+            x="0.5"
+            y="1.9375"
+            width="16"
+            height="8"
+            rx="1"
+            stroke="#EDEDED"
+            stroke-linejoin="round"
+        />
+</svg>
+
+```
+
+✅ Good example
+
+We've now cleaned it up, and the parent SVG element now has all the attributes for color and stroke width styling.
+We have also removed the redundant elements that figma adds in like background / artboard backgrounds.
+
+```svg
+<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    >
+        <path d="M-20439 -11141C-20439..." />
+        <path d="M-20437 -11142H12131V-11144H-20437V-11142ZM12132 ...."/>
+        <path d="M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086..." />
+        <rect x="0.5" y="14.0625" width="16" height="8" rx="1" />
+        <rect x="0.5" y="1.9375" width="16" height="8" rx="1" />
+</svg>
+```

packages/icons/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "icons",
+  "main": "./src/icons/index.ts",
+  "scripts": {
+    "build:icons": "build-icons --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts"
+  },
+  "dependencies": {
+    "typescript": "^5.2.2",
+    "@supabase/build-icons": "*"
+  }
+}

packages/icons/scripts/exportTemplate.mjs

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { base64SVG } from '@supabase/build-icons'
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg()
+  const svgBase64 = base64SVG(svgContents)
+
+  return `
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name ${componentName}
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64})
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ * ${deprecated ? '@deprecated' : ''}
+ */
+const ${componentName} = createSupabaseIcon('${componentName}', ${JSON.stringify(children)});
+
+export default ${componentName};
+`
+}

packages/icons/src/createSupabaseIcon.ts

@@ -0,0 +1,77 @@
+import {
+  forwardRef,
+  createElement,
+  ReactSVG,
+  SVGProps,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
+import defaultAttributes from './defaultAttributes';
+
+export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
+
+export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+
+export interface LucideProps extends ComponentAttributes {
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = (string: string) =>
+  string
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .toLowerCase()
+    .trim();
+
+const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
+  const Component = forwardRef<SVGSVGElement, LucideProps>(
+    (
+      {
+        color = 'currentColor',
+        size = 24,
+        strokeWidth = 2,
+        absoluteStrokeWidth,
+        className = '',
+        children,
+        ...rest
+      },
+      ref,
+    ) => {
+      return createElement(
+        'svg',
+        {
+          ref,
+          ...defaultAttributes,
+          width: size,
+          height: size,
+          stroke: color,
+          strokeWidth: absoluteStrokeWidth
+            ? (Number(strokeWidth) * 24) / Number(size)
+            : strokeWidth,
+          className: ['lucide', `lucide-${toKebabCase(iconName)}`, className].join(' '),
+          ...rest,
+        },
+        [
+          ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+          ...(Array.isArray(children) ? children : [children]),
+        ],
+      );
+    },
+  );
+
+  Component.displayName = `${iconName}`;
+
+  return Component;
+};
+
+export default createLucideIcon;

packages/icons/src/defaultAttributes.ts

@@ -0,0 +1,11 @@
+export default {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+};

packages/icons/src/icon.schema.json

@@ -0,0 +1,57 @@
+{
+  "$id": "https://lucide.dev/icons.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$vocabulary": {
+    "https://json-schema.org/draft/2020-12/vocab/core": true,
+    "https://json-schema.org/draft/2020-12/vocab/applicator": true,
+    "https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
+    "https://json-schema.org/draft/2020-12/vocab/validation": true,
+    "https://json-schema.org/draft/2020-12/vocab/meta-data": true,
+    "https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
+    "https://json-schema.org/draft/2020-12/vocab/content": true
+  },
+  "title": "Supabase icon schema (Originally from lucide.dev)",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["$schema", "categories", "tags"],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "aliases": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true
+    },
+    "contributors": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    },
+    "tags": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    },
+    "deprecated": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "description": "A JSON Schema for icons, originally defined by Lucide Icons."
+}

packages/icons/src/icons/REST-api.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name RESTApi
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0zLjIwOTQ3IDEyLjEwNTJDMy4yMDk0NyAxMy40NDAzIDMuNTA3MTUgMTQuNzA2IDQuMDM5NzcgMTUuODM5NE0xMS45OTk3IDMuMzE0OTRDMTAuNjM5MSAzLjMxNDk0IDkuMzUwNjYgMy42MjQwOCA4LjIwMDg1IDQuMTc1OTRNMjAuNzg5OSAxMi4xMDUyQzIwLjc4OTkgMTAuNzU2NiAyMC40ODYyIDkuNDc4OTggMTkuOTQzNSA4LjMzNjk0TTExLjk5OTcgMjAuODk1NEMxMy4zNTc2IDIwLjg5NTQgMTQuNjQzNiAyMC41ODc1IDE1Ljc5MTcgMjAuMDM3N00xNS43OTE3IDIwLjAzNzdDMTYuMzMzNCAyMC44MTggMTcuMjM2IDIxLjMyODkgMTguMjU3OCAyMS4zMjg5QzE5LjkxNDcgMjEuMzI4OSAyMS4yNTc4IDE5Ljk4NTcgMjEuMjU3OCAxOC4zMjg5QzIxLjI1NzggMTYuNjcyIDE5LjkxNDcgMTUuMzI4OSAxOC4yNTc4IDE1LjMyODlDMTYuNjAxIDE1LjMyODkgMTUuMjU3OCAxNi42NzIgMTUuMjU3OCAxOC4zMjg5QzE1LjI1NzggMTguOTYzOSAxNS40NTUxIDE5LjU1MjggMTUuNzkxNyAyMC4wMzc3Wk00LjAzOTc3IDE1LjgzOTRDMy4yNDAyMiAxNi4zNzgyIDIuNzE0MzYgMTcuMjkyMSAyLjcxNDM2IDE4LjMyODlDMi43MTQzNiAxOS45ODU3IDQuMDU3NSAyMS4zMjg5IDUuNzE0MzYgMjEuMzI4OUM3LjM3MTIxIDIxLjMyODkgOC43MTQzNiAxOS45ODU3IDguNzE0MzYgMTguMzI4OUM4LjcxNDM2IDE2LjY3MiA3LjM3MTIxIDE1LjMyODkgNS43MTQzNiAxNS4zMjg5QzUuMDk0MjIgMTUuMzI4OSA0LjUxODAzIDE1LjUxNyA0LjAzOTc3IDE1LjgzOTRaTTguMjAwODUgNC4xNzU5NEM3LjY2MTU4IDMuMzc4OSA2Ljc0OTE1IDIuODU0OTggNS43MTQzNiAyLjg1NDk4QzQuMDU3NSAyLjg1NDk4IDIuNzE0MzYgNC4xOTgxMyAyLjcxNDM2IDUuODU0OThDMi43MTQzNiA3LjUxMTgzIDQuMDU3NSA4Ljg1NDk4IDUuNzE0MzYgOC44NTQ5OEM3LjM3MTIxIDguODU0OTggOC43MTQzNiA3LjUxMTgzIDguNzE0MzYgNS44NTQ5OEM4LjcxNDM2IDUuMjMyOTIgOC41MjUwMyA0LjY1NTA4IDguMjAwODUgNC4xNzU5NFpNMTkuOTQzNSA4LjMzNjk0QzIwLjczNjggNy43OTcwOSAyMS4yNTc4IDYuODg2ODggMjEuMjU3OCA1Ljg1NDk4QzIxLjI1NzggNC4xOTgxMyAxOS45MTQ3IDIuODU0OTggMTguMjU3OCAyLjg1NDk4QzE2LjYwMSAyLjg1NDk4IDE1LjI1NzggNC4xOTgxMyAxNS4yNTc4IDUuODU0OThDMTUuMjU3OCA3LjUxMTgzIDE2LjYwMSA4Ljg1NDk4IDE4LjI1NzggOC44NTQ5OEMxOC44ODI4IDguODU0OTggMTkuNDYzMSA4LjY2Mzg4IDE5Ljk0MzUgOC4zMzY5NFoiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const RESTApi = createSupabaseIcon('RESTApi', [
+  [
+    'path',
+    {
+      d: 'M3.20947 12.1052C3.20947 13.4403 3.50715 14.706 4.03977 15.8394M11.9997 3.31494C10.6391 3.31494 9.35066 3.62408 8.20085 4.17594M20.7899 12.1052C20.7899 10.7566 20.4862 9.47898 19.9435 8.33694M11.9997 20.8954C13.3576 20.8954 14.6436 20.5875 15.7917 20.0377M15.7917 20.0377C16.3334 20.818 17.236 21.3289 18.2578 21.3289C19.9147 21.3289 21.2578 19.9857 21.2578 18.3289C21.2578 16.672 19.9147 15.3289 18.2578 15.3289C16.601 15.3289 15.2578 16.672 15.2578 18.3289C15.2578 18.9639 15.4551 19.5528 15.7917 20.0377ZM4.03977 15.8394C3.24022 16.3782 2.71436 17.2921 2.71436 18.3289C2.71436 19.9857 4.0575 21.3289 5.71436 21.3289C7.37121 21.3289 8.71436 19.9857 8.71436 18.3289C8.71436 16.672 7.37121 15.3289 5.71436 15.3289C5.09422 15.3289 4.51803 15.517 4.03977 15.8394ZM8.20085 4.17594C7.66158 3.3789 6.74915 2.85498 5.71436 2.85498C4.0575 2.85498 2.71436 4.19813 2.71436 5.85498C2.71436 7.51183 4.0575 8.85498 5.71436 8.85498C7.37121 8.85498 8.71436 7.51183 8.71436 5.85498C8.71436 5.23292 8.52503 4.65508 8.20085 4.17594ZM19.9435 8.33694C20.7368 7.79709 21.2578 6.88688 21.2578 5.85498C21.2578 4.19813 19.9147 2.85498 18.2578 2.85498C16.601 2.85498 15.2578 4.19813 15.2578 5.85498C15.2578 7.51183 16.601 8.85498 18.2578 8.85498C18.8828 8.85498 19.4631 8.66388 19.9435 8.33694Z',
+      key: 'xusdjk',
+    },
+  ],
+]);
+
+export default RESTApi;

packages/icons/src/icons/_example-template.ts

@@ -0,0 +1,20 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name ExampleTemplate
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMy41IDEzaDYiIC8+CiAgPHBhdGggZD0ibTIgMTYgNC41LTkgNC41IDkiIC8+CiAgPHBhdGggZD0iTTE4IDd2OSIgLz4KICA8cGF0aCBkPSJtMTQgMTIgNCA0IDQtNCIgLz4KPC9zdmc+)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const ExampleTemplate = createSupabaseIcon('ExampleTemplate', [
+  ['path', { d: 'M3.5 13h6', key: 'p1my2r' }],
+  ['path', { d: 'm2 16 4.5-9 4.5 9', key: 'ndf0b3' }],
+  ['path', { d: 'M18 7v9', key: 'pknjwm' }],
+  ['path', { d: 'm14 12 4 4 4-4', key: 'buelq4' }],
+]);
+
+export default ExampleTemplate;

packages/icons/src/icons/api-docs.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name ApiDocs
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03LjQ0NDM0IDE0LjMzNDdIMTYuNDQ0M003LjQ0NDM0IDExLjMzNDdIMTYuNDQ0M003LjQ0NDM0IDE3LjMzNDdIMTMuNDQ0M00xOS40OTk0IDguNTA3MTRWMTkuMTA1MkMxOS40OTk0IDIwLjIwOTcgMTguNjAzOSAyMS4xMDUyIDE3LjQ5OTQgMjEuMTA1Mkg2LjVDNS4zOTU0MyAyMS4xMDUyIDQuNSAyMC4yMDk3IDQuNSAxOS4xMDUyVjUuMTA1OTZDNC41IDQuMDAxMzkgNS4zOTU0MyAzLjEwNTk2IDYuNSAzLjEwNTk2SDE0LjA3MjNMMTkuNDk5NCA4LjUwNzE0Wk0xOS40NDY1IDguNDgxOTNMMTQuMDcwNCAzLjEwNTk2TDE0LjA3MDEgNy40ODE4NkMxNC4wNzAxIDguMDM0MTggMTQuNTE3OCA4LjQ4MTkzIDE1LjA3MDEgOC40ODE5M0wxOS40NDY1IDguNDgxOTNaIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const ApiDocs = createSupabaseIcon('ApiDocs', [
+  [
+    'path',
+    {
+      d: 'M7.44434 14.3347H16.4443M7.44434 11.3347H16.4443M7.44434 17.3347H13.4443M19.4994 8.50714V19.1052C19.4994 20.2097 18.6039 21.1052 17.4994 21.1052H6.5C5.39543 21.1052 4.5 20.2097 4.5 19.1052V5.10596C4.5 4.00139 5.39543 3.10596 6.5 3.10596H14.0723L19.4994 8.50714ZM19.4465 8.48193L14.0704 3.10596L14.0701 7.48186C14.0701 8.03418 14.5178 8.48193 15.0701 8.48193L19.4465 8.48193Z',
+      key: '2ysat9',
+    },
+  ],
+]);
+
+export default ApiDocs;

packages/icons/src/icons/auth.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Auth
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01LjI0MTIxIDE1LjA2NzRIMTIuNzQxMk01LjI0MTIxIDE1LjA2NzRWMTguMDY3NEgxMi43NDEyVjE1LjA2NzRNNS4yNDEyMSAxNS4wNjc0VjEyLjA2NzRIMTIuNzQxMlYxNS4wNjc0TTE1IDcuNjA1NDdWNC42MDU0N0MxNSAyLjk0ODYxIDEzLjY1NjkgMS42MDU0NyAxMiAxLjYwNTQ3QzEwLjM0MzEgMS42MDU0NyA5IDIuOTQ4NjEgOSA0LjYwNTQ3VjcuNjA1NDdNNS4yMDg5OCA5LjYwNTQ3TDUuMjA4OTggMTkuMTA1NUM1LjIwODk4IDIwLjIxIDYuMTA0NDEgMjEuMTA1NSA3LjIwODk4IDIxLjEwNTVIMTYuNzA5QzE3LjgxMzYgMjEuMTA1NSAxOC43MDkgMjAuMjEgMTguNzA5IDE5LjEwNTVWOS42MDU0N0MxOC43MDkgOC41MDA5IDE3LjgxMzYgNy42MDU0NyAxNi43MDkgNy42MDU0N0w3LjIwODk5IDcuNjA1NDdDNi4xMDQ0MiA3LjYwNTQ3IDUuMjA4OTggOC41MDA5IDUuMjA4OTggOS42MDU0N1oiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Auth = createSupabaseIcon('Auth', [
+  [
+    'path',
+    {
+      d: 'M5.24121 15.0674H12.7412M5.24121 15.0674V18.0674H12.7412V15.0674M5.24121 15.0674V12.0674H12.7412V15.0674M15 7.60547V4.60547C15 2.94861 13.6569 1.60547 12 1.60547C10.3431 1.60547 9 2.94861 9 4.60547V7.60547M5.20898 9.60547L5.20898 19.1055C5.20898 20.21 6.10441 21.1055 7.20898 21.1055H16.709C17.8136 21.1055 18.709 20.21 18.709 19.1055V9.60547C18.709 8.5009 17.8136 7.60547 16.709 7.60547L7.20899 7.60547C6.10442 7.60547 5.20898 8.5009 5.20898 9.60547Z',
+      key: 'h65u22',
+    },
+  ],
+]);
+
+export default Auth;

packages/icons/src/icons/database.ts

@@ -0,0 +1,31 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Database
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aCBkPSIgTTUuNTY3NzQgOS43MDY0MkgxOC40NTQ3VjE1LjcwNjRINS41Njc3NFY5LjcwNjQyWiIgLz4KICAgIDxwYXRoIGQ9IiBNNC41IDE2LjcwOTRDNC41IDE2LjE1NzEgNC45NDc3MiAxNS43MDk0IDUuNSAxNS43MDk0SDE4LjVDMTkuMDUyMyAxNS43MDk0IDE5LjUgMTYuMTU3MSAxOS41CiAgICAgICAgMTYuNzA5NFYyMC43MDk0QzE5LjUgMjEuMjYxNiAxOS4wNTIzIDIxLjcwOTQgMTguNSAyMS43MDk0SDUuNUM0Ljk0NzcyIDIxLjcwOTQgNC41IDIxLjI2MTYgNC41CiAgICAgICAgMjAuNzA5NFYxNi43MDk0WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTQuNSA0LjcwNjc5QzQuNSA0LjE1NDUgNC45NDc3MiAzLjcwNjc5IDUuNSAzLjcwNjc5SDE4LjVDMTkuMDUyMyAzLjcwNjc5IDE5LjUgNC4xNTQ1IDE5LjUgNC43MDY3OVY4LjcwNjc5QzE5LjUgOS4yNTkwNyAxOS4wNTIzIDkuNzA2NzkgMTguNSA5LjcwNjc5SDUuNUM0Ljk0NzcyIDkuNzA2NzkgNC41IDkuMjU5MDcgNC41IDguNzA2NzlWNC43MDY3OVoiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Database = createSupabaseIcon('Database', [
+  ['path', { d: ' M5.56774 9.70642H18.4547V15.7064H5.56774V9.70642Z', key: 'g5hndz' }],
+  [
+    'path',
+    {
+      d: ' M4.5 16.7094C4.5 16.1571 4.94772 15.7094 5.5 15.7094H18.5C19.0523 15.7094 19.5 16.1571 19.5\n        16.7094V20.7094C19.5 21.2616 19.0523 21.7094 18.5 21.7094H5.5C4.94772 21.7094 4.5 21.2616 4.5\n        20.7094V16.7094Z',
+      key: '1m5ehm',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M4.5 4.70679C4.5 4.1545 4.94772 3.70679 5.5 3.70679H18.5C19.0523 3.70679 19.5 4.1545 19.5 4.70679V8.70679C19.5 9.25907 19.0523 9.70679 18.5 9.70679H5.5C4.94772 9.70679 4.5 9.25907 4.5 8.70679V4.70679Z',
+      key: '1w4kbe',
+    },
+  ],
+]);
+
+export default Database;

packages/icons/src/icons/edge-functions.ts

@@ -0,0 +1,44 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name EdgeFunctions
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOCAxMi4xMDU1QzE4IDE1LjQxOTIgMTUuMzEzNyAxOC4xMDU1IDEyIDE4LjEwNTVDOC42ODYzIDE4LjEwNTUgNi4wMDAwMSAxNS40MTkyIDYuMDAwMDEgMTIuMTA1NUM2LjAwMDAxIDguNzkxNzYgOC42ODYzIDYuMTA1NDcgMTIgNi4xMDU0N0MxNS4zMTM3IDYuMTA1NDcgMTggOC43OTE3NiAxOCAxMi4xMDU1WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTIxLjM5OTkgNS43MDE1NEMyMS4zOTk5IDcuMzU4MzkgMjAuMDU2OCA4LjcwMTU0IDE4LjM5OTkgOC43MDE1NEMxNi43NDMxIDguNzAxNTQgMTUuMzk5OSA3LjM1ODM5IDE1LjM5OTkgNS43MDE1NEMxNS4zOTk5IDQuMDQ0NjggMTYuNzQzMSAyLjcwMTU0IDE4LjM5OTkgMi43MDE1NEMyMC4wNTY4IDIuNzAxNTQgMjEuMzk5OSA0LjA0NDY4IDIxLjM5OTkgNS43MDE1NFoiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik04LjYyMjE2IDE4LjQzNjNDOC42MjIxNiAyMC4wOTMyIDcuMjc5MDIgMjEuNDM2MyA1LjYyMjE2IDIxLjQzNjNDMy45NjUzMSAyMS40MzYzIDIuNjIyMTYgMjAuMDkzMiAyLjYyMjE2IDE4LjQzNjNDMi42MjIxNiAxNi43Nzk1IDMuOTY1MzEgMTUuNDM2MyA1LjYyMjE2IDE1LjQzNjNDNy4yNzkwMiAxNS40MzYzIDguNjIyMTYgMTYuNzc5NSA4LjYyMjE2IDE4LjQzNjNaIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNMy4xODEyMSAxNi4yNjkxQzIuNTg0MDEgMTUuMDA2NSAyLjI1IDEzLjU5NSAyLjI1IDEyLjEwNTVDMi4yNSA2LjcyMDY5IDYuNjE1MjIgMi4zNTU0NyAxMiAyLjM1NTQ3QzEzLjQ4OTMgMi4zNTU0NyAxNC45MDA1IDIuNjg5MzcgMTYuMTYzIDMuMjg2MzhNNy42ODY3OSAyMC44NTJDOC45ODcxNSAyMS40OTQ0IDEwLjQ1MTQgMjEuODU1NSAxMiAyMS44NTU1QzE3LjM4NDggMjEuODU1NSAyMS43NSAxNy40OTAyIDIxLjc1IDEyLjEwNTVDMjEuNzUgMTAuNjE2MiAyMS40MTYxIDkuMjA0OTMgMjAuODE5MSA3Ljk0MjQyIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const EdgeFunctions = createSupabaseIcon('EdgeFunctions', [
+  [
+    'path',
+    {
+      d: 'M18 12.1055C18 15.4192 15.3137 18.1055 12 18.1055C8.6863 18.1055 6.00001 15.4192 6.00001 12.1055C6.00001 8.79176 8.6863 6.10547 12 6.10547C15.3137 6.10547 18 8.79176 18 12.1055Z',
+      key: '1vv84o',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M21.3999 5.70154C21.3999 7.35839 20.0568 8.70154 18.3999 8.70154C16.7431 8.70154 15.3999 7.35839 15.3999 5.70154C15.3999 4.04468 16.7431 2.70154 18.3999 2.70154C20.0568 2.70154 21.3999 4.04468 21.3999 5.70154Z',
+      key: '1vzce8',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M8.62216 18.4363C8.62216 20.0932 7.27902 21.4363 5.62216 21.4363C3.96531 21.4363 2.62216 20.0932 2.62216 18.4363C2.62216 16.7795 3.96531 15.4363 5.62216 15.4363C7.27902 15.4363 8.62216 16.7795 8.62216 18.4363Z',
+      key: 's8poqq',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M3.18121 16.2691C2.58401 15.0065 2.25 13.595 2.25 12.1055C2.25 6.72069 6.61522 2.35547 12 2.35547C13.4893 2.35547 14.9005 2.68937 16.163 3.28638M7.68679 20.852C8.98715 21.4944 10.4514 21.8555 12 21.8555C17.3848 21.8555 21.75 17.4902 21.75 12.1055C21.75 10.6162 21.4161 9.20493 20.8191 7.94242',
+      key: 'xs92pm',
+    },
+  ],
+]);
+
+export default EdgeFunctions;

packages/icons/src/icons/home.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Home
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik05LjQzNDE0IDIwLjgwM1YxMy4wNTU3QzkuNDM0MTQgMTIuNTAzNCA5Ljg4MTg2IDEyLjA1NTcgMTAuNDM0MSAxMi4wNTU3SDE0Ljc2NzlDMTUuMzIwMiAxMi4wNTU3IDE1Ljc2NzkgMTIuNTAzNCAxNS43Njc5IDEzLjA1NTdWMjAuODAzTTEyLjAxODEgMy40ODc5OEw1LjUzMDMxIDcuOTk4NEM1LjI2MTQ1IDguMTg1MzIgNS4xMDExNCA4LjQ5MjAyIDUuMTAxMTQgOC44MTk0OEw1LjEwMTE3IDE4LjgwM0M1LjEwMTE3IDE5LjkwNzUgNS45OTY2IDIwLjgwMyA3LjEwMTE3IDIwLjgwM0gxOC4xMDEyQzE5LjIwNTcgMjAuODAzIDIwLjEwMTIgMTkuOTA3NSAyMC4xMDEyIDE4LjgwM0wyMC4xMDExIDguODg1NTRDMjAuMTAxMSA4LjU1OTg4IDE5Ljk0MjYgOC4yNTQ2MiAxOS42NzYxIDguMDY3MzdMMTMuMTYzOSAzLjQ5MDg4QzEyLjgyMDQgMy4yNDk1MSAxMi4zNjI3IDMuMjQ4MzYgMTIuMDE4MSAzLjQ4Nzk4WiIgLz4KPC9zdmc+)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Home = createSupabaseIcon('Home', [
+  [
+    'path',
+    {
+      d: 'M9.43414 20.803V13.0557C9.43414 12.5034 9.88186 12.0557 10.4341 12.0557H14.7679C15.3202 12.0557 15.7679 12.5034 15.7679 13.0557V20.803M12.0181 3.48798L5.53031 7.9984C5.26145 8.18532 5.10114 8.49202 5.10114 8.81948L5.10117 18.803C5.10117 19.9075 5.9966 20.803 7.10117 20.803H18.1012C19.2057 20.803 20.1012 19.9075 20.1012 18.803L20.1011 8.88554C20.1011 8.55988 19.9426 8.25462 19.6761 8.06737L13.1639 3.49088C12.8204 3.24951 12.3627 3.24836 12.0181 3.48798Z',
+      key: '1bkqgr',
+    },
+  ],
+]);
+
+export default Home;

packages/icons/src/icons/index.ts

@@ -0,0 +1,20 @@
+export { default as RESTApi } from './REST-api';
+export { default as ExampleTemplate } from './_example-template';
+export { default as ApiDocs } from './api-docs';
+export { default as Auth } from './auth';
+export { default as Database } from './database';
+export { default as EdgeFunctions } from './edge-functions';
+export { default as Home } from './home';
+export { default as InsertCode } from './insert-code';
+export { default as Integrations } from './integrations';
+export { default as Logs } from './logs';
+export { default as Postgres } from './postgres';
+export { default as Realtime } from './realtime';
+export { default as ReplaceCode } from './replace-code';
+export { default as Reports } from './reports';
+export { default as Settings } from './settings';
+export { default as SqlEditor } from './sql-editor';
+export { default as Storage } from './storage';
+export { default as TableEditor } from './table-editor';
+export { default as User } from './user';
+

packages/icons/src/icons/insert-code.ts

@@ -0,0 +1,58 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name InsertCode
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTS0yMDQzNyAtMTExNDJIMTIxMzFWLTExMTQ0SC0yMDQzN1YtMTExNDJaTTEyMTMyIC0xMTE0MVY3MTEzSDEyMTM0Vi0xMTE0MUgxMjEzMlpNMTIxMzEgNzExNEgtMjA0MzdWNzExNkgxMjEzMVY3MTE0Wk0tMjA0MzggNzExM1YtMTExNDFILTIwNDQwVjcxMTNILTIwNDM4Wk0tMjA0MzcgNzExNEMtMjA0MzcuNiA3MTE0IC0yMDQzOCA3MTEzLjU1IC0yMDQzOCA3MTEzSC0yMDQ0MEMtMjA0NDAgNzExNC42NiAtMjA0MzguNyA3MTE2IC0yMDQzNyA3MTE2VjcxMTRaTTEyMTMyIDcxMTNDMTIxMzIgNzExMy41NSAxMjEzMS42IDcxMTQgMTIxMzEgNzExNFY3MTE2QzEyMTMyLjcgNzExNiAxMjEzNCA3MTE0LjY2IDEyMTM0IDcxMTNIMTIxMzJaTTEyMTMxIC0xMTE0MkMxMjEzMS42IC0xMTE0MiAxMjEzMiAtMTExNDEuNiAxMjEzMiAtMTExNDFIMTIxMzRDMTIxMzQgLTExMTQyLjcgMTIxMzIuNyAtMTExNDQgMTIxMzEgLTExMTQ0Vi0xMTE0MlpNLTIwNDM3IC0xMTE0NEMtMjA0MzguNyAtMTExNDQgLTIwNDQwIC0xMTE0Mi43IC0yMDQ0MCAtMTExNDFILTIwNDM4Qy0yMDQzOCAtMTExNDEuNiAtMjA0MzcuNiAtMTExNDIgLTIwNDM3IC0xMTE0MlYtMTExNDRaIgogICAgICAgIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMSIgLz4KICAgIDxwYXRoIGQ9Ik0yMi44NDM3IDguNjk0OTlMMTkuNTM2OSAxMi4wMDE4TDIyLjg0MzggMTUuMzA4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPHJlY3QgeD0iMC41IiB5PSIxNC4wNjI1IiB3aWR0aD0iMTYiIGhlaWdodD0iOCIgcng9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjEuOTM3NSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjgiIHJ4PSIxIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const InsertCode = createSupabaseIcon('InsertCode', [
+  [
+    'path',
+    {
+      d: 'M-20437 -11142H12131V-11144H-20437V-11142ZM12132 -11141V7113H12134V-11141H12132ZM12131 7114H-20437V7116H12131V7114ZM-20438 7113V-11141H-20440V7113H-20438ZM-20437 7114C-20437.6 7114 -20438 7113.55 -20438 7113H-20440C-20440 7114.66 -20438.7 7116 -20437 7116V7114ZM12132 7113C12132 7113.55 12131.6 7114 12131 7114V7116C12132.7 7116 12134 7114.66 12134 7113H12132ZM12131 -11142C12131.6 -11142 12132 -11141.6 12132 -11141H12134C12134 -11142.7 12132.7 -11144 12131 -11144V-11142ZM-20437 -11144C-20438.7 -11144 -20440 -11142.7 -20440 -11141H-20438C-20438 -11141.6 -20437.6 -11142 -20437 -11142V-11144Z',
+      fill: 'white',
+      'fill-opacity': '0.1',
+      key: 'iaqtc1',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      key: '1gnkuu',
+    },
+  ],
+  [
+    'rect',
+    {
+      x: '0.5',
+      y: '14.0625',
+      width: '16',
+      height: '8',
+      rx: '1',
+      'stroke-linejoin': 'round',
+      key: 't6herz',
+    },
+  ],
+  [
+    'rect',
+    {
+      x: '0.5',
+      y: '1.9375',
+      width: '16',
+      height: '8',
+      rx: '1',
+      'stroke-linejoin': 'round',
+      key: '718qtu',
+    },
+  ],
+]);
+
+export default InsertCode;

packages/icons/src/icons/integrations.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Integrations
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xNy4yNjYxIDMuMjMyNTRWMTAuNzMyNU0xMy41MTYxIDYuOTgyOTFMMjEuMDE2MSA2Ljk4MjkxTTExLjAzOTEgMTYuOTUwOEMxMS4wMzkxIDE5LjE3NTIgOS4yMzU4NSAyMC45Nzg0IDcuMDExNDcgMjAuOTc4NEM0Ljc4NzEgMjAuOTc4NCAyLjk4Mzg5IDE5LjE3NTIgMi45ODM4OSAxNi45NTA4QzIuOTgzODkgMTQuNzI2NCA0Ljc4NzEgMTIuOTIzMiA3LjAxMTQ3IDEyLjkyMzJDOS4yMzU4NSAxMi45MjMyIDExLjAzOTEgMTQuNzI2NCAxMS4wMzkxIDE2Ljk1MDhaTTIxLjAxNjEgMTkuODU2OFYxNC4zNTY4QzIxLjAxNjEgMTMuODA0NSAyMC41Njg0IDEzLjM1NjggMjAuMDE2MSAxMy4zNTY4SDE0LjUxNjFDMTMuOTYzOCAxMy4zNTY4IDEzLjUxNjEgMTMuODA0NSAxMy41MTYxIDE0LjM1NjhWMTkuODU2OEMxMy41MTYxIDIwLjQwOTEgMTMuOTYzOCAyMC44NTY4IDE0LjUxNjEgMjAuODU2OEgyMC4wMTYxQzIwLjU2ODQgMjAuODU2OCAyMS4wMTYxIDIwLjQwOTEgMjEuMDE2MSAxOS44NTY4Wk00LjI2MjIxIDEwLjczMjVIOS43NjIyMUMxMC4zMTQ1IDEwLjczMjUgMTAuNzYyMiAxMC4yODQ4IDEwLjc2MjIgOS43MzI1NFY0LjIzMjU0QzEwLjc2MjIgMy42ODAyNiAxMC4zMTQ1IDMuMjMyNTQgOS43NjIyMSAzLjIzMjU0SDQuMjYyMjFDMy43MDk5MiAzLjIzMjU0IDMuMjYyMjEgMy42ODAyNiAzLjI2MjIxIDQuMjMyNTRWOS43MzI1NEMzLjI2MjIxIDEwLjI4NDggMy43MDk5MiAxMC43MzI1IDQuMjYyMjEgMTAuNzMyNVoiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Integrations = createSupabaseIcon('Integrations', [
+  [
+    'path',
+    {
+      d: 'M17.2661 3.23254V10.7325M13.5161 6.98291L21.0161 6.98291M11.0391 16.9508C11.0391 19.1752 9.23585 20.9784 7.01147 20.9784C4.7871 20.9784 2.98389 19.1752 2.98389 16.9508C2.98389 14.7264 4.7871 12.9232 7.01147 12.9232C9.23585 12.9232 11.0391 14.7264 11.0391 16.9508ZM21.0161 19.8568V14.3568C21.0161 13.8045 20.5684 13.3568 20.0161 13.3568H14.5161C13.9638 13.3568 13.5161 13.8045 13.5161 14.3568V19.8568C13.5161 20.4091 13.9638 20.8568 14.5161 20.8568H20.0161C20.5684 20.8568 21.0161 20.4091 21.0161 19.8568ZM4.26221 10.7325H9.76221C10.3145 10.7325 10.7622 10.2848 10.7622 9.73254V4.23254C10.7622 3.68026 10.3145 3.23254 9.76221 3.23254H4.26221C3.70992 3.23254 3.26221 3.68026 3.26221 4.23254V9.73254C3.26221 10.2848 3.70992 10.7325 4.26221 10.7325Z',
+      key: '3dnck7',
+    },
+  ],
+]);
+
+export default Integrations;

packages/icons/src/icons/logs.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Logs
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik00LjUgNS4yMDY3OUg0LjUzNzEzTTcuNDYyNDEgNS4yMTcwN0gxOS41TTQuNSA5LjY1ODM5SDQuNTM3MTNNNy40NjI0MSA5LjY2ODY4SDE5LjVNNC41MjY5MiAxNC4xNjRINC41MzcxM003LjQ2MjQxIDE0LjE3NDJIMTkuNU00LjUyNjkyIDE4LjcwNjhMNC41MzcxMyAxOC42OTY1TTcuNDYyNDEgMTguNzA2OEgxOS41IiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Logs = createSupabaseIcon('Logs', [
+  [
+    'path',
+    {
+      d: 'M4.5 5.20679H4.53713M7.46241 5.21707H19.5M4.5 9.65839H4.53713M7.46241 9.66868H19.5M4.52692 14.164H4.53713M7.46241 14.1742H19.5M4.52692 18.7068L4.53713 18.6965M7.46241 18.7068H19.5',
+      key: '2ab8w8',
+    },
+  ],
+]);
+
+export default Logs;

packages/icons/src/icons/postgres.ts

@@ -0,0 +1,30 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Postgres
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMS41NDY2IDMuMjMxMDhDMTEuMjcwNCAzLjIzMTA4IDExLjA0NjYgMy40NTQ5NCAxMS4wNDY2IDMuNzMxMDhDMTEuMDQ2NiA0LjAwNzIyIDExLjI3MDQgNC4yMzEwOCAxMS41NDY2IDQuMjMxMDhWMy4yMzEwOFpNMjAuNjU2OSAxOS41MDQ2QzIwLjY1NjkgMTkuMjI4NSAyMC40MzMgMTkuMDA0NiAyMC4xNTY5IDE5LjAwNDZDMTkuODgwOCAxOS4wMDQ2IDE5LjY1NjkgMTkuMjI4NSAxOS42NTY5IDE5LjUwNDZIMjAuNjU2OVpNMTkuNjU2OSAxNS45NjU2QzE5LjY1NjkgMTYuMjQxNyAxOS44ODA4IDE2LjQ2NTYgMjAuMTU2OSAxNi40NjU2QzIwLjQzMyAxNi40NjU2IDIwLjY1NjkgMTYuMjQxNyAyMC42NTY5IDE1Ljk2NTZIMTkuNjU2OVpNMTMuMDExOSAxOS41NTM2QzEyLjk1OSAxOS4yODI2IDEyLjY5NjQgMTkuMTA1OCAxMi40MjU0IDE5LjE1ODZDMTIuMTU0NCAxOS4yMTE1IDExLjk3NzUgMTkuNDc0MSAxMi4wMzA0IDE5Ljc0NTJMMTMuMDExOSAxOS41NTM2Wk05Ljg3MzgxIDE4Ljg1NjVMOS4zNzM4MSAxOC44NTY1VjE4Ljg1NjVIOS44NzM4MVpNNC4yMDcyMSA1LjI5OTMyTDMuNzM3ODQgNS4xMjY5OUwzLjczNzg0IDUuMTI3TDQuMjA3MjEgNS4yOTkzMlpNMi41MjUyNyA5Ljg4MDQ2TDIuMDU1OSA5LjcwODE0TDIuMDU1OSA5LjcwODE0TDIuNTI1MjcgOS44ODA0NlpNMy4yNDkyMiAxMi42ODczTDIuOTIxNzYgMTMuMDY1MUwyLjkyMTc2IDEzLjA2NTFMMy4yNDkyMiAxMi42ODczWk00LjQwMzM0IDEzLjY4NzVMNC4wNzU4OCAxNC4wNjUzTDQuMDc1ODggMTQuMDY1M0w0LjQwMzM0IDEzLjY4NzVaTTUuMDA5NzEgMTUuMDE1NEw0LjUwOTcxIDE1LjAxNTRMNC41MDk3MSAxNS4wMTU0TDUuMDA5NzEgMTUuMDE1NFpNNS4wMDk2OSAxNi44NTM2TDUuNTA5NjkgMTYuODUzNkw1LjUwOTY5IDE2Ljg1MzZMNS4wMDk2OSAxNi44NTM2Wk05Ljg3Mzg1IDEwLjY2NjFMOS4zNzM4NSAxMC42NjYxTDkuMzczODUgMTAuNjY2MUw5Ljg3Mzg1IDEwLjY2NjFaTTExLjkzOTkgNi45MDc4M0MxMi4xMzYgNi43MTMzOSAxMi4xMzczIDYuMzk2ODEgMTEuOTQyOSA2LjIwMDczQzExLjc0ODQgNi4wMDQ2NCAxMS40MzE5IDYuMDAzMzEgMTEuMjM1OCA2LjE5Nzc0TDExLjkzOTkgNi45MDc4M1pNMTcuODQxIDE4Ljc1MDZMMTcuODQwOSAxOC4yNTA2TDE3Ljg0MDkgMTguMjUwNkwxNy44NDEgMTguNzUwNlpNMjMuMDY3NiAxOS4yNTA2QzIzLjM0MzcgMTkuMjUwNiAyMy41Njc2IDE5LjAyNjcgMjMuNTY3NSAxOC43NTA2QzIzLjU2NzUgMTguNDc0NCAyMy4zNDM3IDE4LjI1MDYgMjMuMDY3NSAxOC4yNTA2TDIzLjA2NzYgMTkuMjUwNlpNMTMuMDE3MSAxNS4yNDQ2QzEyLjg5NTUgMTQuOTk2NyAxMi41OTU5IDE0Ljg5NDMgMTIuMzQ4IDE1LjAxNkMxMi4xMDAxIDE1LjEzNzYgMTEuOTk3OCAxNS40MzcyIDEyLjExOTQgMTUuNjg1MUwxMy4wMTcxIDE1LjI0NDZaTTExLjU0NjYgNC4yMzEwOEgxMi42MDhWMy4yMzEwOEgxMS41NDY2VjQuMjMxMDhaTTE5LjY1NjkgMTkuNTA0NkMxOS42NTY5IDIxLjAyNjQgMTguMjQ2NyAyMi4yNjA2IDE2LjMwMzMgMjIuMjYwNlYyMy4yNjA2QzE4LjYxNjUgMjMuMjYwNiAyMC42NTY5IDIxLjc0NDkgMjAuNjU2OSAxOS41MDQ2SDE5LjY1NjlaTTEyLjYwOCA0LjIzMTA4QzE2LjUwMSA0LjIzMTA4IDE5LjY1NjkgNy4zODY5OCAxOS42NTY5IDExLjI4SDIwLjY1NjlDMjAuNjU2OSA2LjgzNDcgMTcuMDUzMyAzLjIzMTA4IDEyLjYwOCAzLjIzMTA4VjQuMjMxMDhaTTE5LjY1NjkgMTEuMjhWMTUuOTY1NkgyMC42NTY5VjExLjI4SDE5LjY1NjlaTTE2LjMwMzMgMjIuMjYwNkMxNC42NzI3IDIyLjI2MDYgMTMuMzEzIDIxLjA5NjQgMTMuMDExOSAxOS41NTM2TDEyLjAzMDQgMTkuNzQ1MkMxMi40MjE0IDIxLjc0ODUgMTQuMTg1MiAyMy4yNjA2IDE2LjMwMzMgMjMuMjYwNlYyMi4yNjA2Wk0xMS42NTUyIDMuMjIzMzlINi40NjQ1OVY0LjIyMzM5SDExLjY1NTJWMy4yMjMzOVpNMy43Mzc4NCA1LjEyN0wyLjA1NTkgOS43MDgxNEwyLjk5NDY0IDEwLjA1MjhMNC42NzY1OCA1LjQ3MTY0TDMuNzM3ODQgNS4xMjdaTTIuOTIxNzYgMTMuMDY1MUw0LjA3NTg4IDE0LjA2NTNMNC43MzA4IDEzLjMwOTZMMy41NzY2OCAxMi4zMDk0TDIuOTIxNzYgMTMuMDY1MVpNNC41MDk3MSAxNS4wMTU0TDQuNTA5NjkgMTYuODUzNkw1LjUwOTY5IDE2Ljg1MzZMNS41MDk3MSAxNS4wMTU0TDQuNTA5NzEgMTUuMDE1NFpNMTAuMzczOSAxMC42NjYxQzEwLjM3MzkgOS4yNTQ2MyAxMC45Mzc2IDcuOTAxNjYgMTEuOTM5OSA2LjkwNzgzTDExLjIzNTggNi4xOTc3NEMxMC4wNDQyIDcuMzc5MzQgOS4zNzM4NyA4Ljk4Nzk1IDkuMzczODUgMTAuNjY2MUwxMC4zNzM5IDEwLjY2NjFaTTIuMDU1OSA5LjcwODE0QzEuNjE4OTMgMTAuODk4MyAxLjk2MzYzIDEyLjIzNDggMi45MjE3NiAxMy4wNjUxTDMuNTc2NjggMTIuMzA5NEMyLjkzMjYgMTEuNzUxMiAyLjcwMDg5IDEwLjg1MjkgMi45OTQ2NCAxMC4wNTI4TDIuMDU1OSA5LjcwODE0Wk04LjQ0MzE5IDIwLjc4NzJDOS41MDk0NCAyMC43ODcyIDEwLjM3MzggMTkuOTIyOCAxMC4zNzM4IDE4Ljg1NjVIOS4zNzM4MUM5LjM3MzgxIDE5LjM3MDUgOC45NTcxNiAxOS43ODcyIDguNDQzMTkgMTkuNzg3MlYyMC43ODcyWk04LjQ0MzE5IDE5Ljc4NzJDNi44MjMwNSAxOS43ODcyIDUuNTA5NjcgMTguNDczOCA1LjUwOTY5IDE2Ljg1MzZMNC41MDk2OSAxNi44NTM2QzQuNTA5NjYgMTkuMDI2IDYuMjcwNzUgMjAuNzg3MiA4LjQ0MzE5IDIwLjc4NzJWMTkuNzg3MlpNNC4wNzU4OCAxNC4wNjUzQzQuMzUxNDIgMTQuMzA0MSA0LjUwOTcyIDE0LjY1MDggNC41MDk3MSAxNS4wMTU0TDUuNTA5NzEgMTUuMDE1NEM1LjUwOTcyIDE0LjM2MDggNS4yMjU1MiAxMy43Mzg0IDQuNzMwOCAxMy4zMDk2TDQuMDc1ODggMTQuMDY1M1pNNi40NjQ1OSAzLjIyMzM5QzUuMjQ2NDMgMy4yMjMzOSA0LjE1NzY4IDMuOTgzNDcgMy43Mzc4NCA1LjEyNjk5TDQuNjc2NTggNS40NzE2NEM0Ljk1MTg4IDQuNzIxOCA1LjY2NTgxIDQuMjIzMzkgNi40NjQ1OSA0LjIyMzM5VjMuMjIzMzlaTTE3Ljg0MSAxOS4yNTA2TDIzLjA2NzYgMTkuMjUwNkwyMy4wNjc1IDE4LjI1MDZMMTcuODQwOSAxOC4yNTA2TDE3Ljg0MSAxOS4yNTA2Wk0xMi4xMTk0IDE1LjY4NTFDMTMuMTkwNSAxNy44Njc2IDE1LjQwOTggMTkuMjUwNyAxNy44NDEgMTkuMjUwNkwxNy44NDA5IDE4LjI1MDZDMTUuNzkxMyAxOC4yNTA3IDEzLjkyMDEgMTcuMDg0NiAxMy4wMTcxIDE1LjI0NDZMMTIuMTE5NCAxNS42ODUxWk0xMC4zNzM4IDE4Ljg1NjVMMTAuMzczOSAxMC42NjYxTDkuMzczODUgMTAuNjY2MUw5LjM3MzgxIDE4Ljg1NjVMMTAuMzczOCAxOC44NTY1WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE1LjcxNTEgMTEuMjA1NkMxNS43MTUxIDExLjYyNTcgMTYuMDU1NiAxMS45NjYzIDE2LjQ3NTggMTEuOTY2M0MxNi44OTU5IDExLjk2NjMgMTcuMjM2NSAxMS42MjU3IDE3LjIzNjUgMTEuMjA1NkMxNy4yMzY1IDEwLjc4NTQgMTYuODk1OSAxMC40NDQ4IDE2LjLine truncated
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Postgres = createSupabaseIcon('Postgres', [
+  [
+    'path',
+    {
+      d: 'M11.5466 3.23108C11.2704 3.23108 11.0466 3.45494 11.0466 3.73108C11.0466 4.00722 11.2704 4.23108 11.5466 4.23108V3.23108ZM20.6569 19.5046C20.6569 19.2285 20.433 19.0046 20.1569 19.0046C19.8808 19.0046 19.6569 19.2285 19.6569 19.5046H20.6569ZM19.6569 15.9656C19.6569 16.2417 19.8808 16.4656 20.1569 16.4656C20.433 16.4656 20.6569 16.2417 20.6569 15.9656H19.6569ZM13.0119 19.5536C12.959 19.2826 12.6964 19.1058 12.4254 19.1586C12.1544 19.2115 11.9775 19.4741 12.0304 19.7452L13.0119 19.5536ZM9.87381 18.8565L9.37381 18.8565V18.8565H9.87381ZM4.20721 5.29932L3.73784 5.12699L3.73784 5.127L4.20721 5.29932ZM2.52527 9.88046L2.0559 9.70814L2.0559 9.70814L2.52527 9.88046ZM3.24922 12.6873L2.92176 13.0651L2.92176 13.0651L3.24922 12.6873ZM4.40334 13.6875L4.07588 14.0653L4.07588 14.0653L4.40334 13.6875ZM5.00971 15.0154L4.50971 15.0154L4.50971 15.0154L5.00971 15.0154ZM5.00969 16.8536L5.50969 16.8536L5.50969 16.8536L5.00969 16.8536ZM9.87385 10.6661L9.37385 10.6661L9.37385 10.6661L9.87385 10.6661ZM11.9399 6.90783C12.136 6.71339 12.1373 6.39681 11.9429 6.20073C11.7484 6.00464 11.4319 6.00331 11.2358 6.19774L11.9399 6.90783ZM17.841 18.7506L17.8409 18.2506L17.8409 18.2506L17.841 18.7506ZM23.0676 19.2506C23.3437 19.2506 23.5676 19.0267 23.5675 18.7506C23.5675 18.4744 23.3437 18.2506 23.0675 18.2506L23.0676 19.2506ZM13.0171 15.2446C12.8955 14.9967 12.5959 14.8943 12.348 15.016C12.1001 15.1376 11.9978 15.4372 12.1194 15.6851L13.0171 15.2446ZM11.5466 4.23108H12.608V3.23108H11.5466V4.23108ZM19.6569 19.5046C19.6569 21.0264 18.2467 22.2606 16.3033 22.2606V23.2606C18.6165 23.2606 20.6569 21.7449 20.6569 19.5046H19.6569ZM12.608 4.23108C16.501 4.23108 19.6569 7.38698 19.6569 11.28H20.6569C20.6569 6.8347 17.0533 3.23108 12.608 3.23108V4.23108ZM19.6569 11.28V15.9656H20.6569V11.28H19.6569ZM16.3033 22.2606C14.6727 22.2606 13.313 21.0964 13.0119 19.5536L12.0304 19.7452C12.4214 21.7485 14.1852 23.2606 16.3033 23.2606V22.2606ZM11.6552 3.22339H6.46459V4.22339H11.6552V3.22339ZM3.73784 5.127L2.0559 9.70814L2.99464 10.0528L4.67658 5.47164L3.73784 5.127ZM2.92176 13.0651L4.07588 14.0653L4.7308 13.3096L3.57668 12.3094L2.92176 13.0651ZM4.50971 15.0154L4.50969 16.8536L5.50969 16.8536L5.50971 15.0154L4.50971 15.0154ZM10.3739 10.6661C10.3739 9.25463 10.9376 7.90166 11.9399 6.90783L11.2358 6.19774C10.0442 7.37934 9.37387 8.98795 9.37385 10.6661L10.3739 10.6661ZM2.0559 9.70814C1.61893 10.8983 1.96363 12.2348 2.92176 13.0651L3.57668 12.3094C2.9326 11.7512 2.70089 10.8529 2.99464 10.0528L2.0559 9.70814ZM8.44319 20.7872C9.50944 20.7872 10.3738 19.9228 10.3738 18.8565H9.37381C9.37381 19.3705 8.95716 19.7872 8.44319 19.7872V20.7872ZM8.44319 19.7872C6.82305 19.7872 5.50967 18.4738 5.50969 16.8536L4.50969 16.8536C4.50966 19.026 6.27075 20.7872 8.44319 20.7872V19.7872ZM4.07588 14.0653C4.35142 14.3041 4.50972 14.6508 4.50971 15.0154L5.50971 15.0154C5.50972 14.3608 5.22552 13.7384 4.7308 13.3096L4.07588 14.0653ZM6.46459 3.22339C5.24643 3.22339 4.15768 3.98347 3.73784 5.12699L4.67658 5.47164C4.95188 4.7218 5.66581 4.22339 6.46459 4.22339V3.22339ZM17.841 19.2506L23.0676 19.2506L23.0675 18.2506L17.8409 18.2506L17.841 19.2506ZM12.1194 15.6851C13.1905 17.8676 15.4098 19.2507 17.841 19.2506L17.8409 18.2506C15.7913 18.2507 13.9201 17.0846 13.0171 15.2446L12.1194 15.6851ZM10.3738 18.8565L10.3739 10.6661L9.37385 10.6661L9.37381 18.8565L10.3738 18.8565Z',
+      key: '1mbkmc',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M15.7151 11.2056C15.7151 11.6257 16.0556 11.9663 16.4758 11.9663C16.8959 11.9663 17.2365 11.6257 17.2365 11.2056C17.2365 10.7854 16.8959 10.4448 16.4758 10.4448C16.0556 10.4448 15.7151 10.7854 15.7151 11.2056Z',
+      key: '1vir92',
+    },
+  ],
+]);
+
+export default Postgres;

packages/icons/src/icons/realtime.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Realtime
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik04LjA0MjczIDEuNTgyMDNWNS4zMjIwNU01LjI0MzU0IDUuMzIyMDVMMi4wNDcxMiAyLjAyNzkxTTUuMjQzNTQgNy45MDk3OUgxLjU3NzY0TTE1LjM3NzYgMTUuNTUwN0wyMS4wNzkgMTQuMTMxNkMyMS41NDE3IDE0LjAxNjQgMjEuNTk1OSAxMy4zODA2IDIxLjE1OTUgMTMuMTg4N0w4LjAwODI4IDcuNDA1ODZDNy41OTEzNyA3LjIyMjU0IDcuMTY2NDMgNy42NDY2MSA3LjM0ODkgOC4wNjM4OUwxMy4wMzIxIDIxLjA2MDdDMTMuMjIyNCAyMS40OTYgMTMuODU1NiAyMS40NDU0IDEzLjk3NDMgMjAuOTg1NEwxNS4zNzc2IDE1LjU1MDdaIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Realtime = createSupabaseIcon('Realtime', [
+  [
+    'path',
+    {
+      d: 'M8.04273 1.58203V5.32205M5.24354 5.32205L2.04712 2.02791M5.24354 7.90979H1.57764M15.3776 15.5507L21.079 14.1316C21.5417 14.0164 21.5959 13.3806 21.1595 13.1887L8.00828 7.40586C7.59137 7.22254 7.16643 7.64661 7.3489 8.06389L13.0321 21.0607C13.2224 21.496 13.8556 21.4454 13.9743 20.9854L15.3776 15.5507Z',
+      key: '1w2oqg',
+    },
+  ],
+]);
+
+export default Realtime;

packages/icons/src/icons/replace-code.ts

@@ -0,0 +1,60 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name ReplaceCode
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiAgICBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTS0yMDQwMyAtMTExNDJIMTIxNjVWLTExMTQ0SC0yMDQwM1YtMTExNDJaTTEyMTY2IC0xMTE0MVY3MTEzSDEyMTY4Vi0xMTE0MUgxMjE2NlpNMTIxNjUgNzExNEgtMjA0MDNWNzExNkgxMjE2NVY3MTE0Wk0tMjA0MDQgNzExM1YtMTExNDFILTIwNDA2VjcxMTNILTIwNDA0Wk0tMjA0MDMgNzExNEMtMjA0MDMuNiA3MTE0IC0yMDQwNCA3MTEzLjU1IC0yMDQwNCA3MTEzSC0yMDQwNkMtMjA0MDYgNzExNC42NiAtMjA0MDQuNyA3MTE2IC0yMDQwMyA3MTE2VjcxMTRaTTEyMTY2IDcxMTNDMTIxNjYgNzExMy41NSAxMjE2NS42IDcxMTQgMTIxNjUgNzExNFY3MTE2QzEyMTY2LjcgNzExNiAxMjE2OCA3MTE0LjY2IDEyMTY4IDcxMTNIMTIxNjZaTTEyMTY1IC0xMTE0MkMxMjE2NS42IC0xMTE0MiAxMjE2NiAtMTExNDEuNiAxMjE2NiAtMTExNDFIMTIxNjhDMTIxNjggLTExMTQyLjcgMTIxNjYuNyAtMTExNDQgMTIxNjUgLTExMTQ0Vi0xMTE0MlpNLTIwNDAzIC0xMTE0NEMtMjA0MDQuNyAtMTExNDQgLTIwNDA2IC0xMTE0Mi43IC0yMDQwNiAtMTExNDFILTIwNDA0Qy0yMDQwNCAtMTExNDEuNiAtMjA0MDMuNiAtMTExNDIgLTIwNDAzIC0xMTE0MlYtMTExNDRaIgogICAgICAgIGZpbGwtb3BhY2l0eT0iMC4xIiAvPgogICAgPHJlY3QgeD0iNi40NDUzMSIgeT0iMTQuMTEzMyIgd2lkdGg9IjE1Ljg0NTUiIGhlaWdodD0iNy45MTgxOCIgcng9IjMuOTU5MDkiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMC41ODk2IDEwLjAxOTVMMTguMjE0OCAxMC4wMTk1QzE5LjA0MzMgMTAuMDE5NSAxOS43MTQ4IDkuMzQ3OTYgMTkuNzE0OCA4LjUxOTUzTDE5LjcxNDggMy41OTIyNUMxOS43MTQ4IDIuNzYzODMgMTkuMDQzMyAyLjA5MjI2IDE4LjIxNDggMi4wOTIyNkw1Ljk5NjA5IDIuMDkyMjYiCiAgICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogICAgPHBhdGggZD0iTTUuOTg5MDIgMTAuNDY1NlY1Ljc4OTA2SDEuMzEyNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPHBhdGggZD0iTTMuMjcxMTEgMTMuNjEzM1YxMy42MTMzQzEuNjE1MTUgMTIuMzkxNCAxLjQ3OTQ4IDkuOTY0NDYgMi45ODg5NCA4LjU2NTY0TDUuOTk2MDkgNS43Nzg5MSIKICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const ReplaceCode = createSupabaseIcon('ReplaceCode', [
+  [
+    'path',
+    {
+      d: 'M-20403 -11142H12165V-11144H-20403V-11142ZM12166 -11141V7113H12168V-11141H12166ZM12165 7114H-20403V7116H12165V7114ZM-20404 7113V-11141H-20406V7113H-20404ZM-20403 7114C-20403.6 7114 -20404 7113.55 -20404 7113H-20406C-20406 7114.66 -20404.7 7116 -20403 7116V7114ZM12166 7113C12166 7113.55 12165.6 7114 12165 7114V7116C12166.7 7116 12168 7114.66 12168 7113H12166ZM12165 -11142C12165.6 -11142 12166 -11141.6 12166 -11141H12168C12168 -11142.7 12166.7 -11144 12165 -11144V-11142ZM-20403 -11144C-20404.7 -11144 -20406 -11142.7 -20406 -11141H-20404C-20404 -11141.6 -20403.6 -11142 -20403 -11142V-11144Z',
+      'fill-opacity': '0.1',
+      key: 'g9kgmq',
+    },
+  ],
+  [
+    'rect',
+    {
+      x: '6.44531',
+      y: '14.1133',
+      width: '15.8455',
+      height: '7.91818',
+      rx: '3.95909',
+      key: '1evqnx',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M10.5896 10.0195L18.2148 10.0195C19.0433 10.0195 19.7148 9.34796 19.7148 8.51953L19.7148 3.59225C19.7148 2.76383 19.0433 2.09226 18.2148 2.09226L5.99609 2.09226',
+      'stroke-linecap': 'round',
+      key: '18tp5x',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M5.98902 10.4656V5.78906H1.3125',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      key: 'sfubon',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M3.27111 13.6133V13.6133C1.61515 12.3914 1.47948 9.96446 2.98894 8.56564L5.99609 5.77891',
+      'stroke-linecap': 'round',
+      key: '1w6ie7',
+    },
+  ],
+]);
+
+export default ReplaceCode;

packages/icons/src/icons/reports.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Reports
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0zLjAzNDc5IDkuMDg0OUw4LjA3MjQxIDQuMDU3NUM4LjQ2Mjk2IDMuNjY3NzQgOS4wOTU0IDMuNjY3OTYgOS40ODU2OCA0LjA1Nzk5TDE0LjAyOTUgOC41OTg4MUMxNC40MiA4Ljk4OTEyIDE1LjA1MyA4Ljk4OTAxIDE1LjQ0MzUgOC41OTg1N0wyMC41ODc3IDMuNDU0MThNMTYuNDk5NiAzLjAxNTI2SDE5Ljk5OTZDMjAuNTUxOSAzLjAxNTI2IDIwLjk5OTYgMy40NjI5NyAyMC45OTk2IDQuMDE1MjZWNy41MTUyNk0yLjk5OTYzIDEyLjAxNTNMMi45OTk2MyAyMC4xOTU4QzIuOTk5NjMgMjAuNzQ4MSAzLjQ0NzM1IDIxLjE5NTggMy45OTk2MyAyMS4xOTU4TDIwLjAwMDQgMjEuMTk1OEMyMC41NTI3IDIxLjE5NTggMjEuMDAwNCAyMC43NDgxIDIxLjAwMDQgMjAuMTk1OFY5Ljg4NTc0TTguODI1MzIgOS44NzE4M0w4LjgyNTMxIDIxLjE5NThNMTUuMTc1NCAxNS4wNzQ2VjIxLjE5NDkiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Reports = createSupabaseIcon('Reports', [
+  [
+    'path',
+    {
+      d: 'M3.03479 9.0849L8.07241 4.0575C8.46296 3.66774 9.0954 3.66796 9.48568 4.05799L14.0295 8.59881C14.42 8.98912 15.053 8.98901 15.4435 8.59857L20.5877 3.45418M16.4996 3.01526H19.9996C20.5519 3.01526 20.9996 3.46297 20.9996 4.01526V7.51526M2.99963 12.0153L2.99963 20.1958C2.99963 20.7481 3.44735 21.1958 3.99963 21.1958L20.0004 21.1958C20.5527 21.1958 21.0004 20.7481 21.0004 20.1958V9.88574M8.82532 9.87183L8.82531 21.1958M15.1754 15.0746V21.1949',
+      key: '1g8azg',
+    },
+  ],
+]);
+
+export default Reports;

packages/icons/src/icons/settings.ts

@@ -0,0 +1,30 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Settings
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOS4wMjIyIDkuMjQ3NzhDMTguNzY4NiA4LjYzMjA5IDE4LjkyMjYgNy45MDQ0NSAxOS4wMDg1IDcuMjQ0MTNDMTkuMDc0NSA2LjczNjg4IDE4LjkxNTggNi4yMDU0NiAxOC41MzA2IDUuODExMkMxOC4xNTYxIDUuNDI3OTUgMTcuNjQ3MSA1LjI1NTc0IDE3LjE1MTcgNS4yOTYyOEMxNi40NjUgNS4zNTI0OCAxNS42OTkzIDUuNDkxNjkgMTUuMDY3MyA1LjIxNzFDMTUuMDMzNyA1LjIwMjQ5IDE1IDUuMTg4MTIgMTQuOTY2MSA1LjE3Mzk5QzE0LjM2MzcgNC45MjI3MiAxMy45NDY3IDQuMzMzODggMTMuNTQ4IDMuODE3MDdDMTMuMjExIDMuMzgwMjUgMTIuNjgyMyAzLjA5ODg4IDEyLjA4OCAzLjA5ODg4QzExLjQ5NTQgMy4wOTg4OCAxMC45NjgxIDMuMzc4NTkgMTAuNjMxIDMuODEzMThDMTAuMjMwOSA0LjMyODk1IDkuODEyMjkgNC45MTY3MyA5LjIwOTE4IDUuMTY2NEM5LjE3MDQ0IDUuMTgyNDQgOS4xMzE4NyA1LjE5ODc5IDkuMDkzNDcgNS4yMTU0NUM4LjQ2NTM4IDUuNDg3OTQgNy43MDU2OSA1LjM1MTU3IDcuMDIzMjggNS4yOTYxOUM2LjUyODMgNS4yNTYwMSA2LjAxOTc4IDUuNDI4MjUgNS42NDU1OCA1LjgxMTJDNS4yNjY5MyA2LjE5ODcxIDUuMTA3MTUgNi43MTg3MiA1LjE2NDQ3IDcuMjE4MDZDNS4yNDExNiA3Ljg4NjE5IDUuMzkzMTMgOC42MjE3NCA1LjEzNjU3IDkuMjQzNEM0Ljg5Mjc2IDkuODM0MTcgNC4zMTczMiAxMC4yNTExIDMuODA4NCAxMC42Mzc3QzMuMzY1MzYgMTAuOTc0MyAzLjA3OTI4IDExLjUwNjggMy4wNzkyOCAxMi4xMDYxQzMuMDc5MjggMTIuNzA2IDMuMzY1OTUgMTMuMjM5IDMuODA5NzggMTMuNTc1NUM0LjMxODQ0IDEzLjk2MTIgNC44OTMyIDE0LjM3NzUgNS4xMzY3NiAxNC45Njc1QzUuMzkzNTMgMTUuNTg5NiA1LjI0MDc3IDE2LjMyNTggNS4xNjMxNSAxNi45OTQzQzUuMTA1MSAxNy40OTQzIDUuMjY0NzkgMTguMDE1MyA1LjY0NDAxIDE4LjQwMzRDNi4wMTg2NCAxOC43ODY4IDYuNTI3OSAxOC45NTkgNy4wMjM0MyAxOC45MTgzQzcuNzA3MDUgMTguODYyMSA4LjQ2ODM1IDE4LjcyNDMgOS4wOTc3NyAxOC45OTY5QzkuMTMzNzggMTkuMDEyNSA5LjE2OTkzIDE5LjAyNzggOS4yMDYyMiAxOS4wNDI5QzkuODEwNTIgMTkuMjkzMyAxMC4yMjk0IDE5Ljg4MzIgMTAuNjI5OCAyMC40MDA1QzEwLjk2NjkgMjAuODM1OSAxMS40OTQ3IDIxLjExNjMgMTIuMDg4IDIxLjExNjNDMTIuNjgzIDIxLjExNjMgMTMuMjEyMiAyMC44MzQzIDEzLjU0OTEgMjAuMzk2NkMxMy45NDgxIDE5Ljg3ODMgMTQuMzY1NCAxOS4yODczIDE0Ljk2OSAxOS4wMzUzQzE1LjAwMDUgMTkuMDIyMSAxNS4wMzE4IDE5LjAwODggMTUuMDYzMSAxOC45OTUyQzE1LjY5NjMgMTguNzIwNSAxNi40NjM2IDE4Ljg2MTIgMTcuMTUxNiAxOC45MTgyQzE3LjY0NzUgMTguOTU5MiAxOC4xNTcyIDE4Ljc4NzEgMTguNTMyMSAxOC40MDM0QzE4LjkxNzkgMTguMDA4NSAxOS4wNzY1IDE3LjQ3NjEgMTkuMDA5OCAxNi45NjgyQzE4LjkyMjkgMTYuMzA3NiAxOC43NjgyIDE1LjU3OTMgMTkuMDIyIDE0Ljk2MzJDMTkuMjYzNCAxNC4zNzc0IDE5LjgzNiAxMy45NjY0IDIwLjM0NiAxMy41OTA2QzIwLjgwMTMgMTMuMjU1IDIxLjA5NjcgMTIuNzE1IDIxLjA5NjcgMTIuMTA2MUMyMS4wOTY3IDExLjQ5NzcgMjAuODAxOSAxMC45NTgyIDIwLjM0NzQgMTAuNjIyNkMxOS44MzcyIDEwLjI0NTggMTkuMjYzOCA5LjgzNDI2IDE5LjAyMjIgOS4yNDc3OFoiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMi4wMDAyIDE1LjEwNTFDMTMuNjU3IDE1LjEwNTEgMTUuMDAwMiAxMy43NjIgMTUuMDAwMiAxMi4xMDUxQzE1LjAwMDIgMTAuNDQ4MiAxMy42NTcgOS4xMDUxIDEyLjAwMDIgOS4xMDUxQzEwLjM0MzMgOS4xMDUxIDkuMDAwMTggMTAuNDQ4MiA5LjAwMDE4IDEyLjEwNTFDOS4wMDAxOCAxMy43NjIgMTAuMzQzMyAxNS4xMDUxIDEyLjAwMDIgMTUuMTA1MVoiIC8+Cjwvc3ZnPg==)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Settings = createSupabaseIcon('Settings', [
+  [
+    'path',
+    {
+      d: 'M19.0222 9.24778C18.7686 8.63209 18.9226 7.90445 19.0085 7.24413C19.0745 6.73688 18.9158 6.20546 18.5306 5.8112C18.1561 5.42795 17.6471 5.25574 17.1517 5.29628C16.465 5.35248 15.6993 5.49169 15.0673 5.2171C15.0337 5.20249 15 5.18812 14.9661 5.17399C14.3637 4.92272 13.9467 4.33388 13.548 3.81707C13.211 3.38025 12.6823 3.09888 12.088 3.09888C11.4954 3.09888 10.9681 3.37859 10.631 3.81318C10.2309 4.32895 9.81229 4.91673 9.20918 5.1664C9.17044 5.18244 9.13187 5.19879 9.09347 5.21545C8.46538 5.48794 7.70569 5.35157 7.02328 5.29619C6.5283 5.25601 6.01978 5.42825 5.64558 5.8112C5.26693 6.19871 5.10715 6.71872 5.16447 7.21806C5.24116 7.88619 5.39313 8.62174 5.13657 9.2434C4.89276 9.83417 4.31732 10.2511 3.8084 10.6377C3.36536 10.9743 3.07928 11.5068 3.07928 12.1061C3.07928 12.706 3.36595 13.239 3.80978 13.5755C4.31844 13.9612 4.8932 14.3775 5.13676 14.9675C5.39353 15.5896 5.24077 16.3258 5.16315 16.9943C5.1051 17.4943 5.26479 18.0153 5.64401 18.4034C6.01864 18.7868 6.5279 18.959 7.02343 18.9183C7.70705 18.8621 8.46835 18.7243 9.09777 18.9969C9.13378 19.0125 9.16993 19.0278 9.20622 19.0429C9.81052 19.2933 10.2294 19.8832 10.6298 20.4005C10.9669 20.8359 11.4947 21.1163 12.088 21.1163C12.683 21.1163 13.2122 20.8343 13.5491 20.3966C13.9481 19.8783 14.3654 19.2873 14.969 19.0353C15.0005 19.0221 15.0318 19.0088 15.0631 18.9952C15.6963 18.7205 16.4636 18.8612 17.1516 18.9182C17.6475 18.9592 18.1572 18.7871 18.5321 18.4034C18.9179 18.0085 19.0765 17.4761 19.0098 16.9682C18.9229 16.3076 18.7682 15.5793 19.022 14.9632C19.2634 14.3774 19.836 13.9664 20.346 13.5906C20.8013 13.255 21.0967 12.715 21.0967 12.1061C21.0967 11.4977 20.8019 10.9582 20.3474 10.6226C19.8372 10.2458 19.2638 9.83426 19.0222 9.24778Z',
+      key: '102x66',
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M12.0002 15.1051C13.657 15.1051 15.0002 13.762 15.0002 12.1051C15.0002 10.4482 13.657 9.1051 12.0002 9.1051C10.3433 9.1051 9.00018 10.4482 9.00018 12.1051C9.00018 13.762 10.3433 15.1051 12.0002 15.1051Z',
+      key: '153c57',
+    },
+  ],
+]);
+
+export default Settings;

packages/icons/src/icons/sql-editor.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name SqlEditor
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03Ljg5ODQ0IDguNDM0MkwxMS41MDA0IDEyLjAzNTZMNy44OTg0NCAxNS42Mzc1TTEyIDE1LjMyOTJIMTYuNU01IDIxLjEwNTVIMTlDMjAuMTA0NiAyMS4xMDU1IDIxIDIwLjIxIDIxIDE5LjEwNTVWNS4xMDU0N0MyMSA0LjAwMDkgMjAuMTA0NiAzLjEwNTQ3IDE5IDMuMTA1NDdINUMzLjg5NTQzIDMuMTA1NDcgMyA0LjAwMDkgMyA1LjEwNTQ3VjE5LjEwNTVDMyAyMC4yMSAzLjg5NTQzIDIxLjEwNTUgNSAyMS4xMDU1WiIgLz4KPC9zdmc+)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const SqlEditor = createSupabaseIcon('SqlEditor', [
+  [
+    'path',
+    {
+      d: 'M7.89844 8.4342L11.5004 12.0356L7.89844 15.6375M12 15.3292H16.5M5 21.1055H19C20.1046 21.1055 21 20.21 21 19.1055V5.10547C21 4.0009 20.1046 3.10547 19 3.10547H5C3.89543 3.10547 3 4.0009 3 5.10547V19.1055C3 20.21 3.89543 21.1055 5 21.1055Z',
+      key: 'orzc99',
+    },
+  ],
+]);
+
+export default SqlEditor;

packages/icons/src/icons/storage.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Storage
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOS40OTk1IDExLjM2ODVWOC41MDcyNUwxNC4wNzIzIDMuMTA1ODRINS40OTk1MUM0Ljk0NzIyIDMuMTA1ODQgNC40OTk1MSAzLjU1MzU1IDQuNDk5NTEgNC4xMDU4NFY5LjEwNTFNMTkuNDQ2OCA4LjQ4MjE4TDE0LjA3MDEgMy4xMDU0N0wxNC4wNzAxIDcuNDgyMThDMTQuMDcwMSA4LjAzNDQ2IDE0LjUxNzggOC40ODIxOCAxNS4wNzAxIDguNDgyMThMMTkuNDQ2OCA4LjQ4MjE4Wk02Ljg2Njc1IDkuMTA1MUgzLjk2MDQ1QzMuNDA4MTYgOS4xMDUxIDIuOTYwNDUgOS41NTI4MiAyLjk2MDQ1IDEwLjEwNTFWMTkuMTA1MUMyLjk2MDQ1IDIwLjIwOTcgMy44NTU4OCAyMS4xMDUxIDQuOTYwNDUgMjEuMTA1MUgxOC45NjA0QzIwLjA2NSAyMS4xMDUxIDIwLjk2MDQgMjAuMjA5NyAyMC45NjA0IDE5LjEwNTFWMTIuMzY4NUMyMC45NjA0IDExLjgxNjIgMjAuNTEyNyAxMS4zNjg1IDE5Ljk2MDUgMTEuMzY4NUg5Ljk4NjIyQzkuNzIzODIgMTEuMzY4NSA5LjQ3MTk0IDExLjI2NTQgOS4yODQ4OSAxMS4wODEzTDcuNTY4MDggOS4zOTIyNkM3LjM4MTAzIDkuMjA4MjQgNy4xMjkxNSA5LjEwNTEgNi44NjY3NSA5LjEwNTFaIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Storage = createSupabaseIcon('Storage', [
+  [
+    'path',
+    {
+      d: 'M19.4995 11.3685V8.50725L14.0723 3.10584H5.49951C4.94722 3.10584 4.49951 3.55355 4.49951 4.10584V9.1051M19.4468 8.48218L14.0701 3.10547L14.0701 7.48218C14.0701 8.03446 14.5178 8.48218 15.0701 8.48218L19.4468 8.48218ZM6.86675 9.1051H3.96045C3.40816 9.1051 2.96045 9.55282 2.96045 10.1051V19.1051C2.96045 20.2097 3.85588 21.1051 4.96045 21.1051H18.9604C20.065 21.1051 20.9604 20.2097 20.9604 19.1051V12.3685C20.9604 11.8162 20.5127 11.3685 19.9605 11.3685H9.98622C9.72382 11.3685 9.47194 11.2654 9.28489 11.0813L7.56808 9.39226C7.38103 9.20824 7.12915 9.1051 6.86675 9.1051Z',
+      key: '1liyj6',
+    },
+  ],
+]);
+
+export default Storage;

packages/icons/src/icons/table-editor.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name TableEditor
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0yLjk3MDcgMTUuMzQ5NEwyMC45NzA3IDE1LjM1NU0yMC45NDA1IDkuNjE1ODhIMi45OTY5OU04Ljc3NjYxIDkuNjE1ODhWMjEuMTM2N00yMC45NDA1IDUuODU1NDdWMTkuMTM2N0MyMC45NDA1IDIwLjI0MTMgMjAuMDQ1MSAyMS4xMzY3IDE4Ljk0MDUgMjEuMTM2N0g0Ljk5Njk5QzMuODkyNDIgMjEuMTM2NyAyLjk5Njk5IDIwLjI0MTMgMi45OTY5OSAxOS4xMzY3VjUuODU1NDdDMi45OTY5OSA0Ljc1MDkgMy44OTI0MiAzLjg1NTQ3IDQuOTk2OTkgMy44NTU0N0gxOC45NDA1QzIwLjA0NTEgMy44NTU0NyAyMC45NDA1IDQuNzUwOSAyMC45NDA1IDUuODU1NDdaIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const TableEditor = createSupabaseIcon('TableEditor', [
+  [
+    'path',
+    {
+      d: 'M2.9707 15.3494L20.9707 15.355M20.9405 9.61588H2.99699M8.77661 9.61588V21.1367M20.9405 5.85547V19.1367C20.9405 20.2413 20.0451 21.1367 18.9405 21.1367H4.99699C3.89242 21.1367 2.99699 20.2413 2.99699 19.1367V5.85547C2.99699 4.7509 3.89242 3.85547 4.99699 3.85547H18.9405C20.0451 3.85547 20.9405 4.7509 20.9405 5.85547Z',
+      key: '1qrasg',
+    },
+  ],
+]);
+
+export default TableEditor;

packages/icons/src/icons/user.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name User
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03LjA2NDczIDE5LjYzMjhDNC42MTY0OCAxOC4wMjQ0IDMgMTUuMjUzNyAzIDEyLjEwNTVDMyA3LjEzNDkxIDcuMDI5NDQgMy4xMDU0NyAxMiAzLjEwNTQ3QzE2Ljk3MDYgMy4xMDU0NyAyMSA3LjEzNDkxIDIxIDEyLjEwNTVDMjEgMTUuMjUzNyAxOS40MjczIDE4LjAwOTQgMTYuOTc5IDE5LjYxNzhNMTYuOTc5OSAyMi4yODQ0VjE5LjcxMzZDMTYuOTc5OSAxNy4wMjU4IDE0LjgwMTEgMTQuODQ2OSAxMi4xMTMzIDE0Ljg0NjlDOS40MjU0NyAxNC44NDY5IDcuMjQ2NTggMTcuMDI1OCA3LjI0NjU4IDE5LjcxMzZWMjIuMjg0NE0xNSAxMS44NDY5QzE1IDEzLjUwMzggMTMuNjU2OSAxNC44NDY5IDEyIDE0Ljg0NjlDMTAuMzQzMSAxNC44NDY5IDkgMTMuNTAzOCA5IDExLjg0NjlDOSAxMC4xOTAxIDEwLjM0MzEgOC44NDY5MiAxMiA4Ljg0NjkyQzEzLjY1NjkgOC44NDY5MiAxNSAxMC4xOTAxIDE1IDExLjg0NjlaIiAvPgo8L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const User = createSupabaseIcon('User', [
+  [
+    'path',
+    {
+      d: 'M7.06473 19.6328C4.61648 18.0244 3 15.2537 3 12.1055C3 7.13491 7.02944 3.10547 12 3.10547C16.9706 3.10547 21 7.13491 21 12.1055C21 15.2537 19.4273 18.0094 16.979 19.6178M16.9799 22.2844V19.7136C16.9799 17.0258 14.8011 14.8469 12.1133 14.8469C9.42547 14.8469 7.24658 17.0258 7.24658 19.7136V22.2844M15 11.8469C15 13.5038 13.6569 14.8469 12 14.8469C10.3431 14.8469 9 13.5038 9 11.8469C9 10.1901 10.3431 8.84692 12 8.84692C13.6569 8.84692 15 10.1901 15 11.8469Z',
+      key: '173y10',
+    },
+  ],
+]);
+
+export default User;

packages/icons/src/raw-icons/REST-api.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M3.20947 12.1052C3.20947 13.4403 3.50715 14.706 4.03977 15.8394M11.9997 3.31494C10.6391 3.31494 9.35066 3.62408 8.20085 4.17594M20.7899 12.1052C20.7899 10.7566 20.4862 9.47898 19.9435 8.33694M11.9997 20.8954C13.3576 20.8954 14.6436 20.5875 15.7917 20.0377M15.7917 20.0377C16.3334 20.818 17.236 21.3289 18.2578 21.3289C19.9147 21.3289 21.2578 19.9857 21.2578 18.3289C21.2578 16.672 19.9147 15.3289 18.2578 15.3289C16.601 15.3289 15.2578 16.672 15.2578 18.3289C15.2578 18.9639 15.4551 19.5528 15.7917 20.0377ZM4.03977 15.8394C3.24022 16.3782 2.71436 17.2921 2.71436 18.3289C2.71436 19.9857 4.0575 21.3289 5.71436 21.3289C7.37121 21.3289 8.71436 19.9857 8.71436 18.3289C8.71436 16.672 7.37121 15.3289 5.71436 15.3289C5.09422 15.3289 4.51803 15.517 4.03977 15.8394ZM8.20085 4.17594C7.66158 3.3789 6.74915 2.85498 5.71436 2.85498C4.0575 2.85498 2.71436 4.19813 2.71436 5.85498C2.71436 7.51183 4.0575 8.85498 5.71436 8.85498C7.37121 8.85498 8.71436 7.51183 8.71436 5.85498C8.71436 5.23292 8.52503 4.65508 8.20085 4.17594ZM19.9435 8.33694C20.7368 7.79709 21.2578 6.88688 21.2578 5.85498C21.2578 4.19813 19.9147 2.85498 18.2578 2.85498C16.601 2.85498 15.2578 4.19813 15.2578 5.85498C15.2578 7.51183 16.601 8.85498 18.2578 8.85498C18.8828 8.85498 19.4631 8.66388 19.9435 8.33694Z" />
+</svg>

packages/icons/src/raw-icons/_example-template.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "it-is-not",
+    "jguddas",
+    "danielbayley",
+    "ericfennis"
+  ],
+  "tags": [
+    "letter",
+    "font size",
+    "text",
+    "formatting",
+    "smaller"
+  ],
+  "categories": [
+    "text",
+    "design"
+  ]
+}

packages/icons/src/raw-icons/_example-template.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3.5 13h6" />
+  <path d="m2 16 4.5-9 4.5 9" />
+  <path d="M18 7v9" />
+  <path d="m14 12 4 4 4-4" />
+</svg>

packages/icons/src/raw-icons/api-docs.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M7.44434 14.3347H16.4443M7.44434 11.3347H16.4443M7.44434 17.3347H13.4443M19.4994 8.50714V19.1052C19.4994 20.2097 18.6039 21.1052 17.4994 21.1052H6.5C5.39543 21.1052 4.5 20.2097 4.5 19.1052V5.10596C4.5 4.00139 5.39543 3.10596 6.5 3.10596H14.0723L19.4994 8.50714ZM19.4465 8.48193L14.0704 3.10596L14.0701 7.48186C14.0701 8.03418 14.5178 8.48193 15.0701 8.48193L19.4465 8.48193Z" />
+</svg>

packages/icons/src/raw-icons/auth.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M5.24121 15.0674H12.7412M5.24121 15.0674V18.0674H12.7412V15.0674M5.24121 15.0674V12.0674H12.7412V15.0674M15 7.60547V4.60547C15 2.94861 13.6569 1.60547 12 1.60547C10.3431 1.60547 9 2.94861 9 4.60547V7.60547M5.20898 9.60547L5.20898 19.1055C5.20898 20.21 6.10441 21.1055 7.20898 21.1055H16.709C17.8136 21.1055 18.709 20.21 18.709 19.1055V9.60547C18.709 8.5009 17.8136 7.60547 16.709 7.60547L7.20899 7.60547C6.10442 7.60547 5.20898 8.5009 5.20898 9.60547Z" />
+</svg>

packages/icons/src/raw-icons/database.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path d=" M5.56774 9.70642H18.4547V15.7064H5.56774V9.70642Z" />
+    <path d=" M4.5 16.7094C4.5 16.1571 4.94772 15.7094 5.5 15.7094H18.5C19.0523 15.7094 19.5 16.1571 19.5
+        16.7094V20.7094C19.5 21.2616 19.0523 21.7094 18.5 21.7094H5.5C4.94772 21.7094 4.5 21.2616 4.5
+        20.7094V16.7094Z" />
+    <path
+        d="M4.5 4.70679C4.5 4.1545 4.94772 3.70679 5.5 3.70679H18.5C19.0523 3.70679 19.5 4.1545 19.5 4.70679V8.70679C19.5 9.25907 19.0523 9.70679 18.5 9.70679H5.5C4.94772 9.70679 4.5 9.25907 4.5 8.70679V4.70679Z" />
+</svg>

packages/icons/src/raw-icons/edge-functions.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M18 12.1055C18 15.4192 15.3137 18.1055 12 18.1055C8.6863 18.1055 6.00001 15.4192 6.00001 12.1055C6.00001 8.79176 8.6863 6.10547 12 6.10547C15.3137 6.10547 18 8.79176 18 12.1055Z" />
+    <path
+        d="M21.3999 5.70154C21.3999 7.35839 20.0568 8.70154 18.3999 8.70154C16.7431 8.70154 15.3999 7.35839 15.3999 5.70154C15.3999 4.04468 16.7431 2.70154 18.3999 2.70154C20.0568 2.70154 21.3999 4.04468 21.3999 5.70154Z" />
+    <path
+        d="M8.62216 18.4363C8.62216 20.0932 7.27902 21.4363 5.62216 21.4363C3.96531 21.4363 2.62216 20.0932 2.62216 18.4363C2.62216 16.7795 3.96531 15.4363 5.62216 15.4363C7.27902 15.4363 8.62216 16.7795 8.62216 18.4363Z" />
+    <path
+        d="M3.18121 16.2691C2.58401 15.0065 2.25 13.595 2.25 12.1055C2.25 6.72069 6.61522 2.35547 12 2.35547C13.4893 2.35547 14.9005 2.68937 16.163 3.28638M7.68679 20.852C8.98715 21.4944 10.4514 21.8555 12 21.8555C17.3848 21.8555 21.75 17.4902 21.75 12.1055C21.75 10.6162 21.4161 9.20493 20.8191 7.94242" />
+</svg>

packages/icons/src/raw-icons/home.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M9.43414 20.803V13.0557C9.43414 12.5034 9.88186 12.0557 10.4341 12.0557H14.7679C15.3202 12.0557 15.7679 12.5034 15.7679 13.0557V20.803M12.0181 3.48798L5.53031 7.9984C5.26145 8.18532 5.10114 8.49202 5.10114 8.81948L5.10117 18.803C5.10117 19.9075 5.9966 20.803 7.10117 20.803H18.1012C19.2057 20.803 20.1012 19.9075 20.1012 18.803L20.1011 8.88554C20.1011 8.55988 19.9426 8.25462 19.6761 8.06737L13.1639 3.49088C12.8204 3.24951 12.3627 3.24836 12.0181 3.48798Z" />
+</svg>

packages/icons/src/raw-icons/insert-code.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <path
+        d="M-20437 -11142H12131V-11144H-20437V-11142ZM12132 -11141V7113H12134V-11141H12132ZM12131 7114H-20437V7116H12131V7114ZM-20438 7113V-11141H-20440V7113H-20438ZM-20437 7114C-20437.6 7114 -20438 7113.55 -20438 7113H-20440C-20440 7114.66 -20438.7 7116 -20437 7116V7114ZM12132 7113C12132 7113.55 12131.6 7114 12131 7114V7116C12132.7 7116 12134 7114.66 12134 7113H12132ZM12131 -11142C12131.6 -11142 12132 -11141.6 12132 -11141H12134C12134 -11142.7 12132.7 -11144 12131 -11144V-11142ZM-20437 -11144C-20438.7 -11144 -20440 -11142.7 -20440 -11141H-20438C-20438 -11141.6 -20437.6 -11142 -20437 -11142V-11144Z"
+        fill="white" fill-opacity="0.1" />
+    <path d="M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086" stroke-linecap="round" stroke-linejoin="round" />
+    <rect x="0.5" y="14.0625" width="16" height="8" rx="1" stroke-linejoin="round" />
+    <rect x="0.5" y="1.9375" width="16" height="8" rx="1" stroke-linejoin="round" />
+</svg>

packages/icons/src/raw-icons/integrations.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M17.2661 3.23254V10.7325M13.5161 6.98291L21.0161 6.98291M11.0391 16.9508C11.0391 19.1752 9.23585 20.9784 7.01147 20.9784C4.7871 20.9784 2.98389 19.1752 2.98389 16.9508C2.98389 14.7264 4.7871 12.9232 7.01147 12.9232C9.23585 12.9232 11.0391 14.7264 11.0391 16.9508ZM21.0161 19.8568V14.3568C21.0161 13.8045 20.5684 13.3568 20.0161 13.3568H14.5161C13.9638 13.3568 13.5161 13.8045 13.5161 14.3568V19.8568C13.5161 20.4091 13.9638 20.8568 14.5161 20.8568H20.0161C20.5684 20.8568 21.0161 20.4091 21.0161 19.8568ZM4.26221 10.7325H9.76221C10.3145 10.7325 10.7622 10.2848 10.7622 9.73254V4.23254C10.7622 3.68026 10.3145 3.23254 9.76221 3.23254H4.26221C3.70992 3.23254 3.26221 3.68026 3.26221 4.23254V9.73254C3.26221 10.2848 3.70992 10.7325 4.26221 10.7325Z" />
+</svg>

packages/icons/src/raw-icons/logs.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M4.5 5.20679H4.53713M7.46241 5.21707H19.5M4.5 9.65839H4.53713M7.46241 9.66868H19.5M4.52692 14.164H4.53713M7.46241 14.1742H19.5M4.52692 18.7068L4.53713 18.6965M7.46241 18.7068H19.5" />
+</svg>

packages/icons/src/raw-icons/postgres.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M11.5466 3.23108C11.2704 3.23108 11.0466 3.45494 11.0466 3.73108C11.0466 4.00722 11.2704 4.23108 11.5466 4.23108V3.23108ZM20.6569 19.5046C20.6569 19.2285 20.433 19.0046 20.1569 19.0046C19.8808 19.0046 19.6569 19.2285 19.6569 19.5046H20.6569ZM19.6569 15.9656C19.6569 16.2417 19.8808 16.4656 20.1569 16.4656C20.433 16.4656 20.6569 16.2417 20.6569 15.9656H19.6569ZM13.0119 19.5536C12.959 19.2826 12.6964 19.1058 12.4254 19.1586C12.1544 19.2115 11.9775 19.4741 12.0304 19.7452L13.0119 19.5536ZM9.87381 18.8565L9.37381 18.8565V18.8565H9.87381ZM4.20721 5.29932L3.73784 5.12699L3.73784 5.127L4.20721 5.29932ZM2.52527 9.88046L2.0559 9.70814L2.0559 9.70814L2.52527 9.88046ZM3.24922 12.6873L2.92176 13.0651L2.92176 13.0651L3.24922 12.6873ZM4.40334 13.6875L4.07588 14.0653L4.07588 14.0653L4.40334 13.6875ZM5.00971 15.0154L4.50971 15.0154L4.50971 15.0154L5.00971 15.0154ZM5.00969 16.8536L5.50969 16.8536L5.50969 16.8536L5.00969 16.8536ZM9.87385 10.6661L9.37385 10.6661L9.37385 10.6661L9.87385 10.6661ZM11.9399 6.90783C12.136 6.71339 12.1373 6.39681 11.9429 6.20073C11.7484 6.00464 11.4319 6.00331 11.2358 6.19774L11.9399 6.90783ZM17.841 18.7506L17.8409 18.2506L17.8409 18.2506L17.841 18.7506ZM23.0676 19.2506C23.3437 19.2506 23.5676 19.0267 23.5675 18.7506C23.5675 18.4744 23.3437 18.2506 23.0675 18.2506L23.0676 19.2506ZM13.0171 15.2446C12.8955 14.9967 12.5959 14.8943 12.348 15.016C12.1001 15.1376 11.9978 15.4372 12.1194 15.6851L13.0171 15.2446ZM11.5466 4.23108H12.608V3.23108H11.5466V4.23108ZM19.6569 19.5046C19.6569 21.0264 18.2467 22.2606 16.3033 22.2606V23.2606C18.6165 23.2606 20.6569 21.7449 20.6569 19.5046H19.6569ZM12.608 4.23108C16.501 4.23108 19.6569 7.38698 19.6569 11.28H20.6569C20.6569 6.8347 17.0533 3.23108 12.608 3.23108V4.23108ZM19.6569 11.28V15.9656H20.6569V11.28H19.6569ZM16.3033 22.2606C14.6727 22.2606 13.313 21.0964 13.0119 19.5536L12.0304 19.7452C12.4214 21.7485 14.1852 23.2606 16.3033 23.2606V22.2606ZM11.6552 3.22339H6.46459V4.22339H11.6552V3.22339ZM3.73784 5.127L2.0559 9.70814L2.99464 10.0528L4.67658 5.47164L3.73784 5.127ZM2.92176 13.0651L4.07588 14.0653L4.7308 13.3096L3.57668 12.3094L2.92176 13.0651ZM4.50971 15.0154L4.50969 16.8536L5.50969 16.8536L5.50971 15.0154L4.50971 15.0154ZM10.3739 10.6661C10.3739 9.25463 10.9376 7.90166 11.9399 6.90783L11.2358 6.19774C10.0442 7.37934 9.37387 8.98795 9.37385 10.6661L10.3739 10.6661ZM2.0559 9.70814C1.61893 10.8983 1.96363 12.2348 2.92176 13.0651L3.57668 12.3094C2.9326 11.7512 2.70089 10.8529 2.99464 10.0528L2.0559 9.70814ZM8.44319 20.7872C9.50944 20.7872 10.3738 19.9228 10.3738 18.8565H9.37381C9.37381 19.3705 8.95716 19.7872 8.44319 19.7872V20.7872ZM8.44319 19.7872C6.82305 19.7872 5.50967 18.4738 5.50969 16.8536L4.50969 16.8536C4.50966 19.026 6.27075 20.7872 8.44319 20.7872V19.7872ZM4.07588 14.0653C4.35142 14.3041 4.50972 14.6508 4.50971 15.0154L5.50971 15.0154C5.50972 14.3608 5.22552 13.7384 4.7308 13.3096L4.07588 14.0653ZM6.46459 3.22339C5.24643 3.22339 4.15768 3.98347 3.73784 5.12699L4.67658 5.47164C4.95188 4.7218 5.66581 4.22339 6.46459 4.22339V3.22339ZM17.841 19.2506L23.0676 19.2506L23.0675 18.2506L17.8409 18.2506L17.841 19.2506ZM12.1194 15.6851C13.1905 17.8676 15.4098 19.2507 17.841 19.2506L17.8409 18.2506C15.7913 18.2507 13.9201 17.0846 13.0171 15.2446L12.1194 15.6851ZM10.3738 18.8565L10.3739 10.6661L9.37385 10.6661L9.37381 18.8565L10.3738 18.8565Z" />
+    <path
+        d="M15.7151 11.2056C15.7151 11.6257 16.0556 11.9663 16.4758 11.9663C16.8959 11.9663 17.2365 11.6257 17.2365 11.2056C17.2365 10.7854 16.8959 10.4448 16.4758 10.4448C16.0556 10.4448 15.7151 10.7854 15.7151 11.2056Z" />
+</svg>

packages/icons/src/raw-icons/realtime.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M8.04273 1.58203V5.32205M5.24354 5.32205L2.04712 2.02791M5.24354 7.90979H1.57764M15.3776 15.5507L21.079 14.1316C21.5417 14.0164 21.5959 13.3806 21.1595 13.1887L8.00828 7.40586C7.59137 7.22254 7.16643 7.64661 7.3489 8.06389L13.0321 21.0607C13.2224 21.496 13.8556 21.4454 13.9743 20.9854L15.3776 15.5507Z" />
+</svg>

packages/icons/src/raw-icons/replace-code.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" fill="none"
+    stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <path
+        d="M-20403 -11142H12165V-11144H-20403V-11142ZM12166 -11141V7113H12168V-11141H12166ZM12165 7114H-20403V7116H12165V7114ZM-20404 7113V-11141H-20406V7113H-20404ZM-20403 7114C-20403.6 7114 -20404 7113.55 -20404 7113H-20406C-20406 7114.66 -20404.7 7116 -20403 7116V7114ZM12166 7113C12166 7113.55 12165.6 7114 12165 7114V7116C12166.7 7116 12168 7114.66 12168 7113H12166ZM12165 -11142C12165.6 -11142 12166 -11141.6 12166 -11141H12168C12168 -11142.7 12166.7 -11144 12165 -11144V-11142ZM-20403 -11144C-20404.7 -11144 -20406 -11142.7 -20406 -11141H-20404C-20404 -11141.6 -20403.6 -11142 -20403 -11142V-11144Z"
+        fill-opacity="0.1" />
+    <rect x="6.44531" y="14.1133" width="15.8455" height="7.91818" rx="3.95909" />
+    <path
+        d="M10.5896 10.0195L18.2148 10.0195C19.0433 10.0195 19.7148 9.34796 19.7148 8.51953L19.7148 3.59225C19.7148 2.76383 19.0433 2.09226 18.2148 2.09226L5.99609 2.09226"
+        stroke-linecap="round" />
+    <path d="M5.98902 10.4656V5.78906H1.3125" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M3.27111 13.6133V13.6133C1.61515 12.3914 1.47948 9.96446 2.98894 8.56564L5.99609 5.77891"
+        stroke-linecap="round" />
+</svg>

packages/icons/src/raw-icons/reports.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M3.03479 9.0849L8.07241 4.0575C8.46296 3.66774 9.0954 3.66796 9.48568 4.05799L14.0295 8.59881C14.42 8.98912 15.053 8.98901 15.4435 8.59857L20.5877 3.45418M16.4996 3.01526H19.9996C20.5519 3.01526 20.9996 3.46297 20.9996 4.01526V7.51526M2.99963 12.0153L2.99963 20.1958C2.99963 20.7481 3.44735 21.1958 3.99963 21.1958L20.0004 21.1958C20.5527 21.1958 21.0004 20.7481 21.0004 20.1958V9.88574M8.82532 9.87183L8.82531 21.1958M15.1754 15.0746V21.1949" />
+</svg>

packages/icons/src/raw-icons/settings.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M19.0222 9.24778C18.7686 8.63209 18.9226 7.90445 19.0085 7.24413C19.0745 6.73688 18.9158 6.20546 18.5306 5.8112C18.1561 5.42795 17.6471 5.25574 17.1517 5.29628C16.465 5.35248 15.6993 5.49169 15.0673 5.2171C15.0337 5.20249 15 5.18812 14.9661 5.17399C14.3637 4.92272 13.9467 4.33388 13.548 3.81707C13.211 3.38025 12.6823 3.09888 12.088 3.09888C11.4954 3.09888 10.9681 3.37859 10.631 3.81318C10.2309 4.32895 9.81229 4.91673 9.20918 5.1664C9.17044 5.18244 9.13187 5.19879 9.09347 5.21545C8.46538 5.48794 7.70569 5.35157 7.02328 5.29619C6.5283 5.25601 6.01978 5.42825 5.64558 5.8112C5.26693 6.19871 5.10715 6.71872 5.16447 7.21806C5.24116 7.88619 5.39313 8.62174 5.13657 9.2434C4.89276 9.83417 4.31732 10.2511 3.8084 10.6377C3.36536 10.9743 3.07928 11.5068 3.07928 12.1061C3.07928 12.706 3.36595 13.239 3.80978 13.5755C4.31844 13.9612 4.8932 14.3775 5.13676 14.9675C5.39353 15.5896 5.24077 16.3258 5.16315 16.9943C5.1051 17.4943 5.26479 18.0153 5.64401 18.4034C6.01864 18.7868 6.5279 18.959 7.02343 18.9183C7.70705 18.8621 8.46835 18.7243 9.09777 18.9969C9.13378 19.0125 9.16993 19.0278 9.20622 19.0429C9.81052 19.2933 10.2294 19.8832 10.6298 20.4005C10.9669 20.8359 11.4947 21.1163 12.088 21.1163C12.683 21.1163 13.2122 20.8343 13.5491 20.3966C13.9481 19.8783 14.3654 19.2873 14.969 19.0353C15.0005 19.0221 15.0318 19.0088 15.0631 18.9952C15.6963 18.7205 16.4636 18.8612 17.1516 18.9182C17.6475 18.9592 18.1572 18.7871 18.5321 18.4034C18.9179 18.0085 19.0765 17.4761 19.0098 16.9682C18.9229 16.3076 18.7682 15.5793 19.022 14.9632C19.2634 14.3774 19.836 13.9664 20.346 13.5906C20.8013 13.255 21.0967 12.715 21.0967 12.1061C21.0967 11.4977 20.8019 10.9582 20.3474 10.6226C19.8372 10.2458 19.2638 9.83426 19.0222 9.24778Z" />
+    <path
+        d="M12.0002 15.1051C13.657 15.1051 15.0002 13.762 15.0002 12.1051C15.0002 10.4482 13.657 9.1051 12.0002 9.1051C10.3433 9.1051 9.00018 10.4482 9.00018 12.1051C9.00018 13.762 10.3433 15.1051 12.0002 15.1051Z" />
+</svg>

packages/icons/src/raw-icons/sql-editor.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M7.89844 8.4342L11.5004 12.0356L7.89844 15.6375M12 15.3292H16.5M5 21.1055H19C20.1046 21.1055 21 20.21 21 19.1055V5.10547C21 4.0009 20.1046 3.10547 19 3.10547H5C3.89543 3.10547 3 4.0009 3 5.10547V19.1055C3 20.21 3.89543 21.1055 5 21.1055Z" />
+</svg>

packages/icons/src/raw-icons/storage.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M19.4995 11.3685V8.50725L14.0723 3.10584H5.49951C4.94722 3.10584 4.49951 3.55355 4.49951 4.10584V9.1051M19.4468 8.48218L14.0701 3.10547L14.0701 7.48218C14.0701 8.03446 14.5178 8.48218 15.0701 8.48218L19.4468 8.48218ZM6.86675 9.1051H3.96045C3.40816 9.1051 2.96045 9.55282 2.96045 10.1051V19.1051C2.96045 20.2097 3.85588 21.1051 4.96045 21.1051H18.9604C20.065 21.1051 20.9604 20.2097 20.9604 19.1051V12.3685C20.9604 11.8162 20.5127 11.3685 19.9605 11.3685H9.98622C9.72382 11.3685 9.47194 11.2654 9.28489 11.0813L7.56808 9.39226C7.38103 9.20824 7.12915 9.1051 6.86675 9.1051Z" />
+</svg>

packages/icons/src/raw-icons/table-editor.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M2.9707 15.3494L20.9707 15.355M20.9405 9.61588H2.99699M8.77661 9.61588V21.1367M20.9405 5.85547V19.1367C20.9405 20.2413 20.0451 21.1367 18.9405 21.1367H4.99699C3.89242 21.1367 2.99699 20.2413 2.99699 19.1367V5.85547C2.99699 4.7509 3.89242 3.85547 4.99699 3.85547H18.9405C20.0451 3.85547 20.9405 4.7509 20.9405 5.85547Z" />
+</svg>

packages/icons/src/raw-icons/user.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
+    stroke-width="1">
+    <path
+        d="M7.06473 19.6328C4.61648 18.0244 3 15.2537 3 12.1055C3 7.13491 7.02944 3.10547 12 3.10547C16.9706 3.10547 21 7.13491 21 12.1055C21 15.2537 19.4273 18.0094 16.979 19.6178M16.9799 22.2844V19.7136C16.9799 17.0258 14.8011 14.8469 12.1133 14.8469C9.42547 14.8469 7.24658 17.0258 7.24658 19.7136V22.2844M15 11.8469C15 13.5038 13.6569 14.8469 12 14.8469C10.3431 14.8469 9 13.5038 9 11.8469C9 10.1901 10.3431 8.84692 12 8.84692C13.6569 8.84692 15 10.1901 15 11.8469Z" />
+</svg>

packages/icons/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/ui/index.tsx

@@ -81,6 +81,9 @@ export * from './src/components/ThemeProvider/prefixedThemes'
 
 // shadcn
 export * from './src/components/shadcn/ui/dropdown-menu'
+export * from './src/components/shadcn/ui/use-toast'
+export * from './src/components/shadcn/ui/toast'
+export * from './src/components/shadcn/ui/toaster'
 
 export {
   Command as Command_Shadcn_,
@@ -206,6 +209,8 @@ export { ScrollArea, ScrollBar } from './src/components/shadcn/ui/scroll-area'
 
 export { Separator } from './src/components/shadcn/ui/separator'
 
+export * from './src/components/shadcn/ui/resizable'
+
 // links
 
 export * from './src/components/TextLink'

packages/ui/package.json

@@ -74,6 +74,7 @@
     "react-hook-form": "^7.45.0",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^8.0.3",
+    "react-resizable-panels": "^2.0.11",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "^4.2.17",
     "reactflow": "^11.10.1",

packages/ui/src/components/shadcn/ui/resizable.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { GripVertical } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '../../../lib/utils/cn'
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'data-[resize-handle-state=drag]:bg-border-strong',
+      'group',
+      'transition-colors',
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div
+        className={cn(
+          'z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border focus:bg-surface-400',
+          'opacity-0 transition-opacity duration-200',
+          'group-data-[resize-handle-state=hover]:opacity-100',
+          'hover:bg-surface-400',
+          'group-data-[resize-handle-state=drag]:opacity-100',
+          'group-data-[resize-handle-state=drag]:bg-foreground-muted'
+        )}
+      >
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

packages/ui/src/components/shadcn/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-y-2 p-4 sm:right-0 sm:flex-col md:max-w-[420px]',
       className
     )}
     {...props}
@@ -23,13 +23,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
+  'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full',
   {
     variants: {
       variant: {
         default: 'bg-background border',
         destructive:
-          'group destructive border-destructive bg-destructive text-destructive-foreground',
+          'group destructive border-destructive-400 bg-destructive-300 text-destructive-foreground',
       },
     },
     defaultVariants: {

packages/ui/src/components/shadcn/ui/use-toast.ts

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import { ToastActionElement, ToastProps } from './toast'
 
-const TOAST_LIMIT = 1
+const TOAST_LIMIT = 4
 const TOAST_REMOVE_DELAY = 1000000
 
 type ToasterToast = ToastProps & {