From c4e1554fbb5bc91df448d3e2e62ebd55e34a19d0 Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.singer@ligo.org>
Date: Mon, 27 May 2024 17:46:25 -0400
Subject: [PATCH] Return to stable uswds and nasawds releases

- https://github.com/uswds/uswds/issues/5825 has been fixed.
- https://github.com/lpsinger/react-uswds/tree/gcn is the same as
  https://github.com/trussworks/react-uswds/pull/2726, but rebased.
- I had to update some CSS where we have heavily customized the
  appearance of some USWDS components.
---
 app/components/CredentialCard.tsx             | 53 ++++++++-------
 .../ToolbarButtonGroup/index.module.scss      |  3 +
 app/components/ToolbarButtonGroup/index.tsx   | 28 ++++++++
 app/components/tabs/index.module.scss         |  5 ++
 app/img/checkbox-indeterminate.svg            | 10 ---
 .../route.tsx                                 | 10 ++-
 .../DateSelectorMenu.tsx                      |  2 +-
 .../SortSelectorButton.tsx                    |  2 +-
 .../circulars._archive._index/route.tsx       | 12 ++--
 .../RichEditor/index.tsx                      |  2 +-
 app/routes/circulars.moderation._index.tsx    |  7 +-
 .../EmailNotificationCard.tsx                 |  6 +-
 app/theme.scss                                | 25 -------
 package-lock.json                             | 66 +++++++++++++++----
 package.json                                  |  4 +-
 15 files changed, 142 insertions(+), 93 deletions(-)
 create mode 100644 app/components/ToolbarButtonGroup/index.module.scss
 create mode 100644 app/components/ToolbarButtonGroup/index.tsx
 delete mode 100644 app/img/checkbox-indeterminate.svg

