chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.

All changes in this PR are done by the script.

apps/cms/scripts/migrate.ts

@@ -1,4 +1,5 @@
 import payload from 'payload'
+
 // Use a minimal config for migrations to avoid importing the full app graph during build
 import payloadConfig from '../src/payload.migrate.config.ts'
 

apps/cms/src/access/isAdmin.ts

@@ -1,4 +1,5 @@
 import type { AccessArgs, FieldAccess } from 'payload'
+
 import type { User } from '../payload-types'
 
 type isAdmin = (args: AccessArgs<User>) => boolean

apps/cms/src/blocks/Banner/Component.tsx

@@ -1,8 +1,8 @@
-import type { BannerBlock as BannerBlockProps } from '@/payload-types'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
+
 import RichText from '@/components/RichText'
+import type { BannerBlock as BannerBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type Props = {
   className?: string

apps/cms/src/blocks/Banner/config.ts

@@ -1,10 +1,9 @@
-import type { Block } from 'payload'
-
 import {
   FixedToolbarFeature,
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { Block } from 'payload'
 
 export const Banner: Block = {
   slug: 'banner',

apps/cms/src/blocks/Code/Component.client.tsx

@@ -1,6 +1,8 @@
 'use client'
+
 import { Highlight, themes } from 'prism-react-renderer'
 import React from 'react'
+
 import { CopyButton } from './CopyButton'
 
 type Props = {

apps/cms/src/blocks/Code/CopyButton.tsx

@@ -1,8 +1,10 @@
 'use client'
-import { Button } from '@/components/ui/button'
+
 import { CopyIcon } from '@payloadcms/ui/icons/Copy'
 import { useState } from 'react'
 
+import { Button } from '@/components/ui/button'
+
 export function CopyButton({ code }: { code: string }) {
   const [text, setText] = useState('Copy')
 

apps/cms/src/blocks/MediaBlock/Component.tsx

@@ -1,12 +1,10 @@
 import type { StaticImageData } from 'next/image'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
-import RichText from '@/components/RichText'
-
-import type { MediaBlock as MediaBlockProps } from '@/payload-types'
 
 import { Media } from '../../components/Media'
+import RichText from '@/components/RichText'
+import type { MediaBlock as MediaBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type Props = MediaBlockProps & {
   breakout?: boolean

apps/cms/src/blocks/Quote/Component.tsx

@@ -1,7 +1,7 @@
-import type { QuoteBlock as QuoteBlockProps } from '@/payload-types'
-
 import React from 'react'
 
+import type { QuoteBlock as QuoteBlockProps } from '@/payload-types'
+
 type Props = {
   className?: string
 } & QuoteBlockProps

apps/cms/src/blocks/YouTube/Component.tsx

@@ -1,8 +1,8 @@
-import type { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
-
-import { cn } from '@/utilities/ui'
 import React from 'react'
 
+import type { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+
 type Props = {
   className?: string
 } & YouTubeBlockProps

apps/cms/src/collections/Categories.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+
 import { isAdmin } from '../access/isAdmin'
 
 export const Categories: CollectionConfig = {

apps/cms/src/collections/Customers/index.ts

@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,26 +13,18 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { revalidateDelete, revalidateCustomer } from './hooks/revalidateCustomer.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { revalidateCustomer, revalidateDelete } from './hooks/revalidateCustomer.ts'
 
 const industryOptions = [
   { label: 'Healthcare', value: 'healthcare' },

apps/cms/src/collections/Events/index.ts

@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,27 +13,19 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { revalidateDelete, revalidateEvent } from './hooks/revalidateEvent.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
-import { timezoneOptions } from '../../utilities/timezones.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { timezoneOptions } from '../../utilities/timezones.ts'
+import { revalidateDelete, revalidateEvent } from './hooks/revalidateEvent.ts'
 
 const eventTypeOptions = [
   { label: 'Conference', value: 'conference' },

apps/cms/src/collections/Media.ts

@@ -1,9 +1,9 @@
-import type { CollectionConfig } from 'payload'
 import {
   FixedToolbarFeature,
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../access/isAnyone.ts'
 import { isAuthenticated } from '../access/isAuthenticated.ts'

apps/cms/src/collections/Posts/hooks/populateAuthors.ts

@@ -1,4 +1,5 @@
 import type { CollectionAfterReadHook } from 'payload'
+
 import type { Author } from '../../../payload-types'
 
 export const populateAuthors: CollectionAfterReadHook = async ({ doc, req: { payload } }) => {

apps/cms/src/collections/Posts/index.ts

@@ -1,5 +1,10 @@
-import type { CollectionConfig } from 'payload'
-
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
 import {
   BlocksFeature,
   FixedToolbarFeature,
@@ -8,27 +13,19 @@ import {
   InlineToolbarFeature,
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
+import type { CollectionConfig } from 'payload'
 
 import { isAnyone } from '../../access/isAnyone.ts'
 import { isAuthenticated } from '../../access/isAuthenticated.ts'
-
 import { Banner } from '../../blocks/Banner/config.ts'
 import { Code } from '../../blocks/Code/config.ts'
 import { MediaBlock } from '../../blocks/MediaBlock/config.ts'
 import { Quote } from '../../blocks/Quote/config.ts'
 import { YouTube } from '../../blocks/YouTube/config.ts'
-import { populateAuthors } from './hooks/populateAuthors.ts'
-import { revalidateDelete, revalidatePost } from './hooks/revalidatePost.ts'
-
-import {
-  MetaDescriptionField,
-  MetaImageField,
-  MetaTitleField,
-  OverviewField,
-  PreviewField,
-} from '@payloadcms/plugin-seo/fields'
 import { slugField } from '../../fields/slug/index.ts'
 import { WWW_SITE_ORIGIN } from '../../utilities/constants.ts'
+import { populateAuthors } from './hooks/populateAuthors.ts'
+import { revalidateDelete, revalidatePost } from './hooks/revalidatePost.ts'
 
 const launchweekOptions = [
   { label: '6', value: '6' },

apps/cms/src/collections/Users.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+
 import { isAdmin, isAdminFieldLevel } from '../access/isAdmin.ts'
 import { isAdminOrSelf } from '../access/isAdminOrSelf.ts'
 

apps/cms/src/components/AdminBar/index.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
+import { useRouter, useSelectedLayoutSegments } from 'next/navigation'
+import React, { useState } from 'react'
 
 import { cn } from '@/utilities/ui'
-import { useSelectedLayoutSegments } from 'next/navigation'
-import { PayloadAdminBar } from '@payloadcms/admin-bar'
-import React, { useState } from 'react'
-import { useRouter } from 'next/navigation'
 
 import './index.scss'
 

apps/cms/src/components/Card/index.tsx

@@ -1,12 +1,12 @@
 'use client'
-import { cn } from '@/utilities/ui'
-import useClickableCard from '@/utilities/useClickableCard'
+
 import Link from 'next/link'
 import React, { Fragment } from 'react'
 
-import type { Post } from '@/payload-types'
-
 import { Media } from '@/components/Media'
+import type { Post } from '@/payload-types'
+import { cn } from '@/utilities/ui'
+import useClickableCard from '@/utilities/useClickableCard'
 
 export type CardPostData = Pick<Post, 'slug' | 'categories' | 'meta' | 'title'>
 

apps/cms/src/components/CollectionArchive/index.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@/utilities/ui'
 import React from 'react'
 
 import { Card, CardPostData } from '@/components/Card'
+import { cn } from '@/utilities/ui'
 
 export type Props = {
   posts: CardPostData[]

apps/cms/src/components/Link/index.tsx

@@ -1,9 +1,9 @@
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { cn } from '@/utilities/ui'
 import Link from 'next/link'
 import React from 'react'
 
+import { Button, type ButtonProps } from '@/components/ui/button'
 import type { Post } from '@/payload-types'
+import { cn } from '@/utilities/ui'
 
 type CMSLinkType = {
   appearance?: 'inline' | ButtonProps['variant']

apps/cms/src/components/LivePreviewListener/index.tsx

@@ -1,9 +1,11 @@
 'use client'
-import { getClientSideURL } from '@/utilities/getURL'
+
 import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 
+import { getClientSideURL } from '@/utilities/getURL'
+
 export const LivePreviewListener: React.FC = () => {
   const router = useRouter()
   return <PayloadLivePreview refresh={router.refresh} serverURL={getClientSideURL()} />

apps/cms/src/components/Media/ImageMedia/index.tsx

@@ -1,15 +1,13 @@
 'use client'
 
 import type { StaticImageData } from 'next/image'
-
-import { cn } from '@/utilities/ui'
 import NextImage from 'next/image'
 import React from 'react'
 
 import type { Props as MediaProps } from '../types'
-
 import { cssVariables } from '@/cssVariables'
 import { getClientSideURL } from '@/utilities/getURL'
+import { cn } from '@/utilities/ui'
 
 const { breakpoints } = cssVariables
 

apps/cms/src/components/Media/VideoMedia/index.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'
-
 import { getClientSideURL } from '@/utilities/getURL'
+import { cn } from '@/utilities/ui'
 
 export const VideoMedia: React.FC<MediaProps> = (props) => {
   const { onClick, resource, videoClassName } = props

apps/cms/src/components/Media/index.tsx

@@ -1,8 +1,7 @@
 import React, { Fragment } from 'react'
 
-import type { Props } from './types'
-
 import { ImageMedia } from './ImageMedia'
+import type { Props } from './types'
 import { VideoMedia } from './VideoMedia'
 
 export const Media: React.FC<Props> = (props) => {

apps/cms/src/components/Pagination/index.tsx

@@ -1,4 +1,8 @@
 'use client'
+
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
 import {
   Pagination as PaginationComponent,
   PaginationContent,
@@ -9,8 +13,6 @@ import {
   PaginationPrevious,
 } from '@/components/ui/pagination'
 import { cn } from '@/utilities/ui'
-import { useRouter } from 'next/navigation'
-import React from 'react'
 
 export const Pagination: React.FC<{
   className?: string

apps/cms/src/components/RichText/index.tsx

@@ -1,4 +1,3 @@
-import { MediaBlock } from '@/blocks/MediaBlock/Component'
 import {
   DefaultNodeTypes,
   SerializedBlockNode,
@@ -6,22 +5,22 @@ import {
   type DefaultTypedEditorState,
 } from '@payloadcms/richtext-lexical'
 import {
+  RichText as ConvertRichText,
   JSXConvertersFunction,
   LinkJSXConverter,
-  RichText as ConvertRichText,
 } from '@payloadcms/richtext-lexical/react'
 
+import { BannerBlock } from '@/blocks/Banner/Component'
 import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
-
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import { QuoteBlock } from '@/blocks/Quote/Component'
+import { YouTubeBlock } from '@/blocks/YouTube/Component'
 import type {
   BannerBlock as BannerBlockProps,
   MediaBlock as MediaBlockProps,
   QuoteBlock as QuoteBlockProps,
   YouTubeBlock as YouTubeBlockProps,
 } from '@/payload-types'
-import { BannerBlock } from '@/blocks/Banner/Component'
-import { QuoteBlock } from '@/blocks/Quote/Component'
-import { YouTubeBlock } from '@/blocks/YouTube/Component'
 import { cn } from '@/utilities/ui'
 
 type NodeTypes =

apps/cms/src/components/ui/button.tsx

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

apps/cms/src/components/ui/card.tsx

@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Card: React.FC<
   { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
 > = ({ className, ref, ...props }) => (

apps/cms/src/components/ui/checkbox.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Checkbox: React.FC<
   {
     ref?: React.Ref<HTMLButtonElement>

apps/cms/src/components/ui/input.tsx

@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Input: React.FC<
   {
     ref?: React.Ref<HTMLInputElement>

apps/cms/src/components/ui/label.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as LabelPrimitive from '@radix-ui/react-label'
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 )

apps/cms/src/components/ui/pagination.tsx

@@ -1,10 +1,10 @@
-import type { ButtonProps } from '@/components/ui/button'
-
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/utilities/ui'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
 
+import type { ButtonProps } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utilities/ui'
+
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     aria-label="pagination"

apps/cms/src/components/ui/select.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { cn } from '@/utilities/ui'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Select = SelectPrimitive.Root
 
 const SelectGroup = SelectPrimitive.Group

apps/cms/src/components/ui/textarea.tsx

@@ -1,6 +1,7 @@
-import { cn } from '@/utilities/ui'
 import * as React from 'react'
 
+import { cn } from '@/utilities/ui'
+
 const Textarea: React.FC<
   {
     ref?: React.Ref<HTMLTextAreaElement>

apps/cms/src/fields/defaultLexical.ts

@@ -1,13 +1,13 @@
-import type { TextFieldSingleValidation } from 'payload'
 import {
   BoldFeature,
   ItalicFeature,
+  lexicalEditor,
   LinkFeature,
   ParagraphFeature,
-  lexicalEditor,
   UnderlineFeature,
   type LinkFields,
 } from '@payloadcms/richtext-lexical'
+import type { TextFieldSingleValidation } from 'payload'
 
 export const defaultLexical = lexicalEditor({
   features: [

apps/cms/src/fields/linkGroup.ts

@@ -1,8 +1,7 @@
 import type { ArrayField, Field } from 'payload'
 
-import type { LinkAppearances } from './link.ts'
-
 import deepMerge from '../utilities/deepMerge.ts'
+import type { LinkAppearances } from './link.ts'
 import { link } from './link.ts'
 
 type LinkGroupType = (options?: {

apps/cms/src/fields/slug/SlugComponent.tsx

@@ -1,10 +1,11 @@
 'use client'
-import React, { useCallback, useEffect } from 'react'
-import { TextFieldClientProps } from 'payload'
 
-import { useField, Button, TextInput, FieldLabel, useFormFields, useForm } from '@payloadcms/ui'
+import { Button, FieldLabel, TextInput, useField, useForm, useFormFields } from '@payloadcms/ui'
+import { TextFieldClientProps } from 'payload'
+import React, { useCallback, useEffect } from 'react'
 
 import { formatSlug } from './formatSlug'
+
 import './index.scss'
 
 type SlugComponentProps = {

apps/cms/src/hooks/revalidateRedirects.ts

@@ -1,6 +1,5 @@
-import type { CollectionAfterChangeHook } from 'payload'
-
 import { revalidateTag } from 'next/cache'
+import type { CollectionAfterChangeHook } from 'payload'
 
 export const revalidateRedirects: CollectionAfterChangeHook = ({ doc, req: { payload } }) => {
   payload.logger.info(`Revalidating redirects`)

apps/cms/src/payload.config.ts

@@ -1,18 +1,13 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import sharp from 'sharp'
 import { postgresAdapter } from '@payloadcms/db-postgres'
 import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
 import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
 import { seoPlugin } from '@payloadcms/plugin-seo'
+import type { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
 import { s3Storage } from '@payloadcms/storage-s3'
 import { buildConfig, type Plugin } from 'payload'
-import { defaultLexical } from './fields/defaultLexical.ts'
-import { getServerSideURL } from './utilities/getURL.ts'
-import { WWW_SITE_ORIGIN } from './utilities/constants.ts'
-
-import type { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
-import type { Customer, Event, Post } from './payload-types'
+import sharp from 'sharp'
 
 import { Authors } from './collections/Authors.ts'
 import { Categories } from './collections/Categories.ts'
@@ -22,6 +17,10 @@ import { Media } from './collections/Media.ts'
 import { Posts } from './collections/Posts/index.ts'
 import { Tags } from './collections/Tags.ts'
 import { Users } from './collections/Users.ts'
+import { defaultLexical } from './fields/defaultLexical.ts'
+import type { Customer, Event, Post } from './payload-types'
+import { WWW_SITE_ORIGIN } from './utilities/constants.ts'
+import { getServerSideURL } from './utilities/getURL.ts'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)

apps/cms/src/providers/HeaderTheme/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 
+import React, { createContext, use, useCallback, useState } from 'react'
+
 import type { Theme } from '@/providers/Theme/types'
-
-import React, { createContext, useCallback, use, useState } from 'react'
-
 import canUseDOM from '@/utilities/canUseDOM'
 
 export interface ContextType {

apps/cms/src/providers/Theme/ThemeSelector/index.tsx

@@ -1,5 +1,10 @@
 'use client'
 
+import { useTheme } from '..'
+import React, { useState } from 'react'
+
+import type { Theme } from './types'
+import { themeLocalStorageKey } from './types'
 import {
   Select,
   SelectContent,
@@ -7,12 +12,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import React, { useState } from 'react'
-
-import type { Theme } from './types'
-
-import { useTheme } from '..'
-import { themeLocalStorageKey } from './types'
 
 export const ThemeSelector: React.FC = () => {
   const { setTheme } = useTheme()

apps/cms/src/providers/Theme/index.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import React, { createContext, useCallback, use, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useState } from 'react'
 
-import type { Theme, ThemeContextType } from './types'
-
-import canUseDOM from '@/utilities/canUseDOM'
 import { defaultTheme, getImplicitPreference, themeLocalStorageKey } from './shared'
+import type { Theme, ThemeContextType } from './types'
 import { themeIsValid } from './types'
+import canUseDOM from '@/utilities/canUseDOM'
 
 const initialContext: ThemeContextType = {
   setTheme: () => null,

apps/cms/src/utilities/generateMeta.ts

@@ -1,9 +1,8 @@
 import type { Metadata } from 'next'
 
-import type { Media, Post, Config } from '../payload-types'
-
-import { mergeOpenGraph } from './mergeOpenGraph.ts'
+import type { Config, Media, Post } from '../payload-types'
 import { getServerSideURL } from './getURL.ts'
+import { mergeOpenGraph } from './mergeOpenGraph.ts'
 
 const getImageURL = (image?: Media | Config['db']['defaultIDType'] | null) => {
   const serverUrl = getServerSideURL()

apps/cms/src/utilities/generatePreviewPath.ts

@@ -1,4 +1,5 @@
-import { PayloadRequest, CollectionSlug } from 'payload'
+import { CollectionSlug, PayloadRequest } from 'payload'
+
 import { WWW_SITE_ORIGIN } from './constants'
 
 const collectionPrefixMap: Partial<Record<CollectionSlug, string>> = {

apps/cms/src/utilities/getDocument.ts

@@ -1,7 +1,8 @@
-import type { Config } from '@/payload-types'
-
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
+
+import type { Config } from '@/payload-types'
+
 // Do not import next/cache at module scope to keep migrate step Node-compatible
 
 type Collection = keyof Config['collections']

apps/cms/src/utilities/getGlobals.ts

@@ -1,7 +1,8 @@
-import type { Config } from '@/payload-types'
-
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
+
+import type { Config } from '@/payload-types'
+
 // Do not import next/cache at module scope to keep migrate step Node-compatible
 
 type Global = keyof Config['globals']

apps/cms/src/utilities/mergeOpenGraph.ts

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+
 import { getServerSideURL } from './getURL.ts'
 
 const defaultOpenGraph: Metadata['openGraph'] = {

apps/cms/src/utilities/ui.ts

@@ -3,8 +3,7 @@
  *
  * Other functions may be exported from here in the future or by installing other shadcn components.
  */
-
-import { type ClassValue, clsx } from 'clsx'
+import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {

apps/cms/src/utilities/useClickableCard.ts

@@ -1,7 +1,7 @@
 'use client'
-import type { RefObject } from 'react'
 
 import { useRouter } from 'next/navigation'
+import type { RefObject } from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 
 type UseClickableCardType<T extends HTMLElement> = {

apps/cms/src/utilities/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 export function useDebounce<T>(value: T, delay = 200): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)

apps/design-system/app/(app)/docs/[[...slug]]/page.tsx

@@ -5,8 +5,10 @@ import { DashboardTableOfContents } from '@/components/toc'
 import { siteConfig } from '@/config/site'
 import { getTableOfContents } from '@/lib/toc'
 import { absoluteUrl } from '@/lib/utils'
+
 import '@/styles/code-block-variables.css'
 import '@/styles/mdx.css'
+
 import { allDocs } from 'contentlayer/generated'
 import { ChevronRight } from 'lucide-react'
 import type { Metadata } from 'next'

apps/design-system/app/(app)/layout.tsx

@@ -1,8 +1,9 @@
+import { ScrollArea } from 'ui'
+
+import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet'
 import { SideNavigation } from '@/components/side-navigation'
 import { SiteFooter } from '@/components/site-footer'
 import { TopNavigation } from '@/components/top-navigation'
-import { MobileSidebarSheet } from '@/components/mobile-sidebar-sheet'
-import { ScrollArea } from 'ui'
 
 interface AppLayoutProps {
   children: React.ReactNode

apps/design-system/app/(app)/page.tsx

@@ -1,8 +1,9 @@
-import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
 import { Auth, Database, Realtime } from 'icons/src/icons'
 import { Paintbrush } from 'lucide-react'
 import Link from 'next/link'
 
+import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
+
 export default function Home() {
   return (
     <div className="relative gap-4 px-6 py-6 lg:py-8">

apps/design-system/app/Providers.tsx

@@ -3,8 +3,8 @@
 import { Provider as JotaiProvider } from 'jotai'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
-
 import { TooltipProvider } from 'ui'
+
 import { MobileSidebarProvider } from '@/context/mobile-sidebar-context'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {

apps/design-system/app/SonnerToast.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useConfig } from '@/hooks/use-config'
 import { SonnerToaster as Toaster } from 'ui'
 
+import { useConfig } from '@/hooks/use-config'
+
 export function SonnerToaster() {
   const [config] = useConfig()
   return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />

apps/design-system/app/layout.tsx

@@ -3,9 +3,9 @@ import '../../studio/styles/typography.scss'
 
 import type { Metadata, Viewport } from 'next'
 
+import { customFont, sourceCodePro } from './fonts'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
-import { customFont, sourceCodePro } from './fonts'
 
 const className = `${customFont.variable} ${sourceCodePro.variable}`
 

apps/design-system/components/code-block-wrapper.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import * as React from 'react'
-
-import { cn } from 'ui'
-import { Button } from 'ui'
 import {
+  Button,
+  cn,
   Collapsible_Shadcn_ as Collapsible,
   CollapsibleContent_Shadcn_ as CollapsibleContent,
   CollapsibleTrigger_Shadcn_ as CollapsibleTrigger,

apps/design-system/components/code-fragment.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { Index } from '@/__registry__'
 import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
 import { cn } from 'ui'
 
+import { Index } from '@/__registry__'
+import { useConfig } from '@/hooks/use-config'
 import { styles } from '@/registry/styles'
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {

apps/design-system/components/colors.tsx

@@ -1,7 +1,8 @@
-import { cn } from 'ui/src/lib/utils/cn'
-import color from 'ui/src/lib/tailwind-demo-classes'
-import { Grid, GridItem } from './grid'
 import { useState } from 'react'
+import { cn } from 'ui'
+import color from 'ui/src/lib/tailwind-demo-classes'
+
+import { Grid, GridItem } from './grid'
 
 const Colors = ({
   definition,

apps/design-system/components/command-menu.tsx

@@ -1,12 +1,9 @@
 'use client'
 
-import { CircleIcon, LaptopIcon, MoonIcon, SunIcon, Search } from 'lucide-react'
+import { CircleIcon, LaptopIcon, MoonIcon, Search, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
-
-import { docsConfig } from '@/config/docs'
-import { cn } from '@/lib/utils'
 import {
   Button,
   CommandDialog,
@@ -20,6 +17,9 @@ import {
   DialogTitle,
 } from 'ui'
 
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()
   const [open, setOpen] = React.useState(false)

apps/design-system/components/component-example.tsx

@@ -1,19 +1,19 @@
 'use client'
 
 import * as React from 'react'
-
-import { cn } from 'ui'
-import {
-  // CopyButton,
-  CopyWithClassNames,
-} from '@/components/copy-button'
 import {
+  cn,
   Tabs_Shadcn_ as Tabs,
   TabsContent_Shadcn_ as TabsContent,
   TabsList_Shadcn_ as TabsList,
   TabsTrigger_Shadcn_ as TabsTrigger,
 } from 'ui'
 
+import {
+  // CopyButton,
+  CopyWithClassNames,
+} from '@/components/copy-button'
+
 interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   extractClassname?: boolean
   extractedClassNames?: string

apps/design-system/components/component-preview.tsx

@@ -1,19 +1,19 @@
 'use client'
 
-import { Index } from '@/__registry__'
-import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
-import { styles } from '@/registry/styles'
 import { ChevronRight, Expand } from 'lucide-react'
+import * as React from 'react'
 import {
   Button,
+  cn,
+  Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Collapsible_Shadcn_,
-  cn,
 } from 'ui'
 
+import { Index } from '@/__registry__'
+import { useConfig } from '@/hooks/use-config'
+import { styles } from '@/registry/styles'
+
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
   extractClassname?: boolean

apps/design-system/components/component-source.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import * as React from 'react'
-
 import { cn } from 'ui'
+
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
 
 interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {

apps/design-system/components/copy-button.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import * as React from 'react'
-
 // import { NpmCommands } from 'types/unist'
 
 // import { Event, trackEvent } from '@/lib/events'
 import { Check, Copy } from 'lucide-react'
+import * as React from 'react'
 import {
   Button,
   cn,

apps/design-system/components/homepage-svg-handler.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import SVG from 'react-inlinesvg'
 import { useTheme } from 'next-themes'
+import SVG from 'react-inlinesvg'
 import { cn } from 'ui'
 
 const HomepageSvgHandler = ({ name, className }: { name: string; className?: string }) => {

apps/design-system/components/icons.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
+
 import { Grid, GridItem } from './grid'
 
 function Icons() {

apps/design-system/components/mdx-components.tsx

@@ -1,15 +1,37 @@
 'use client'
 
-import * as React from 'react'
+import { useMDXComponent } from 'next-contentlayer2/hooks'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useMDXComponent } from 'next-contentlayer2/hooks'
+import * as React from 'react'
 // import { NpmCommands } from 'types/unist'
 // import { Event } from '@/lib/events'
-import { cn } from 'ui'
-import { useConfig } from '@/hooks/use-config'
+import {
+  Accordion_Shadcn_ as Accordion,
+  AccordionContent_Shadcn_ as AccordionContent,
+  AccordionItem_Shadcn_ as AccordionItem,
+  AccordionTrigger_Shadcn_ as AccordionTrigger,
+  Alert_Shadcn_ as Alert,
+  AlertDescription_Shadcn_ as AlertDescription,
+  AlertTitle_Shadcn_ as AlertTitle,
+  AspectRatio,
+  cn,
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+import { ComponentProps } from './component-props'
+import { SonnerExpandConfig } from './sonner-expand-config'
+import { SonnerPositionConfig } from './sonner-expand-position'
+// import { FrameworkDocs } from '@/components/framework-docs'
+import { StyleWrapper } from './style-wrapper'
 import { Callout } from '@/components/callout'
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
+import { CodeFragment } from '@/components/code-fragment'
+import { Colors } from '@/components/colors'
 import { ComponentExample } from '@/components/component-example'
 import { ComponentPreview } from '@/components/component-preview'
 import { ComponentSource } from '@/components/component-source'
@@ -17,35 +39,10 @@ import {
   CopyButton,
   // CopyNpmCommandButton
 } from '@/components/copy-button'
-// import { FrameworkDocs } from '@/components/framework-docs'
-import { StyleWrapper } from './style-wrapper'
-import {
-  Accordion_Shadcn_ as Accordion,
-  AccordionContent_Shadcn_ as AccordionContent,
-  AccordionItem_Shadcn_ as AccordionItem,
-  AccordionTrigger_Shadcn_ as AccordionTrigger,
-} from 'ui'
-import {
-  Alert_Shadcn_ as Alert,
-  AlertDescription_Shadcn_ as AlertDescription,
-  AlertTitle_Shadcn_ as AlertTitle,
-} from 'ui'
-import { AspectRatio } from 'ui'
-import {
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-import { ComponentProps } from './component-props'
-import { Style } from '@/registry/styles'
-import { Colors } from '@/components/colors'
 import { Icons } from '@/components/icons'
 import { ThemeSettings } from '@/components/theme-settings'
-import { CodeFragment } from '@/components/code-fragment'
-import { Admonition } from 'ui-patterns/admonition'
-import { SonnerExpandConfig } from './sonner-expand-config'
-import { SonnerPositionConfig } from './sonner-expand-position'
+import { useConfig } from '@/hooks/use-config'
+import { Style } from '@/registry/styles'
 
 const components = {
   Accordion,

apps/design-system/components/mobile-sidebar-sheet.tsx

@@ -1,8 +1,9 @@
 'use client'
 
+import { ScrollArea, Sheet, SheetContent, SheetTitle } from 'ui'
+
 import { SideNavigation } from '@/components/side-navigation'
 import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
-import { Sheet, SheetContent, SheetTitle, ScrollArea } from 'ui'
 
 export function MobileSidebarSheet() {
   const { open, setOpen } = useMobileSidebar()

apps/design-system/components/pager.tsx

@@ -1,10 +1,10 @@
-import Link from 'next/link'
 import { Doc } from 'contentlayer/generated'
-import { NavItem, NavItemWithChildren } from '@/types/nav'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
 
 import { docsConfig } from '@/config/docs'
 import { cn } from '@/lib/utils'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { NavItem, NavItemWithChildren } from '@/types/nav'
 
 interface DocsPagerProps {
   doc: Doc

apps/design-system/components/side-navigation-item.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { SidebarNavItem } from '@/types/nav'
-import { cn } from 'ui/src/lib/utils/cn'
-import { usePathname } from 'next/navigation'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import React from 'react'
+import { cn } from 'ui'
+
 import { useMobileSidebar } from '@/hooks/use-mobile-sidebar'
+import { SidebarNavItem } from '@/types/nav'
 
 export const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
   const pathname = usePathname()

apps/design-system/components/sonner-expand-config.tsx

@@ -1,7 +1,8 @@
-import { useConfig } from '@/hooks/use-config'
 import { Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+import { useConfig } from '@/hooks/use-config'
+
 function SonnerExpandConfig() {
   const [config, setConfig] = useConfig()
 

apps/design-system/components/sonner-expand-position.tsx

@@ -1,17 +1,18 @@
-import { useConfig } from '@/hooks/use-config'
 import { ComponentProps } from 'react'
 import {
+  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectLabel_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  Select_Shadcn_,
   SonnerToaster,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+import { useConfig } from '@/hooks/use-config'
+
 function SonnerPositionConfig() {
   const [config, setConfig] = useConfig()
 

apps/design-system/components/source-panel.tsx

@@ -1,11 +1,10 @@
-import { Doc } from '@/.contentlayer/generated'
-import Link from 'next/link'
-import { forwardRef } from 'react'
-
 import { ExternalLink } from 'lucide-react'
 import Image from 'next/image'
-import { Button } from 'ui'
-import { cn } from 'ui/src/lib/utils/cn'
+import Link from 'next/link'
+import { forwardRef } from 'react'
+import { Button, cn } from 'ui'
+
+import { Doc } from '@/.contentlayer/generated'
 
 const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
   ({ doc, children, ...props }, ref) => {

apps/design-system/components/theme-settings.tsx

@@ -2,9 +2,8 @@
 
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-
 import SVG from 'react-inlinesvg'
-import { RadioGroupLargeItem_Shadcn_, RadioGroup_Shadcn_, Theme, singleThemes } from 'ui'
+import { RadioGroup_Shadcn_, RadioGroupLargeItem_Shadcn_, singleThemes, Theme } from 'ui'
 
 const ThemeSettings = () => {
   const [mounted, setMounted] = useState(false)

apps/design-system/components/theme-switcher-dropdown.tsx

@@ -12,8 +12,8 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Theme,
   singleThemes,
+  Theme,
 } from 'ui'
 
 const ThemeSwitcherDropdown = () => {

apps/design-system/components/toc.tsx

@@ -3,9 +3,9 @@
 
 import * as React from 'react'
 
+import { useMounted } from '@/hooks/use-mounted'
 import { TableOfContents } from '@/lib/toc'
 import { cn } from '@/lib/utils'
-import { useMounted } from '@/hooks/use-mounted'
 
 interface TocProps {
   toc: TableOfContents

apps/design-system/components/top-navigation.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import Link from 'next/link'
 import { Menu } from 'lucide-react'
+import Link from 'next/link'
 import { Button } from 'ui'
+
 import { CommandMenu } from './command-menu'
 import { HomepageSvgHandler } from './homepage-svg-handler'
 import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'

apps/design-system/content/docs/components/combobox.mdx

@@ -19,10 +19,9 @@ See installation instructions for the [Popover](/docs/components/popover#install
 ```tsx
 'use client'
 
-import * as React from 'react'
 import { Check, ChevronsUpDown } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -32,6 +31,7 @@ import {
   CommandItem,
 } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 const frameworks = [
   {

apps/design-system/content/docs/components/date-picker.mdx

@@ -19,14 +19,14 @@ See installation instructions for the [Popover](/docs/components/popover#install
 ```tsx
 'use client'
 
-import * as React from 'react'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 export function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()

apps/design-system/content/docs/components/sidebar.mdx

@@ -177,8 +177,8 @@ A `Sidebar` component is composed of the following parts:
 ## Usage
 
 ```tsx showLineNumbers title="app/layout.tsx"
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -225,8 +225,8 @@ Let's start with the most basic sidebar. A collapsible sidebar with a menu.
 <Step>Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.</Step>
 
 ```tsx showLineNumbers title="app/layout.tsx"
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -411,8 +411,8 @@ To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layou
 ```tsx showLineNumbers title="app/layout.tsx"
 import { cookies } from 'next/headers'
 
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
 export async function Layout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies()

apps/design-system/content/docs/components/tree-view.mdx

@@ -14,8 +14,8 @@ source:
 ## Usage
 
 ```tsx
-import { TreeView, TreeViewItem } from 'ui'
 import { flattenTree } from 'react-accessible-treeview'
+import { TreeView, TreeViewItem } from 'ui'
 ```
 
 ```tsx

apps/design-system/content/docs/fragments/inner-side-menu.mdx

@@ -20,8 +20,8 @@ This is a wrapper component around the `<Collapsible />` component.
 ```jsx {10-12,16-17}
 import {
   InnerSideMenuCollapsible,
-  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuCollapsibleContent,
+  InnerSideMenuCollapsibleTrigger,
   InnerSideMenuItem,
 } from 'ui-patterns/InnerSideMenu'
 

apps/design-system/content/docs/fragments/multi-select.mdx

@@ -12,9 +12,9 @@ fragment: true
 ```tsx
 import {
   MultiSelector,
-  MultiSelectorTrigger,
   MultiSelectorContent,
   MultiSelectorItem,
+  MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
 ```
 

apps/design-system/content/docs/icons.mdx

@@ -32,7 +32,7 @@ Create and use custom icons when Lucide doesn’t have the icon you need. Tap on
 ### Usage
 
 ```jsx
-import { ReplaceCode, InsertCode, BucketAdd } from 'icons'
+import { BucketAdd, InsertCode, ReplaceCode } from 'icons'
 
 function app() {
   return (
@@ -69,6 +69,7 @@ Leave attributes like `stroke-width` as they are. The conversion to camel-case f
 
 ```tsx
 import { MyNewIcon } from 'icons'
+
 ;<MyNewIcon size={16} strokeWidth={1} />
 ```
 

apps/design-system/context/mobile-sidebar-context.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ReactNode, useState, useCallback } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
+
 import { MobileSidebarContext, MobileSidebarContextType } from '@/hooks/use-mobile-sidebar'
 
 interface MobileSidebarProviderProps {

apps/design-system/hooks/use-config.ts

@@ -1,9 +1,11 @@
-import { Style } from '@/registry/styles'
-import { Theme } from '@/registry/themes'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { ComponentProps } from 'react'
 import { SonnerToaster } from 'ui'
+
+import { Style } from '@/registry/styles'
+import { Theme } from '@/registry/themes'
+
 // import { BackendProvider } from '@/registry/backend-provider'
 
 type Config = {

apps/design-system/lib/rehype-component.ts

@@ -1,14 +1,15 @@
 import fs from 'fs'
 import path from 'path'
-import { UnistNode, UnistTree } from '@/types/unist'
+// import { Column, IColumnProps } from './sample-component'
+import React from 'react'
 import { u } from 'unist-builder'
 import { visit } from 'unist-util-visit'
 
 import { Index } from '../__registry__'
 import { styles } from '../registry/styles'
+import { UnistNode, UnistTree } from '@/types/unist'
 
-// import { Column, IColumnProps } from './sample-component'
-import React from 'react' // ComponentType
+// ComponentType
 
 function inspectComponentProps<T>(component: React.ComponentType<T>): void {
   // Assert the component's props type

apps/design-system/lib/rehype-npm-command.ts

@@ -1,6 +1,7 @@
-import { UnistNode, UnistTree } from '@/types/unist'
 import { visit } from 'unist-util-visit'
 
+import { UnistNode, UnistTree } from '@/types/unist'
+
 export function rehypeNpmCommand() {
   return (tree: UnistTree) => {
     visit(tree, (node: UnistNode) => {

apps/design-system/lib/toc.ts

@@ -1,6 +1,5 @@
 // @ts-nocheck
 // TODO: I'll fix this later.
-
 import { toc } from 'mdast-util-toc'
 import { remark } from 'remark'
 import { visit } from 'unist-util-visit'

apps/design-system/registry/default/block/chart-bar-interactive.tsx

@@ -2,9 +2,17 @@
 
 import * as React from 'react'
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from 'ui'
 
 export const description = 'An interactive bar chart'
 

apps/design-system/registry/default/block/chart-composed-actions.tsx

@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ChartComposedActions() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/registry/default/block/chart-composed-basic.tsx

@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartBasic() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/registry/default/block/chart-composed-demo.tsx

@@ -1,17 +1,17 @@
 'use client'
 
+import { BarChart2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartCard,
   ChartContent,
-  ChartHeader,
   ChartEmptyState,
+  ChartHeader,
   ChartLoadingState,
   ChartMetric,
 } from 'ui-patterns/Chart'
-import { BarChart2 } from 'lucide-react'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartDemo() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/registry/default/block/chart-composed-metrics.tsx

@@ -1,17 +1,17 @@
 'use client'
 
+import { ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Skeleton } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
   ChartActions,
+  ChartCard,
   ChartContent,
+  ChartHeader,
   ChartMetric,
   ChartSparkline,
 } from 'ui-patterns/Chart'
-import { ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Skeleton } from 'ui'
 
 export default function ChartComposedMetrics() {
   const [data, setData] = useState<Array<{ value: number; timestamp: string }>>([])

apps/design-system/registry/default/block/chart-composed-states.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import { BarChart2, ExternalLink } from 'lucide-react'
+import { Badge } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
-  ChartTitle,
   ChartActions,
+  ChartCard,
   ChartContent,
-  ChartEmptyState,
-  ChartLoadingState,
   ChartDisabledState,
+  ChartEmptyState,
+  ChartHeader,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { Badge } from 'ui'
 
 export default function ChartComposedStates() {
   const actions = [

apps/design-system/registry/default/block/chart-composed-table.tsx

@@ -1,21 +1,21 @@
 'use client'
 
+import { format } from 'date-fns'
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
   ChartFooter,
+  ChartHeader,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Table, TableHead, TableBody, TableRow, TableCell, TableHeader } from 'ui'
-import { format } from 'date-fns'
 
 export default function ChartComposedTable() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/registry/default/example/aspect-ratio-demo.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image'
-
 import { AspectRatio } from 'ui'
 
 export default function AspectRatioDemo() {

apps/design-system/registry/default/example/button-as-child.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-
 import { Button } from 'ui'
 
 export default function ButtonAsChild() {

apps/design-system/registry/default/example/button-icon.tsx

@@ -1,5 +1,4 @@
 import { ChevronRight } from 'lucide-react'
-
 import { Button } from 'ui'
 
 export default function ButtonIcon() {

apps/design-system/registry/default/example/button-with-icon.tsx

@@ -1,5 +1,4 @@
 import { Mail } from 'lucide-react'
-
 import { Button } from 'ui'
 
 export default function ButtonWithIcon() {