Merge branch 'master' into feat/homepage-connect-modal-combined

apps/docs/pages/guides/auth/server-side/creating-a-client.mdx

@@ -98,6 +98,12 @@ dotenv.config()
 
 Creating a Supabase client with the `ssr` package automatically configures it to use cookies. This means your user's session is available throughout the entire Next.js stack - client, server, App Router, Pages Router. It just works!
 
+<Admonition type="note">
+
+For the client utility functions, it is recommended to create them in a separate `/utils/supabase` folder. That way, you can import them as `client` into any component or page that needs access to Supabase. For further information, you can look at the [Next.js Auth Guide](/docs/guides/auth/server-side/nextjs).
+
+</Admonition>
+
 <Tabs
   scrollable
   size="small"

apps/docs/pages/guides/auth/server-side/nextjs.mdx

@@ -155,10 +155,10 @@ export function createClient(cookieStore: ReturnType<typeof cookies>) {
           return cookieStore.get(name)?.value
         },
         set(name: string, value: string, options: CookieOptions) {
-          return cookieStore.set({ name, value, ...options })
+          cookieStore.set({ name, value, ...options })
         },
         remove(name: string, options: CookieOptions) {
-          return cookieStore.set({ name, value: '', ...options })
+          cookieStore.set({ name, value: '', ...options })
         },
       },
     }
@@ -284,9 +284,7 @@ export const config = {
 
 Create a login page for your app. Use a Server Action to call the Supabase signup function.
 
-If you have email confirmations turned on (the default), a new user will receive a confirmation email after signing up. When they click the link, they are directed to the Auth callback route at `auth/confirm` with a secure code. A Route Handler at this route finishes the signup process by exchanging the code for an Auth token.
-
-Since Supabase is being called from an Action and a Route Handler, use the client defined in `@/utils/supabase/actions.ts`.
+Since Supabase is being called from an Action, use the client defined in `@/utils/supabase/actions.ts`.
 
 </StepHikeCompact.Details>
 
@@ -369,7 +367,39 @@ export default function ErrorPage() {
 }
 ```
 
-```ts app/auth/confirm/route.ts
+</CH.Code>
+
+</StepHikeCompact.Code>
+
+</StepHikeCompact.Step>
+
+<StepHikeCompact.Step step={6}>
+
+<StepHikeCompact.Details title="Change the Auth confirmation path">
+
+If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up.
+
+Change the email template to support a server-side authentication flow.
+
+Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templates) page in your dashboard. In each email template, change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=signup`.
+
+</StepHikeCompact.Details>
+
+</StepHikeCompact.Step>
+
+<StepHikeCompact.Step step={7}>
+
+<StepHikeCompact.Details title="Create a route handler for Auth confirmation">
+
+Create a Route Handler for `auth/callback`. When a user clicks their confirmation email link, exchange their secure code for an Auth token.
+
+Since this is a Router Handler, use the Supabase client from `@/utils/supabase/actions.ts`.
+
+</StepHikeCompact.Details>
+
+<StepHikeCompact.Code>
+
+```ts app/auth/callback/route.ts
 import { type EmailOtpType } from '@supabase/supabase-js'
 import { cookies } from 'next/headers'
 import { type NextRequest, NextResponse } from 'next/server'
@@ -408,13 +438,11 @@ export async function GET(request: NextRequest) {
 }
 ```
 
-</CH.Code>
-
 </StepHikeCompact.Code>
 
 </StepHikeCompact.Step>
 
-<StepHikeCompact.Step step={6}>
+<StepHikeCompact.Step step={8}>
 
 <StepHikeCompact.Details title="Access user info from Server Component">
 
@@ -772,11 +800,11 @@ export default function LoginPage() {
 
 <StepHikeCompact.Details title="Change the Auth confirmation path">
 
-If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up. By default, the link in this email goes to the path `auth/confirm`.
+If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up.
 
-Change this to `api/auth/confirm`.
+Change the email template to support a server-side authentication flow.
 
-Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templates) page in your dashboard. In each email template, change `{{ .SiteURL }}/auth/confirm` to `{{ .SiteURL }}/api/auth/confirm`.
+Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templates) page in your dashboard. In each email template, change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}/api/auth/callback?token_hash={{ .TokenHash }}&type=signup`.
 
 </StepHikeCompact.Details>
 
@@ -786,7 +814,7 @@ Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templat
 
 <StepHikeCompact.Details title="Create a route handler for Auth confirmation">
 
-Create an API route for `api/auth/confirm`. When a user clicks their confirmation email link, exchange their secure code for an Auth token.
+Create an API route for `api/auth/callback`. When a user clicks their confirmation email link, exchange their secure code for an Auth token.
 
 Since this is an API route, use the Supabase client from `@/utils/supabase/api.ts`.
 
@@ -796,7 +824,7 @@ Since this is an API route, use the Supabase client from `@/utils/supabase/api.t
 
 <CH.Code>
 
-```ts pages/api/auth/confirm.tsx
+```ts pages/api/auth/callback.tsx
 import { type EmailOtpType } from '@supabase/supabase-js'
 import type { NextApiRequest, NextApiResponse } from 'next'
 

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

@@ -200,9 +200,9 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
 
   <TabPanel id="flutter" label="Flutter">
 
-    ## Using native sign in with Apple in Flutter
+    ## Apple sign in on iOS and macOS
 
-    You can perform Apple sign in using the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package on Flutter.
+    You can perform Apple sign in using the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package on Flutter apps running on iOS or macOS.
     Follow the instructions in the package README to set up native Apple sign in on iOS and macOS.
 
     Once the setup is complete on the Flutter app, add the bundle ID of your app to your Supabase dashboard in `Authentication -> Providers -> Apple` in order to register your app with Supabase.
@@ -249,6 +249,32 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
 
     </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.
+    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
+    supabase.auth.signInWithOAuth(
+      OAuthProvider.apple,
+      redirectTo: 'my-scheme://login-callback',
+    );
+    ```
+
+    This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your Flutter application with an access and refresh token representing the user's session.
+
+    ### Configuration [#flutter-configuration-web]
+
+    You will require the following information:
+
+    1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console.
+    2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console.
+    3. 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 once you create an App ID 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._)
+    4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`.
+    5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `<project-id>.supabase.co` while the redirect URL is `https://<project-id>.supabase.co/auth/v1/callback`.
+    6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever lose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring reminder in your calendar!
+    7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers).
+
   </TabPanel>
 
   <TabPanel id="swift" label="Swift">

apps/docs/pages/guides/database/extensions/index_advisor.mdx

@@ -6,7 +6,7 @@ export const meta = {
   description: 'Automatically optimize SQL queries',
 }
 
