fix: add nanoid back

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

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

packages/kit/package.json

@@ -53,6 +53,7 @@
     "@stitches/react": "^1.2.8",
     "@washingtonpost/wpds-assets": "1.24.1-alpha.0",
     "match-sorter": "6.3.1",
+    "nanoid": "^3.3.4",
     "react": "^18.2.0",
     "react-swipeable": "^7.0.0",
     "react-transition-group": "^4.4.5"

packages/kit/src/carousel/CarouselContent.tsx

@@ -4,6 +4,7 @@ import { styled, theme } from "../theme";
 import type * as WPDS from "../theme";
 
 import { useSwipeable } from "react-swipeable";
+import { nanoid } from "nanoid";
 
 import { CarouselContext } from "./CarouselRoot";
 import { CarouselItemProps } from "./CarouselItem";
@@ -50,7 +51,7 @@ export const CarouselContent = React.forwardRef<
   } = React.useContext(CarouselContext);
 
   const [totalItems, setTotalItems] = React.useState(0);
-  const id = React.useId();
+  const id = nanoid();
   const childRefs = React.useRef<HTMLDivElement[]>([]);
   const internalRef = React.useRef<HTMLDivElement>(null);
   const [xPos, setXpos] = React.useState(0);

packages/kit/src/carousel/CarouselTitle.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+
+import { nanoid } from "nanoid";
+
 import { styled, theme } from "../theme";
 import { CarouselContext } from "./CarouselRoot";
 
@@ -21,7 +24,7 @@ export const CarouselTitle = React.forwardRef<
   CarouselTitleProps
 >(({ children, ...props }, ref) => {
   const { titleId, setTitleId } = React.useContext(CarouselContext);
-  const id = React.useId();
+  const id = nanoid();
   React.useEffect(() => {
     setTitleId && setTitleId(id);
   }, [setTitleId]);

packages/kit/src/input-text/InputText.tsx

@@ -1,4 +1,7 @@
 import React, { useEffect, useState } from "react";
+
+import { nanoid } from "nanoid";
+
 import { theme, styled } from "../theme";
 import { Button } from "../button";
 import { Divider } from "../divider";
@@ -146,7 +149,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
     const [errorId, setErrorId] = useState<string | undefined>();
     const [isAutofilled, setIsAutofilled] = useState<boolean>(false);
     const internalRef = React.useRef<HTMLInputElement>(null);
-    const rootId = React.useId();
+    const rootId = nanoid();
     useEffect(() => {
       setHelperId(`wpds-input-helper-${rootId}`);
       setErrorId(`wpds-input-error-${rootId}`);

packages/kit/src/input-textarea/InputTextarea.tsx

@@ -1,4 +1,7 @@
 import React, { useEffect, useState } from "react";
+
+import { nanoid } from "nanoid";
+
 import { theme, css, styled } from "../theme";
 import type * as WPDS from "../theme";
 import {
@@ -132,7 +135,7 @@ export const InputTextarea = React.forwardRef<
 
     const internalRef = React.useRef<HTMLTextAreaElement>(null);
 
-    const rootId = React.useId();
+    const rootId = nanoid();
     useEffect(() => {
       setHelperId(`wpds-input-helper-${rootId}`);
       setErrorId(`wpds-input-error-${rootId}`);

packages/kit/src/radio-group/RadioGroup.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+
+import { nanoid } from "nanoid";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type { RadioGroupProps as RadioGroupRootProps } from "@radix-ui/react-radio-group";
+
 import * as Theme from "../theme";
 import type * as WPDS from "../theme";
 import { Fieldset } from "../fieldset";
@@ -85,7 +88,7 @@ export const RadioGroup = React.forwardRef<
   ) => {
     const [errorId, setErrorId] = React.useState<string | undefined>();
 
-    const id = React.useId();
+    const id = nanoid();
     React.useEffect(() => {
       setErrorId(`wpds-input-error-${id}`);
     }, [setErrorId]);

packages/kit/src/select/SelectTrigger.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { nanoid } from "nanoid";
+
 import { theme, styled } from "../theme";
 import { ChevronDown } from "@washingtonpost/wpds-assets";
 import { Icon } from "../icon";
@@ -116,7 +118,7 @@ export const SelectTrigger = React.forwardRef<
       [setContentWidth]
     );
 
-    const id = React.useId();
+    const id = nanoid();
     React.useEffect(() => {
       setHelperId(`wpds-input-helper-${id}`);
       setErrorId(`wpds-input-error-${id}`);