code · pull · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/apps/design-system/app/fonts/CustomFont-Black.woff2 b/apps/design-system/app/fonts/CustomFont-Black.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-Bold.woff2 b/apps/design-system/app/fonts/CustomFont-Bold.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-Book.woff2 b/apps/design-system/app/fonts/CustomFont-Book.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-BookItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BookItalic.woff2
diff --git a/apps/design-system/app/fonts/CustomFont-Medium.woff2 b/apps/design-system/app/fonts/CustomFont-Medium.woff2
diff --git a/apps/design-system/app/fonts/index.ts b/apps/design-system/app/fonts/index.ts
@@ -0,0 +1,53 @@
+import { Source_Code_Pro } from 'next/font/google'
+import localFont from 'next/font/local'
+
+export const customFont = localFont({
+  variable: '--font-custom',
+  display: 'swap',
+  fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  src: [
+    {
+      path: './CustomFont-Book.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BookItalic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Black.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BlackItalic.woff2',
+      weight: '800',
+      style: 'italic',
+    },
+  ],
+})
+
+export const sourceCodePro = Source_Code_Pro({
+  subsets: ['latin'],
+  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+  variable: '--font-source-code-pro',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+})
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
@@ -1,10 +1,10 @@
 import '@/styles/globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
+import { customFont, sourceCodePro } from './fonts'
 
