[pull] master from supabase:master

apps/studio/components/interfaces/Auth/Users/UserOverview.tsx

@@ -181,7 +181,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
         {isBanned ? (
           <Admonition
             type="warning"
-            label={`User banned until ${dayjs(user.banned_until).format(DATE_FORMAT)}`}
+            description={`User banned until ${dayjs(user.banned_until).format(DATE_FORMAT)}`}
             className="border-r-0 border-l-0 rounded-none -mt-px [&_svg]:ml-0.5"
           />
         ) : (

apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx

@@ -63,28 +63,27 @@ export const PublicationsTables = () => {
 
   return (
     <>
-      <div className="mb-4">
-        <div className="flex items-center justify-between">
-          <Input
-            size="tiny"
-            ref={searchInputRef}
-            icon={<Search />}
-            className="w-48"
-            placeholder="Search for a table"
-            value={filterString}
-            onChange={(e) => setFilterString(e.target.value)}
-            onKeyDown={onSearchInputEscape(filterString, setFilterString)}
-          />
-          {!isLoadingPermissions && !canUpdatePublications && (
-            <Admonition
-              type="note"
-              className="w-[500px]"
-              title="You need additional permissions to update database replications"
-            />
-          )}
-        </div>
+      <div className="flex items-center justify-between mb-4">
+        <Input
+          size="tiny"
+          ref={searchInputRef}
+          icon={<Search />}
+          className="w-48"
+          placeholder="Search for a table"
+          value={filterString}
+          onChange={(e) => setFilterString(e.target.value)}
+          onKeyDown={onSearchInputEscape(filterString, setFilterString)}
+        />
       </div>
 
+      {!isLoadingPermissions && !canUpdatePublications && (
+        <Admonition
+          type="warning"
+          className="mb-4 w-full"
+          description="You need additional permissions to update database replications."
+        />
+      )}
+
       <Card>
         <Table>
           <TableHeader>

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx

@@ -639,21 +639,26 @@ export const AnalyticsBucketFields = ({
                   </p>
 
                   {isSuccessKeys && keyNoLongerExists && (
-                    <Admonition type="warning" title="Unable to find access key ID in project">
-                      <p className="leading-normal!">
-                        Please select another key or create a new set, as this destination will not
-                        work otherwise. S3 access keys can be managed in your{' '}
-                        <InlineLink href={`/project/${projectRef}/storage/files/settings`}>
-                          storage settings
-                        </InlineLink>
-                      </p>
-                    </Admonition>
+                    <Admonition
+                      type="warning"
+                      title="Unable to find access key ID in project"
+                      description={
+                        <>
+                          Please select another key or create a new set, as this destination will
+                          not work otherwise. S3 access keys can be managed in your{' '}
+                          <InlineLink href={`/project/${projectRef}/storage/files/settings`}>
+                            storage settings
+                          </InlineLink>
+                          .
+                        </>
+                      }
+                    />
                   )}
 
                   {s3AccessKeyId === CREATE_NEW_KEY && (
                     <Admonition
                       type="default"
-                      title="A new set of S3 access keys will be created"
+                      description="A new set of S3 access keys will be created."
                     />
                   )}
                 </div>
@@ -719,7 +724,7 @@ export const AnalyticsBucketFields = ({
                 layout="horizontal"
                 label="S3 Secret Access Key"
                 className="relative"
-                description="The secret key corresponding to your selected access key ID"
+                description="The secret key corresponding to your selected access key ID."
               >
                 <FormControl>
                   <Input

apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx

@@ -136,7 +136,7 @@ export const RestoreToNewProject = () => {
     return (
       <Admonition
         type="default"
-        title="Restoring to new projects is temporarily not available for AWS (Revamped) projects"
+        description="Restoring to new projects is temporarily not available for AWS (Revamped) projects."
       />
     )
   }

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx

@@ -281,7 +281,7 @@ export const QueueSettings = ({}: QueueSettingsProps) => {
             <Admonition
               type="default"
               className="rounded-none border-x-0 border-t-0"
-              title="Only relevant roles for managing queues via client libraries or PostgREST are shown here"
+              description="Only relevant roles for managing queues via client libraries or PostgREST are shown here."
             />
           )}
           <Table>

apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx

@@ -32,7 +32,7 @@ export const StripeSyncSettingsPage = () => {
     return (
       <PageContainer className="mx-0">
         <PageSection>
-          <Admonition type="default" title="Stripe Sync Engine is not installed" />
+          <Admonition type="default" description="Stripe Sync Engine is not installed." />
         </PageSection>
       </PageContainer>
     )

apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx

@@ -272,7 +272,7 @@ export const PostgrestConfig = () => {
                 </CardContent>
               ) : isError ? (
                 <CardContent>
-                  <Admonition type="destructive" title="Failed to retrieve API settings" />
+                  <Admonition type="destructive" description="Failed to retrieve API settings." />
                 </CardContent>
               ) : (
                 <>

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

@@ -161,7 +161,7 @@ const IPv4SidePanel = () => {
           {!isAws && (
             <Admonition
               type="default"
-              title="Dedicated IPv4 address is only available for AWS projects"
+              description="Dedicated IPv4 address is only available for AWS projects."
             />
           )}
 

apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx

@@ -306,7 +306,7 @@ export function JitDbAccessRuleSheet({
                       {grants.length === 0 ? (
                         <Admonition
                           type="note"
-                          title="No assignable roles found"
+                          description="No assignable roles found."
                           className="bg-background"
                         />
                       ) : (

apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx

@@ -96,7 +96,7 @@ export const DashboardPreferences = () => {
         {/* [Joshen] Ideally we're able to persist this for all users in the project, but will need support in our middleware */}
         <Admonition
           type="note"
-          title="These preferences control only your experience in the dashboard. Other members of this project will not be affected"
+          description="These preferences control only your experience in the dashboard. Other members of this project will not be affected."
         />
 
         {isLoading ? (

apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx

@@ -40,7 +40,9 @@ export function ProjectAndPlanInfo({
       <ProjectSelector form={form} orgSlug={orgSlug} projectRef={projectRef} />
       <ProjectRefHighlighted projectRef={projectRef} />
 
-      {!hasProjectSelected && <Admonition type="default" title="No project has been selected" />}
+      {!hasProjectSelected && (
+        <Admonition type="default" description="No project has been selected." />
+      )}
     </div>
   )
 }

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

@@ -403,7 +403,10 @@ const SchemaExposureOptions = ({
   return (
     <>
       {isError && (
-        <Admonition type="warning" title="An error occurred while fetching Data API settings." />
+        <Admonition
+          type="warning"
+          description="An error occurred while fetching Data API settings."
+        />
       )}
 
       {isSchemaExposed && apiUrl && (

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

@@ -16,9 +16,9 @@ export const alertVariants = cva(
         default:
           'bg-surface-200/25 border-default text-foreground [&>svg]:text-background [&>svg]:bg-foreground',
         destructive:
-          'bg-destructive-200 border-destructive-400 [&>svg]:text-destructive-200 [&>svg]:bg-destructive-600',
+          'bg-destructive-200 border-destructive-400 text-foreground [&>svg]:text-destructive-200 [&>svg]:bg-destructive-600',
         warning:
-          'bg-warning-200 border-warning-400 [&>svg]:text-warning-200 [&>svg]:bg-warning-600',
+          'bg-warning-200 border-warning-400 text-foreground [&>svg]:text-warning-200 [&>svg]:bg-warning-600',
       },
     },
     defaultVariants: {