chore: clean up on empty className attributes (#20203)

clean up on empty className attrib

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -93,7 +93,7 @@ const TopNavBar: FC = () => {
               "
             >
               <div className="flex items-center space-x-2">
-                <IconSearch className="" size={18} strokeWidth={2} />
+                <IconSearch size={18} strokeWidth={2} />
                 <p className="hidden md:flex text-sm">Search docs...</p>
               </div>
               <div className="hidden md:flex items-center space-x-1">

apps/docs/components/Options.tsx

@@ -27,7 +27,7 @@ const Options: FC<PropsWithChildren<IOptions>> & OptionsSubComponents = (props)
         ].join(' ')}
         onClick={() => setOpen(!open)}
       >
-        <div className="">
+        <div>
           <div className={[!open ? 'rotate-45' : 'rotate-0'].join(' ')}>
             <IconXCircle size={14} />
           </div>

apps/docs/components/StepHike/index.tsx

@@ -24,7 +24,7 @@ const StepHike = ({ children, title }) => {
     throw 'StepHike component needs at least 1 <StepHike.Step> child'
 
   return (
-    <div className="">
+    <div>
       <StepHikeContext.Provider value={{ activeStep, steps }}>{children}</StepHikeContext.Provider>
     </div>
   )

apps/docs/components/reference/CLICommandSection.tsx

@@ -108,7 +108,7 @@ const CliCommandSection = (props) => {
             {commandFlags.length > 0 && (
               <>
                 <h3 className="text-lg text-foreground mb-3">Flags</h3>
-                <ul className="">
+                <ul>
                   {commandFlags.map((flag: Flag) => (
                     <>
                       <li className="mt-0">

apps/docs/components/reference/RefFunctionSection.tsx

@@ -55,7 +55,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
             {parameters && (
               <div className="not-prose mt-12">
                 <h5 className="mb-3 text-base text-foreground">Parameters</h5>
-                <ul className="">
+                <ul>
                   {parameters.map((param) => {
                     // grab override params from yaml file
                     const overrideParams = item.overrideParams

apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx

@@ -9,7 +9,7 @@ const CliGlobalFlagsHandler = () => {
     <RefSubLayout.EducationRow className="not-prose">
       <RefSubLayout.Details>
         <h3 className="text-lg text-foreground mb-3">Flags</h3>
-        <ul className="">
+        <ul>
           {spec.flags.map((flag) => {
             return (
               <Param

apps/docs/pages/guides/cli/config.tsx

@@ -32,7 +32,7 @@ export default function Config() {
       <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
         <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
           <div className="w-full prose">
-            <h1 className="">CLI configuration</h1>
+            <h1>CLI configuration</h1>
             <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
             <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
             <div>{content}</div>
@@ -61,7 +61,7 @@ function Info({ parameter }: { parameter: Parameter }) {
 
         <div className="border-b pb-8" key={parameter.id}>
           <div className=" mb-16">
-            <div className="">
+            <div>
               <table className="table-auto">
                 <thead>
                   <tr>

apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx

@@ -264,7 +264,7 @@ export default function Home() {
     <div className="row">
       <div className="col-6">
         <h1 className="header">Supabase Auth + Storage</h1>
-        <p className="">
+        <p>
           Experience our Auth and Storage through a simple profile management example. Create a user
           profile and upload an avatar image. Fast, simple, secure.
         </p>

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx

@@ -32,7 +32,7 @@ const PolicyEditor = ({
   const selectedRoles = (policyFormFields?.roles ?? []).filter((role: string) => role !== 'public')
 
   return (
-    <div className="">
+    <div>
       <div className="space-y-8 py-8">
         <Modal.Content>
           <PolicyName

apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx

@@ -28,7 +28,7 @@ const PolicyEditorModalTitle = ({
   }
   if (view === POLICY_MODAL_VIEWS.TEMPLATES) {
     return (
-      <div className="">
+      <div>
         <div className="flex items-center space-x-3">
           <span
             onClick={onSelectBackFromTemplates}

apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx

@@ -188,7 +188,7 @@ const PolicyEditorModal = ({
       ]}
       onCancel={isClosingPolicyEditor}
     >
-      <div className="">
+      <div>
         <ConfirmationModal
           visible={isClosingPolicyEditorModal}
           header="Discard changes"

apps/studio/components/interfaces/Database/Backups/BackupItem.tsx

@@ -74,7 +74,7 @@ const BackupItem = ({ index, isHealthy, backup, projectRef, onSelectBackup }: Ba
       }`}
     >
       <p className="text-sm text-foreground ">{generateBackupName(backup)}</p>
-      <div className="">{generateSideButtons(backup)}</div>
+      <div>{generateSideButtons(backup)}</div>
     </div>
   )
 }

apps/studio/components/interfaces/Database/Functions/CreateFunction.tsx

@@ -499,7 +499,7 @@ const InputMultiArguments = observer(({ readonly }: InputMultiArgumentsProps) =>
           )
         )}
         {!readonly && (
-          <div className="">
+          <div>
             <Button type="default" icon={<IconPlus />} onClick={onAddArgument} disabled={readonly}>
               Add a new argument
             </Button>

apps/studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx

@@ -18,7 +18,7 @@ const SchemaTable = ({
   deleteHook = noop,
 }: SchemaTableProps) => {
   return (
-    <div key={schema} className="">
+    <div key={schema}>
       <div className="sticky top-0 backdrop-blur backdrop-filter">
         <div className="flex items-baseline space-x-1 py-2">
           <h5 className="text-foreground-light">schema</h5>

apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx

@@ -347,7 +347,7 @@ const CreateTrigger = ({ trigger, visible, setVisible }: CreateTriggerProps) =>
         onConfirm={handleSubmit}
       >
         {hasPublicTables ? (
-          <div className="">
+          <div>
             <CreateTriggerContext.Provider value={_localState}>
               <div className="my-6 space-y-10">
                 {_localState.isEditing ? (

apps/studio/components/interfaces/Functions/CommandRender.tsx

@@ -22,7 +22,7 @@ const Command = ({ item }: any) => {
         <div className="flex gap-2 font-mono text-sm font-normal text-foreground">
           <span className="text-foreground-lighter">$</span>
           <span>
-            <span className="">{item.jsx ? item.jsx() : null} </span>
+            <span>{item.jsx ? item.jsx() : null} </span>
             <button
               type="button"
               className="text-foreground-lighter hover:text-foreground"

apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -39,12 +39,12 @@ const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) =
         router.push(`/project/${ref}/functions/${item.slug}/details`)
       }}
     >
-      <Table.td className="">
+      <Table.td>
         <div className="flex items-center gap-2">
           <p className="text-sm text-foreground">{item.name}</p>
         </div>
       </Table.td>
-      <Table.td className="">
+      <Table.td>
         <div className="text-xs text-foreground-light flex gap-2 items-center truncate">
           <p className="font-mono truncate hidden md:inline">{endpoint}</p>
           <button

apps/studio/components/interfaces/Integrations/IntegrationPanels.tsx

@@ -298,7 +298,7 @@ const IntegrationConnectionHeader = React.forwardRef<HTMLDivElement, Integration
         )}
       >
         {props.title && <h5 className="text-foreground">{props.title}</h5>}
-        <Markdown content={markdown} className="" />
+        <Markdown content={markdown} />
       </div>
     )
   }

apps/studio/components/interfaces/Settings/Addons/Addons.tsx

@@ -193,7 +193,7 @@ const Addons = () => {
                   </div>
                   <div className="flex-grow">
                     <p className="text-sm text-foreground-light">Current option:</p>
-                    <p className="">{computeInstance?.variant.name ?? 'Micro'}</p>
+                    <p>{computeInstance?.variant.name ?? 'Micro'}</p>
                     <ProjectUpdateDisabledTooltip
                       projectUpdateDisabled={projectUpdateDisabled}
                       projectNotActive={!isProjectActive}
@@ -382,7 +382,7 @@ const Addons = () => {
                   </div>
                   <div>
                     <p className="text-sm text-foreground-light">Current option:</p>
-                    <p className="">
+                    <p>
                       {pitr !== undefined
                         ? `Point in time recovery of ${pitr.variant.meta?.backup_duration_days} days is enabled`
                         : 'Point in time recovery is not enabled'}
@@ -477,7 +477,7 @@ const Addons = () => {
                   </div>
                   <div>
                     <p className="text-sm text-foreground-light">Current option:</p>
-                    <p className="">
+                    <p>
                       {customDomain !== undefined
                         ? 'Custom domain is enabled'
                         : 'Custom domain is not enabled'}

apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx

@@ -137,7 +137,6 @@ const AddRestrictionModal = ({
                         id="ipAddress"
                         name="ipAddress"
                         placeholder="0.0.0.0"
-                        className=""
                       />
                     </div>
                     <div className="flex-grow">

apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx

@@ -92,7 +92,7 @@ const VercelIntegrationConnectionForm = ({
   return (
     <Form_Shadcn_ {...form}>
       <div className="py-4 px-8">
-        <Alert_Shadcn_ variant="default" className="">
+        <Alert_Shadcn_ variant="default">
           <IconClock className="h-4 w-4" strokeWidth={2} />
           <AlertTitle_Shadcn_>Vercel Connection configuration coming soon</AlertTitle_Shadcn_>
           <AlertDescription_Shadcn_>
@@ -115,7 +115,7 @@ const VercelIntegrationConnectionForm = ({
               name="environmentVariablesProduction"
               render={({ field }) => (
                 <FormItem_Shadcn_ className="flex flex-row items-center justify-between">
-                  <div className="">
+                  <div>
                     <FormLabel_Shadcn_ className="!text">
                       Sync environment variables for Vercel Production deployments
                     </FormLabel_Shadcn_>
@@ -142,7 +142,7 @@ const VercelIntegrationConnectionForm = ({
               name="authRedirectUrisProduction"
               render={({ field }) => (
                 <FormItem_Shadcn_ className="flex flex-row items-center justify-between">
-                  <div className="">
+                  <div>
                     <FormLabel_Shadcn_ className="!text">
                       Auto update Auth Redirect URIs for Vercel Production Deployments
                     </FormLabel_Shadcn_>
@@ -172,7 +172,7 @@ const VercelIntegrationConnectionForm = ({
               name="environmentVariablesPreview"
               render={({ field }) => (
                 <FormItem_Shadcn_ className="flex flex-row items-center justify-between">
-                  <div className="">
+                  <div>
                     <FormLabel_Shadcn_ className="!text">
                       Sync environment variables for Vercel Preview Deployments
                     </FormLabel_Shadcn_>
@@ -199,7 +199,7 @@ const VercelIntegrationConnectionForm = ({
               name="authRedirectUrisPreview"
               render={({ field }) => (
                 <FormItem_Shadcn_ className="flex flex-row items-center justify-between">
-                  <div className="">
+                  <div>
                     <FormLabel_Shadcn_ className="!text">
                       Auto update Auth Redirect URIs for Vercel Preview Deployments
                     </FormLabel_Shadcn_>

apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx

@@ -29,13 +29,13 @@ const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
             <span className="text-sm text-foreground">{item.name}</span>
           </div>
         </Table.td>
-        <Table.td className="">
+        <Table.td>
           <span className="text-foreground-light">{item.description}</span>
         </Table.td>
-        <Table.td className="">
+        <Table.td>
           <span className="text-foreground-light">{timestampLocalFormatter(item.inserted_at)}</span>
         </Table.td>
-        <Table.td className="">
+        <Table.td>
           <span className="text-foreground-light">{timestampLocalFormatter(item.updated_at)}</span>
         </Table.td>
         <Table.td className=" text-right">

apps/studio/components/layouts/StorageLayout/StorageMenu.tsx

@@ -141,7 +141,7 @@ const StorageMenu = () => {
             )}
           </div>
           <div className="h-px w-full bg-border"></div>
-          <div className="">
+          <div>
             <Menu.Group title="Configuration" />
             <Link href={`/project/${ref}/storage/policies`} legacyBehavior>
               <Menu.Item rounded active={page === 'policies'}>

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

@@ -51,7 +51,7 @@ const FileExplorerRowEditing = ({ item, view, columnIndex }: FileExplorerRowEdit
   return (
     <div className="storage-row flex items-center justify-between rounded bg-gray-500">
       <div className="flex h-full flex-grow items-center px-2.5">
-        <div className="">
+        <div>
           <RowIcon
             view={view}
             status={item.status}

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx

@@ -176,7 +176,7 @@ const StoragePoliciesEditPolicyModal = ({
     }
     if (view === POLICY_MODAL_VIEWS.TEMPLATES) {
       return (
-        <div className="">
+        <div>
           <div className="flex items-center space-x-3">
             <span
               onClick={onSelectBackFromTemplates}

apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.tsx

@@ -118,7 +118,7 @@ const StoragePoliciesEditor = ({
   const selectedRoles = policyFormFields.roles
 
   return (
-    <div className="">
+    <div>
       <div className="mb-8 space-y-8 py-6">
         <Modal.Content>
           <PolicyName

apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx

@@ -245,7 +245,7 @@ const CreateProject = () => {
   )
 
   return (
-    <div className="">
+    <div>
       <p className="mb-2">Supabase project details</p>
       <div className="py-2">
         <Input

apps/studio/pages/project/[ref]/api/index.tsx

@@ -127,7 +127,7 @@ const DocView = observer(() => {
             autoApiService={autoApiService}
           />
         </div>
-        <div className="">
+        <div>
           {resource ? (
             <ResourceContent
               autoApiService={autoApiService}

apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx

@@ -165,7 +165,7 @@ const PageLayout: NextPageWithLayout = () => {
           Statistics for past {selectedInterval.label}
         </span>
       </div>
-      <div className="">
+      <div>
         <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-8">
           <ReportWidget
             title="Execution time"

apps/studio/pages/projects.tsx

@@ -56,7 +56,7 @@ const ProjectsPage: NextPageWithLayout = () => {
           {IS_PLATFORM && projectCreationEnabled && isSuccess && organizations.length !== 0 && (
             <div className="my-2">
               <div className="flex">
-                <div className="">
+                <div>
                   <OrganizationDropdown organizations={organizations} />
                 </div>
               </div>

apps/studio/pages/vercel/setupOrg.tsx

@@ -87,7 +87,7 @@ const CreateOrganization = observer(({}) => {
   })
 
   return (
-    <div className="">
+    <div>
       {(organizations?.length ?? 0) > 0 ? (
         <p className="mb-2">Create a new organization</p>
       ) : (
@@ -151,7 +151,7 @@ const OrgSelection = observer(({}) => {
   }
 
   return (
-    <div className="">
+    <div>
       <div className="relative mt-1 mb-8">
         <Select
           label="Choose an organization"

apps/studio/pages/vercel/setupProject.tsx

@@ -244,7 +244,7 @@ const CreateProject = observer(() => {
   }
 
   return (
-    <div className="">
+    <div>
       <p className="mb-2">Supabase project details</p>
       <div className="py-2">
         <Input

apps/www/components/BackedBy.tsx

@@ -26,7 +26,6 @@ const BackedBy = ({
         <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-8 sm:flex-nowrap">
           <div className="relative h-6 w-6 sm:h-8">
             <Image
-              className=""
               src={`${basePath}/images/logos/yc--grey.png`}
               alt="Y Combinator"
               layout="fill"
@@ -35,7 +34,6 @@ const BackedBy = ({
           </div>
           <div className="relative w-20 h-4 sm:h-5">
             <Image
-              className=""
               src={`${basePath}/images/logos/mozilla--grey.png`}
               alt="Mozilla"
               layout="fill"
@@ -44,7 +42,6 @@ const BackedBy = ({
           </div>
           <div className="relative w-20 h-4 sm:h-5">
             <Image
-              className=""
               src={`${basePath}/images/logos/coatue.png`}
               alt="Coatue"
               layout="fill"
@@ -53,7 +50,6 @@ const BackedBy = ({
           </div>
           <div className="relative w-20 h-5 sm:h-6">
             <Image
-              className=""
               src={`${basePath}/images/logos/felicis.png`}
               alt="Felicis"
               layout="fill"

apps/www/components/Carousels/SplitCodeBlockCarousel.tsx

@@ -43,7 +43,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
   }
 
   const details = (
-    <div className="">
+    <div>
       <p>
         <span className="mb-8 block text-white">Allow fetch something</span>
       </p>

apps/www/components/LaunchWeek/7/LaunchSection/index.tsx

@@ -124,7 +124,7 @@ export const LaunchSection = (props: WeekDayProps) => {
                   </div>
                 }
               >
-                <div className="">
+                <div>
                   <div className="video-container">
                     <iframe
                       src={`https://www.youtube-nocookie.com/embed/${props.youtube_id}?autoplay=1`}

apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx

@@ -17,7 +17,7 @@ const LW8CalloutsSection = () => {
             <div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
               <div className="flex flex-col gap-1 sm:pl-4">
                 <span className="text-white">Twitter Spaces</span>
-                <span className="">Replay recordings</span>
+                <span>Replay recordings</span>
               </div>
             </div>
             <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
@@ -40,7 +40,7 @@ const LW8CalloutsSection = () => {
                 <div className="flex items-center gap-3">
                   <span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
                 </div>
-                <span className="">Finished</span>
+                <span>Finished</span>
               </div>
             </div>
             <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">

apps/www/components/LaunchWeek/X/LWXSummary.tsx

@@ -75,7 +75,7 @@ const LWXSummary = () => {
                 Supabase Launch Week X Hackathon
               </Link>
             </ol>
-            <ol className="">
+            <ol>
               <Link
                 href="/blog/community-meetups-lwx"
                 className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"

apps/www/components/LaunchWeek/X/Releases/components/DaySection.tsx

@@ -59,7 +59,7 @@ const DaySection = ({ day }: { day: WeekDayProps }) => {
             <div className="relative p-4 sm:p-6 md:p-8 z-20 flex-grow flex flex-col items-start justify-between gap-2 w-full lg:w-3/5 text-left">
               <div className="relative w-full flex items-center gap-2 text-sm translate-x-0 !ease-[.24,0,.22,.99] duration-200 group-hover:-translate-x-6 transition-transform">
                 <IconEdit2 className="w-4 min-w-4 group-hover:opacity-0 transition-opacity" />
-                <span className="">Blog post</span>
+                <span>Blog post</span>
                 <ArrowRightIcon className="w-4 opacity-0 group-hover:opacity-100 transition-opacity" />
               </div>
               <h2 className="text-lg leading-7 [&_strong]:font-normal [&_strong]:text-foreground">

apps/www/components/LaunchWeek/X/Ticket/TicketingFlow.tsx

@@ -134,12 +134,12 @@ const TicketingFlow = () => {
                     ) : winningChances !== 2 ? (
                       <p className="text-2xl lg:text-3xl">
                         <span className="text-[#8B9092]">You're in!</span>{' '}
-                        <span className="">Now share your ticket to win limited swag.</span>
+                        <span>Now share your ticket to win limited swag.</span>
                       </p>
                     ) : (
                       <p className="text-2xl lg:text-3xl">
                         <span className="text-[#8B9092]">Just one more.</span>{' '}
-                        <span className="">Keep sharing to increase your chances.</span>
+                        <span>Keep sharing to increase your chances.</span>
                       </p>
                     )}
                     <CountdownComponent date={LWX_LAUNCH_DATE} showCard={false} />

apps/www/components/MfaContactForm.tsx

@@ -145,7 +145,7 @@ const MfaContactForm = () => {
               </Select>
             </div>
 
-            <div className="">
+            <div>
               <Input.TextArea
                 id="details"
                 name="details"

apps/www/components/OpenSource/RepoCard.tsx

@@ -39,7 +39,7 @@ const RepoCard = ({ repo, activeTab, index }: { repo: any; activeTab: number; in
         </div>
         <p className="text-sm flex-1 text-foreground-lighter">{repo.description}</p>
         <div className="text-sm w-full flex justify-between text-foreground-lighter mt-8">
-          <p className="">{repo.full_name}</p>
+          <p>{repo.full_name}</p>
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-1">
               <span>{repo.forks.toLocaleString()}</span>

apps/www/components/OpenSource/Sponsorships.tsx

@@ -19,7 +19,6 @@ const Sponsorships = ({ sponsorships }: { sponsorships: any[] }) => {
         {sponsorships.map((link) => (
           <Link href={link.url} key={link.name} target="_blank">
             <Panel
-              outerClassName=""
               innerClassName={cn(
                 'relative group flex flex-col gap-2 p-4 ',
                 link.isGithub ? 'md:min-h-[170px] md:h-[200px]' : 'min-h-[120px] md:h-[140px]'

apps/www/components/Pricing/ComputePricingModal.tsx

@@ -86,7 +86,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
         <div className="p-5">
           <table className="text-foreground m-0 hidden w-full table-auto overflow-hidden rounded-b lg:table text-xs">
             <thead>
-              <tr className="">
+              <tr>
                 {columnNames.map((column) => (
                   <th key={column.key} className="p-3 text-left font-medium">
                     {column.title}
@@ -98,9 +98,9 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
               {pricingAddOn.database.rows.map((row, i) => (
                 <Fragment key={`row-${i}`}>
                   {i === 0 && (
-                    <tr className="">
+                    <tr>
                       <td className="pb-1 bg-border-strong px-3 py-1 -mr-1 border-l-4 border-strong">
-                        <span className="">First instance is free on paid plans</span>
+                        <span>First instance is free on paid plans</span>
                       </td>
                     </tr>
                   )}

apps/www/components/SOC2RequestForm.tsx

@@ -169,7 +169,7 @@ const SOC2RequestForm = () => {
                     />
                   </div>
 
-                  <div className="">
+                  <div>
                     <Input.TextArea
                       id="details"
                       name="details"

apps/www/components/Sections/TimedTabsSection.tsx

@@ -136,9 +136,7 @@ const TimedTabsSection = ({
           <p className="text-foreground-muted mb-4 max-w-sm">{paragraph}</p>
           {cta && (
             <Button asChild type="default" size="small" icon={<IconArrowUpRight />}>
-              <Link href={cta.link} className="">
-                {cta.label ?? 'Explore more'}
-              </Link>
+              <Link href={cta.link}>{cta.label ?? 'Explore more'}</Link>
             </Button>
           )}
         </div>

apps/www/components/Sponsors.tsx

@@ -45,7 +45,7 @@ export default function Sponsors() {
               <h4 className="font-bold mt-2">{t.heading}</h4>
               <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 pl-4 mt-4">
                 {t.transactions.map((x: any, index: any) => (
-                  <div className="" key={index}>
+                  <div key={index}>
                     <a
                       className="flex items-center gap-4 shadow-none shrink-0"
                       href={`https://github.com/${x.sponsor}`}

apps/www/layouts/comparison.tsx

@@ -126,7 +126,7 @@ const LayoutComparison = ({ components, props }: Props) => {
               </div>
             </div>
           </div>
-          <div className="">
+          <div>
             {/* Content */}
             <div className="prose prose-docs max-w-none">
               <MDXRemote {...content} components={components} />

apps/www/pages/beta.tsx

@@ -535,7 +535,7 @@ const NewFeaturesAndIntegrations = () => {
               If you're new to Supabase, here's a few of the things you get when you choose us as
               your backend.
             </p>
-            <ul className="">
+            <ul>
               <li className="mb-10">
                 <p className="w-20 pb-2 mb-2 border-b-2 border-default">Auth</p>
                 <p className="mb-5">

apps/www/pages/careers/index.tsx

@@ -291,7 +291,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                               />
                             </div>
                           </div>
-                          <div className="">
+                          <div>
                             <h2 className="text-base">{human.title}</h2>
                             <p className="text-foreground-light text-xs lg:text-sm">{human.text}</p>
                           </div>

apps/www/pages/company.tsx

@@ -90,8 +90,8 @@ const Team = () => {
 
   return (
     <div className="border-t border-default">
-      <SectionContainer className="">
-        <SectionHeader title="Team" paragraph={<div className=""></div>} />
+      <SectionContainer>
+        <SectionHeader title="Team" paragraph={<div></div>} />
         <div className="grid grid-cols-2 md:grid-cols-12">
           <div className="col-span-8 ">
             <p>

apps/www/pages/customers/[slug].tsx

@@ -120,7 +120,7 @@ function CaseStudyPage(props: any) {
 
           "
             >
-              <div className="">
+              <div>
                 <article className="flex flex-col gap-8">
                   <div className="flex flex-col gap-8 max-w-xxl">
                     <Link href="/customers" className="text-brand hover:text-brand-600 mb-2 mt-0">

apps/www/pages/launch-week/8/tickets/[username].tsx

@@ -116,7 +116,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
                 </div>
               </div>
             </div>
-            <SectionContainer className="">
+            <SectionContainer>
               <LaunchWeekPrizeSection />
             </SectionContainer>
             {users && <TicketBrickWall users={users.slice(0, 17)} />}

apps/www/pages/launch-week/8/tickets/index.tsx

@@ -116,7 +116,7 @@ export default function TicketsPage({ users }: Props) {
         }}
       />
       <DefaultLayout>
-        <div className="">
+        <div>
           <SectionContainer className="z-10">
             <div className="text-center relative z-10 text-white mb-4 lg:mb-10">
               <motion.div

apps/www/pages/launch-week/tickets/index.tsx

@@ -112,7 +112,7 @@ export default function TicketsPage({ users }: Props) {
       />
       <FaviconImports />
       <DefaultLayout>
-        <div className="">
+        <div>
           <SectionContainer className="z-10">
             <div className="text-center relative z-10 text-white mb-4 lg:mb-10">
               <motion.div

apps/www/pages/realtime/Realtime.tsx

@@ -201,7 +201,7 @@ function RealtimePage() {
                       objectFit="contain"
                     />
                     <div className="prose">
-                      <h4 className="">{example.title}</h4>
+                      <h4>{example.title}</h4>
                       <p className="text-sm">{example.description}</p>
                     </div>
                   </div>

examples/user-management/nextjs-user-management/app/page.tsx

@@ -5,7 +5,7 @@ export default function Home() {
     <div className="row">
       <div className="col-6">
         <h1 className="header">Supabase Auth + Storage</h1>
-        <p className="">
+        <p>
           Experience our Auth and Storage through a simple profile management example. Create a user
           profile and upload an avatar image. Fast, simple, secure.
         </p>

packages/ui/src/components/Command/CommandMenu.tsx

@@ -125,7 +125,7 @@ const CommandMenu = () => {
                   value={site === 'docs' ? `${FORCE_MOUNT_ITEM}--docs-search` : undefined}
                   onSelect={() => setPages([...pages, COMMAND_ROUTES.DOCS_SEARCH])}
                 >
-                  <IconBook className="" />
+                  <IconBook />
 
                   <span>
                     Search the docs

packages/ui/src/components/Select/Select.tsx

@@ -38,7 +38,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLSelectElement>
   validation?: (x: any) => void
 }
 
-export const ColLayout = (props: any) => <div className="">{props.children}</div>
+export const ColLayout = (props: any) => <div>{props.children}</div>
 
 function Select({
   autoComplete,

packages/ui/src/lib/Layout/InputErrorIcon.tsx

@@ -13,7 +13,7 @@ export default function InputErrorIcon({ style, size }: Props) {
 
   return (
     <div className={__styles.base} style={style}>
-      <IconAlertCircle size={size} strokeWidth={2} className="" />
+      <IconAlertCircle size={size} strokeWidth={2} />
     </div>
   )
 }