feat(templates): update website src directory structure (#7971)

templates/website/package.json

@@ -18,16 +18,16 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "3.0.0-beta.91",
+    "@payloadcms/db-mongodb": "3.0.0-beta.96",
-    "@payloadcms/live-preview-react": "3.0.0-beta.91",
+    "@payloadcms/live-preview-react": "3.0.0-beta.96",
-    "@payloadcms/next": "3.0.0-beta.91",
+    "@payloadcms/next": "3.0.0-beta.96",
-    "@payloadcms/plugin-cloud": "3.0.0-beta.91",
+    "@payloadcms/plugin-cloud": "3.0.0-beta.96",
-    "@payloadcms/plugin-form-builder": "3.0.0-beta.91",
+    "@payloadcms/plugin-form-builder": "3.0.0-beta.96",
-    "@payloadcms/plugin-nested-docs": "3.0.0-beta.91",
+    "@payloadcms/plugin-nested-docs": "3.0.0-beta.96",
-    "@payloadcms/plugin-redirects": "3.0.0-beta.91",
+    "@payloadcms/plugin-redirects": "3.0.0-beta.96",
-    "@payloadcms/plugin-seo": "3.0.0-beta.91",
+    "@payloadcms/plugin-seo": "3.0.0-beta.96",
-    "@payloadcms/richtext-lexical": "3.0.0-beta.91",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.96",
-    "@payloadcms/ui": "3.0.0-beta.91",
+    "@payloadcms/ui": "3.0.0-beta.96",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
@@ -41,7 +41,7 @@
     "lexical": "0.17.0",
     "lucide-react": "^0.378.0",
     "next": "15.0.0-canary.104",
-    "payload": "3.0.0-beta.91",
+    "payload": "3.0.0-beta.96",
     "payload-admin-bar": "^1.0.6",
     "prism-react-renderer": "^2.3.1",
     "react": "19.0.0-rc-06d0b89e-20240801",

templates/website/src/Footer/Component.tsx

@@ -2,10 +2,10 @@ import { getCachedGlobal } from '@/utilities/getGlobals'
 import Link from 'next/link'
 import React from 'react'
 
-import type { Footer } from '../../../payload-types'
+import type { Footer } from '@/payload-types'
 
-import { ThemeSelector } from '../../providers/Theme/ThemeSelector'
+import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
-import { CMSLink } from '../Link'
+import { CMSLink } from '@/components/Link'
 
 export async function Footer() {
   const footer: Footer = await getCachedGlobal('footer')()

templates/website/src/Footer/config.ts

@@ -1,6 +1,6 @@
 import type { GlobalConfig } from 'payload'
 
-import { link } from '../../fields/link'
+import { link } from '@/fields/link'
 import { revalidateFooter } from './hooks/revalidateFooter'
 
 export const Footer: GlobalConfig = {

templates/website/src/Header/Component.client.tsx

@@ -4,9 +4,9 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 
-import type { Header } from '../../../payload-types'
+import type { Header } from '@/payload-types'
 
-import { Logo } from '../Logo/Logo'
+import { Logo } from '@/components/Logo/Logo'
 import { HeaderNav } from './Nav'
 
 interface HeaderClientProps {

templates/website/src/Header/Component.tsx

@@ -1,8 +1,8 @@
-import { HeaderClient } from '@/components/Header/index.client'
+import { HeaderClient } from './Component.client'
 import { getCachedGlobal } from '@/utilities/getGlobals'
 import React from 'react'
 
-import type { Header } from '../../../payload-types'
+import type { Header } from '@/payload-types'
 
 export async function Header() {
   const header: Header = await getCachedGlobal('header', 1)()

templates/website/src/Header/Nav/index.tsx

@@ -2,9 +2,9 @@
 
 import React from 'react'
 
-import type { Header as HeaderType } from '../../../../payload-types'
+import type { Header as HeaderType } from '@/payload-types'
 
-import { CMSLink } from '../../Link'
+import { CMSLink } from '@/components/Link'
 
 export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
   const navItems = header?.navItems || []

templates/website/src/Header/config.ts

@@ -1,6 +1,6 @@
 import type { GlobalConfig } from 'payload'
 
-import { link } from '../../fields/link'
+import { link } from '@/fields/link'
 import { revalidateHeader } from './hooks/revalidateHeader'
 
 export const Header: GlobalConfig = {

templates/website/src/access/authenticated.ts

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

templates/website/src/app/(frontend)/[slug]/page.tsx

@@ -3,15 +3,15 @@ import type { Metadata } from 'next'
 import { PayloadRedirects } from '@/components/PayloadRedirects'
 import configPromise from '@payload-config'
 import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { draftMode, headers } from 'next/headers'
+import { draftMode } from 'next/headers'
 import React, { cache } from 'react'
-import { homeStatic } from 'src/payload/seed/home-static'
+import { homeStatic } from '@/seed/home-static'
 
-import type { Page as PageType } from '../../../payload-types'
+import type { Page as PageType } from '@/payload-types'
 
-import { Blocks } from '../../components/Blocks'
+import { RenderBlocks } from '@/blocks/RenderBlocks'
-import { Hero } from '../../components/Hero'
+import { RenderHero } from '@/heros/RenderHero'
-import { generateMeta } from '../../utilities/generateMeta'
+import { generateMeta } from '@/utilities/generateMeta'
 
 export async function generateStaticParams() {
   const payload = await getPayloadHMR({ config: configPromise })
@@ -54,8 +54,8 @@ export default async function Page({ params: { slug = 'home' } }) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
-      <Hero {...hero} />
+      <RenderHero {...hero} />
-      <Blocks blocks={layout} />
+      <RenderBlocks blocks={layout} />
     </article>
   )
 }

templates/website/src/app/(frontend)/layout.tsx

@@ -1,17 +1,17 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import React from 'react'
 
-import { AdminBar } from '../components/AdminBar'
+import { AdminBar } from '@/components/AdminBar'
-import { Footer } from '../components/Footer'
+import { Footer } from '@/Footer/Component'
-import { Header } from '../components/Header'
+import { Header } from '@/Header/Component'
-import { LivePreviewListener } from '../components/LivePreviewListener'
+import { LivePreviewListener } from '@/components/LivePreviewListener'
-import { Providers } from '../providers'
+import { Providers } from '@/providers'
-import { InitTheme } from '../providers/Theme/InitTheme'
+import { InitTheme } from '@/providers/Theme/InitTheme'
-import { mergeOpenGraph } from '../utilities/mergeOpenGraph'
+import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
 import './globals.css'
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {

templates/website/src/app/(frontend)/not-found.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 
-import { Button } from '../components/ui/button'
+import { Button } from '@/components/ui/button'
 
 export default function NotFound() {
   return (

templates/website/src/app/(frontend)/posts/[slug]/page.tsx

@@ -1,17 +1,17 @@
 import type { Metadata } from 'next'
 
-import { RelatedPosts } from '@/blocks/RelatedPosts'
+import { RelatedPosts } from '@/blocks/RelatedPosts/Component'
 import { PayloadRedirects } from '@/components/PayloadRedirects'
 import configPromise from '@payload-config'
 import { getPayloadHMR } from '@payloadcms/next/utilities'
 import { draftMode, headers } from 'next/headers'
 import React, { cache } from 'react'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
 
-import type { Post } from '../../../../payload-types'
+import type { Post } from '@/payload-types'
 
-import { PostHero } from '../../../heros/PostHero'
+import { PostHero } from '@/heros/PostHero'
-import { generateMeta } from '../../../utilities/generateMeta'
+import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
 
 export async function generateStaticParams() {

templates/website/src/app/(payload)/admin/importMap.js

@@ -13,11 +13,11 @@ import { MetaTitleComponent as MetaTitleComponent_11 } from '@payloadcms/plugin-
 import { MetaImageComponent as MetaImageComponent_12 } from '@payloadcms/plugin-seo/client'
 import { MetaDescriptionComponent as MetaDescriptionComponent_13 } from '@payloadcms/plugin-seo/client'
 import { PreviewComponent as PreviewComponent_14 } from '@payloadcms/plugin-seo/client'
-import { SlugComponent as SlugComponent_15 } from '@/payload/fields/slug/SlugComponent'
+import { SlugComponent as SlugComponent_15 } from '@/fields/slug/SlugComponent'
 import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_16 } from '@payloadcms/richtext-lexical/client'
 import { BlocksFeatureClient as BlocksFeatureClient_17 } from '@payloadcms/richtext-lexical/client'
-import { default as default_18 } from 'src/payload/components/BeforeDashboard'
+import { default as default_18 } from '@/components/BeforeDashboard'
-import { default as default_19 } from 'src/payload/components/BeforeLogin'
+import { default as default_19 } from '@/components/BeforeLogin'
 
 export const importMap = {
   '@payloadcms/richtext-lexical/client#RichTextCell': RichTextCell_0,
@@ -36,9 +36,9 @@ export const importMap = {
   '@payloadcms/plugin-seo/client#MetaImageComponent': MetaImageComponent_12,
   '@payloadcms/plugin-seo/client#MetaDescriptionComponent': MetaDescriptionComponent_13,
   '@payloadcms/plugin-seo/client#PreviewComponent': PreviewComponent_14,
-  '@/payload/fields/slug/SlugComponent#SlugComponent': SlugComponent_15,
+  '@/fields/slug/SlugComponent#SlugComponent': SlugComponent_15,
   '@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient': HorizontalRuleFeatureClient_16,
   '@payloadcms/richtext-lexical/client#BlocksFeatureClient': BlocksFeatureClient_17,
-  '/payload/components/BeforeDashboard#default': default_18,
+  '@/components/BeforeDashboard#default': default_18,
-  '/payload/components/BeforeLogin#default': default_19,
+  '@/components/BeforeLogin#default': default_19,
 }

templates/website/src/blocks/ArchiveBlock/Component.tsx

@@ -3,11 +3,11 @@ import type { Post } from 'src/payload-types'
 import configPromise from '@payload-config'
 import { getPayloadHMR } from '@payloadcms/next/utilities'
 import React from 'react'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
 
 import type { ArchiveBlockProps } from './types'
 
-import { CollectionArchive } from '../../components/CollectionArchive'
+import { CollectionArchive } from '@/components/CollectionArchive'
 
 export const ArchiveBlock: React.FC<
   ArchiveBlockProps & {

templates/website/src/blocks/ArchiveBlock/types.ts

@@ -1,3 +1,3 @@
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
 export type ArchiveBlockProps = Extract<Page['layout'][0], { blockType: 'archive' }>

templates/website/src/blocks/Banner/Component.tsx

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

templates/website/src/blocks/CallToAction/Component.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import RichText from 'src/app/components/RichText'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
-import { CMSLink } from '../../components/Link'
+import RichText from '@/components/RichText'
+import { CMSLink } from '@/components/Link'
 
 type Props = Extract<Page['layout'][0], { blockType: 'cta' }>
 

templates/website/src/blocks/Code/Component.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Code } from './Code.client'
+import { Code } from './Component.client'
 
 export type CodeBlockProps = {
   code: string

templates/website/src/blocks/Content/Component.tsx

@@ -1,8 +1,8 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import React from 'react'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
 import { CMSLink } from '../../components/Link'
 

templates/website/src/blocks/Content/config.ts

@@ -7,7 +7,7 @@ import {
   lexicalEditor,
 } from '@payloadcms/richtext-lexical'
 
-import { link } from '../../fields/link'
+import { link } from '@/fields/link'
 
 const columnFields: Field[] = [
   {

templates/website/src/blocks/Form/Component.tsx

@@ -4,8 +4,8 @@ import type { Form as FormType } from '@payloadcms/plugin-form-builder/types'
 import { useRouter } from 'next/navigation'
 import React, { useCallback, useState } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
-import { Button } from 'src/app/components/ui/button'
+import { Button } from '@/components/ui/button'
 
 import { buildInitialFormState } from './buildInitialFormState'
 import { fields } from './fields'

templates/website/src/blocks/MediaBlock/Component.tsx

@@ -1,10 +1,10 @@
 import type { StaticImageData } from 'next/image'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import React from 'react'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
 import { Media } from '../../components/Media'
 

templates/website/src/blocks/RelatedPosts/Component.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
 import React from 'react'
-import RichText from 'src/app/components/RichText'
+import RichText from '@/components/RichText'
 
-import type { Post } from '../../../payload-types'
+import type { Post } from '@/payload-types'
 
 import { Card } from '../../components/Card'
 

templates/website/src/blocks/RenderBlocks.tsx

@@ -1,14 +1,13 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import React, { Fragment } from 'react'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
-import { ArchiveBlock } from '../../blocks/ArchiveBlock'
+import { ArchiveBlock } from '@/blocks/ArchiveBlock/Component'
-import { CallToActionBlock } from '../../blocks/CallToAction'
+import { CallToActionBlock } from '@/blocks/CallToAction/Component'
-import { ContentBlock } from '../../blocks/Content'
+import { ContentBlock } from '@/blocks/Content/Component'
-import { FormBlock } from '../../blocks/Form'
+import { FormBlock } from '@/blocks/Form/Component'
-import { MediaBlock } from '../../blocks/MediaBlock'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
-import { toKebabCase } from '../../utilities/toKebabCase'
 
 const blockComponents = {
   archive: ArchiveBlock,
@@ -18,7 +17,7 @@ const blockComponents = {
   mediaBlock: MediaBlock,
 }
 
-export const Blocks: React.FC<{
+export const RenderBlocks: React.FC<{
   blocks: Page['layout'][0][]
 }> = (props) => {
   const { blocks } = props

templates/website/src/collections/Pages/hooks/revalidatePage.ts

@@ -2,7 +2,7 @@ import type { CollectionAfterChangeHook } from 'payload'
 
 import { revalidatePath } from 'next/cache'
 
-import type { Page } from '../../../../payload-types'
+import type { Page } from '../../../payload-types'
 
 export const revalidatePage: CollectionAfterChangeHook<Page> = ({
   doc,

templates/website/src/collections/Pages/index.ts

@@ -2,13 +2,13 @@ import type { CollectionConfig } from 'payload'
 
 import { authenticated } from '../../access/authenticated'
 import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
-import { Archive } from '../../blocks/ArchiveBlock'
+import { Archive } from '../../blocks/ArchiveBlock/config'
-import { CallToAction } from '../../blocks/CallToAction'
+import { CallToAction } from '../../blocks/CallToAction/config'
-import { Content } from '../../blocks/Content'
+import { Content } from '../../blocks/Content/config'
-import { FormBlock } from '../../blocks/Form'
+import { FormBlock } from '../../blocks/Form/config'
-import { MediaBlock } from '../../blocks/MediaBlock'
+import { MediaBlock } from '../../blocks/MediaBlock/config'
-import { hero } from '../../fields/hero'
+import { hero } from '@/heros/config'
-import { slugField } from '../../fields/slug'
+import { slugField } from '@/fields/slug'
 import { populatePublishedAt } from '../../hooks/populatePublishedAt'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { revalidatePage } from './hooks/revalidatePage'

templates/website/src/collections/Posts/hooks/revalidatePost.ts

@@ -2,7 +2,7 @@ import type { CollectionAfterChangeHook } from 'payload'
 
 import { revalidatePath } from 'next/cache'
 
-import type { Post } from '../../../../payload-types'
+import type { Post } from '../../../payload-types'
 
 export const revalidatePost: CollectionAfterChangeHook<Post> = ({
   doc,

templates/website/src/collections/Posts/index.ts

@@ -11,9 +11,9 @@ import {
 
 import { authenticated } from '../../access/authenticated'
 import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
-import { Banner } from '../../blocks/Banner'
+import { Banner } from '../../blocks/Banner/config'
-import { Code } from '../../blocks/Code'
+import { Code } from '../../blocks/Code/config'
-import { MediaBlock } from '../../blocks/MediaBlock'
+import { MediaBlock } from '../../blocks/MediaBlock/config'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { populateAuthors } from './hooks/populateAuthors'
 import { revalidatePost } from './hooks/revalidatePost'
@@ -25,7 +25,7 @@ import {
   OverviewField,
   PreviewField,
 } from '@payloadcms/plugin-seo/fields'
-import { slugField } from '@/payload/fields/slug'
+import { slugField } from '@/fields/slug'
 
 export const Posts: CollectionConfig = {
   slug: 'posts',

templates/website/src/components/Card/index.tsx

@@ -4,9 +4,9 @@ import useClickableCard from '@/utilities/useClickableCard'
 import Link from 'next/link'
 import React, { Fragment } from 'react'
 
-import type { Post } from '../../../payload-types'
+import type { Post } from '@/payload-types'
 
-import { Media } from '../Media'
+import { Media } from '@/components/Media'
 
 export const Card: React.FC<{
   alignItems?: 'center'

templates/website/src/components/CollectionArchive/index.tsx

@@ -1,9 +1,9 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import React from 'react'
 
-import type { Post } from '../../../payload-types'
+import type { Post } from '@/payload-types'
 
-import { Card } from '../Card'
+import { Card } from '@/components/Card'
 
 export type Props = {
   posts: Post[]

templates/website/src/components/Link/index.tsx

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

templates/website/src/components/Media/ImageMedia/index.tsx

@@ -2,13 +2,13 @@
 
 import type { StaticImageData } from 'next/image'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import NextImage from 'next/image'
 import React from 'react'
 
 import type { Props as MediaProps } from '../types'
 
-import cssVariables from '../../../cssVariables'
+import cssVariables from '@/cssVariables'
 
 const { breakpoints } = cssVariables
 

templates/website/src/components/Media/VideoMedia/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'

templates/website/src/components/Media/types.ts

@@ -1,7 +1,7 @@
 import type { StaticImageData } from 'next/image'
 import type { ElementType, Ref } from 'react'
 
-import type { Media as MediaType } from '../../../payload-types'
+import type { Media as MediaType } from '@/payload-types'
 
 export interface Props {
   alt?: string

templates/website/src/components/PayloadRedirects/index.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import type { Page, Post } from 'src/payload-types'
+import type { Page, Post } from '@/payload-types'
 
 import { getCachedDocument } from '@/utilities/getDocument'
 import { getCachedRedirects } from '@/utilities/getRedirects'

templates/website/src/components/RichText/serialize.tsx

@@ -1,11 +1,11 @@
-import { BannerBlock } from '@/blocks/Banner'
+import { BannerBlock } from '@/blocks/Banner/Component'
-import { CallToActionBlock } from '@/blocks/CallToAction'
+import { CallToActionBlock } from '@/blocks/CallToAction/Component'
-import { CodeBlock, CodeBlockProps } from '@/blocks/Code'
+import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
-import { MediaBlock } from '@/blocks/MediaBlock'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
 import React, { Fragment, JSX } from 'react'
-import { CMSLink } from 'src/app/components/Link'
+import { CMSLink } from '@/components/Link'
 import { DefaultNodeTypes, SerializedBlockNode } from '@payloadcms/richtext-lexical'
-import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
+import type { BannerBlock as BannerBlockProps } from '@/payload-types'
 
 import {
   IS_BOLD,
@@ -16,7 +16,7 @@ import {
   IS_SUPERSCRIPT,
   IS_UNDERLINE,
 } from './nodeFormat'
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
 export type NodeTypes =
   | DefaultNodeTypes

templates/website/src/components/ui/button.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import { Slot } from '@radix-ui/react-slot'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

templates/website/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/heading-has-content */
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(

templates/website/src/components/ui/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'

templates/website/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

templates/website/src/components/ui/label.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'

templates/website/src/components/ui/pagination.tsx

@@ -2,7 +2,7 @@
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
 

templates/website/src/components/ui/select.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'

templates/website/src/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/utilities/cn'
+import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

templates/website/src/endpoints/seed.ts

@@ -1,6 +1,6 @@
 import { type PayloadHandler, commitTransaction, initTransaction } from 'payload'
 
-import { seed as seedScript } from '../seed'
+import { seed as seedScript } from '@/seed'
 
 export const seed: PayloadHandler = async (req): Promise<Response> => {
   const { payload, user } = req

templates/website/src/fields/link.ts

@@ -1,6 +1,6 @@
 import type { Field } from 'payload'
 
-import deepMerge from '../utilities/deepMerge'
+import deepMerge from '@/utilities/deepMerge'
 
 export type LinkAppearances = 'default' | 'outline'
 

templates/website/src/fields/linkGroup.ts

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

templates/website/src/fields/slug/SlugComponent.tsx

@@ -43,8 +43,16 @@ export const SlugComponent: React.FC<SlugComponentProps> = ({
   })
 
   useEffect(() => {
-    if (checkboxValue) setValue(formatSlug(fieldToUseValue))
+    if (checkboxValue) {
-  }, [fieldToUseValue, checkboxValue])
+      if (fieldToUseValue) {
+        const formattedSlug = formatSlug(fieldToUseValue)
+
+        if (value !== formattedSlug) setValue(formattedSlug)
+      } else {
+        if (value !== '') setValue('')
+      }
+    }
+  }, [fieldToUseValue, checkboxValue, setValue, value])
 
   const handleLock = useCallback(
     (e) => {

templates/website/src/fields/slug/index.ts

@@ -40,7 +40,7 @@ export const slugField: Slug = (fieldToUse = 'title', overrides = {}) => {
       ...(slugOverrides?.admin || {}),
       components: {
         Field: {
-          path: '@/payload/fields/slug/SlugComponent#SlugComponent',
+          path: '@/fields/slug/SlugComponent#SlugComponent',
           clientProps: {
             fieldToUse,
             checkboxFieldPath: checkBoxField.name,

templates/website/src/heros/HighImpact/index.tsx

@@ -2,11 +2,11 @@
 import { useHeaderTheme } from '@/providers/HeaderTheme'
 import React, { useEffect } from 'react'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
-import { CMSLink } from '../../components/Link'
+import { CMSLink } from '@/components/Link'
-import { Media } from '../../components/Media'
+import { Media } from '@/components/Media'
-import RichText from '../../components/RichText'
+import RichText from '@/components/RichText'
 
 export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText }) => {
   const { setHeaderTheme } = useHeaderTheme()

templates/website/src/heros/LowImpact/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@/payload-types'
 
-import RichText from '../../components/RichText'
+import RichText from '@/components/RichText'
 
 type LowImpactHeroType =
   | {