fix: nanoid hoisting issue (#354)

build.washingtonpost.com/components/Markdown/Components/Checkbox.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { Checkbox } from "@washingtonpost/wpds-ui-kit";
-import { useId } from "@react-aria/utils";
+import { nanoid } from "nanoid";
 
 export const InputCheckbox = (props) => {
-  const elementId = useId();
+  const elementId = nanoid();
 
   return <Checkbox {...props} id={elementId} />;
 };

build.washingtonpost.com/package.json

@@ -20,11 +20,11 @@
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.1",
-    "@react-aria/ssr": "^3.1.0",
     "@stitches/react": "1.2.8",
-    "@washingtonpost/site-components": "7.14.3",
-    "@washingtonpost/site-footer": "0.11.3",
+    "@washingtonpost/site-favicons": "^0.1.0",
+    "@washingtonpost/site-footer": "0.16.0",
     "@washingtonpost/site-third-party-scripts": "latest",
+    "@washingtonpost/tachyons-css": "latest",
     "@washingtonpost/wpds-accordion": "1.2.0",
     "@washingtonpost/wpds-assets": "^1.17.0",
     "@washingtonpost/wpds-kitchen-sink": "1.2.0",

build.washingtonpost.com/pages/_app.js

@@ -11,7 +11,6 @@ import {
 import { useRouter } from "next/router";
 import { darkModeStyles } from "~/components/DarkModeStyles";
 import { PageLayout } from "~/components/Layout";
-import { SSRProvider } from "@react-aria/ssr";
 import SEO from "../next-seo.config";
 import "../public/global.css";
 
@@ -84,7 +83,7 @@ function App({ Component, pageProps }) {
   const getLayout = Component.getLayout;
 
   return (
-    <SSRProvider>
+    <>
       <DefaultSeo {...SEO} />
       <ThemeProvider
         attribute="class"
@@ -117,7 +116,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           </PageLayout>
         )}
       </ThemeProvider>
-    </SSRProvider>
+    </>
   );
 }
 

build.washingtonpost.com/pages/_document.js

@@ -1,7 +1,7 @@
 import React from "react";
 import NextDocument, { Html, Head, Main, NextScript } from "next/document";
 import { getCssText, reset } from "@washingtonpost/wpds-ui-kit";
-import { Favicon } from "@washingtonpost/site-components/core/favicon";
+import { Favicon } from "@washingtonpost/site-favicons";
 
 /**
  * Get the css and reset the internal css representation.

build.washingtonpost.com/public/sitemap.xml

@@ -20,6 +20,10 @@
     <loc>https://build.washingtonpost.com/components/app-bar</loc>
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/components/auto-suggest</loc>
+  </url>
+
   <url>
     <loc>https://build.washingtonpost.com/components/avatar</loc>
   </url>