chore(docs): fix displaying warnings and type errors

apps/docs/src/app/components/material-icons-and-symbols/FontIconImportAndUsage.tsx

@@ -8,15 +8,15 @@ import { TwoToneIconWarning } from "./TwoToneIconWarning.jsx";
 import { getFontStylesheet } from "./utils.js";
 
 export function FontIconImportAndUsage(): ReactElement {
-  const { iconFamily } = useMaterialIconsAndSymbols();
+  const { iconFamily, isFontFamilyChanged } = useMaterialIconsAndSymbols();
   const href = getFontStylesheet({
     iconType: "icon",
     iconFamily,
   });
   return (
     <>
       <IconImportAndUsage />
-      <AdditionalChanges />
+      {isFontFamilyChanged && <AdditionalChanges />}
       {iconFamily === "two-tone" && <TwoToneIconWarning />}
       <Typography type="headline-5" margin="top">
         Stylesheet

apps/docs/src/app/components/material-icons-and-symbols/MaterialSymbolUsage.tsx

@@ -1,19 +1,17 @@
 import { type ReactElement } from "react";
+import { AdditionalChanges } from "./AdditionalChanges.jsx";
 import { IconImportAndUsage } from "./IconImportAndUsage.jsx";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.jsx";
-import { AdditionalChanges } from "./AdditionalChanges.jsx";
 
 export function MaterialSymbolUsage(): ReactElement {
-  const {
-    isSymbolCustomizationChanged,
-    isFontFamilyChanged,
-    selectedIconName,
-  } = useMaterialIconsAndSymbols();
+  const { isFontFamilyChanged, isSymbolCustomizationChanged } =
+    useMaterialIconsAndSymbols();
   return (
     <>
       <IconImportAndUsage />
-      {(isSymbolCustomizationChanged || isFontFamilyChanged) &&
-        selectedIconName && <AdditionalChanges icon={selectedIconName} />}
+      {(isSymbolCustomizationChanged || isFontFamilyChanged) && (
+        <AdditionalChanges />
+      )}
     </>
   );
 }

apps/docs/src/app/components/material-icons-and-symbols/SVGIconImportAndUsage.tsx

@@ -2,17 +2,18 @@ import { Blockquote } from "@/components/Blockquote.jsx";
 import { PackageManagerCodeBlock } from "@/components/PackageManagerCodeBlock.jsx";
 import { highlightCode } from "@/utils/highlightCode.js";
 import { Typography } from "@react-md/core";
+import { cnb } from "cnbuilder";
 import { type ReactElement } from "react";
+import { AdditionalChanges } from "./AdditionalChanges.jsx";
 import { CopyCode } from "./CopyCode.js";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.js";
+import styles from "./SVGIconImportAndUsage.module.scss";
 import { TwoToneIconWarning } from "./TwoToneIconWarning.jsx";
 import { getMaterialIconComponentName } from "./utils.js";
-import styles from "./SVGIconImportAndUsage.module.scss";
-import { cnb } from "cnbuilder";
-import { AdditionalChanges } from "./AdditionalChanges.jsx";
 
 export function SVGIconImportAndUsage(): ReactElement | null {
-  const { selectedIconName, iconFamily } = useMaterialIconsAndSymbols();
+  const { selectedIconName, iconFamily, isFontFamilyChanged } =
+    useMaterialIconsAndSymbols();
   if (!selectedIconName) {
     return null;
   }
@@ -35,7 +36,7 @@ export function SVGIconImportAndUsage(): ReactElement | null {
       </Typography>
       <CopyCode>{importCode}</CopyCode>
       <CopyCode>{usageCode}</CopyCode>
-      <AdditionalChanges isSvg />
+      {isFontFamilyChanged && <AdditionalChanges isSvg />}
       <Typography type="headline-5" className={styles.heading}>
         Installation
       </Typography>

apps/docs/src/providers/RootProviders.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { type AppCookies } from "@/app/utils.js";
+import { type AppCookies } from "@/app/utils/serverState.js";
 import { AppToastRenderer } from "@/components/AppToastRenderer/AppToastRenderer.jsx";
 import { rmdConfig } from "@/constants/rmdConfig.js";
 import {