-[Index advisor](https://github.com/supabase/index_advisor) is a Postgres extension for recommending indexes to improve query performance.
+[Index advisor](https://database.dev/olirice/index_advisor) is a Postgres extension for recommending indexes to improve query performance.
 
 For example:
 
@@ -154,7 +154,8 @@ from
 
 ## Resources
 
-- Official [`index_advisor` GitHub Repository](https://github.com/supabase/index_advisor)
+- dbdev [`index_advisor`](https://database.dev/olirice/index_advisor) docs
+- dbdev [Github Repository](https://github.com/supabase/dbdev)
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 

apps/docs/pages/guides/database/partitions.mdx

@@ -157,7 +157,7 @@ partition by list(country);
 
 create table customers_americas
 	partition of customers
-	for values in ('US', 'CANADA')
+	for values in ('US', 'CANADA');
 
 create table customers_asia
 	partition of customers

apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx

@@ -451,10 +451,10 @@ photos and videos.
 
 ### Additional dependency installation
 
-You will need a file picker that works on the environment you will build the project for, we will use react-native-document-picker in this example.
+You will need an image picker that works on the environment you will build the project for, we will use `expo-image-picker` in this example.
 
 ```bash
-expo install react-native-document-picker
+expo install expo-image-picker
 ```
 
 ### Create an upload widget
@@ -466,7 +466,7 @@ We can start by creating a new component:
 import { useState, useEffect } from 'react'
 import { supabase } from '../lib/supabase'
 import { StyleSheet, View, Alert, Image, Button } from 'react-native'
-import DocumentPicker, { isCancel, isInProgress, types } from 'react-native-document-picker'
+import * as ImagePicker from 'expo-image-picker'
 
 interface Props {
   size: number
@@ -507,39 +507,43 @@ export default function Avatar({ url, size = 150, onUpload }: Props) {
     try {
       setUploading(true)
 
-      const file = await DocumentPicker.pickSingle({
-        presentationStyle: 'fullScreen',
-        copyTo: 'cachesDirectory',
-        type: types.images,
-        mode: 'open',
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images, // Restrict to only images
+        allowsMultipleSelection: false, // Can only select one image
+        allowsEditing: true, // Allows the user to crop / rotate their photo before uploading it
+        quality: 1,
+        exif: false, // We don't want nor need that data.
       })
 
-      const photo = {
-        uri: file.fileCopyUri,
-        type: file.type,
-        name: file.name,
+      if (result.canceled || !result.assets || result.assets.length === 0) {
+        console.log('User cancelled image picker.')
+        return
       }
 
-      const formData = new FormData()
-      formData.append('file', photo)
+      const image = result.assets[0]
+      console.log('Got image', image)
 
-      const fileExt = file.name.split('.').pop()
-      const filePath = `${Math.random()}.${fileExt}`
-
-      const { error } = await supabase.storage.from('avatars').upload(filePath, formData)
-
-      if (error) {
-        throw error
+      if (!image.uri) {
+        throw new Error('No image uri!') // Realistically, this should never happen, but just in case...
       }
 
-      onUpload(filePath)
+      const arraybuffer = await fetch(image.uri).then((res) => res.arrayBuffer())
+
+      const fileExt = image.uri?.split('.').pop()?.toLowerCase() ?? 'jpeg'
+      const path = `${Date.now()}.${fileExt}`
+      const { data, error: uploadError } = await supabase.storage
+        .from('avatars')
+        .upload(path, arraybuffer, {
+          contentType: image.mimeType ?? 'image/jpeg',
+        })
+
+      if (uploadError) {
+        throw uploadError
+      }
+
+      onUpload(data.path)
     } catch (error) {
-      if (isCancel(error)) {
-        console.warn('cancelled')
-        // User cancelled the picker, exit any dialogs or menus and move on
-      } else if (isInProgress(error)) {
-        console.warn('multiple pickers were opened, only the last will be considered')
-      } else if (error instanceof Error) {
+      if (error instanceof Error) {
         Alert.alert(error.message)
       } else {
         throw error
@@ -583,7 +587,9 @@ const styles = StyleSheet.create({
   },
   noImage: {
     backgroundColor: '#333',
-    border: '1px solid rgb(200, 200, 200)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'rgb(200, 200, 200)',
     borderRadius: 5,
   },
 })
@@ -598,23 +604,22 @@ And then we can add the widget to the Account page:
 import Avatar from './Avatar'
 
 // ...
-  return (
+return (
+  <View>
+    {/* Add to the body */}
     <View>
-      {/* Add to the body */}
-      <View>
-        <Avatar
-          size={200}
-          url={avatarUrl}
-          onUpload={(url: string) => {
-            setAvatarUrl(url)
-            updateProfile({ username, website, avatar_url: url })
-          }}
-        />
-      </View>
-      {/* ... */}
+      <Avatar
+        size={200}
+        url={avatarUrl}
+        onUpload={(url: string) => {
+          setAvatarUrl(url)
+          updateProfile({ username, website, avatar_url: url })
+        }}
+      />
     </View>
-  )
-}
+    {/* ... */}
+  </View>
+)
 // ...
 ```
 

apps/studio/components/interfaces/Billing/Subscription/Subscription.utils.ts

@@ -10,11 +10,10 @@ export const getAddons = (selectedAddons: ProjectSelectedAddon[]) => {
   return { computeInstance, pitr, customDomain, ipv4 }
 }
 
-export const subscriptionHasHipaaAddon = (subscription: OrgSubscription | undefined): boolean => {
+export const subscriptionHasHipaaAddon = (subscription?: OrgSubscription): boolean => {
   if (!IS_PLATFORM) return false
 
-  return (
-    subscription !== undefined &&
-    subscription.addons.some((addon) => addon.supabase_prod_id === 'addon_security_hipaa')
+  return (subscription?.addons ?? []).some(
+    (addon) => addon.supabase_prod_id === 'addon_security_hipaa'
   )
 }

apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

@@ -31,6 +31,9 @@ export const RegionSelector = ({
   useEffect(() => {
     // only pick a region if one hasn't already been selected
     if (isSuccess && region && !selectedRegion) {
+      // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD
+      if (process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' && region === 'Southeast Asia (Singapore)')
+        return
       onSelectRegion(region)
     } else if (isError && !selectedRegion) {
       // if an error happened, and the user haven't selected a region, just select the default one for him

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx

@@ -2,7 +2,17 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { useParams, useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import { Button, IconChevronDown, IconExternalLink, Input, Separator, Tabs } from 'ui'
+import {
+  Button,
+  CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+  Collapsible_Shadcn_,
+  IconChevronDown,
+  IconExternalLink,
+  Input,
+  Separator,
+  Tabs,
+} from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
@@ -49,7 +59,6 @@ export const DatabaseConnectionString = () => {
   const [poolingMode, setPoolingMode] = useState<'transaction' | 'session' | 'statement'>(
     'transaction'
   )
-  const [showUriSyntax, setShowUriSyntax] = useState(false)
   const [selectedTab, setSelectedTab] = useState<
     'uri' | 'psql' | 'golang' | 'jdbc' | 'dotnet' | 'nodejs' | 'php' | 'python'
   >('uri')
@@ -213,59 +222,91 @@ export const DatabaseConnectionString = () => {
           <>
             <Separator />
             <Panel.Content className="!py-3 space-y-2">
-              <div
-                className="flex items-center gap-x-2 transition cursor-pointer opacity-75 hover:opacity-100"
-                onClick={() => setShowUriSyntax(!showUriSyntax)}
-              >
-                <p className="text-xs text-foreground">
-                  How to connect to a different database or switch to another user
-                </p>
-                <IconChevronDown
-                  strokeWidth={1.5}
-                  className={`transition ${showUriSyntax ? '-rotate-180' : ''}`}
-                />
-              </div>
-              {showUriSyntax && (
-                <div className="text-foreground-light">
-                  <p className="text-xs">
-                    You can use the following URI format to switch to a different database or user
-                    {usePoolerConnection ? ' when using connection pooling' : ''}.
-                  </p>
-                  <p className="text-sm font-mono tracking-tight text-foreground-lighter">
-                    {poolerConnStringSyntax.map((x, idx) => {
-                      if (x.tooltip) {
-                        return (
-                          <Tooltip.Root key={`syntax-${idx}`} delayDuration={0}>
-                            <Tooltip.Trigger asChild>
-                              <span className="text-foreground text-xs">{x.value}</span>
-                            </Tooltip.Trigger>
-                            <Tooltip.Portal>
+              <Collapsible_Shadcn_>
+                <CollapsibleTrigger_Shadcn_ className="group [&[data-state=open]>div>svg]:!-rotate-180">
+                  <div className="flex items-center gap-x-2 w-full">
+                    <p className="text-xs text-foreground-light group-hover:text-foreground transition">
+                      How to connect to a different database or switch to another user
+                    </p>
+                    <IconChevronDown
+                      className="transition-transform duration-200"
+                      strokeWidth={1.5}
+                      size={14}
+                    />
+                  </div>
+                </CollapsibleTrigger_Shadcn_>
+                <CollapsibleContent_Shadcn_ className="my-2">
+                  <div className="text-foreground-light">
+                    <p className="text-xs">
+                      You can use the following URI format to switch to a different database or user
+                      {usePoolerConnection ? ' when using connection pooling' : ''}.
+                    </p>
+                    <p className="text-sm font-mono tracking-tight text-foreground-lighter">
+                      {poolerConnStringSyntax.map((x, idx) => {
+                        if (x.tooltip) {
+                          return (
+                            <Tooltip.Root key={`syntax-${idx}`} delayDuration={0}>
+                              <Tooltip.Trigger asChild>
+                                <span className="text-foreground text-xs">{x.value}</span>
+                              </Tooltip.Trigger>
                               <Tooltip.Portal>
-                                <Tooltip.Content side="bottom">
-                                  <Tooltip.Arrow className="radix-tooltip-arrow" />
-                                  <div
-                                    className={[
-                                      'rounded bg-alternative py-1 px-2 leading-none shadow',
-                                      'border border-background',
-                                    ].join(' ')}
-                                  >
-                                    <span className="text-xs text-foreground">{x.tooltip}</span>
-                                  </div>
-                                </Tooltip.Content>
+                                <Tooltip.Portal>
+                                  <Tooltip.Content side="bottom">
+                                    <Tooltip.Arrow className="radix-tooltip-arrow" />
+                                    <div
+                                      className={[
+                                        'rounded bg-alternative py-1 px-2 leading-none shadow',
+                                        'border border-background',
+                                      ].join(' ')}
+                                    >
+                                      <span className="text-xs text-foreground">{x.tooltip}</span>
+                                    </div>
+                                  </Tooltip.Content>
+                                </Tooltip.Portal>
                               </Tooltip.Portal>
-                            </Tooltip.Portal>
-                          </Tooltip.Root>
-                        )
-                      } else {
-                        return (
-                          <span key={`syntax-${idx}`} className="text-xs">
-                            {x.value}
-                          </span>
-                        )
-                      }
-                    })}
-                  </p>
-                </div>
+                            </Tooltip.Root>
+                          )
+                        } else {
+                          return (
+                            <span key={`syntax-${idx}`} className="text-xs">
+                              {x.value}
+                            </span>
+                          )
+                        }
+                      })}
+                    </p>
+                  </div>
+                </CollapsibleContent_Shadcn_>
+              </Collapsible_Shadcn_>
+
+              {selectedTab === 'python' && (
+                <Collapsible_Shadcn_>
+                  <CollapsibleTrigger_Shadcn_ className="group [&[data-state=open]>div>svg]:!-rotate-180">
+                    <div className="flex items-center gap-x-2 w-full">
+                      <p className="text-xs text-foreground-light group-hover:text-foreground transition">
+                        Connecting to SQL Alchemy
+                      </p>
+                      <IconChevronDown
+                        className="transition-transform duration-200"
+                        strokeWidth={1.5}
+                        size={14}
+                      />
+                    </div>
+                  </CollapsibleTrigger_Shadcn_>
+                  <CollapsibleContent_Shadcn_ className="my-2">
+                    <div className="text-foreground-light text-xs grid gap-2">
+                      <p>
+                        Please use <code>postgresql://</code> instead of <code>postgres://</code> as
+                        your dialect when connecting via SQLAlchemy.
+                      </p>
+                      <p>
+                        Example:
+                        <code>create_engine("postgresql+psycopg2://...")</code>
+                      </p>
+                      <p className="text-sm font-mono tracking-tight text-foreground-lighter"></p>
+                    </div>
+                  </CollapsibleContent_Shadcn_>
+                </Collapsible_Shadcn_>
               )}
             </Panel.Content>
           </>

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants.ts

@@ -54,7 +54,8 @@ export const AVAILABLE_REPLICA_REGIONS: Region[] = Object.keys(AWS_REGIONS)
   .map((key) => {
     return {
       key: key as AWS_REGIONS_KEYS,
-      name: AWS_REGIONS[key as AWS_REGIONS_KEYS],
+      // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD, remove ternary
+      name: AWS_REGIONS?.[key as AWS_REGIONS_KEYS] ?? '',
       region: AWS_REGIONS_VALUES[key],
       coordinates: AWS_REGIONS_COORDINATES[key],
     }

apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx

@@ -17,7 +17,6 @@ interface BranchingWaitlistPopoverProps {
 
 const BranchingWaitlistPopover = ({ isNewNav = false }: BranchingWaitlistPopoverProps) => {
   const [open, setOpen] = useState(false)
-  const org = useSelectedOrganization()
 
   return (
     <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>

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

@@ -45,8 +45,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
 
   const showOverUsageBadge =
     useFlag('overusageBadge') &&
-    subscription !== undefined &&
-    (subscription.plan.id === 'free' || subscription.plan.id === 'pro') &&
+    (subscription?.plan.id === 'free' || subscription?.plan.id === 'pro') &&
     !projectHasNoLimits &&
     exceedingLimits
 

apps/studio/data/subscriptions/org-subscription-query.ts

@@ -17,8 +17,8 @@ export async function getOrgSubscription(
     params: { path: { slug: orgSlug } },
     signal,
   })
-  if (error) throw error
 
+  if (error) throw error
   return data
 }
 

apps/studio/data/subscriptions/project-addons-query.ts

@@ -19,7 +19,6 @@ export async function getProjectAddons(
   })
 
   if (error) throw error
-
   return data
 }
 

apps/studio/lib/constants/infrastructure.ts

@@ -1,4 +1,5 @@
 import { components } from 'data/api'
+import { IS_PLATFORM } from '.'
 
 export type CloudProvider = 'FLY' | 'AWS'
 export type Region = typeof AWS_REGIONS | typeof FLY_REGIONS
@@ -16,7 +17,10 @@ export const AWS_REGIONS = {
   // 'North EU': 'North EU',
   CENTRAL_EU: 'Central EU (Frankfurt)',
   SOUTH_ASIA: 'South Asia (Mumbai)',
-  SOUTHEAST_ASIA: 'Southeast Asia (Singapore)',
+  // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD
+  ...(process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
+    ? { SOUTHEAST_ASIA: 'Southeast Asia (Singapore)' }
+    : {}),
   NORTHEAST_ASIA: 'Northeast Asia (Tokyo)',
   NORTHEAST_ASIA_2: 'Northeast Asia (Seoul)',
   OCEANIA: 'Oceania (Sydney)',
@@ -30,8 +34,11 @@ export const FLY_REGIONS = {
   SOUTHEAST_ASIA: 'Singapore',
 } as const
 
+// [Joshen] TEMP FIX BLOCK APSE 1 ON PROD, remove as string
 export const AWS_REGIONS_DEFAULT =
-  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? AWS_REGIONS.SOUTHEAST_ASIA : AWS_REGIONS.WEST_US
+  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
+    ? (AWS_REGIONS.SOUTHEAST_ASIA as string)
+    : AWS_REGIONS.WEST_US
 
 // TO DO, change default to US region for prod
 const FLY_REGIONS_DEFAULT = FLY_REGIONS.SOUTHEAST_ASIA

apps/www/pages/partners/experts/[slug].tsx

@@ -250,7 +250,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   return {
     props: { partner, overview },
-    revalidate: 10, // this was 1800 (5 hours) @mildtomato changed to 10 seconds for making rapid updates
+    revalidate: 1800, // 5 hours
   }
 }
 

apps/www/pages/partners/integrations/[slug].tsx

@@ -335,7 +335,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   return {
     props: { partner, overview },
-    revalidate: 10, // this was 1800 (5 hours) @mildtomato changed to 10 seconds for making rapid updates
+    revalidate: 1800, // 5 hours
   }
 }
 

examples/edge-functions/supabase/.env.local.example

@@ -11,11 +11,13 @@ IPINFO_TOKEN="your https://ipinfo.io token"
 OPENAI_API_KEY="<YOUR API KEY HERE>"
 
 # postgres-on-the-edge & kysely-postgres
+# get your DB params and cert from the project dashboard
+# https://supabase.com/dashboard/project/_/settings/database
+# enable `Use connection pooling` and use `Transaction` mode
 DB_HOSTNAME=
 DB_PASSWORD=
+DB_USER=
 DB_SSL_CERT="-----BEGIN CERTIFICATE-----
-GET YOUR CERT FROM YOUR PROJECT DASHBOARD
-https://supabase.com/dashboard/project/_/settings/database
 -----END CERTIFICATE-----"
 
 # puppeteer 

examples/edge-functions/supabase/functions/kysely-postgres/index.ts

@@ -31,8 +31,8 @@ const pool = new Pool(
     tls: { caCertificates: [Deno.env.get('DB_SSL_CERT')!] },
     database: 'postgres',
     hostname: Deno.env.get('DB_HOSTNAME'),
-    user: 'postgres',
-    port: 5432,
+    user: Deno.env.get('DB_USER'),
+    port: 6543,
     password: Deno.env.get('DB_PASSWORD'),
   },
   1

examples/edge-functions/supabase/functions/postgres-on-the-edge/.env.example

@@ -1,2 +1,2 @@
 #Use PolyScale connection string with application_name parameter to get code-free database caching
-DATABASE_URL="postgresql:/DB_USERNAME:DB_PASSWORD@psedge.global:5432/postgres?application_name=POLYSCALE_CACHE_ID"
+DATABASE_URL="postgres://postgres.[PROJECT_REF]:[DB_PASSWORD]@psedge.global:5432?application_name=[APPLICATION_NAME]"

examples/edge-functions/supabase/functions/postgres-on-the-edge/index.ts

@@ -6,8 +6,8 @@ const pool = new Pool(
     tls: { enabled: false },
     database: 'postgres',
     hostname: Deno.env.get('DB_HOSTNAME'),
-    user: 'postgres',
-    port: 5432,
+    user: Deno.env.get('DB_USER'),
+    port: 6543,
     password: Deno.env.get('DB_PASSWORD'),
   },
   1

packages/ui/src/components/Accordion/Accordion.tsx

@@ -1,10 +1,8 @@
+import * as RadixAccordion from '@radix-ui/react-accordion'
 import React, { createContext, useContext, useState } from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
-
-import * as RadixAccordion from '@radix-ui/react-accordion'
 import { IconChevronDown } from '../Icon/icons/IconChevronDown'
-import { IconChevronUp } from '../Icon/icons/IconChevronUp'
 
 type Type = 'default' | 'bordered'
 type Size = 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'

packages/ui/src/components/Admonition/index.tsx

@@ -1,7 +1,9 @@
-import { cn } from '@ui/lib/utils'
 import { cva } from 'class-variance-authority'
 import { PropsWithChildren } from 'react'
+
+import { cn } from '../../lib/utils/cn'
 import { Alert, AlertDescription, AlertTitle } from './../shadcn/ui/alert'
+
 export interface AdmonitionProps {
   type: 'note' | 'tip' | 'caution' | 'danger' | 'deprecation'
   label?: string

packages/ui/src/components/Alert/Alert.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { Alert, AlertVariant } from './Alert'
 import defaultTheme from '../../lib/theme/defaultTheme'
+import { Alert, AlertVariant } from './Alert'
 
 const VARIANTS: AlertVariant[] = ['success', 'danger', 'warning', 'info', 'neutral']
 

packages/ui/src/components/Button/Button.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import Link from 'next/link'
 import React from 'react'
-import { Button } from '@ui/components/Button'
+import { Button } from './Button'
 
 const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const
 const TYPES = [

packages/ui/src/components/Button/Button.tsx

@@ -2,12 +2,13 @@
 
 import { Slot } from '@radix-ui/react-slot'
 import { VariantProps, cva } from 'class-variance-authority'
-import { IconContext } from '@ui/components/Icon/IconContext'
-import { IconLoader } from '@ui/components/Icon/icons/IconLoader'
-import { sizes } from '@ui/lib/commonCva'
-import { cn } from '@ui/lib/utils'
 import { cloneElement, forwardRef, isValidElement } from 'react'
 
+import { sizes } from '../../lib/commonCva'
+import { cn } from '../../lib/utils/cn'
+import { IconContext } from '../Icon/IconContext'
+import { IconLoader } from '../Icon/icons/IconLoader'
+
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
   `relative 

packages/ui/src/components/Card/Card.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
-import Typography from '../Typography'
-// @ts-ignore
-import CardStyles from './Card.module.css'
 
 import styleHandler from '../../lib/theme/styleHandler'
+import Typography from '../Typography'
 
 interface CardProps {
   children?: React.ReactNode
@@ -16,15 +14,7 @@ interface CardProps {
   titleExtra?: React.ReactNode
 }
 
-function Card({
-  children,
-  className,
-  cover,
-  hoverable,
-  style,
-  title,
-  titleExtra,
-}: CardProps) {
+function Card({ children, className, cover, hoverable, style, title, titleExtra }: CardProps) {
   let __styles = styleHandler('card')
 
   let classes = [__styles.base]

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -1,13 +1,10 @@
-import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import { CheckboxContext } from './CheckboxContext'
-// @ts-ignore
-import CheckboxStyles from './Checkbox.module.css'
+import React from 'react'
 
-import defaultTheme from '../../lib/theme/defaultTheme'
-
-import { useFormContext } from '../Form/FormContext'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
+import CheckboxStyles from './Checkbox.module.css'
+import { CheckboxContext } from './CheckboxContext'
 
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   afterLabel?: string

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

@@ -1,5 +1,4 @@
-import { AiIconAnimation } from '@ui/layout/ai-icon-animation'
-import { cn } from '@ui/lib/utils'
+import { AiIconAnimation } from '../../layout/ai-icon-animation/ai-icon-animation'
 
 interface AiIconProps {
   className?: string

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

@@ -1,20 +1,24 @@
+import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import * as React from 'react'
-import { IconHome } from '../Icon/icons/IconHome'
 
+import { AiIconAnimation } from '../../layout/ai-icon-animation/ai-icon-animation'
+import { IconHome } from '../Icon/icons/IconHome'
 import { IconArrowRight } from './../Icon/icons/IconArrowRight'
 import { IconBook } from './../Icon/icons/IconBook'
 import { IconColumns } from './../Icon/icons/IconColumns'
 import { IconInbox } from './../Icon/icons/IconInbox'
+import { IconKey } from './../Icon/icons/IconKey'
 import { IconLifeBuoy } from './../Icon/icons/IconLifeBuoy'
+import { IconLink } from './../Icon/icons/IconLink'
 import { IconMonitor } from './../Icon/icons/IconMonitor'
 import { IconPhone } from './../Icon/icons/IconPhone'
 import { IconUser } from './../Icon/icons/IconUser'
-import { IconKey } from './../Icon/icons/IconKey'
-import { IconLink } from './../Icon/icons/IconLink'
-
+import APIKeys from './APIKeys'
 import AiCommand from './AiCommand'
-import sharedItems from './utils/shared-nav-items.json'
+import ChildItem from './ChildItem'
+import { BadgeExperimental } from './Command.Badges'
+import { COMMAND_ROUTES } from './Command.constants'
 import { AiIcon } from './Command.icons'
 import {
   CommandDialog,
@@ -26,19 +30,13 @@ import {
   FORCE_MOUNT_ITEM,
   copyToClipboard,
 } from './Command.utils'
-import { COMMAND_ROUTES } from './Command.constants'
 import { useCommandMenu } from './CommandMenuProvider'
-
+import CommandMenuShortcuts from './CommandMenuShortcuts'
 import DocsSearch from './DocsSearch'
 import GenerateSQL from './GenerateSQL'
-import ThemeOptions from './ThemeOptions'
-import APIKeys from './APIKeys'
 import SearchableStudioItems from './SearchableStudioItems'
-import CommandMenuShortcuts from './CommandMenuShortcuts'
-import { BadgeExperimental } from './Command.Badges'
-import { AiIconAnimation } from '@ui/layout/ai-icon-animation'
-import ChildItem from './ChildItem'
-import { useParams } from 'common'
+import ThemeOptions from './ThemeOptions'
+import sharedItems from './utils/shared-nav-items.json'
 
 export const CHAT_ROUTES = [
   COMMAND_ROUTES.AI, // this one is temporary

packages/ui/src/components/CountdownWidget/CountdownStep.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 interface CountdownStepProps {
   value: string | number

packages/ui/src/components/GlassPanel/GlassPanel.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from 'next-themes'
-import * as React from 'react'
 import Image from 'next/image'
-import { cn } from '../../lib/utils'
+import * as React from 'react'
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   title: string

packages/ui/src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import styleHandler from '../../lib/theme/styleHandler'
 import { IconContext } from './IconContext'
+
+import styleHandler from '../../lib/theme/styleHandler'
 // @ts-ignore
 // import IconStyles from './Icon.module.css'
 

packages/ui/src/components/Icon/IconBase.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 import { IconContext } from './IconContext'
 // @ts-ignore
 // import IconStyles from './Icon.module.css'

packages/ui/src/components/Icon/IconContext.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'react'
+
 import { SizeVariantProps } from '../../lib/commonCva'
 
 type ContextValue = { contextSize?: SizeVariantProps; className?: string }

packages/ui/src/components/Input/Input.tsx

@@ -1,17 +1,14 @@
 import React, { useEffect, useState } from 'react'
-import { Button } from '../Button'
-import { IconCopy } from '../Icon/icons/IconCopy'
-
-import { FormLayout } from '../../lib/Layout/FormLayout'
 
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { HIDDEN_PLACEHOLDER } from './../../lib/constants'
-
-import { cn } from '@ui/lib/utils/cn'
+import { HIDDEN_PLACEHOLDER } from '../../lib/constants'
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
+import { Button } from '../Button'
 import { useFormContext } from '../Form/FormContext'
+import { IconCopy } from '../Icon/icons/IconCopy'
 
 export interface Props
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onCopy'> {

packages/ui/src/components/InputNumber/InputNumber.tsx

@@ -1,15 +1,14 @@
 import React, { useEffect } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
+
 // import { IconChevronDown } from '../Icon/icons/IconChevronDown'
 // import { IconChevronUp } from '../Icon/icons/IconChevronUp'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
+import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { useFormContext } from '../Form/FormContext'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
 
-export interface Props
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   defaultValue?: string | number
   descriptionText?: string | React.ReactNode
   error?: string
@@ -46,14 +45,8 @@ function InputNumber({
 }: Props) {
   const __styles = styleHandler('inputNumber')
 
-  const {
-    formContextOnChange,
-    values,
-    errors,
-    handleBlur,
-    touched,
-    fieldLevelValidation,
-  } = useFormContext()
+  const { formContextOnChange, values, errors, handleBlur, touched, fieldLevelValidation } =
+    useFormContext()
 
   if (values && !value) value = values[id || name]
 

packages/ui/src/components/Listbox/Listbox2.tsx

@@ -2,11 +2,11 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { flatten } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 
-import { cn } from '@ui/lib/utils'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
 import { useFormContext } from '../Form/FormContext'
 import { IconCheck } from '../Icon/icons/IconCheck'
 import { SelectContext } from './SelectContext'

packages/ui/src/components/Loading/Loading.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
-import { IconLoader } from './../../../index'
+import IconLoader from '../Icon/icons/IconLoader/IconLoader'
 
 interface Props {
   children: React.ReactNode

packages/ui/src/components/LoadingLine/LoadingLine.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 export const LoadingLine = ({ loading }: { loading: boolean }) => {
   return (

packages/ui/src/components/Menu/Menu.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
+import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
 import Typography from '../Typography'
 import { MenuContextProvider, useMenuContext } from './MenuContext'
 
-import styleHandler from '../../lib/theme/styleHandler'
-import { cn } from '@ui/lib/utils'
-
 interface MenuProps {
   children: React.ReactNode
   className?: string

packages/ui/src/components/Modal/Modal.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import React, { useEffect } from 'react'
-// @ts-ignore
-import ModalStyles from './Modal.module.css'
-import { Button, IconX, Space } from './../../../index'
-import { cn } from '@ui/lib/utils'
-import { AnimationTailwindClasses } from '../../types'
-
 import * as Dialog from '@radix-ui/react-dialog'
+import React, { useEffect } from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
+import { AnimationTailwindClasses } from '../../types'
+import { Button } from '../Button/Button'
+import IconX from '../Icon/icons/IconX/IconX'
+import Space from '../Space/Space'
 
 // import { Transition } from '@tailwindui/react'
 // Merge Radix Props to surface in the modal component

packages/ui/src/components/NavMenu/index.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@ui/lib/utils'
 import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react'
+import { cn } from '../../lib/utils/cn'
 
 interface NavMenuProps extends HTMLAttributes<HTMLDivElement> {}
 

packages/ui/src/components/Popover/Popover.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import type * as RadixPopoverTypes from '@radix-ui/react-popover'
 import * as RadixPopover from '@radix-ui/react-popover'
-import type * as RadixPopoverTypes from '@radix-ui/react-popover/'
+import * as React from 'react'
 
-import { IconX } from '../Icon/icons/IconX'
 import styleHandler from '../../lib/theme/styleHandler'
+import { IconX } from '../Icon/icons/IconX'
 
 interface RootProps {
   align?: RadixPopoverTypes.PopoverContentProps['align']

packages/ui/src/components/PromoToast/PromoBg.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   className?: string

packages/ui/src/components/Radio/Radio.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import { RadioContext } from './RadioContext'
-
-import { useFormContext } from '../Form/FormContext'
 
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
-
+import { useFormContext } from '../Form/FormContext'
 import { generateUID } from './../../lib/utils/randomIdGenerator'
+import { RadioContext } from './RadioContext'
 
 interface GroupProps {
   allowedValues?: any

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

@@ -1,12 +1,10 @@
 import React, { useEffect } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { useFormContext } from '../Form/FormContext'
-
-import defaultTheme from '../../lib/theme/defaultTheme'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
 
 interface OptionProps {
   value: string

packages/ui/src/components/SidePanel/SidePanel.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions'
-import React, { useState } from 'react'
-import { Button, Space, Typography } from '../../index'
+import { useState } from 'react'
 
+import { Button } from '../Button'
+import { Space } from '../Space'
 import { SidePanel } from './index'
 
 export default {
@@ -237,7 +238,7 @@ customFooter.args = {
   customFooter: [
     <Space>
       <Button type="secondary">Cancel</Button>
-      <Button danger>Delete</Button>
+      <Button type="danger">Delete</Button>
     </Space>,
   ],
 }

packages/ui/src/components/ThemeImage/ThemeImage.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
-import { cn } from '@ui/lib/utils'
+import { useEffect, useState } from 'react'
+
+import { cn } from '../../lib/utils/cn'
 
 export const ThemeImage = ({ src, ...props }: any) => {
   const { resolvedTheme } = useTheme()

packages/ui/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,8 +1,6 @@
-import React, { useLayoutEffect, useMemo } from 'react'
-import { createContext } from 'react'
+import React, { createContext, useMemo } from 'react'
 
 import defaultTheme from '../../lib/theme/defaultTheme'
-
 import { mergeDeep } from './../../lib/utils'
 // import useDarkMode from './utils/useDarkMode'
 

packages/ui/src/components/Toggle/Toggle.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
 import { useFormContext } from '../Form/FormContext'
 

packages/ui/src/components/Upload/Upload.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+import React from 'react'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 // @ts-ignore
 // import UploadStyles from './Upload.module.css'
 

packages/ui/src/components/shadcn/stories/Accordion.stories.tsx

@@ -1,9 +1,9 @@
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@ui/components/shadcn/ui/accordion'
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '../ui/accordion'
 // Button.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react'

packages/ui/src/components/shadcn/stories/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Alert, AlertDescription, AlertTitle } from '@ui/components/shadcn/ui/alert'
 import { AlertCircle, Info } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert'
 
 const meta: Meta<typeof Alert> = {
   title: 'shadcn/Alert',

packages/ui/src/components/shadcn/stories/AlertDialog.stories.tsx

@@ -1,16 +1,15 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@ui/components/shadcn/ui/alert-dialog'
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '../ui/alert-dialog'
 
 const meta: Meta<typeof AlertDialog> = {
   title: 'shadcn/AlertDialog',

packages/ui/src/components/shadcn/stories/AspectRatio.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import { AspectRatio } from '@ui/components/shadcn/ui/aspect-ratio'
+import { AspectRatio } from '../ui/aspect-ratio'
 
 const meta: Meta<typeof AspectRatio> = {
   title: 'shadcn/AspectRatio',

packages/ui/src/components/shadcn/stories/Avatar.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import { Avatar, AvatarFallback, AvatarImage } from '@ui/components/shadcn/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
 
 const meta: Meta<typeof Avatar> = {
   title: 'Shadcn/Avatar',

packages/ui/src/components/shadcn/stories/Badge.stories.tsx

@@ -1,5 +1,5 @@
-import { Badge, BadgeProps } from '@ui/components/shadcn/ui/badge'
 import { Meta } from '@storybook/react'
+import { Badge, BadgeProps } from '../ui/badge'
 
 const meta: Meta = {
   title: 'shadcn/Badge',

packages/ui/src/components/shadcn/stories/Button.stories.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@ui/components/shadcn/ui/button'
 import { Meta } from '@storybook/react'
 import { ChevronRight, Loader2, Mail } from 'lucide-react'
+import { Button } from '../ui/button'
 // import Link from 'next/link'
 
 const meta: Meta = {

packages/ui/src/components/shadcn/stories/Calendar.stories.tsx

@@ -1,24 +1,6 @@
-import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { cn } from '@ui/lib/utils'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
 import * as React from 'react'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+import { Calendar } from '../ui/calendar'
 
 const meta: Meta = {
   title: 'shadcn/Calendar',

packages/ui/src/components/shadcn/stories/Card.stories.tsx

@@ -1,25 +1,12 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@ui/components/shadcn/ui/card'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { Switch } from '@ui/components/shadcn/ui/switch'
-import { cn } from '@ui/lib/utils'
 import { BellRing, Check } from 'lucide-react'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
 
 const meta: Meta = {
   title: 'shadcn/Card',

packages/ui/src/components/shadcn/stories/Checkbox.stories.tsx

@@ -1,17 +1,17 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
+import { Button } from '../ui/button'
+import { Checkbox } from '../ui/checkbox'
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { toast } from '../ui/use-toast'
 // import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'

packages/ui/src/components/shadcn/stories/Collapsible.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@ui/components/shadcn/ui/collapsible'
 import { ChevronsUpDown } from 'lucide-react'
 import * as React from 'react'
+import { Button } from '../ui/button'
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '../ui/collapsible'
 
 const meta: Meta = {
   title: 'shadcn/Collapsible',

packages/ui/src/components/shadcn/stories/ComboBox.stories.tsx

@@ -1,39 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@ui/components/shadcn/ui/command'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@ui/components/shadcn/ui/dropdown-menu'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { cn } from '@ui/lib/utils'
 import {
   ArrowUpCircle,
   Calendar,
@@ -52,6 +18,40 @@ import {
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../ui/command'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta<typeof DropdownMenu> = {
   /* 👇 The title prop is optional.

packages/ui/src/components/shadcn/stories/Command.stories.tsx

@@ -1,17 +1,17 @@
 import { Meta } from '@storybook/react'
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@ui/components/shadcn/ui/command'
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
 import * as React from 'react'
+import {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from '../ui/command'
 
 const meta: Meta = {
   title: 'shadcn/Command',

packages/ui/src/components/shadcn/stories/ContextMenu.stories.tsx

@@ -1,19 +1,19 @@
 import { Meta } from '@storybook/react'
 import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from '@ui/components/shadcn/ui/context-menu'
+    ContextMenu,
+    ContextMenuCheckboxItem,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuLabel,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from '../ui/context-menu'
 
 const meta: Meta = {
   title: 'shadcn/ContextMenu',

packages/ui/src/components/shadcn/stories/DatePicker.stories.tsx

@@ -1,3 +1,14 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Meta } from '@storybook/react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
+import { DateRange } from 'react-day-picker'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
 import {
   Form,
   FormControl,
@@ -6,27 +17,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { cn } from '@ui/lib/utils'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import * as React from 'react'
-import { DateRange } from 'react-day-picker'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+} from '../ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/DatePicker',

packages/ui/src/components/shadcn/stories/Dialog.stories.tsx

@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from '../ui/button'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@ui/components/shadcn/ui/dialog'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '../ui/dialog'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
 
 const meta: Meta = {
   title: 'shadcn/Dialog',

packages/ui/src/components/shadcn/stories/DropdownMenu.stories.tsx

@@ -1,36 +1,36 @@
-import React from 'react'
+import { DropdownMenuCheckboxItemProps, DropdownMenuProps } from '@radix-ui/react-dropdown-menu'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@ui/components/shadcn/ui/dropdown-menu'
-import {
-  Cloud,
-  Github,
-  LifeBuoy,
-  LogOut,
-  Mail,
-  MessageSquare,
-  Plus,
-  PlusCircle,
-  UserPlus,
-  Users,
+    Cloud,
+    Github,
+    LifeBuoy,
+    LogOut,
+    Mail,
+    MessageSquare,
+    Plus,
+    PlusCircle,
+    UserPlus,
+    Users,
 } from 'lucide-react'
-import { DropdownMenuProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+import React from 'react'
+import { Button } from '../ui/button'
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
 
 type Checked = DropdownMenuCheckboxItemProps['checked']
 

packages/ui/src/components/shadcn/stories/Form.stories.tsx

@@ -2,22 +2,15 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { cn } from '@ui/lib/utils'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui//popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui//select'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+import { cn } from '../../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui//popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui//select'
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
 import {
   Form,
   FormControl,
@@ -26,8 +19,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Input } from '@ui/components/shadcn/ui/input'
+} from '../ui/form'
+import { Input } from '../ui/input'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta<typeof Form> = {
   /* 👇 The title prop is optional.

packages/ui/src/components/shadcn/stories/HoverCard.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Avatar, AvatarFallback, AvatarImage } from '@ui/components/shadcn/ui/avatar'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@ui/components/shadcn/ui/hover-card'
 import { CalendarDays } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Button } from '../ui/button'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card'
 
 const meta: Meta = {
   title: 'shadcn/HoverCard',

packages/ui/src/components/shadcn/stories/Input.stories.tsx

@@ -1,20 +1,20 @@
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { toast } from '../ui/use-toast'
 
 const FormSchema = z.object({
   username: z.string().min(2, {

packages/ui/src/components/shadcn/stories/Label.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
 
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
-import { Label } from '@ui/components/shadcn/ui/label'
+import { Checkbox } from '../ui/checkbox'
+import { Label } from '../ui/label'
 
 const meta: Meta = {
   title: 'shadcn/Label',

packages/ui/src/components/shadcn/stories/MenuBar.stories.tsx

@@ -1,20 +1,19 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
 import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from '@ui/components/shadcn/ui/menubar'
+    Menubar,
+    MenubarCheckboxItem,
+    MenubarContent,
+    MenubarItem,
+    MenubarMenu,
+    MenubarRadioGroup,
+    MenubarRadioItem,
+    MenubarSeparator,
+    MenubarShortcut,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarTrigger,
+} from '../ui/menubar'
 
 const meta: Meta = {
   title: 'shadcn/Menubar',

packages/ui/src/components/shadcn/stories/NavigationMenu.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
 import * as React from 'react'
 // import Link from 'next/link'
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -10,8 +9,7 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from '@ui/components/shadcn/ui/navigation-menu'
+} from '../ui/navigation-menu'
 
 const meta: Meta = {
   title: 'shadcn/NavigationMenu',

packages/ui/src/components/shadcn/stories/Popover.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 
 const meta: Meta = {
   title: 'shadcn/Popover',

packages/ui/src/components/shadcn/stories/Progress.stories.tsx

@@ -1,6 +1,6 @@
-import { Progress } from '@ui/components/shadcn/ui/progress'
 import { Meta } from '@storybook/react'
 import * as React from 'react'
+import { Progress } from '../ui/progress'
 
 const meta: Meta = {
   title: 'shadcn/Progress',

packages/ui/src/components/shadcn/stories/RadioGroup.stories.tsx

@@ -1,19 +1,19 @@
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { RadioGroup, RadioGroupItem } from '@ui/components/shadcn/ui/radio-group'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/RadioGroup',

packages/ui/src/components/shadcn/stories/ScrollArea.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
-import { ScrollArea } from '@ui/components/shadcn/ui/scroll-area'
-import { Separator } from '@ui/components/shadcn/ui/separator'
 import * as React from 'react'
+import { ScrollArea } from '../ui/scroll-area'
+import { Separator } from '../ui/separator'
 
 const meta: Meta = {
   title: 'shadcn/ScrollArea',

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

@@ -1,30 +1,29 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Card } from '@ui/components/shadcn/ui/card'
+import { Button } from '../ui/button'
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '../ui/select'
+import { toast } from '../ui/use-toast'
 // import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
-import { SelectSeparator } from '@ui/components/shadcn/ui/select'
+import { SelectSeparator } from '../ui/select'
 
 const meta: Meta = {
   title: 'shadcn/Select',

packages/ui/src/components/shadcn/stories/Seperator.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Separator } from '@ui/components/shadcn/ui/separator'
+import { Separator } from '../ui/separator'
 
 const meta: Meta = {
   title: 'shadcn/Separator',

packages/ui/src/components/shadcn/stories/Sheet.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@ui/components/shadcn/ui/sheet'
+} from '../ui/sheet'
 
 const meta: Meta = {
   title: 'shadcn/Sheet',

packages/ui/src/components/shadcn/stories/Skeleton.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Skeleton } from '@ui/components/shadcn/ui/skeleton'
+import { Skeleton } from '../ui/skeleton'
 
 const meta: Meta = {
   title: 'shadcn/Skeleton',

packages/ui/src/components/shadcn/stories/Slider.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Slider } from '@ui/components/shadcn/ui/slider'
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
+import { Slider } from '../ui/slider'
 
 const meta: Meta = {
   title: 'shadcn/Slider',

packages/ui/src/components/shadcn/stories/Switch.stories.tsx

@@ -1,19 +1,19 @@
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Switch } from '@ui/components/shadcn/ui/switch'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { Switch } from '../ui/switch'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/Switch',

packages/ui/src/components/shadcn/stories/Table.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta } from '@storybook/react'
 import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@ui/components/shadcn/ui/table'
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '../ui/table'
 
 const invoices = [
   {

packages/ui/src/components/shadcn/stories/Tabs.stories.tsx

@@ -1,16 +1,10 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@ui/components/shadcn/ui/card'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ui/components/shadcn/ui/tabs'
+import { Button } from '../ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs/tabs'
+
 
 const meta: Meta = {
   title: 'shadcn/Tabs',

packages/ui/src/components/shadcn/stories/TextArea.stories.tsx

@@ -1,4 +1,8 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Meta } from '@storybook/react'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { Button } from '../ui/button'
 import {
   Form,
   FormControl,
@@ -7,13 +11,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Meta } from '@storybook/react'
-import { Textarea } from '@ui/components/shadcn/ui/textarea'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { Textarea } from '../ui/textarea'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/Textarea',

packages/ui/src/components/shadcn/stories/Toast.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { ToastAction } from '@ui/components/shadcn/ui/toast'
-import { useToast } from '@ui/components/shadcn/ui/use-toast'
+import { Button } from '../ui/button'
+import { ToastAction } from '../ui/toast'
+import { useToast } from '../ui/use-toast'
+
 
 const meta: Meta = {
   title: 'shadcn/Toast',

packages/ui/src/components/shadcn/stories/Toggle.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Toggle } from '@ui/components/shadcn/ui/toggle'
-import { Bold, Italic } from 'lucide-react'
-import { Underline } from 'lucide-react'
+import { Bold, Italic, Underline } from 'lucide-react'
+import { Toggle } from '../ui/toggle'
 
 const meta: Meta = {
   title: 'shadcn/Toggle',

packages/ui/src/components/shadcn/stories/Tooltip.stories.tsx

@@ -1,11 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@ui/components/shadcn/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+import { Button } from '../ui/button'
+
 
 const meta: Meta = {
   title: 'shadcn/Tooltip',

packages/ui/src/components/shadcn/stories/_TEMPLATE.stories_.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
+import { Card } from '../ui/card'
 
 const meta: Meta = {
   title: 'shadcn/Card',

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

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Accordion = AccordionPrimitive.Root
 
@@ -51,4 +51,4 @@ const AccordionContent = React.forwardRef<
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

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

@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
-import { buttonVariants } from '@ui/components/shadcn/ui/button'
+import { cn } from '../../../lib/utils/cn'
+import { buttonVariants } from './button'
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -111,12 +111,12 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 }

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

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 // Ivan: replaced [&:has(svg)]:pl-14 with [&>svg~*]:pl-10 cause of github.com/shadcn-ui/ui/issues/998
 export const alertVariants = cva(
@@ -51,4 +51,4 @@ const AlertDescription = React.forwardRef<
 ))
 AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle }

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

@@ -1,9 +1,9 @@
 'use client'
 
-import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -44,4 +44,4 @@ const AvatarFallback = React.forwardRef<
 ))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarFallback, AvatarImage }

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

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const badgeVariants = cva(
   'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10',

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

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

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

@@ -1,11 +1,11 @@
 'use client'
 
-import * as React from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 
-import { cn } from '@ui/lib/utils'
-import { buttonVariants } from '@ui/components/shadcn/ui/button'
+import { cn } from '../../../lib/utils/cn'
+import { buttonVariants } from './button'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
@@ -53,4 +53,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardFooter.displayName = 'CardFooter'
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }