From 8f37e9eec020fadbae020325883b964341689a6d Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Wed, 5 Jun 2024 23:02:57 -0400
Subject: [PATCH 01/25] fix: improve INP for drawer content opening and closing

---
 packages/kit/src/drawer/DrawerContent.tsx | 260 +++++++++-------------
 1 file changed, 103 insertions(+), 157 deletions(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index 1a190ead7..7ca25803e 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { CSSTransition } from "react-transition-group";
+import React, { useState, useEffect, useTransition } from "react";
 import { FocusScope } from "@radix-ui/react-focus-scope";
 import { styled, theme } from "../theme";
 import type * as WPDS from "../theme";
@@ -14,125 +13,51 @@ const StyledContainer = styled("div", {
   maxHeight: "100%",
   overflow: "auto",
   position: "fixed",
+  transition: drawerTransition,
   variants: {
-    /** controls which side of the screen the drawer comes from @default bottom */
     position: {
-      top: {
-        top: 0,
-        right: 0,
-        left: 0,
-        "&.wpds-drawer-enter": {
-          opacity: 0,
-          transform: "translateY(-100%)",
-        },
-        "&.wpds-drawer-enter-active": {
-          opacity: 1,
-          transform: "translateY(0%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-        "&.wpds-drawer-exit": {
-          opacity: 1,
-          transform: "translateY(0%)",
-        },
-        "&.wpds-drawer-exit-active": {
-          opacity: 0,
-          transform: "translateY(-100%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-      },
-      right: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        "&.wpds-drawer-enter": {
-          opacity: 0,
-          transform: "translateX(100%)",
-        },
-        "&.wpds-drawer-enter-active": {
-          opacity: 1,
-          transform: "translateX(0%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-        "&.wpds-drawer-exit": {
-          opacity: 1,
-          transform: "translateX(0%)",
-        },
-        "&.wpds-drawer-exit-active": {
-          opacity: 0,
-          transform: "translateX(100%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-      },
-      bottom: {
-        right: 0,
-        bottom: 0,
-        left: 0,
-        "&.wpds-drawer-enter": {
-          opacity: 0,
-          transform: "translateY(100%)",
-        },
-        "&.wpds-drawer-enter-active": {
-          opacity: 1,
-          transform: "translateY(0%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-        "&.wpds-drawer-exit": {
-          opacity: 1,
-          transform: "translateY(0%)",
-        },
-        "&.wpds-drawer-exit-active": {
-          opacity: 0,
-          transform: "translateY(100%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-      },
-      left: {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        "&.wpds-drawer-enter": {
-          opacity: 0,
-          transform: "translateX(-100%)",
-        },
-        "&.wpds-drawer-enter-active": {
-          opacity: 1,
-          transform: "translateX(0%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-        "&.wpds-drawer-exit": {
-          opacity: 1,
-          transform: "translateX(0%)",
-        },
-        "&.wpds-drawer-exit-active": {
-          opacity: 0,
-          transform: "translateX(-100%)",
-          transition: drawerTransition,
-          "@reducedMotion": {
-            transition: "none",
-          },
-        },
-      },
+      top: { top: 0, right: 0, left: 0 },
+      right: { top: 0, right: 0, bottom: 0 },
+      bottom: { right: 0, bottom: 0, left: 0 },
+      left: { top: 0, bottom: 0, left: 0 },
+    },
+  },
+  "@reducedMotion": {
+    transition: "none",
+  },
+  "&[data-state='open']": {
+    transform: "translateX(0)",
+    opacity: 1,
+    // data=position="top" or "bottom" or "left" or "right"
+    "&[data-position='top']": {
+      transform: "translateY(0)",
+    },
+    "&[data-position='right']": {
+      transform: "translateX(0)",
+    },
+    "&[data-position='bottom']": {
+      transform: "translateY(0)",
+    },
+    "&[data-position='left']": {
+      transform: "translateX(0)",
+    },
+  },
+  // data-state="closed"
+  "&[data-state='closed']": {
+    transform: "translateX(100%)",
+    opacity: 0,
+    // data=position="top" or "bottom" or "left" or "right"
+    "&[data-position='top']": {
+      transform: "translateY(-100%)",
+    },
+    "&[data-position='right']": {
+      transform: "translateX(100%)",
+    },
+    "&[data-position='bottom']": {
+      transform: "translateY(100%)",
+    },
+    "&[data-position='left']": {
+      transform: "translateX(-100%)",
     },
   },
 });
@@ -175,52 +100,73 @@ export const DrawerContent = React.forwardRef<
     ref
   ) => {
     const context = React.useContext(DrawerContext);
+    const [isVisible, setIsVisible] = useState(context.open);
+    const [, startTransition] = useTransition();
+
+    useEffect(() => {
+      if (context.open) {
+        setIsVisible(true);
+      }
+    }, [context.open]);
+
+    const handleTransitionEnd = () => {
+      if (!context.open) {
+        setIsVisible(false);
+      }
+    };
 
-    function handleEnter() {
+    const handleEnter = () => {
       document.addEventListener("keydown", handleKeyDown);
-    }
+    };
 
-    function handleExit() {
+    const handleExit = () => {
       document.removeEventListener("keydown", handleKeyDown);
-    }
+    };
 
-    function handleKeyDown(event) {
+    const handleKeyDown = (event: { key: string }) => {
       if (event.key === "Escape") {
         context.onOpenChange(false);
       }
-    }
-
-    return (
-      <CSSTransition
-        mountOnEnter
-        unmountOnExit
-        onEnter={handleEnter}
-        onExit={handleExit}
-        in={context.open}
-        timeout={300}
-        classNames="wpds-drawer"
-      >
-        <FocusScope loop={loopFocus} trapped={trapFocus} asChild>
-          <StyledContainer
-            id={context.contentId}
-            ref={ref}
-            style={{
-              width:
-                position === "left" || position === "right" ? width : undefined,
-              height:
-                position === "top" || position === "bottom"
-                  ? height
-                  : undefined,
-              zIndex: context.zIndex as number,
-            }}
-            position={position}
-            {...props}
-          >
-            <StyledInner className={innerClassName}>{children}</StyledInner>
-          </StyledContainer>
-        </FocusScope>
-      </CSSTransition>
-    );
+    };
+
+    useEffect(() => {
+      startTransition(() => {
+        if (context.open) {
+          handleEnter();
+        } else {
+          handleExit();
+        }
+      });
+    }, [context.open]);
+
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+      setIsMounted(true);
+    }, []);
+
+    return isMounted ? (
+      <FocusScope loop={loopFocus} trapped={trapFocus} asChild>
+        <StyledContainer
+          ref={ref}
+          id={context.contentId}
+          data-position={position}
+          data-state={context.open ? "open" : "closed"}
+          style={{
+            width:
+              position === "left" || position === "right" ? width : undefined,
+            height:
+              position === "top" || position === "bottom" ? height : undefined,
+            zIndex: context.zIndex as number,
+          }}
+          position={position}
+          onTransitionEnd={handleTransitionEnd}
+          {...props}
+        >
+          <StyledInner className={innerClassName}>{children}</StyledInner>
+        </StyledContainer>
+      </FocusScope>
+    ) : null;
   }
 );
 

From 8ec15bfb37e649cbb4186e606fc8d5c750cf88e9 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Wed, 5 Jun 2024 23:21:49 -0400
Subject: [PATCH 02/25] fix: improve INP for drawer content opening and closing

---
 packages/kit/src/drawer/DrawerContent.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index 7ca25803e..a3e187ade 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -100,18 +100,11 @@ export const DrawerContent = React.forwardRef<
     ref
   ) => {
     const context = React.useContext(DrawerContext);
-    const [isVisible, setIsVisible] = useState(context.open);
     const [, startTransition] = useTransition();
 
-    useEffect(() => {
-      if (context.open) {
-        setIsVisible(true);
-      }
-    }, [context.open]);
-
     const handleTransitionEnd = () => {
       if (!context.open) {
-        setIsVisible(false);
+        handleExit();
       }
     };
 

From edfb6180f205d926adf82cd80f7a3591bbd5e455 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Wed, 5 Jun 2024 23:22:39 -0400
Subject: [PATCH 03/25] fix: improve INP for drawer content opening and closing

---
 packages/kit/src/drawer/DrawerContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index a3e187ade..cb75f0484 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -132,7 +132,7 @@ export const DrawerContent = React.forwardRef<
       });
     }, [context.open]);
 
