Run Prettier's automated formatting over the codebase.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -17,11 +17,10 @@ import { Trans } from '@kit/ui/trans';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
-const ModeToggle = dynamic(
+const ModeToggle = dynamic(() =>
-  () =>
+  import('@kit/ui/mode-toggle').then((mod) => ({
-    import('@kit/ui/mode-toggle').then((mod) => ({
+    default: mod.ModeToggle,
-      default: mod.ModeToggle,
+  })),
-    })),
 );
 
 const paths = {

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -11,7 +11,6 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 // styles
 import styles from '../../blog/_components/html-renderer.module.css';
-
 // local imports
 import { DocsCards } from '../_components/docs-cards';
 import { DocsTableOfContents } from '../_components/docs-table-of-contents';
@@ -62,9 +61,9 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
   );
 
   return (
-    <div className={'flex flex-col flex-1 space-y-4'}>
+    <div className={'flex flex-1 flex-col space-y-4'}>
       <div className={'flex'}>
-        <article className={cn(styles.HTML, 'space-y-12 container')}>
+        <article className={cn(styles.HTML, 'container space-y-12')}>
           <section className={'flex flex-col space-y-4 pt-6'}>
             <h1 className={'!my-0'}>{page.title}</h1>
 

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -53,7 +53,7 @@ export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
     <>
       <Sidebar
         variant={'ghost'}
-        className={'sticky z-1 max-h-full overflow-y-auto'}
+        className={'z-1 sticky max-h-full overflow-y-auto'}
       >
         <Tree pages={pages} level={0} />
       </Sidebar>

apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
   const navData = props.data;
 
   return (
-    <div className="lg:block hidden sticky bg-background min-w-[14em] border-l p-4 inset-y-0 h-svh max-h-full">
+    <div className="sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l bg-background p-4 lg:block">
       <ol
         role="list"
         className="relative text-sm text-gray-600 dark:text-gray-400"

apps/web/app/(marketing)/docs/loading.tsx

@@ -1,3 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+export default GlobalLoader;

apps/web/config/personal-account-navigation.config.tsx

@@ -35,7 +35,7 @@ const routes = [
             Icon: <CreditCard className={iconClasses} />,
           }
         : undefined,
-    ].filter(route => !!route),
+    ].filter((route) => !!route),
   },
 ] satisfies z.infer<typeof NavigationConfigSchema>['routes'];
 

packages/cms/keystatic/src/keystatic.config.ts

@@ -66,7 +66,10 @@ function getKeystaticCollections(path: string) {
       format: { contentField: 'content' },
       schema: {
         title: fields.slug({ name: { label: 'Title' } }),
-        label: fields.text({ label: 'Label', validation: { isRequired: false } }),
+        label: fields.text({
+          label: 'Label',
+          validation: { isRequired: false },
+        }),
         image: fields.image({
           label: 'Image',
           directory: 'public/site/images',
@@ -102,7 +105,10 @@ function getKeystaticCollections(path: string) {
       format: { contentField: 'content' },
       schema: {
         title: fields.slug({ name: { label: 'Title' } }),
-        label: fields.text({ label: 'Label', validation: { isRequired: false } }),
+        label: fields.text({
+          label: 'Label',
+          validation: { isRequired: false },
+        }),
         content: getContentField(),
         image: fields.image({
           label: 'Image',

packages/features/accounts/src/components/account-selector.tsx

@@ -129,7 +129,9 @@ export function AccountSelector({
                   <Avatar className={'h-6 w-6 rounded-sm'}>
                     <AvatarImage src={account.image ?? undefined} />
 
-                    <AvatarFallback className={'group-hover:bg-background rounded-sm'}>
+                    <AvatarFallback
+                      className={'group-hover:bg-background rounded-sm'}
+                    >
                       {account.label ? account.label[0] : ''}
                     </AvatarFallback>
                   </Avatar>

packages/ui/src/makerkit/stepper.tsx

@@ -89,10 +89,10 @@ function getClassNameBuilder() {
   return cva(``, {
     variants: {
       variant: {
-        default: `flex flex-col h-[2.5px] w-full transition-all duration-500`,
+        default: `flex h-[2.5px] w-full flex-col transition-all duration-500`,
         numbers:
-          'w-9 h-9 font-bold rounded-full flex items-center justify-center text-sm border',
+          'flex h-9 w-9 items-center justify-center rounded-full border text-sm font-bold',
-        dots: 'w-2.5 h-2.5 rounded-full bg-muted transition-colors',
+        dots: 'h-2.5 w-2.5 rounded-full bg-muted transition-colors',
       },
       selected: {
         true: '',

packages/ui/src/shadcn/alert.tsx

@@ -5,18 +5,18 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../lib/utils';
 
 const alertVariants = cva(
-  'relative w-full bg-gradient-to-r rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border bg-gradient-to-r px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
         default: 'bg-background text-foreground',
         destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive from-red-50 from-10% via-background to-background dark:from-red-500/10',
+          'border-destructive/50 from-red-50 from-10% via-background to-background text-destructive dark:border-destructive dark:from-red-500/10 [&>svg]:text-destructive',
         success:
-          'border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600 from-green-50 from-10% via-background to-background dark:from-green-500/10',
+          'border-green-600/50 from-green-50 from-10% via-background to-background text-green-600 dark:border-green-600 dark:from-green-500/10 [&>svg]:text-green-600',
         warning:
-          'border-orange-600/50 text-orange-600 dark:border-orange-600 [&>svg]:text-orange-600 from-orange-50 from-10% via-background to-background dark:from-orange-500/10',
+          'border-orange-600/50 from-orange-50 from-10% via-background to-background text-orange-600 dark:border-orange-600 dark:from-orange-500/10 [&>svg]:text-orange-600',
-        info: 'border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600 from-blue-50 from-10% via-background to-background dark:from-blue-500/10',
+        info: 'border-blue-600/50 from-blue-50 from-10% via-background to-background text-blue-600 dark:border-blue-600 dark:from-blue-500/10 [&>svg]:text-blue-600',
       },
     },
     defaultVariants: {

packages/ui/src/shadcn/badge.tsx

@@ -17,10 +17,10 @@ const badgeVariants = cva(
           'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground',
         success:
-          'border-transparent bg-green-50 hover:bg-green-50 text-green-500 dark:bg-green-500/20 dark:hover:bg-green-500/20',
+          'border-transparent bg-green-50 text-green-500 hover:bg-green-50 dark:bg-green-500/20 dark:hover:bg-green-500/20',
         warning:
-          'border-transparent bg-orange-50 hover:bg-orange-50 text-orange-500 dark:bg-orange-500/20 dark:hover:bg-orange-500/20',
+          'border-transparent bg-orange-50 text-orange-500 hover:bg-orange-50 dark:bg-orange-500/20 dark:hover:bg-orange-500/20',
-        info: 'border-transparent bg-blue-50 hover:bg-blue-50 text-blue-500 dark:bg-blue-500/20 dark:hover:bg-blue-500/20',
+        info: 'border-transparent bg-blue-50 text-blue-500 hover:bg-blue-50 dark:bg-blue-500/20 dark:hover:bg-blue-500/20',
       },
     },
     defaultVariants: {

packages/ui/src/shadcn/chart.tsx

@@ -9,13 +9,16 @@ import { cn } from '../lib/utils';
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;
 
-export type ChartConfig = Record<string, {
+export type ChartConfig = Record<
+  string,
+  {
     label?: React.ReactNode;
     icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )>;
+  )
+>;
 
 type ChartContextProps = {
   config: ChartConfig;

packages/ui/src/shadcn/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };