app/components/syntax/Button.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@/components/common/Link";
+import React from "react";
 import clsx from "clsx";
 
 const variantStyles = {

app/components/syntax/CSRSnippet.tsx

@@ -1,8 +1,8 @@
 import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { Highlight } from "prism-react-renderer";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
 import Prism from "prismjs";

app/components/syntax/Callout.tsx

@@ -1,4 +1,5 @@
 import { Icon } from "@syntax/Icon";
+import React from "react";
 import clsx from "clsx";
 
 const styles = {

app/components/syntax/DocsHeader.tsx

@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 
 type DocsHeaderProps = {
   title?: string;

app/components/syntax/DocsLayout.tsx

@@ -5,6 +5,7 @@ import { PrevNextLinks } from "@syntax/PrevNextLinks";
 import { collectSections } from "@/lib/sections";
 import { DocsHeader } from "@syntax/DocsHeader";
 import { Prose } from "@syntax/Prose";
+import React from "react";
 
 export function DocsLayout({
   children,

app/components/syntax/Fence.tsx

@@ -1,5 +1,6 @@
 import { clientOnly } from "vike-react/clientOnly";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 

app/components/syntax/Hero.tsx

@@ -3,8 +3,8 @@ import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { Image } from "@/components/common/Image";
 import { Highlight } from "prism-react-renderer";
+import React, { Fragment } from "react";
 import { Button } from "@syntax/Button";
-import { Fragment } from "react";
 import clsx from "clsx";
 
 const codeLanguage = "javascript";

app/components/syntax/Icon.tsx

@@ -32,8 +32,8 @@ export function Icon({
   color?: keyof typeof iconStyles;
   icon: keyof typeof icons;
 } & Omit<React.ComponentPropsWithoutRef<"svg">, "color">) {
-  let id = useId();
+  const id = useId();
-  let IconComponent = icons[icon];
+  const IconComponent = icons[icon];
 
   return (
     <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" className={clsx(className, iconStyles[color])} {...props}>