diff --git a/app/components/CredentialCard.tsx b/app/components/CredentialCard.tsx
index a27d7960f..40642b954 100644
--- a/app/components/CredentialCard.tsx
+++ b/app/components/CredentialCard.tsx
@@ -19,6 +19,7 @@ import {
 import { useRef } from 'react'
 
 import TimeAgo from './TimeAgo'
+import { ToolbarButtonGroup } from './ToolbarButtonGroup'
 import type { RedactedClientCredential } from '~/routes/user.credentials/client_credentials.server'
 
 export default function CredentialCard({
@@ -54,33 +55,35 @@ export default function CredentialCard({
           </div>
         </div>
         <div className="tablet:grid-col flex-auto margin-y-auto">
-          <ModalToggleButton
-            opener
-            disabled={disabled}
-            modalRef={ref}
-            type="button"
-            className="usa-button--secondary"
-          >
-            <Icon.Delete
-              role="presentation"
-              className="bottom-aligned margin-right-05"
-            />
-            Delete
-          </ModalToggleButton>
-          <Form
-            method="GET"
-            action="/quickstart/alerts"
-            className="display-inline"
-          >
-            <input type="hidden" name="clientId" value={client_id} />
-            <Button disabled={disabled} type="submit">
-              Select
-              <Icon.ArrowForward
+          <ToolbarButtonGroup>
+            <ModalToggleButton
+              opener
+              disabled={disabled}
+              modalRef={ref}
+              type="button"
+              className="usa-button--secondary"
+            >
+              <Icon.Delete
                 role="presentation"
-                className="bottom-aligned margin-left-05"
+                className="bottom-aligned margin-right-05"
               />
-            </Button>
-          </Form>
+              Delete
+            </ModalToggleButton>
+            <Form
+              method="GET"
+              action="/quickstart/alerts"
+              className="display-inline"
+            >
+              <input type="hidden" name="clientId" value={client_id} />
+              <Button disabled={disabled} type="submit">
+                Select
+                <Icon.ArrowForward
+                  role="presentation"
+                  className="bottom-aligned margin-left-05"
+                />
+              </Button>
+            </Form>
+          </ToolbarButtonGroup>
         </div>
       </Grid>
       <Modal
diff --git a/app/components/ToolbarButtonGroup/index.module.scss b/app/components/ToolbarButtonGroup/index.module.scss
new file mode 100644
index 000000000..c3acdbc2f
--- /dev/null
+++ b/app/components/ToolbarButtonGroup/index.module.scss
@@ -0,0 +1,3 @@
+.toolbar :global(.usa-button) {
+  text-wrap: nowrap;
+}
diff --git a/app/components/ToolbarButtonGroup/index.tsx b/app/components/ToolbarButtonGroup/index.tsx
new file mode 100644
index 000000000..8dcdd746c
--- /dev/null
+++ b/app/components/ToolbarButtonGroup/index.tsx
@@ -0,0 +1,28 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ButtonGroup } from '@trussworks/react-uswds'
+import classNames from 'classnames'
+
+import styles from './index.module.css'
+
+/**
+ * A segmented button group with some styling appropriate for toolbars.
+ *
+ * - Do not wrap the text within buttons.
+ */
+export function ToolbarButtonGroup({
+  className,
+  ...props
+}: Omit<Parameters<typeof ButtonGroup>[0], 'type'>) {
+  return (
+    <ButtonGroup
+      className={classNames(className, 'flex-auto', styles.toolbar)}
+      {...props}
+    />
+  )
+}
diff --git a/app/components/tabs/index.module.scss b/app/components/tabs/index.module.scss
index 7f3fa6a34..b48b8b835 100644
--- a/app/components/tabs/index.module.scss
+++ b/app/components/tabs/index.module.scss
@@ -7,6 +7,11 @@
  */
 
 .tabs {
+  &,
+  & :global(.usa-button-group.usa-button-group--segmented) {
+    align-items: end;
+  }
+
   :global(.usa-button-group__item) {
     :global(.usa-button) {
       box-shadow: 0px 0px 0px 0px;
diff --git a/app/img/checkbox-indeterminate.svg b/app/img/checkbox-indeterminate.svg
deleted file mode 100644
index 9c1152983..000000000
--- a/app/img/checkbox-indeterminate.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M2.9,35.9c0,1.1,0.4,2,1.2,2.8c0.8,0.8,1.7,1.2,2.8,1.2h7.9h42.3c1.1,0,2-0.4,2.8-1.2s1.2-1.7,1.2-2.8l0,0V28
-	c0-1.1-0.4-2-1.2-2.8S58.2,24,57.1,24H6.9c-1.1,0-2,0.4-2.8,1.2S2.9,26.9,2.9,28V35.9z"/>
-</svg>
diff --git a/app/routes/circulars.$circularId.($version)/route.tsx b/app/routes/circulars.$circularId.($version)/route.tsx
index 5e8922f2d..d3e9ed1ff 100644
--- a/app/routes/circulars.$circularId.($version)/route.tsx
+++ b/app/routes/circulars.$circularId.($version)/route.tsx
@@ -18,6 +18,7 @@ import { MarkdownBody, PlainTextBody } from './Body'
 import { FrontMatter } from './FrontMatter'
 import DetailsDropdownButton from '~/components/DetailsDropdownButton'
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import { origin } from '~/lib/env.server'
 import { getCanonicalUrlHeaders, pickHeaders } from '~/lib/headers.server'
 import { useSearchString } from '~/lib/utils'
@@ -72,8 +73,11 @@ export default function () {
   }`
   return (
     <>
-      <ButtonGroup>
-        <Link to={`/circulars${searchString}`} className="usa-button">
+      <ToolbarButtonGroup className="flex-wrap">
+        <Link
+          to={`/circulars${searchString}`}
+          className="usa-button flex-align-stretch"
+        >
           <div className="position-relative">
             <Icon.ArrowBack
               role="presentation"
@@ -135,7 +139,7 @@ export default function () {
             Edit
           </Link>
         )}
-      </ButtonGroup>
+      </ToolbarButtonGroup>
       <h1 className="margin-bottom-0">GCN Circular {circularId}</h1>
       <FrontMatter {...frontMatter} />
       <Body className="margin-y-2">{body}</Body>
diff --git a/app/routes/circulars._archive._index/DateSelectorMenu.tsx b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
index c18d76f5a..be09a6665 100644
--- a/app/routes/circulars._archive._index/DateSelectorMenu.tsx
+++ b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
@@ -42,7 +42,7 @@ function DateSelectorButton({
   endDate?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>
diff --git a/app/routes/circulars._archive._index/SortSelectorButton.tsx b/app/routes/circulars._archive._index/SortSelectorButton.tsx
index 9f26823ad..24a01e106 100644
--- a/app/routes/circulars._archive._index/SortSelectorButton.tsx
+++ b/app/routes/circulars._archive._index/SortSelectorButton.tsx
@@ -31,7 +31,7 @@ function SortButton({
   sort?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
index fbfc1aca0..a3c04c0c8 100644
--- a/app/routes/circulars._archive._index/route.tsx
+++ b/app/routes/circulars._archive._index/route.tsx
@@ -17,7 +17,6 @@ import {
 import {
   Alert,
   Button,
-  ButtonGroup,
   Icon,
   Label,
   Select,
@@ -46,6 +45,7 @@ import CircularsIndex from './CircularsIndex'
 import { DateSelector } from './DateSelectorMenu'
 import { SortSelector } from './SortSelectorButton'
 import Hint from '~/components/Hint'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import { origin } from '~/lib/env.server'
 import { getFormDataString } from '~/lib/utils'
 import { postZendeskRequest } from '~/lib/zendesk.server'
@@ -185,7 +185,7 @@ export default function () {
           {requestedChangeCount > 1 ? 's' : ''}
         </Link>
       )}
-      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-300">
+      <ToolbarButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-300">
         <Form
           preventScrollReset
           className="display-inline-block usa-search usa-search--small"
@@ -197,6 +197,7 @@ export default function () {
           </Label>
           <TextInput
             autoFocus
+            className="minw-15"
             id="query"
             name="query"
             type="search"
@@ -223,14 +224,11 @@ export default function () {
         />
         {query && <SortSelector form={formId} defaultValue={sort} />}
         <Link to={`/circulars/new${searchString}`}>
-          <Button
-            type="button"
-            className="height-4 padding-top-0 padding-bottom-0"
-          >
+          <Button type="button" className="padding-y-1">
             <Icon.Edit role="presentation" /> New
           </Button>
         </Link>
-      </ButtonGroup>
+      </ToolbarButtonGroup>
       <Hint id="searchHint">
         Search for Circulars by submitter, subject, or body text (e.g. 'Fermi
         GRB'). <br />
diff --git a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
index 7f6aeb961..6d959849f 100644
--- a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
+++ b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
@@ -44,7 +44,7 @@ import iconTable from '@gitlab/svgs/dist/sprite_icons/table.svg'
 function SlimButton({ className, ...props }: Parameters<typeof Button>[0]) {
   return (
     <Button
-      className={classNames(className, 'height-4 padding-y-0 padding-x-105')}
+      className={classNames(className, 'height-4 padding-y-1 padding-x-105')}
       {...props}
     />
   )
diff --git a/app/routes/circulars.moderation._index.tsx b/app/routes/circulars.moderation._index.tsx
index 1a5af24d5..70d2af53f 100644
--- a/app/routes/circulars.moderation._index.tsx
+++ b/app/routes/circulars.moderation._index.tsx
@@ -8,7 +8,7 @@
 import type { SEOHandle } from '@nasa-gcn/remix-seo'
 import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { Form, Link, useLoaderData } from '@remix-run/react'
-import { Button, ButtonGroup, Checkbox, Grid } from '@trussworks/react-uswds'
+import { Button, Checkbox, Grid } from '@trussworks/react-uswds'
 import { useState } from 'react'
 
 import { getUser } from './_auth/user.server'
@@ -22,6 +22,7 @@ import {
   moderatorGroup,
 } from './circulars/circulars.server'
 import SegmentedCards from '~/components/SegmentedCards'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import type { BreadcrumbHandle } from '~/root/Title'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -74,14 +75,14 @@ export default function () {
     <>
       <h2>Pending Corrections</h2>
       <Form method="POST">
-        <ButtonGroup>
+        <ToolbarButtonGroup>
           <Link to="/circulars" className="usa-button usa-button--outline">
             Back
           </Link>
           <Button type="submit" secondary disabled={selectedCount === 0}>
             Delete Selected
           </Button>
-        </ButtonGroup>
+        </ToolbarButtonGroup>
         <SegmentedCards>
           {changeRequests.map((correction) => (
             <CircularChangeRequestRow
diff --git a/app/routes/user.email._index/EmailNotificationCard.tsx b/app/routes/user.email._index/EmailNotificationCard.tsx
index e7e36102c..be0005424 100644
--- a/app/routes/user.email._index/EmailNotificationCard.tsx
+++ b/app/routes/user.email._index/EmailNotificationCard.tsx
@@ -2,7 +2,6 @@ import { Form, useFetcher } from '@remix-run/react'
 import type { ModalRef } from '@trussworks/react-uswds'
 import {
   Button,
-  ButtonGroup,
   Grid,
   Icon,
   Modal,
@@ -14,6 +13,7 @@ import { useEffect, useRef } from 'react'
 
 import type { EmailNotificationVM } from '../user.email/email_notices.server'
 import TimeAgo from '~/components/TimeAgo'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 
 export default function EmailNotificationCard({
   uuid,
@@ -60,7 +60,7 @@ export default function EmailNotificationCard({
             </div>
           </div>
           <div className="tablet:grid-col flex-auto">
-            <ButtonGroup>
+            <ToolbarButtonGroup>
               <testFetcher.Form method="POST">
                 <input type="hidden" name="recipient" value={recipient} />
                 <input type="hidden" name="intent" value="sendTest" />
@@ -95,7 +95,7 @@ export default function EmailNotificationCard({
                 />
                 Delete
               </ModalToggleButton>
-            </ButtonGroup>
+            </ToolbarButtonGroup>
           </div>
         </Grid>
         <Grid row className="width-full">
diff --git a/app/theme.scss b/app/theme.scss
index 90b9beb9d..c7bb21afd 100644
--- a/app/theme.scss
+++ b/app/theme.scss
@@ -283,31 +283,6 @@ input.react-tags__combobox-input:focus {
   font-weight: bold;
 }
 
-/*
- * Indeterminate checkboxes.
- * FIXME: remove if/when https://github.com/uswds/uswds/pull/5549 is merged
- */
-
-.usa-checkbox__input:indeterminate {
-  &:not(:disabled) {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: #0050d8;
-      box-shadow: 0 0 0 2px #0050d8;
-    }
-  }
-  &:disabled {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: rgba(27, 27, 27, 0.3);
-    }
-  }
-}
-
 /*
  * Hero formatting
  */
diff --git a/package-lock.json b/package-lock.json
index 91635a52a..4fbd6200c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@remix-run/css-bundle": "^2.8.1",
         "@remix-run/node": "^2.8.1",
         "@remix-run/react": "^2.8.1",
-        "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+        "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
         "@xmldom/xmldom": "^0.8.10",
         "aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
         "classnames": "^2.5.1",
@@ -112,7 +112,7 @@
         "jest-transform-stub": "^2.0.0",
         "lint-staged": "^15.2.5",
         "lowlight": "^3.0.0",
-        "nasawds": "^4.0.2-beta.1",
+        "nasawds": "^4.0.63",
         "npm-run-all": "^4.1.5",
         "oidc-provider": "^8.4.3",
         "postcss-csso": "^6.0.1",
@@ -16034,14 +16034,15 @@
       }
     },
     "node_modules/@trussworks/react-uswds": {
-      "version": "6.2.0",
-      "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#03b023640a08afaf246873665a2f5ca5433b8056",
+      "version": "9.0.0",
+      "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#554d643a710eaf134c76f8cd7b2a78d66788a709",
       "license": "Apache-2.0",
       "engines": {
-        "node": ">= 16.20.0"
+        "node": ">= 18"
       },
       "peerDependencies": {
         "@uswds/uswds": "^3.7.1",
+        "focus-trap-react": "^10.2.3",
         "react": "^16.x || ^17.x || ^18.x",
         "react-dom": "^16.x || ^17.x || ^18.x"
       }
@@ -16678,9 +16679,10 @@
       "dev": true
     },
     "node_modules/@uswds/uswds": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.7.1.tgz",
-      "integrity": "sha512-32u2S50bf5dwIujebqL+f1Jgx2rmRrpxcaccSZzdo3Qv9HaDUdcmeavlrxHqN30edHc7p8kRPjvjevOmOJKB7w==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.0.tgz",
+      "integrity": "sha512-rMwCXe/u4HGkfskvS1Iuabapi/EXku3ChaIFW7y/dUhc7R1TXQhbbfp8YXEjmXPF0yqJnv9T08WPgS0fQqWZ8w==",
+      "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
         "classlist-polyfill": "1.2.0",
@@ -18356,6 +18358,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+      "license": "Unlicense",
       "peer": true
     },
     "node_modules/classnames": {
@@ -19706,6 +19709,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
       "integrity": "sha512-QCqAWP3kwj8Gz9UXncVXQGdrhnWxD8SQBSeZp5pOsyCcQ6RpL738L1/tfuwBiMi6F1fYkxqPnBrFBR4L+f49Cg==",
+      "license": "CC0-1.0",
       "peer": true,
       "engines": {
         "node": ">=4.0.0"
@@ -21462,6 +21466,32 @@
       "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
       "dev": true
     },
+    "node_modules/focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "node_modules/focus-trap-react": {
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.3.tgz",
+      "integrity": "sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "focus-trap": "^7.5.4",
+        "tabbable": "^6.2.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -25022,6 +25052,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keyboardevent-key-polyfill/-/keyboardevent-key-polyfill-1.1.0.tgz",
       "integrity": "sha512-NTDqo7XhzL1fqmUzYroiyK2qGua7sOMzLav35BfNA/mPUSCtw8pZghHFMTYR9JdnJ23IQz695FcaM6EE6bpbFQ==",
+      "license": "CC0-1.0",
       "peer": true
     },
     "node_modules/keygrip": {
@@ -26217,6 +26248,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
       "integrity": "sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/mdast-util-definitions": {
@@ -27722,10 +27754,11 @@
       "optional": true
     },
     "node_modules/nasawds": {
-      "version": "4.0.2-beta.1",
-      "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.2-beta.1.tgz",
-      "integrity": "sha512-iLfAarVN3Q4UdG2Chfl6Ay1qoq2QPeGWupaFXf+7UO3Uaaqxihl6T2jn+/gofPckg5RN9vrx3aVlfRjStA+b5w==",
-      "dev": true
+      "version": "4.0.63",
+      "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.63.tgz",
+      "integrity": "sha512-3nZn1ZZuTGteaiuDB0E56EEk0c9OmbSgZsUkNIE6/lGz7a7ebvzmptgow1KXBBjjGykLZx/jf1aUhyuvC10QSg==",
+      "dev": true,
+      "license": "CC0-1.0"
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
@@ -29689,6 +29722,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/receptor/-/receptor-1.0.0.tgz",
       "integrity": "sha512-yvVEqVQDNzEmGkluCkEdbKSXqZb3WGxotI/VukXIQ+4/BXEeXVjWtmC6jWaR1BIsmEAGYQy3OTaNgDj2Svr01w==",
+      "license": "CC0-1.0",
       "peer": true,
       "dependencies": {
         "element-closest": "^2.0.1",
@@ -30427,6 +30461,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/resolve-id-refs/-/resolve-id-refs-0.1.0.tgz",
       "integrity": "sha512-hNS03NEmVpJheF7yfyagNh57XuKc0z+NkSO0oBbeO67o6IJKoqlDfnNIxhjp7aTWwjmSWZQhtiGrOgZXVyM90w==",
+      "license": "CC0-1.0",
       "peer": true
     },
     "node_modules/resolve-pkg-maps": {
@@ -31802,6 +31837,13 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index b763b362e..893859c14 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@remix-run/css-bundle": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+    "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
     "@xmldom/xmldom": "^0.8.10",
     "aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
     "classnames": "^2.5.1",
@@ -130,7 +130,7 @@
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^15.2.5",
     "lowlight": "^3.0.0",
-    "nasawds": "^4.0.2-beta.1",
+    "nasawds": "^4.0.63",
     "npm-run-all": "^4.1.5",
     "oidc-provider": "^8.4.3",
     "postcss-csso": "^6.0.1",