-    const [isMounted, setIsMounted] = useState(false);
+    const [isMounted, setIsMounted] = useState(context.open);
 
     useEffect(() => {
       setIsMounted(true);

From ddebd8813a7d72da2f2ca7b9e9b8452e32c39c58 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Thu, 6 Jun 2024 00:31:09 -0400
Subject: [PATCH 04/25] fix: also remove RTG from scrim too

---
 packages/kit/src/scrim/Scrim.tsx | 64 +++++++++++++++-----------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 418bf95de..8d49c46b8 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CSSTransition } from "react-transition-group";
 import { styled, theme, css as wpCSS } from "../theme";
 import type * as WPDS from "../theme";
 import type { Token } from "@stitches/react/types/theme";
@@ -12,26 +11,16 @@ const scrimTransition = `opacity ${theme.transitions.normal} ${theme.transitions
 const StyledContainer = styled("div", {
   backgroundColor: theme.colors.alpha50,
   position: "fixed",
+  transition: scrimTransition,
   inset: 0,
-  "&.wpds-scrim-enter": {
-    opacity: 0,
-  },
-  "&.wpds-scrim-enter-active": {
-    opacity: 1,
-    transition: scrimTransition,
-    "@reducedMotion": {
-      transition: "none",
-    },
+  "@reducedMotion": {
+    transition: "none",
   },
-  "&.wpds-scrim-exit": {
+  "&[data-state='open']": {
     opacity: 1,
   },
-  "&.wpds-scrim-exit-active": {
+  "&[data-state='closed']": {
     opacity: 0,
-    transition: scrimTransition,
-    "@reducedMotion": {
-      transition: "none",
-    },
   },
 });
 
@@ -74,25 +63,30 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
       }
     }, [open, lockScroll]);
 
-    return (
-      <CSSTransition
-        mountOnEnter
-        unmountOnExit
-        in={open}
-        timeout={{
-          enter: 300,
-          exit: 300,
-        }}
-        classNames="wpds-scrim"
-      >
-        <StyledContainer
-          ref={ref}
-          css={{ ...css, zIndex: zIndex }}
-          aria-hidden={true}
-          {...props}
-        ></StyledContainer>
-      </CSSTransition>
-    );
+    const [isMounted, setIsMounted] = React.useState(false);
+
+    React.useEffect(() => {
+      if (open) {
+        setIsMounted(true);
+      }
+    }, [open]);
+
+    const handleTransitionEnd = () => {
+      if (!open) {
+        setIsMounted(false);
+      }
+    };
+
+    return isMounted ? (
+      <StyledContainer
+        data-state={open ? "open" : "closed"}
+        ref={ref}
+        css={{ ...css, zIndex: zIndex }}
+        aria-hidden={true}
+        {...props}
+        onTransitionEnd={handleTransitionEnd}
+      ></StyledContainer>
+    ) : null;
   }
 );
 

From 59531b6dd2e8e068fbf781f53d9716d2cae35e98 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Thu, 6 Jun 2024 00:37:35 -0400
Subject: [PATCH 05/25] fix: also remove RTG from scrim too

---
 packages/kit/src/scrim/Scrim.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 8d49c46b8..29c9d8e91 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useTransition } from "react";
 import { styled, theme, css as wpCSS } from "../theme";
 import type * as WPDS from "../theme";
 import type { Token } from "@stitches/react/types/theme";
@@ -63,21 +63,26 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
       }
     }, [open, lockScroll]);
 
+    const [isPending, startTransition] = useTransition();
     const [isMounted, setIsMounted] = React.useState(false);
 
     React.useEffect(() => {
-      if (open) {
-        setIsMounted(true);
-      }
+      startTransition(() => {
+        if (open) {
+          setIsMounted(true);
+        }
+      });
     }, [open]);
 
     const handleTransitionEnd = () => {
       if (!open) {
-        setIsMounted(false);
+        startTransition(() => {
+          setIsMounted(false);
+        });
       }
     };
 
-    return isMounted ? (
+    return isMounted || isPending ? (
       <StyledContainer
         data-state={open ? "open" : "closed"}
         ref={ref}

From 6e64bb23d7946d64a7e62f7927b0d67463659e01 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Thu, 6 Jun 2024 04:34:53 -0400
Subject: [PATCH 06/25] chore: commit save point

---
 build.washingtonpost.com/package.json     |    8 +-
 package-lock.json                         | 1245 +++++++--------------
 packages/kit/package.json                 |   12 +-
 packages/kit/src/drawer/DrawerContent.tsx |    1 +
 packages/kit/src/scrim/Scrim.tsx          |   50 +-
 turbo.json                                |    3 +
 6 files changed, 446 insertions(+), 873 deletions(-)

diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json
index 261f55830..bdd675771 100644
--- a/build.washingtonpost.com/package.json
+++ b/build.washingtonpost.com/package.json
@@ -27,10 +27,10 @@
     "@washingtonpost/site-footer": "0.25.3-alpha.1",
     "@washingtonpost/tachyons-css": "^1.8.0",
     "@washingtonpost/wpds-assets": "2.0.0",
-    "@washingtonpost/wpds-kitchen-sink": "2.3.0",
-    "@washingtonpost/wpds-tailwind-theme": "2.3.0",
-    "@washingtonpost/wpds-tokens": "2.3.0",
-    "@washingtonpost/wpds-ui-kit": "2.3.0",
+    "@washingtonpost/wpds-kitchen-sink": "*",
+    "@washingtonpost/wpds-tailwind-theme": "*",
+    "@washingtonpost/wpds-tokens": "*",
+    "@washingtonpost/wpds-ui-kit": "file:../packages/kit",
     "fuse.js": "^6.6.2",
     "gray-matter": "^4.0.2",
     "lz-string": "^1.4.4",
diff --git a/package-lock.json b/package-lock.json
index c879b4401..761cfd8ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -128,6 +128,41 @@
       "version": "13.5.6",
       "license": "MIT"
     },
+    "apps/nextjs13-approuter/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "apps/nextjs13-approuter/node_modules/next": {
       "version": "13.5.6",
       "license": "MIT",
@@ -212,6 +247,41 @@
       "version": "13.5.6",
       "license": "MIT"
     },
+    "apps/nextjs13-pagerouter/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "apps/nextjs13-pagerouter/node_modules/next": {
       "version": "13.5.6",
       "license": "MIT",
@@ -292,6 +362,41 @@
         "react-dom": "^18.2.0"
       }
     },
+    "apps/nextjs14-approuter/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "apps/nextjs14-pagerouter": {
       "version": "2.3.0",
       "dependencies": {
@@ -302,6 +407,41 @@
         "react-dom": "^18.2.0"
       }
     },
+    "apps/nextjs14-pagerouter/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "apps/wpds-kitchen-sink": {
       "extraneous": true
     },
@@ -328,10 +468,10 @@
         "@washingtonpost/site-footer": "0.25.3-alpha.1",
         "@washingtonpost/tachyons-css": "^1.8.0",
         "@washingtonpost/wpds-assets": "2.0.0",
-        "@washingtonpost/wpds-kitchen-sink": "2.3.0",
-        "@washingtonpost/wpds-tailwind-theme": "2.3.0",
-        "@washingtonpost/wpds-tokens": "2.3.0",
-        "@washingtonpost/wpds-ui-kit": "2.3.0",
+        "@washingtonpost/wpds-kitchen-sink": "*",
+        "@washingtonpost/wpds-tailwind-theme": "*",
+        "@washingtonpost/wpds-tokens": "*",
+        "@washingtonpost/wpds-ui-kit": "file:../packages/kit",
         "fuse.js": "^6.6.2",
         "gray-matter": "^4.0.2",
         "lz-string": "^1.4.4",
@@ -6647,7 +6787,8 @@
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -7419,7 +7560,8 @@
     },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.1.4",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz",
+      "integrity": "sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "1.0.1",
@@ -8209,7 +8351,8 @@
     },
     "node_modules/@radix-ui/react-switch": {
       "version": "1.0.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "1.0.1",
@@ -12028,19 +12171,23 @@
     },
     "node_modules/@washingtonpost/icon-tokens": {
       "version": "1.9.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/@washingtonpost/icon-tokens/-/icon-tokens-1.9.1.tgz",
+      "integrity": "sha512-S9rF8EaWGBONuukT0Q16+CN17zVO7ovVH/o3bcWzNjkN/0oAXEuH6rPbeI4tqqE84tuCzaM85+g7bHLAHZpjFw=="
     },
     "node_modules/@washingtonpost/logo-tokens": {
       "version": "1.9.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/@washingtonpost/logo-tokens/-/logo-tokens-1.9.1.tgz",
+      "integrity": "sha512-cUoVvJSy9CGXlnQpUhHQxejezk4g0t5/9VhWUourzh3biRP/JQ5I3vxu0UmzVSsxTQ58JUcn0+d78ZM4Ixly8g=="
     },
     "node_modules/@washingtonpost/motion-tokens": {
       "version": "1.9.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/@washingtonpost/motion-tokens/-/motion-tokens-1.9.1.tgz",
+      "integrity": "sha512-gAnK5LjXTESAYvE4JcANkMsJfLqwQcxc8BBvgNpxu4iqKQ/PK4XhLeGqluMXaxoHZqqkdP9FvOT0gkWYRuIMmw=="
     },
     "node_modules/@washingtonpost/shadow-tokens": {
       "version": "1.9.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/@washingtonpost/shadow-tokens/-/shadow-tokens-1.9.1.tgz",
+      "integrity": "sha512-V6LEzXzFVcfWZLd7v3VU2wzymcBjX5nw6nLdJn0rN8Qn465wHqsTPitrKlcgp+Hq0JMtlPvBgXDOIZc+UIeR0w=="
     },
     "node_modules/@washingtonpost/site-favicons": {
       "version": "0.3.4-alpha.1",
@@ -12067,6 +12214,41 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@washingtonpost/site-footer/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/@washingtonpost/site-user-data": {
       "version": "0.6.2-alpha.2",
       "dependencies": {
@@ -12088,7 +12270,8 @@
     },
     "node_modules/@washingtonpost/spacing-tokens": {
       "version": "1.9.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/@washingtonpost/spacing-tokens/-/spacing-tokens-1.9.1.tgz",
+      "integrity": "sha512-erhg0ofHhfQnbPcSr9R/eHDmdz3XhWzhoOpjFYGn/B2XIngg4N2Bd5WE/+2ZAMGScm+C2r87roYQRsJKb6a60A=="
     },
     "node_modules/@washingtonpost/subs-sdk": {
       "version": "1.21.5",
@@ -12125,203 +12308,45 @@
         "@washingtonpost/wpds-ui-kit": "latest"
       }
     },
-    "node_modules/@washingtonpost/tachyons-css/node_modules/@washingtonpost/eslint-plugin-wpds": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*"
-      }
-    },
     "node_modules/@washingtonpost/tachyons-css/node_modules/@washingtonpost/wpds-ui-kit": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/eslint-plugin-wpds": "1.24.0",
-        "@washingtonpost/wpds-accordion": "1.24.0",
-        "@washingtonpost/wpds-action-menu": "1.24.0",
-        "@washingtonpost/wpds-alert-banner": "1.24.0",
-        "@washingtonpost/wpds-app-bar": "1.24.0",
-        "@washingtonpost/wpds-avatar": "1.24.0",
-        "@washingtonpost/wpds-box": "1.24.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-card": "1.24.0",
-        "@washingtonpost/wpds-carousel": "1.24.0",
-        "@washingtonpost/wpds-checkbox": "1.24.0",
-        "@washingtonpost/wpds-container": "1.24.0",
-        "@washingtonpost/wpds-dialog": "1.24.0",
-        "@washingtonpost/wpds-divider": "1.24.0",
-        "@washingtonpost/wpds-drawer": "1.24.0",
-        "@washingtonpost/wpds-error-message": "1.24.0",
-        "@washingtonpost/wpds-fieldset": "1.24.0",
-        "@washingtonpost/wpds-helper-text": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-password": "1.24.0",
-        "@washingtonpost/wpds-input-search": "1.24.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-input-text": "1.24.0",
-        "@washingtonpost/wpds-input-textarea": "1.24.0",
-        "@washingtonpost/wpds-navigation-menu": "1.24.0",
-        "@washingtonpost/wpds-pagination-dots": "1.24.0",
-        "@washingtonpost/wpds-popover": "1.24.0",
-        "@washingtonpost/wpds-radio-group": "1.24.0",
-        "@washingtonpost/wpds-scrim": "1.24.0",
-        "@washingtonpost/wpds-select": "1.24.0",
-        "@washingtonpost/wpds-switch": "1.24.0",
-        "@washingtonpost/wpds-tabs": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "@washingtonpost/wpds-tooltip": "1.24.0",
-        "@washingtonpost/wpds-visually-hidden": "1.24.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.79",
-        "@washingtonpost/eslint-plugin-wpds": "*",
-        "@washingtonpost/wpds-accordion": "*",
-        "@washingtonpost/wpds-action-menu": "*",
-        "@washingtonpost/wpds-alert-banner": "*",
-        "@washingtonpost/wpds-app-bar": "*",
-        "@washingtonpost/wpds-avatar": "*",
-        "@washingtonpost/wpds-box": "*",
-        "@washingtonpost/wpds-button": "*",
-        "@washingtonpost/wpds-card": "*",
-        "@washingtonpost/wpds-carousel": "*",
-        "@washingtonpost/wpds-checkbox": "*",
-        "@washingtonpost/wpds-container": "*",
-        "@washingtonpost/wpds-dialog": "*",
-        "@washingtonpost/wpds-divider": "*",
-        "@washingtonpost/wpds-drawer": "*",
-        "@washingtonpost/wpds-error-message": "*",
-        "@washingtonpost/wpds-fieldset": "*",
-        "@washingtonpost/wpds-helper-text": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-password": "*",
-        "@washingtonpost/wpds-input-search": "*",
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-input-text": "*",
-        "@washingtonpost/wpds-input-textarea": "*",
-        "@washingtonpost/wpds-navigation-menu": "*",
-        "@washingtonpost/wpds-pagination-dots": "*",
-        "@washingtonpost/wpds-popover": "*",
-        "@washingtonpost/wpds-radio-group": "*",
-        "@washingtonpost/wpds-scrim": "*",
-        "@washingtonpost/wpds-select": "*",
-        "@washingtonpost/wpds-switch": "*",
-        "@washingtonpost/wpds-tabs": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-tooltip": "*",
-        "@washingtonpost/wpds-visually-hidden": "*"
-      }
-    },
-    "node_modules/@washingtonpost/typography-tokens": {
-      "version": "1.9.1",
-      "license": "ISC"
-    },
-    "node_modules/@washingtonpost/wpds-accordion": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-accordion": "^1.1.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.18.0",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-accordion/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-action-menu": {
-      "version": "1.24.0",
-      "license": "MIT",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "2.0.3",
-        "@washingtonpost/wpds-assets": "^1.20.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-divider": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.20.0",
-        "@washingtonpost/wpds-button": "^1.7.0",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-action-menu/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-alert-banner": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-app-bar": "1.24.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-container": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-app-bar": "*",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "*",
-        "@washingtonpost/wpds-container": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-alert-banner/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
       },
       "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
       }
     },
-    "node_modules/@washingtonpost/wpds-app-bar": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
+    "node_modules/@washingtonpost/typography-tokens": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/typography-tokens/-/typography-tokens-1.9.1.tgz",
+      "integrity": "sha512-Nq/KTKohoO35MEHe3HuQRpFR3KpC6qP7XyDw7HT4mV3AhkD3p99Zz/XjALXEk0/Cb/9WWpaZgeR7naWbsLOyEQ=="
     },
     "node_modules/@washingtonpost/wpds-assets": {
       "version": "2.0.0",
@@ -12335,667 +12360,26 @@
         "react-dom": "^18.2.0"
       }
     },
-    "node_modules/@washingtonpost/wpds-avatar": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-avatar": "latest",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@radix-ui/react-avatar": "latest",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-box": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-button": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-card": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-carousel": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "^1.0.0",
-        "@radix-ui/react-use-controllable-state": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-pagination-dots": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "nanoid": "^3.3.4",
-        "react-swipeable": "^7.0.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-pagination-dots": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-carousel/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-checkbox": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-checkbox": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "@washingtonpost/wpds-visually-hidden": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@radix-ui/react-checkbox": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-visually-hidden": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-checkbox/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-container": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-dialog": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.5",
-        "@radix-ui/react-use-controllable-state": "^1.0.1",
-        "@washingtonpost/wpds-assets": "^1.23.1",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-dialog/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-divider": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-separator": "^1.0.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
     "node_modules/@washingtonpost/wpds-docs": {
       "resolved": "build.washingtonpost.com",
       "link": true
     },
-    "node_modules/@washingtonpost/wpds-drawer": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-focus-scope": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-scrim": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-scrim": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-drawer/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-error-message": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-fieldset": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-helper-text": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-icon": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "@washingtonpost/wpds-visually-hidden": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-visually-hidden": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-label": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-label": "^1.0.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-password": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-text": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-text": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-password/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-search": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@reach/combobox": "^0.18.0",
-        "@reach/popover": "^0.18.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-text": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "match-sorter": "6.3.1"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.18.0",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-text": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-search/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-shared": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-text": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-label": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-error-message": "1.24.0",
-        "@washingtonpost/wpds-helper-text": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "@washingtonpost/wpds-visually-hidden": "1.24.0",
-        "nanoid": "^3.3.4"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "*",
-        "@washingtonpost/wpds-divider": "*",
-        "@washingtonpost/wpds-error-message": "*",
-        "@washingtonpost/wpds-helper-text": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-visually-hidden": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-text/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-input-textarea": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-error-message": "1.24.0",
-        "@washingtonpost/wpds-helper-text": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "nanoid": "^3.3.4",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-error-message": "*",
-        "@washingtonpost/wpds-helper-text": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
     "node_modules/@washingtonpost/wpds-kitchen-sink": {
       "resolved": "packages/kitchen-sink",
       "link": true
     },
-    "node_modules/@washingtonpost/wpds-navigation-menu": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.11.7",
-        "@radix-ui/react-navigation-menu": "^1.1.2",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "popper-max-size-modifier": "^0.2.0",
-        "react-popper": "^2.3.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-pagination-dots": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-popover": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-popover": "^1.0.2",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-button": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "^1.18.0",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-popover/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-radio-group": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-radio-group": "^1.0.0",
-        "@washingtonpost/wpds-error-message": "1.24.0",
-        "@washingtonpost/wpds-fieldset": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "nanoid": "^3.3.3"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-error-message": "*",
-        "@washingtonpost/wpds-fieldset": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-scrim": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "^0.25.0",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-select": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-select": "^1.2.2",
-        "@radix-ui/react-use-controllable-state": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-divider": "1.24.0",
-        "@washingtonpost/wpds-icon": "1.24.0",
-        "@washingtonpost/wpds-input-label": "1.24.0",
-        "@washingtonpost/wpds-input-shared": "1.24.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "nanoid": "^3.3.4"
-      },
-      "peerDependencies": {
-        "@radix-ui/react-select": "^1.2.2",
-        "@radix-ui/react-use-controllable-state": "^1.0.0",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-divider": "*",
-        "@washingtonpost/wpds-icon": "*",
-        "@washingtonpost/wpds-input-label": "*",
-        "@washingtonpost/wpds-input-shared": "*",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-select/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-switch": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-switch": "^1.0.1",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "^1.0.2",
-        "@radix-ui/react-tabs": "latest",
-        "@washingtonpost/wpds-assets": "^1.22.0",
-        "@washingtonpost/wpds-icon": "1.1.0",
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "@washingtonpost/wpds-tooltip": "1.24.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@radix-ui/react-tabs": "latest",
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-tooltip": "*",
-        "react": "^16.8.6 || ^17.0.2",
-        "react-transition-group": "^4.4.5"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs/node_modules/@washingtonpost/wpds-assets": {
-      "version": "1.25.0",
-      "license": "ISC",
-      "dependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.1 || ^17.0.2",
-        "react-dom": "^16.0.1 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs/node_modules/@washingtonpost/wpds-icon": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.1.0",
-        "@washingtonpost/wpds-visually-hidden": "1.1.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "@washingtonpost/wpds-visually-hidden": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs/node_modules/@washingtonpost/wpds-icon/node_modules/@washingtonpost/wpds-theme": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@stitches/react": "^1.2.8"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs/node_modules/@washingtonpost/wpds-visually-hidden": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.1.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
-    "node_modules/@washingtonpost/wpds-tabs/node_modules/@washingtonpost/wpds-visually-hidden/node_modules/@washingtonpost/wpds-theme": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@stitches/react": "^1.2.8"
-      }
-    },
     "node_modules/@washingtonpost/wpds-tailwind-theme": {
       "resolved": "packages/tailwind-theme",
       "link": true
     },
-    "node_modules/@washingtonpost/wpds-theme": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@stitches/react": "^1.2.8"
-      }
-    },
     "node_modules/@washingtonpost/wpds-tokens": {
       "resolved": "packages/tokens",
       "link": true
     },
-    "node_modules/@washingtonpost/wpds-tooltip": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-tooltip": "^1.0.0",
-        "@washingtonpost/wpds-theme": "1.24.0"
-      },
-      "peerDependencies": {
-        "@radix-ui/react-tooltip": "^1.0.0",
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
     "node_modules/@washingtonpost/wpds-ui-kit": {
       "resolved": "packages/kit",
       "link": true
     },
-    "node_modules/@washingtonpost/wpds-visually-hidden": {
-      "version": "1.24.0",
-      "license": "MIT",
-      "dependencies": {
-        "@washingtonpost/wpds-theme": "1.24.0",
-        "react": "^16.8.6 || ^17.0.2"
-      },
-      "peerDependencies": {
-        "@washingtonpost/wpds-theme": "*",
-        "react": "^16.8.6 || ^17.0.2"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "dev": true,
@@ -30526,7 +29910,9 @@
     },
     "node_modules/popper-max-size-modifier": {
       "version": "0.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/popper-max-size-modifier/-/popper-max-size-modifier-0.2.0.tgz",
+      "integrity": "sha512-UerPt9pZfTFnpSpIBVJrR3ibHMuU1k5K01AyNLfMUWCr4z1MFH+dsayPlAF9ZeYExa02HPiQn5OIMqUSVtJEbg==",
+      "deprecated": "We recommend switching to Floating UI which supports this modifier out of the box: https://floating-ui.com/docs/size",
       "peerDependencies": {
         "@popperjs/core": "^2.2.0"
       }
@@ -31812,7 +31198,8 @@
     },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
     "node_modules/react-hook-form": {
       "version": "7.51.2",
@@ -31849,7 +31236,8 @@
     },
     "node_modules/react-popper": {
       "version": "2.3.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
       "dependencies": {
         "react-fast-compare": "^3.0.1",
         "warning": "^4.0.2"
@@ -37322,7 +36710,8 @@
     },
     "node_modules/warning": {
       "version": "4.0.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
       "dependencies": {
         "loose-envify": "^1.0.0"
       }
@@ -38459,6 +37848,41 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "packages/eslint-plugin/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "packages/eslint-plugin/node_modules/ansi-styles": {
       "version": "5.2.0",
       "dev": true,
@@ -39142,9 +38566,10 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.0",
+      "version": "2.3.1-canary.0",
       "license": "MIT",
       "dependencies": {
+        "@popperjs/core": "^2.11.6",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "latest",
         "@radix-ui/react-checkbox": "^1.0.0",
@@ -39152,12 +38577,14 @@
         "@radix-ui/react-dropdown-menu": "2.0.3",
         "@radix-ui/react-focus-scope": "^1.0.0",
         "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-navigation-menu": "^1.0.0",
         "@radix-ui/react-popover": "^1.0.2",
         "@radix-ui/react-primitive": "^1.0.2",
         "@radix-ui/react-radio-group": "^1.0.0",
         "@radix-ui/react-select": "^1.2.2",
         "@radix-ui/react-separator": "^1.0.0",
         "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-switch": "^1.0.0",
         "@radix-ui/react-tabs": "latest",
         "@radix-ui/react-tooltip": "^1.0.0",
         "@radix-ui/react-use-controllable-state": "^1.0.1",
@@ -39167,6 +38594,8 @@
         "@washingtonpost/wpds-assets": "2.0.0",
         "match-sorter": "6.3.1",
         "nanoid": "^3.3.4",
+        "popper-max-size-modifier": "^0.2.0",
+        "react-popper": "^2.2.5",
         "react-swipeable": "^7.0.0",
         "react-transition-group": "^4.4.5"
       },
@@ -39198,6 +38627,41 @@
         "react": "^18.2.0"
       }
     },
+    "packages/kitchen-sink/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "packages/tailwind-theme": {
       "name": "@washingtonpost/wpds-tailwind-theme",
       "version": "2.3.0",
@@ -39215,6 +38679,41 @@
         "@washingtonpost/wpds-ui-kit": "2.0.0-alpha.10"
       }
     },
+    "packages/tailwind-theme/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "packages/tokens": {
       "name": "@washingtonpost/wpds-tokens",
       "version": "2.3.0",
@@ -39239,6 +38738,56 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
+    },
+    "packages/tokens/node_modules/@washingtonpost/wpds-ui-kit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-ui-kit/-/wpds-ui-kit-2.3.0.tgz",
+      "integrity": "sha512-aDEmgDLRXGz0Ghd6swYU8sspsbY5mME0Z4POV+xp8VztUbQmz4VqpkDkc7iDKK0ceccJyMMFGee/9YLsMBVFCw==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "^1.0.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.3",
+        "@radix-ui/react-focus-scope": "^1.0.0",
+        "@radix-ui/react-label": "^1.0.0",
+        "@radix-ui/react-popover": "^1.0.2",
+        "@radix-ui/react-primitive": "^1.0.2",
+        "@radix-ui/react-radio-group": "^1.0.0",
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-separator": "^1.0.0",
+        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-tooltip": "^1.0.0",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
+        "@reach/combobox": "^0.18.0",
+        "@reach/popover": "^0.18.0",
+        "@stitches/react": "^1.2.8",
+        "@washingtonpost/wpds-assets": "2.0.0",
+        "match-sorter": "6.3.1",
+        "nanoid": "^3.3.4",
+        "react-swipeable": "^7.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "packages/tokens/node_modules/@washingtonpost/wpds-ui-kit/node_modules/@washingtonpost/wpds-assets": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-assets/-/wpds-assets-2.0.0.tgz",
+      "integrity": "sha512-ZYXOv5rEEq3A+BT3izaJdTTf/x1rMkRSKjVS6jwJ+YGVifp1fUPTB9fGPRxCxEnWTRjo0a+xXIe0tUK36YvjEw==",
+      "dev": true,
+      "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
     }
   }
 }
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 392595507..66d2ada1c 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.0",
+  "version": "2.3.1-canary.0",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
@@ -29,7 +29,8 @@
     "build": "npm run build:transform && tsup && npm run build-types",
     "build-types": "tsup src/index.ts --dts-only",
     "dev": "tsup --watch",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "canary": "npm run build && npm version prerelease --preid=canary && npm publish --tag=canary"
   },
   "bugs": {
     "url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
@@ -47,6 +48,8 @@
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-navigation-menu": "^1.0.0",
     "@radix-ui/react-slot": "^1.0.0",
     "@radix-ui/react-tabs": "latest",
     "@radix-ui/react-tooltip": "^1.0.0",
@@ -58,7 +61,10 @@
     "match-sorter": "6.3.1",
     "nanoid": "^3.3.4",
     "react-swipeable": "^7.0.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "react-popper": "^2.2.5",
+    "popper-max-size-modifier": "^0.2.0",
+    "@popperjs/core": "^2.11.6"
   },
   "devDependencies": {
     "tsup": "8.0.2",
diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index cb75f0484..fa39f2a50 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -14,6 +14,7 @@ const StyledContainer = styled("div", {
   overflow: "auto",
   position: "fixed",
   transition: drawerTransition,
+  contentVisibility: "auto",
   variants: {
     position: {
       top: { top: 0, right: 0, left: 0 },
diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 29c9d8e91..c4c12ec6b 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -13,6 +13,7 @@ const StyledContainer = styled("div", {
   position: "fixed",
   transition: scrimTransition,
   inset: 0,
+  contentVisibility: "auto",
   "@reducedMotion": {
     transition: "none",
   },
@@ -37,35 +38,48 @@ interface ScrimProps extends React.ComponentPropsWithRef<"div"> {
     | Token<"shell", string, "zIndices", "wpds">;
 }
 
+const htmlGlobalCSS = wpCSS({
+  html: {
+    contain: "layout style",
+    "&[data-scrim-state='open']": {
+      maxHeight: "100vh",
+      overflow: "hidden",
+    },
+    "&[data-scrim-state='closed']": {
+      maxHeight: "",
+      overflow: "",
+    },
+  },
+});
+
 export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
   (
     { lockScroll = true, open, zIndex = theme.zIndices.shell, css, ...props },
     ref
   ) => {
+    const [isPending, startTransition] = useTransition();
+    const [isMounted, setIsMounted] = React.useState(false);
+
+    htmlGlobalCSS();
+
     React.useEffect(() => {
       if (!lockScroll || typeof window === "undefined") return;
 
-      const htmlCSS = wpCSS({
-        maxHeight: "100vh",
-        overflow: "hidden",
-      })();
-
-      if (open) {
-        document.body.style.marginRight = `${
-          window.innerWidth - document.body.clientWidth
-        }px`;
-        document.documentElement.classList.add(htmlCSS.className);
-      }
+      startTransition(() => {
+        if (open) {
+          document.body.style.marginRight = `${
+            window.innerWidth - document.body.clientWidth
+          }px`;
+          document.documentElement.dataset.scrimState = "open";
+        }
 
-      if (!open) {
-        document.documentElement.classList.remove(htmlCSS.className);
-        document.body.style.marginRight = "";
-      }
+        if (!open) {
+          document.documentElement.dataset.scrimState = "closed";
+          document.body.style.marginRight = "";
+        }
+      });
     }, [open, lockScroll]);
 
-    const [isPending, startTransition] = useTransition();
-    const [isMounted, setIsMounted] = React.useState(false);
-
     React.useEffect(() => {
       startTransition(() => {
         if (open) {
diff --git a/turbo.json b/turbo.json
index dd2336d5a..1ed550644 100644
--- a/turbo.json
+++ b/turbo.json
@@ -19,6 +19,9 @@
     },
     "start": {
       "cache": false
+    },
+    "canary": {
+      "cache": false
     }
   }
 }

From e629a7ecb31803c58d5968f8a3d0f47ff34c494e Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Thu, 6 Jun 2024 06:31:33 -0400
Subject: [PATCH 07/25] chore: commit save point

---
 package-lock.json         | 2 +-
 packages/kit/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 761cfd8ae..b56d1a8a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.0",
+      "version": "2.3.1-canary.1",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 66d2ada1c..2169c9050 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.0",
+  "version": "2.3.1-canary.1",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",

From 90fdf83718e77bdfc13f381512d89cf1c3436f5d Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 11:37:41 -0400
Subject: [PATCH 08/25] feat: add should render logic to help with mounting and
 unmounting animations

---
 packages/kit/src/drawer/DrawerContent.tsx | 56 ++++++++++++++++++++---
 packages/kit/src/scrim/Scrim.tsx          | 32 +++++++------
 2 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index fa39f2a50..fdeda93c0 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -1,11 +1,36 @@
 import React, { useState, useEffect, useTransition } from "react";
 import { FocusScope } from "@radix-ui/react-focus-scope";
-import { styled, theme } from "../theme";
+import { styled, theme, keyframes } from "../theme";
 import type * as WPDS from "../theme";
 import { DrawerContext } from "./DrawerRoot";
 
 const drawerTransition = `transform ${theme.transitions.normal} ${theme.transitions.inOut}, opacity ${theme.transitions.normal} ${theme.transitions.inOut}`;
 
+const animateInFromTop = keyframes({
+  from: { transform: "translateY(-100%)" },
+  to: { transform: "translateY(0)" },
+});
+
+const animationOutFromTop = keyframes({
+  from: { transform: "translateY(0)" },
+  to: { transform: "translateY(-100%)" },
+});
+
+const animateInFromRight = keyframes({
+  from: { transform: "translateX(100%)" },
+  to: { transform: "translateX(0)" },
+});
+
+const animateInFromBottom = keyframes({
+  from: { transform: "translateY(100%)" },
+  to: { transform: "translateY(0)" },
+});
+
+const animateInFromLeft = keyframes({
+  from: { transform: "translateX(-100%)" },
+  to: { transform: "translateX(0)" },
+});
+
 const StyledContainer = styled("div", {
   backgroundColor: theme.colors.secondary,
   boxShadow: theme.shadows["300"],
@@ -31,15 +56,19 @@ const StyledContainer = styled("div", {
     opacity: 1,
     // data=position="top" or "bottom" or "left" or "right"
     "&[data-position='top']": {
+      animation: `${animateInFromTop} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateY(0)",
     },
     "&[data-position='right']": {
+      animation: `${animateInFromRight} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateX(0)",
     },
     "&[data-position='bottom']": {
+      animation: `${animateInFromBottom} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateY(0)",
     },
     "&[data-position='left']": {
+      animation: `${animateInFromLeft} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateX(0)",
     },
   },
@@ -49,15 +78,18 @@ const StyledContainer = styled("div", {
     opacity: 0,
     // data=position="top" or "bottom" or "left" or "right"
     "&[data-position='top']": {
-      transform: "translateY(-100%)",
+      animate: `${animationOutFromTop} ${theme.transitions.normal} ${theme.transitions.inOut}`,
     },
     "&[data-position='right']": {
+      animate: `${animateInFromRight} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateX(100%)",
     },
     "&[data-position='bottom']": {
+      animate: `${animateInFromBottom} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateY(100%)",
     },
     "&[data-position='left']": {
+      animate: `${animateInFromLeft} ${theme.transitions.normal} ${theme.transitions.inOut}`,
       transform: "translateX(-100%)",
     },
   },
@@ -101,7 +133,7 @@ export const DrawerContent = React.forwardRef<
     ref
   ) => {
     const context = React.useContext(DrawerContext);
-    const [, startTransition] = useTransition();
+    const [isPending, startTransition] = useTransition();
 
     const handleTransitionEnd = () => {
       if (!context.open) {
@@ -133,13 +165,21 @@ export const DrawerContent = React.forwardRef<
       });
     }, [context.open]);
 
-    const [isMounted, setIsMounted] = useState(context.open);
+    const [shouldRender, setShouldRender] = useState(false);
 
     useEffect(() => {
-      setIsMounted(true);
-    }, []);
+      if (context.open) {
+        setShouldRender(true);
+      }
+    }, [context.open]);
+
+    const handleAnimationEnd = () => {
+      if (!isPending && !context.open) {
+        setShouldRender(false);
+      }
+    };
 
-    return isMounted ? (
+    return shouldRender ? (
       <FocusScope loop={loopFocus} trapped={trapFocus} asChild>
         <StyledContainer
           ref={ref}
@@ -155,6 +195,8 @@ export const DrawerContent = React.forwardRef<
           }}
           position={position}
           onTransitionEnd={handleTransitionEnd}
+          onAnimationStart={handleEnter}
+          onAnimationEnd={handleAnimationEnd}
           {...props}
         >
           <StyledInner className={innerClassName}>{children}</StyledInner>
diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index c4c12ec6b..f56da400d 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -1,4 +1,4 @@
-import React, { useTransition } from "react";
+import React, { useEffect, useState, useTransition } from "react";
 import { styled, theme, css as wpCSS } from "../theme";
 import type * as WPDS from "../theme";
 import type { Token } from "@stitches/react/types/theme";
@@ -58,7 +58,6 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     ref
   ) => {
     const [isPending, startTransition] = useTransition();
-    const [isMounted, setIsMounted] = React.useState(false);
 
     htmlGlobalCSS();
 
@@ -80,23 +79,27 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
       });
     }, [open, lockScroll]);
 
-    React.useEffect(() => {
-      startTransition(() => {
-        if (open) {
-          setIsMounted(true);
-        }
-      });
-    }, [open]);
-
     const handleTransitionEnd = () => {
       if (!open) {
-        startTransition(() => {
-          setIsMounted(false);
-        });
+        document.documentElement.dataset.scrimState = "";
+      }
+    };
+
+    const [shouldRender, setShouldRender] = useState(false);
+
+    useEffect(() => {
+      if (open) {
+        setShouldRender(true);
+      }
+    }, [open]);
+
+    const handleAnimationEnd = () => {
+      if (!isPending && !open) {
+        setShouldRender(false);
       }
     };
 
-    return isMounted || isPending ? (
+    return shouldRender ? (
       <StyledContainer
         data-state={open ? "open" : "closed"}
         ref={ref}
@@ -104,6 +107,7 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
         aria-hidden={true}
         {...props}
         onTransitionEnd={handleTransitionEnd}
+        onAnimationEnd={handleAnimationEnd}
       ></StyledContainer>
     ) : null;
   }

From 3ba569df08fba8c2fabf3aabd18cff402628d1fc Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 11:42:47 -0400
Subject: [PATCH 09/25] feat: add should render logic to help with mounting and
 unmounting animations

---
 packages/kit/src/scrim/Scrim.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index f56da400d..d21e7f6aa 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useTransition } from "react";
-import { styled, theme, css as wpCSS } from "../theme";
+import { styled, theme, css as wpCSS, keyframes } from "../theme";
 import type * as WPDS from "../theme";
 import type { Token } from "@stitches/react/types/theme";
 import type { StandardLonghandProperties } from "@stitches/react/types/css";
@@ -8,6 +8,16 @@ const NAME = "Scrim";
 
 const scrimTransition = `opacity ${theme.transitions.normal} ${theme.transitions.inOut}`;
 
+const fadeInAnimation = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+const fadeOutAnimation = keyframes({
+  from: { opacity: 1 },
+  to: { opacity: 0 },
+});
+
 const StyledContainer = styled("div", {
   backgroundColor: theme.colors.alpha50,
   position: "fixed",
@@ -18,9 +28,11 @@ const StyledContainer = styled("div", {
     transition: "none",
   },
   "&[data-state='open']": {
+    animation: `${fadeInAnimation} ${theme.transitions.normal} ${theme.transitions.inOut}`,
     opacity: 1,
   },
   "&[data-state='closed']": {
+    fadeOutAnimation: `${fadeOutAnimation} ${theme.transitions.normal} ${theme.transitions.inOut}`,
     opacity: 0,
   },
 });

From 05b8db697fe87a87fb9c1a367b3bba5c10f6ed2e Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 11:53:39 -0400
Subject: [PATCH 10/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index d21e7f6aa..12f38651f 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -102,6 +102,8 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     useEffect(() => {
       if (open) {
         setShouldRender(true);
+      } else {
+        setShouldRender(false);
       }
     }, [open]);
 

From 2b02811c98369f560cf1ac6ac2f4362e29b0a844 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 11:54:09 -0400
Subject: [PATCH 11/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 12f38651f..043c752d4 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -102,13 +102,11 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     useEffect(() => {
       if (open) {
         setShouldRender(true);
-      } else {
-        setShouldRender(false);
       }
     }, [open]);
 
     const handleAnimationEnd = () => {
-      if (!isPending && !open) {
+      if (!open) {
         setShouldRender(false);
       }
     };

From 5094b015fd2f4ec42a410e5a6a7fb9a519bed9bf Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 12:00:05 -0400
Subject: [PATCH 12/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 043c752d4..d21e7f6aa 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -106,7 +106,7 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     }, [open]);
 
     const handleAnimationEnd = () => {
-      if (!open) {
+      if (!isPending && !open) {
         setShouldRender(false);
       }
     };

From 99dc59d1e78b0a2452541429fbe4e76c89962c72 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 12:05:25 -0400
Subject: [PATCH 13/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index d21e7f6aa..982b30cad 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -93,7 +93,10 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
 
     const handleTransitionEnd = () => {
       if (!open) {
-        document.documentElement.dataset.scrimState = "";
+        document.documentElement.dataset.scrimState = "closed";
+      }
+      if (!open) {
+        setShouldRender(false);
       }
     };
 
@@ -106,7 +109,7 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     }, [open]);
 
     const handleAnimationEnd = () => {
-      if (!isPending && !open) {
+      if (!open) {
         setShouldRender(false);
       }
     };

From 03e392a2ec1979fab02ae38d64b82b9642ac133b Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 12:19:52 -0400
Subject: [PATCH 14/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index 982b30cad..cf4b1f22a 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -92,10 +92,8 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     }, [open, lockScroll]);
 
     const handleTransitionEnd = () => {
-      if (!open) {
+      if (!isPending && !open) {
         document.documentElement.dataset.scrimState = "closed";
-      }
-      if (!open) {
         setShouldRender(false);
       }
     };
@@ -109,7 +107,7 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
     }, [open]);
 
     const handleAnimationEnd = () => {
-      if (!open) {
+      if (!isPending && !open) {
         setShouldRender(false);
       }
     };

From 4818fd4ba1e947acb42da1207a10d11928d6ee61 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 14:44:03 -0400
Subject: [PATCH 15/25] chore: commit save point

---
 package-lock.json                         | 2 +-
 packages/kit/package.json                 | 2 +-
 packages/kit/src/drawer/DrawerContent.tsx | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b56d1a8a4..afbf54c97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.1",
+      "version": "2.3.1-canary.2",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 2169c9050..e7cd26a14 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.1",
+  "version": "2.3.1-canary.2",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index fdeda93c0..88e93a38e 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -138,6 +138,7 @@ export const DrawerContent = React.forwardRef<
     const handleTransitionEnd = () => {
       if (!context.open) {
         handleExit();
+        setShouldRender(false);
       }
     };
 

From 03b6462e5a4d674365f2dd6138c0e558f9323c5a Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 15:00:40 -0400
Subject: [PATCH 16/25] chore: commit save point

---
 package-lock.json         | 2 +-
 packages/kit/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index afbf54c97..775c7e810 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.2",
+      "version": "2.3.1-canary.3",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index e7cd26a14..e44991835 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.2",
+  "version": "2.3.1-canary.3",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",

From a64be41d4922741f44aa3f550c52261845078f2a Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 23:18:00 -0400
Subject: [PATCH 17/25] chore: commit save point

---
 package-lock.json                                          | 2 +-
 packages/kit/package.json                                  | 2 +-
 packages/kit/src/switch/play.stories.tsx                   | 2 +-
 packages/kit/src/theme/useResponsiveScreenSize.stories.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 775c7e810..ce1b097a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.3",
+      "version": "2.3.1-canary.4",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index e44991835..c259e866c 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.3",
+  "version": "2.3.1-canary.4",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
diff --git a/packages/kit/src/switch/play.stories.tsx b/packages/kit/src/switch/play.stories.tsx
index ab8393831..d19096984 100644
--- a/packages/kit/src/switch/play.stories.tsx
+++ b/packages/kit/src/switch/play.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Switch } from ".";
 import type { ComponentMeta, ComponentStory } from "@storybook/react";
-import { styled } from "@washingtonpost/wpds-ui-kit";
+import { styled } from "../theme";
 import { userEvent, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 
diff --git a/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx b/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
index d4c0ce76f..55ee371da 100644
--- a/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
+++ b/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 import { within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
-import { Box } from "@washingtonpost/wpds-box";
+import { Box } from "./../box/";
 import { useResponsiveScreenSize } from "./useResponsiveScreenSize";
 
 const allModes = {

From a4d523c7a762310f8e7776e644f75121ed62e01c Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 23:21:06 -0400
Subject: [PATCH 18/25] chore: commit save point

---
 .prettierignore  |  4 ++++
 Makefile         |  4 ++++
 ui/kit/README.md | 23 +++++++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 ui/kit/README.md

diff --git a/.prettierignore b/.prettierignore
index b240afd2d..430506b49 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -9,4 +9,8 @@ out
 jest-coverage
 plop-templates
 /ui/theme/src/tokens.ts
+<<<<<<< Updated upstream
 /packages/kit/src/theme/tokens.ts
+=======
+ui/theme/src/tokens.ts
+>>>>>>> Stashed changes
diff --git a/Makefile b/Makefile
index 7e12bb03b..8dc077549 100644
--- a/Makefile
+++ b/Makefile
@@ -23,7 +23,11 @@ boop-checkout:
 # create main release
 main-release:
 	make main-version
+<<<<<<< Updated upstream
 	npm run build
+=======
+	npm run turbo:build:ui:force
+>>>>>>> Stashed changes
 	make boop-checkout
 	make main-publish
 	npm install
diff --git a/ui/kit/README.md b/ui/kit/README.md
new file mode 100644
index 000000000..0c2339edf
--- /dev/null
+++ b/ui/kit/README.md
@@ -0,0 +1,23 @@
+# @washingtonpost/wpds-ui-kit
+
+```bash
+npm i @washingtonpost/wpds-ui-kit
+```
+
+```jsx
+import * as React from "react";
+import * as Kit from "@washingtonpost/wpds-ui-kit";
+import * as Icons from "@washingtonpost/wpds-assets";
+
+export const MyCoolComponent = () => {
+  return (
+    <Kit.Icon label="Garlic is king.">
+      <Icons.Garlic />
+    </Kit.Icon>
+  );
+};
+```
+
+Visit https://build.washingtonpost.com for more information.
+
+Thank you!

From 351a2951999a37865cb0086495d4480d083dc83b Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Fri, 7 Jun 2024 23:31:19 -0400
Subject: [PATCH 19/25] chore: commit save point

---
 .prettierignore | 5 -----
 Makefile        | 4 ----
 tsconfig.json   | 2 +-
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 430506b49..8832a70a1 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -8,9 +8,4 @@ node_modules
 out
 jest-coverage
 plop-templates
-/ui/theme/src/tokens.ts
-<<<<<<< Updated upstream
 /packages/kit/src/theme/tokens.ts
-=======
-ui/theme/src/tokens.ts
->>>>>>> Stashed changes
diff --git a/Makefile b/Makefile
index 8dc077549..7e12bb03b 100644
--- a/Makefile
+++ b/Makefile
@@ -23,11 +23,7 @@ boop-checkout:
 # create main release
 main-release:
 	make main-version
-<<<<<<< Updated upstream
 	npm run build
-=======
-	npm run turbo:build:ui:force
->>>>>>> Stashed changes
 	make boop-checkout
 	make main-publish
 	npm install
diff --git a/tsconfig.json b/tsconfig.json
index 91bab4fe6..b7ffd5dcd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
-  "exclude": ["./ui/theme/src/tokens.ts"],
+  "exclude": ["./packages/kit/src/theme/tokens.ts"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

From 5f96cf6b08fa67b2de62045685a28cf5b9f0503b Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Sat, 8 Jun 2024 01:08:36 -0400
Subject: [PATCH 20/25] chore: commit save point

---
 package-lock.json                         | 2 +-
 packages/kit/package.json                 | 2 +-
 packages/kit/src/drawer/DrawerContent.tsx | 6 ++++++
 packages/kit/src/scrim/Scrim.tsx          | 6 ++++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ce1b097a2..34d4e9536 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.4",
+      "version": "2.3.1-canary.5",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index c259e866c..6151aaf3c 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.4",
+  "version": "2.3.1-canary.5",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index 88e93a38e..80a50af47 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -172,6 +172,12 @@ export const DrawerContent = React.forwardRef<
       if (context.open) {
         setShouldRender(true);
       }
+
+      // This is a workaround for a bug in Jest where animations are not run
+      // https://klaviyo.tech/hitting-a-moving-target-testing-javascript-animations-in-react-with-jest-8284a530a35a
+      if (process.env.NODE_ENV === "test" && !context.open) {
+        setShouldRender(false);
+      }
     }, [context.open]);
 
     const handleAnimationEnd = () => {
diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
index cf4b1f22a..20f447f93 100644
--- a/packages/kit/src/scrim/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -104,6 +104,12 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
       if (open) {
         setShouldRender(true);
       }
+
+      // This is a workaround for a bug in Jest where animations are not run
+      // https://klaviyo.tech/hitting-a-moving-target-testing-javascript-animations-in-react-with-jest-8284a530a35a
+      if (process.env.NODE_ENV === "test" && !open) {
+        setShouldRender(false);
+      }
     }, [open]);
 
     const handleAnimationEnd = () => {

From a34e10fe8affa62b88a96efe105c110145773458 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Sat, 8 Jun 2024 01:22:24 -0400
Subject: [PATCH 21/25] chore: commit save point

---
 packages/kit/src/scrim/Scrim.test.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/kit/src/scrim/Scrim.test.tsx b/packages/kit/src/scrim/Scrim.test.tsx
index 59e6933df..7b9063e79 100644
--- a/packages/kit/src/scrim/Scrim.test.tsx
+++ b/packages/kit/src/scrim/Scrim.test.tsx
@@ -10,11 +10,14 @@ describe("Scrim", () => {
   test("removes style and margin from body when closed ", () => {
     const { rerender } = render(<Scrim open={true} />);
     expect(document.documentElement).toHaveAttribute(
-      "class",
-      expect.stringContaining("wpds")
+      "data-scrim-state",
+      "open"
     );
 
     rerender(<Scrim open={false} />);
-    expect(document.documentElement).not.toHaveClass();
+    expect(document.documentElement).toHaveAttribute(
+      "data-scrim-state",
+      "closed"
+    );
   });
 });

From ece044972608553ec05f8ea016925c1bbcc4279b Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Sat, 8 Jun 2024 02:19:26 -0400
Subject: [PATCH 22/25] chore: commit save point

---
 ui/kit/README.md | 23 -----------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 ui/kit/README.md

diff --git a/ui/kit/README.md b/ui/kit/README.md
deleted file mode 100644
index 0c2339edf..000000000
--- a/ui/kit/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# @washingtonpost/wpds-ui-kit
-
-```bash
-npm i @washingtonpost/wpds-ui-kit
-```
-
-```jsx
-import * as React from "react";
-import * as Kit from "@washingtonpost/wpds-ui-kit";
-import * as Icons from "@washingtonpost/wpds-assets";
-
-export const MyCoolComponent = () => {
-  return (
-    <Kit.Icon label="Garlic is king.">
-      <Icons.Garlic />
-    </Kit.Icon>
-  );
-};
-```
-
-Visit https://build.washingtonpost.com for more information.
-
-Thank you!

From c0fd4467676659e612311c7691a2727b8b88fa8c Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Mon, 10 Jun 2024 14:18:43 -0400
Subject: [PATCH 23/25] chore: commit save point

---
 packages/kit/src/drawer/DrawerContent.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index 80a50af47..94c1b878f 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -74,7 +74,6 @@ const StyledContainer = styled("div", {
   },
   // data-state="closed"
   "&[data-state='closed']": {
-    transform: "translateX(100%)",
     opacity: 0,
     // data=position="top" or "bottom" or "left" or "right"
     "&[data-position='top']": {

From e84a002f5bf63b08935a00f59f3f8a2fa061904d Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Mon, 10 Jun 2024 14:34:34 -0400
Subject: [PATCH 24/25] chore: commit save point

---
 packages/kit/src/drawer/DrawerContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/drawer/DrawerContent.tsx b/packages/kit/src/drawer/DrawerContent.tsx
index 94c1b878f..916d62a0d 100644
--- a/packages/kit/src/drawer/DrawerContent.tsx
+++ b/packages/kit/src/drawer/DrawerContent.tsx
@@ -52,7 +52,6 @@ const StyledContainer = styled("div", {
     transition: "none",
   },
   "&[data-state='open']": {
-    transform: "translateX(0)",
     opacity: 1,
     // data=position="top" or "bottom" or "left" or "right"
     "&[data-position='top']": {
@@ -78,6 +77,7 @@ const StyledContainer = styled("div", {
     // data=position="top" or "bottom" or "left" or "right"
     "&[data-position='top']": {
       animate: `${animationOutFromTop} ${theme.transitions.normal} ${theme.transitions.inOut}`,
+      transform: "translateY(-100%)",
     },
     "&[data-position='right']": {
       animate: `${animateInFromRight} ${theme.transitions.normal} ${theme.transitions.inOut}`,

From 280b6af6e546a5fecd3e0f6c0be2ccf8def1eb55 Mon Sep 17 00:00:00 2001
From: Arturo Silva <arturo.silva@washpost.com>
Date: Tue, 11 Jun 2024 13:12:35 -0400
Subject: [PATCH 25/25] chore: commit save point

---
 package-lock.json         | 2 +-
 packages/kit/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 34d4e9536..0a2e23100 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38566,7 +38566,7 @@
     },
     "packages/kit": {
       "name": "@washingtonpost/wpds-ui-kit",
-      "version": "2.3.1-canary.5",
+      "version": "2.3.0",
       "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 6151aaf3c..b56fae421 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@washingtonpost/wpds-ui-kit",
-  "version": "2.3.1-canary.5",
+  "version": "2.3.0",
   "description": "WPDS UI Kit",
   "author": "WPDS Support <wpds@washpost.com>",
   "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",