-const inter = Inter({ subsets: ['latin'] })
+const className = `${customFont.variable} ${sourceCodePro.variable}`
 
 export const metadata: Metadata = {
   title: 'Supabase Design System',
@@ -17,9 +17,16 @@ interface RootLayoutProps {
 
 export default async function Layout({ children }: RootLayoutProps) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head />
-      <body className={inter.className}>
+    <html lang="en" suppressHydrationWarning className={className}>
+      <head>
+        {/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
+          }}
+        />
+      </head>
+      <body>
         <ThemeProvider
           themes={['dark', 'light', 'classic-dark']}
           defaultTheme="system"

diff --git a/apps/studio/components/grid/components/grid/ColumnHeader.tsx b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -8,7 +8,7 @@ import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constan
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import type { ColumnHeaderProps, ColumnType, DragItem, GridForeignKey } from '../../types'
-import { ColumnMenu } from '../menu'
+import { ColumnMenu } from '../menu/ColumnMenu'
 
 export function ColumnHeader<R>({
   column,

diff --git a/apps/studio/components/grid/components/menu/ColumnMenu.tsx b/apps/studio/components/grid/components/menu/ColumnMenu.tsx
@@ -23,7 +23,7 @@ interface ColumnMenuProps {
   isEncrypted?: boolean
 }
 
-const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
+export const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
   const tableEditorSnap = useTableEditorStateSnapshot()
   const snap = useTableEditorTableStateSnapshot()
   const { sorts, addOrUpdateSort, removeSort } = useTableSort()
@@ -163,5 +163,3 @@ const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
     </>
   )
 }
-
-export default ColumnMenu
diff --git a/apps/studio/components/grid/components/menu/index.ts b/apps/studio/components/grid/components/menu/index.ts
diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx
@@ -3,7 +3,7 @@ import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 
 import { useDebounce } from '@uidotdev/usehooks'
-import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
+import { LogDetailsPanel } from 'components/interfaces/AuditLogs/LogDetailsPanel'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
@@ -17,7 +17,7 @@ import { Button } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
 import { LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
 
-const AuditLogs = () => {
+export const AuditLogs = () => {
   const currentTime = dayjs().utc().set('millisecond', 0)
 
   const [search, setSearch] = useState('')
@@ -294,5 +294,3 @@ const AuditLogs = () => {
     </>
   )
 }
-
-export default AuditLogs
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
@@ -1,4 +1,3 @@
-import { Github } from 'lucide-react'
 import Image from 'next/image'
 
 import Panel from 'components/ui/Panel'
@@ -8,7 +7,7 @@ import { openInstallGitHubIntegrationWindow } from 'lib/github'
 import { Badge, Button, cn } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 
-const AccountConnections = () => {
+export const AccountConnections = () => {
   const {
     data: gitHubAuthorization,
     isLoading,
@@ -78,5 +77,3 @@ const AccountConnections = () => {
     </Panel>
   )
 }
-
-export { AccountConnections }
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -10,7 +10,7 @@ import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } f
 import { AddNewFactorModal } from './AddNewFactorModal'
 import DeleteFactorModal from './DeleteFactorModal'
 
-const TOTPFactors = () => {
+export const TOTPFactors = () => {
   const [isAddNewFactorOpen, setIsAddNewFactorOpen] = useState(false)
   const [factorToBeDeleted, setFactorToBeDeleted] = useState<string | null>(null)
   const { data, isLoading, isError, isSuccess, error } = useMfaListFactorsQuery()
@@ -88,5 +88,3 @@ const TOTPFactors = () => {
     </>
   )
 }
-
-export default TOTPFactors
diff --git a/apps/studio/components/interfaces/Account/index.ts b/apps/studio/components/interfaces/Account/index.ts
diff --git a/apps/studio/components/interfaces/App/AppBannerWrapper.tsx b/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -6,7 +6,7 @@ import IncidentBanner from 'components/layouts/AppLayout/IncidentBanner'
 import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
 import { OrganizationResourceBanner } from '../Organization/HeaderBanner'
 
-const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
+export const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
   const ongoingIncident = useFlag('ongoingIncident')
   const showNoticeBanner = useFlag('showNoticeBanner')
   const clockSkewBanner = useFlag('clockSkewBanner')
@@ -23,5 +23,3 @@ const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
     </div>
   )
 }
-
-export default AppBannerWrapper
diff --git a/apps/studio/components/interfaces/App/CommandMenu/Support.tsx b/apps/studio/components/interfaces/App/CommandMenu/Support.tsx
@@ -1,12 +1,12 @@
-import { LifeBuoy, Activity } from 'lucide-react'
+import { Activity, LifeBuoy } from 'lucide-react'
 import { useMemo } from 'react'
 
 import { IS_PLATFORM } from 'common'
 import type { ICommand } from 'ui-patterns/CommandMenu'
 import { useRegisterCommands } from 'ui-patterns/CommandMenu'
 import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
 
-const useSupportCommands = () => {
+export const useSupportCommands = () => {
   const commands = useMemo(
     () =>
       [
@@ -37,5 +37,3 @@ const useSupportCommands = () => {
 
   useRegisterCommands(COMMAND_MENU_SECTIONS.SUPPORT, commands, { enabled: IS_PLATFORM })
 }
-
-export { useSupportCommands }
diff --git a/apps/studio/components/interfaces/App/CommandMenu/index.tsx b/apps/studio/components/interfaces/App/CommandMenu/index.tsx
@@ -4,9 +4,7 @@ import { useCommandMenuInitiated } from 'ui-patterns/CommandMenu'
 
 const LazyCommandMenu = dynamic(() => import('./CommandMenu'), { ssr: false })
 
-const StudioCommandMenu = () => {
+export const StudioCommandMenu = () => {
   const isInitiated = useCommandMenuInitiated()
   return isInitiated && <LazyCommandMenu />
 }
-
-export { StudioCommandMenu }
diff --git a/apps/studio/components/interfaces/App/index.ts b/apps/studio/components/interfaces/App/index.ts
diff --git a/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx b/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx
@@ -9,7 +9,7 @@ export interface LogDetailsPanelProps {
   onClose: () => void
 }
 
-const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
+export const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
   return (
     <SidePanel
       size="large"
@@ -82,5 +82,3 @@ const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
     </SidePanel>
   )
 }
-
-export default LogDetailsPanel
diff --git a/apps/studio/components/interfaces/AuditLogs/index.ts b/apps/studio/components/interfaces/AuditLogs/index.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
@@ -6,7 +6,7 @@ interface PolicyNameProps {
   onUpdatePolicyName: (name: string) => void
 }
 
-const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
+export const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
     <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
@@ -30,5 +30,3 @@ const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNamePr
     </div>
   )
 }
-
-export default PolicyName
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
@@ -13,7 +13,7 @@ interface PolicyRolesProps {
 }
 type SystemRole = (typeof SYSTEM_ROLES)[number]
 
-const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
+export const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
   const { data: project } = useSelectedProjectQuery()
   const { data, error, isLoading, isError, isSuccess } = useDatabaseRolesQuery({
     projectRef: project?.ref,
@@ -57,5 +57,3 @@ const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps)
     </div>
   )
 }
-
-export default PolicyRoles
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
@@ -3,11 +3,8 @@ import { Modal } from 'ui'
 import PolicyAllowedOperation from './PolicyAllowedOperation'
 import PolicyDefinition from './PolicyDefinition'
 import PolicyEditorFooter from './PolicyEditorFooter'
-import PolicyName from './PolicyName'
-import PolicyRoles from './PolicyRoles'
-
-// Exposed for StoragePoliciesEditor.js
-export { PolicyName, PolicyRoles }
+import { PolicyName } from './PolicyName'
+import { PolicyRoles } from './PolicyRoles'
 
 interface PolicyEditorProps {
   isNewPolicy: boolean

diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -3,15 +3,24 @@
  *
  * If Elements is on a higher level, we risk losing all form state in case a payment fails.
  */
-
+import { zodResolver } from '@hookform/resolvers/zod'
 import { AddressElement, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import type { PaymentMethod } from '@stripe/stripe-js'
 import {
   StripeAddressElementChangeEvent,
   StripeAddressElementOptions,
   type SetupIntent,
 } from '@stripe/stripe-js'
+import { Check, ChevronsUpDown } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Form } from '@ui/components/shadcn/ui/form'
+import { TAX_IDS } from 'components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants'
+import type { CustomerAddress, CustomerTaxId } from 'data/organizations/types'
+import { getURL } from 'lib/helpers'
 import {
   Button,
   Checkbox_Shadcn_,
@@ -31,19 +40,7 @@ import {
   PopoverContent_Shadcn_ as PopoverContent,
   PopoverTrigger_Shadcn_ as PopoverTrigger,
 } from 'ui'
-import {
-  TAX_IDS,
-  type TaxId,
-} from '../../../Organization/BillingSettings/BillingCustomerData/TaxID.constants'
-import { z } from 'zod'
-import { useForm } from 'react-hook-form'
-import { Form } from '@ui/components/shadcn/ui/form'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { getURL } from 'lib/helpers'
-import type { CustomerAddress, CustomerTaxId } from 'data/organizations/types'
-import type { PaymentMethod } from '@stripe/stripe-js'
 
 export const BillingCustomerDataSchema = z.object({
   tax_id_type: z.string(),
@@ -76,7 +73,7 @@ export type PaymentMethodElementRef = {
   >
 }
 
-const NewPaymentMethodElement = forwardRef(
+export const NewPaymentMethodElement = forwardRef(
   (
     {
       email,
@@ -367,5 +364,3 @@ const NewPaymentMethodElement = forwardRef(
 )
 
 NewPaymentMethodElement.displayName = 'NewPaymentMethodElement'
-
-export { NewPaymentMethodElement }
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
@@ -11,7 +11,7 @@ interface CPUWarningsProps {
   severity?: 'warning' | 'critical' | null
 }
 
-const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) => {
+export const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) => {
   if (severity === 'warning') {
     return (
       <Alert_Shadcn_ variant="warning">
@@ -62,5 +62,3 @@ const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) =>
 
   return null
 }
-
-export default CPUWarnings
diff --git a/...studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx b/...studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
@@ -12,7 +12,7 @@ interface DiskIOBandwidthWarningsProps {
   highestIoBudgetConsumption: number
 }
 
-const DiskIOBandwidthWarnings = ({
+export const DiskIOBandwidthWarnings = ({
   isFreePlan,
   hasLatest,
   currentBillingCycleSelected,
@@ -116,5 +116,3 @@ const DiskIOBandwidthWarnings = ({
 
   return null
 }
-
-export default DiskIOBandwidthWarnings
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
@@ -11,7 +11,7 @@ interface RAMWarningsProps {
   severity?: 'warning' | 'critical' | null
 }
 
-const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) => {
+export const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) => {
   if (severity === 'warning') {
     return (
       <Alert_Shadcn_ variant="warning">
@@ -62,5 +62,3 @@ const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) =>
 
   return null
 }
-
-export default RAMWarnings
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/index.ts b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/index.ts