From 06f78d2b1042f23a2f5e9cc305e8ff706d1fb524 Mon Sep 17 00:00:00 2001
From: Courtney Myers <courtney.myers@erg.com>
Date: Mon, 29 Jan 2024 12:50:23 -0500
Subject: [PATCH 1/3] Update importing of types to include type keyword inside
 named import block

---
 app/client/src/components/errorBoundary.tsx |  3 +--
 app/client/src/components/providers.tsx     |  3 +--
 app/client/src/contexts/dialog.tsx          |  9 +++++--
 app/client/src/contexts/notifications.tsx   |  9 +++++--
 app/client/src/contexts/rebateYear.tsx      |  9 +++++--
 app/client/src/routes/crf2022.tsx           |  2 +-
 app/client/src/routes/frf2022.tsx           |  2 +-
 app/client/src/routes/frf2023.tsx           |  2 +-
 app/client/src/routes/frfNew.tsx            |  8 +++----
 app/client/src/routes/helpdesk.tsx          | 14 +++++------
 app/client/src/routes/prf2022.tsx           |  2 +-
 app/client/src/routes/prf2023.tsx           |  2 +-
 app/client/src/routes/submissions.tsx       | 26 +++++++++++----------
 13 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/app/client/src/components/errorBoundary.tsx b/app/client/src/components/errorBoundary.tsx
index d3cb91e8..211f7af2 100644
--- a/app/client/src/components/errorBoundary.tsx
+++ b/app/client/src/components/errorBoundary.tsx
@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { Component, ErrorInfo } from "react";
+import { type ReactNode, Component, ErrorInfo } from "react";
 // ---
 import { messages } from "@/config";
 import { Message } from "@/components/message";
diff --git a/app/client/src/components/providers.tsx b/app/client/src/components/providers.tsx
index 02d078ca..b3b2ef76 100644
--- a/app/client/src/components/providers.tsx
+++ b/app/client/src/components/providers.tsx
@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { Suspense, lazy, useState, useEffect } from "react";
+import { type ReactNode, Suspense, lazy, useState, useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 // ---
 import { DialogProvider } from "@/contexts/dialog";
diff --git a/app/client/src/contexts/dialog.tsx b/app/client/src/contexts/dialog.tsx
index 5cd25cb0..fd9b8117 100644
--- a/app/client/src/contexts/dialog.tsx
+++ b/app/client/src/contexts/dialog.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;
diff --git a/app/client/src/contexts/notifications.tsx b/app/client/src/contexts/notifications.tsx
index 6fc70863..3600b919 100644
--- a/app/client/src/contexts/notifications.tsx
+++ b/app/client/src/contexts/notifications.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;
diff --git a/app/client/src/contexts/rebateYear.tsx b/app/client/src/contexts/rebateYear.tsx
index 13f01636..9823eb38 100644
--- a/app/client/src/contexts/rebateYear.tsx
+++ b/app/client/src/contexts/rebateYear.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;
diff --git a/app/client/src/routes/crf2022.tsx b/app/client/src/routes/crf2022.tsx
index f3572e11..c7e9f97f 100644
--- a/app/client/src/routes/crf2022.tsx
+++ b/app/client/src/routes/crf2022.tsx
@@ -9,6 +9,7 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioCRF2022Submission,
   getData,
   postData,
   useContentData,
@@ -24,7 +25,6 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type { FormioCRF2022Submission } from "@/utilities";
 
 type ServerResponse =
   | {
diff --git a/app/client/src/routes/frf2022.tsx b/app/client/src/routes/frf2022.tsx
index 30bc90bc..f918d519 100644
--- a/app/client/src/routes/frf2022.tsx
+++ b/app/client/src/routes/frf2022.tsx
@@ -9,6 +9,7 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioFRF2022Submission,
   getData,
   postData,
   useContentData,
@@ -25,7 +26,6 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
 import { useNotificationsActions } from "@/contexts/notifications";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type { FormioFRF2022Submission } from "@/utilities";
 
 type ServerResponse =
   | {
diff --git a/app/client/src/routes/frf2023.tsx b/app/client/src/routes/frf2023.tsx
index a7f7c2c6..58407d9b 100644
--- a/app/client/src/routes/frf2023.tsx
+++ b/app/client/src/routes/frf2023.tsx
@@ -9,6 +9,7 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioFRF2023Submission,
   getData,
   postData,
   useContentData,
@@ -25,7 +26,6 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
 import { useNotificationsActions } from "@/contexts/notifications";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type { FormioFRF2023Submission } from "@/utilities";
 
 type ServerResponse =
   | {
diff --git a/app/client/src/routes/frfNew.tsx b/app/client/src/routes/frfNew.tsx
index 622682ce..e3319674 100644
--- a/app/client/src/routes/frfNew.tsx
+++ b/app/client/src/routes/frfNew.tsx
@@ -6,6 +6,9 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type BapSamEntity,
+  type FormioFRF2022Submission,
+  type FormioFRF2023Submission,
   postData,
   useContentData,
   useConfigData,
@@ -17,11 +20,6 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { TextWithTooltip } from "@/components/tooltip";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type {
-  BapSamEntity,
-  FormioFRF2022Submission,
-  FormioFRF2023Submission,
-} from "@/utilities";
 
 /**
  * Creates the initial FRF submission data for a given rebate year
diff --git a/app/client/src/routes/helpdesk.tsx b/app/client/src/routes/helpdesk.tsx
index d86dde6a..4bdfdc1c 100644
--- a/app/client/src/routes/helpdesk.tsx
+++ b/app/client/src/routes/helpdesk.tsx
@@ -14,6 +14,11 @@ import {
   bapCRFStatusMap,
 } from "@/config";
 import {
+  type FormioFRF2022Submission,
+  type FormioPRF2022Submission,
+  type FormioCRF2022Submission,
+  type FormioFRF2023Submission,
+  type BapSubmission,
   getData,
   postData,
   useContentData,
@@ -25,17 +30,10 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { TextWithTooltip } from "@/components/tooltip";
 import {
+  type RebateYear,
   useRebateYearState,
   useRebateYearActions,
 } from "@/contexts/rebateYear";
-import type { RebateYear } from "@/contexts/rebateYear";
-import type {
-  FormioFRF2022Submission,
-  FormioPRF2022Submission,
-  FormioCRF2022Submission,
-  FormioFRF2023Submission,
-  BapSubmission,
-} from "@/utilities";
 
 type FormType = "frf" | "prf" | "crf";
 
diff --git a/app/client/src/routes/prf2022.tsx b/app/client/src/routes/prf2022.tsx
index e6f171eb..9d7ccf31 100644
--- a/app/client/src/routes/prf2022.tsx
+++ b/app/client/src/routes/prf2022.tsx
@@ -9,6 +9,7 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioPRF2022Submission,
   getData,
   postData,
   useContentData,
@@ -24,7 +25,6 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type { FormioPRF2022Submission } from "@/utilities";
 
 type ServerResponse =
   | {
diff --git a/app/client/src/routes/prf2023.tsx b/app/client/src/routes/prf2023.tsx
index 6b20889d..4c5416a8 100644
--- a/app/client/src/routes/prf2023.tsx
+++ b/app/client/src/routes/prf2023.tsx
@@ -9,6 +9,7 @@ import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioPRF2023Submission,
   getData,
   postData,
   useContentData,
@@ -24,7 +25,6 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
 import { useRebateYearState } from "@/contexts/rebateYear";
-import type { FormioPRF2023Submission } from "@/utilities";
 
 type ServerResponse =
   | {
diff --git a/app/client/src/routes/submissions.tsx b/app/client/src/routes/submissions.tsx
index 508a7195..09600605 100644
--- a/app/client/src/routes/submissions.tsx
+++ b/app/client/src/routes/submissions.tsx
@@ -1,10 +1,21 @@
 import { Fragment, useState } from "react";
-import type { LinkProps } from "react-router-dom";
-import { Link, useNavigate, useOutletContext } from "react-router-dom";
+import {
+  type LinkProps,
+  Link,
+  useNavigate,
+  useOutletContext,
+} from "react-router-dom";
 import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
 import {
+  type FormioFRF2022Submission,
+  type FormioPRF2022Submission,
+  type FormioCRF2022Submission,
+  type FormioFRF2023Submission,
+  type FormioPRF2023Submission,
+  // type FormioCRF2023Submission,
+  type Rebate,
   postData,
   useContentData,
   useConfigData,
@@ -20,19 +31,10 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { TextWithTooltip } from "@/components/tooltip";
 import { useNotificationsActions } from "@/contexts/notifications";
 import {
+  type RebateYear,
   useRebateYearState,
   useRebateYearActions,
 } from "@/contexts/rebateYear";
-import type { RebateYear } from "@/contexts/rebateYear";
-import type {
-  FormioFRF2022Submission,
-  FormioPRF2022Submission,
-  FormioCRF2022Submission,
-  FormioFRF2023Submission,
-  FormioPRF2023Submission,
-  // FormioCRF2023Submission,
-  Rebate,
-} from "@/utilities";
 
 const defaultTableRowClassNames = "bg-gray-5";
 const highlightedTableRowClassNames = "bg-primary-lighter";

From 4679352a0d7632bf026df82b4ec7855b065d429f Mon Sep 17 00:00:00 2001
From: Courtney Myers <courtney.myers@erg.com>
Date: Mon, 29 Jan 2024 14:58:49 -0500
Subject: [PATCH 2/3] Add clsx

---
 app/client/package-lock.json | 16 ++++++++++++++++
 app/client/package.json      |  1 +
 2 files changed, 17 insertions(+)

diff --git a/app/client/package-lock.json b/app/client/package-lock.json
index ff52c07d..fb2f3878 100644
--- a/app/client/package-lock.json
+++ b/app/client/package-lock.json
@@ -38,6 +38,7 @@
         "@typescript-eslint/parser": "6.7.4",
         "@vitejs/plugin-react-swc": "3.4.0",
         "autoprefixer": "10.4.16",
+        "clsx": "2.1.0",
         "eslint": "8.50.0",
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-react-refresh": "0.4.3",
@@ -2225,6 +2226,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7758,6 +7768,12 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
       "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
     },
+    "clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "dev": true
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/app/client/package.json b/app/client/package.json
index 14b919aa..a164bf41 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -26,6 +26,7 @@
     "@typescript-eslint/parser": "6.7.4",
     "@vitejs/plugin-react-swc": "3.4.0",
     "autoprefixer": "10.4.16",
+    "clsx": "2.1.0",
     "eslint": "8.50.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",

From 07ce01ddf503e349bdada830dcecc21796f01faa Mon Sep 17 00:00:00 2001
From: Courtney Myers <courtney.myers@erg.com>
Date: Mon, 29 Jan 2024 15:07:49 -0500
Subject: [PATCH 3/3] Wrap use of tailwindscss classes and other conditionally
 assigned classnames with clsx()

---
 .../src/components/confirmationDialog.tsx     | 77 +++++++++++-----
 app/client/src/components/notifications.tsx   | 69 +++++++++-----
 app/client/src/components/tooltip.tsx         | 13 +--
 app/client/src/routes/crf2022.tsx             | 41 +++++++--
 app/client/src/routes/frf2022.tsx             | 57 +++++++++---
 app/client/src/routes/frf2023.tsx             | 57 +++++++++---
 app/client/src/routes/frfNew.tsx              | 89 +++++++++++++------
 app/client/src/routes/helpdesk.tsx            |  5 +-
 app/client/src/routes/prf2022.tsx             | 41 +++++++--
 app/client/src/routes/prf2023.tsx             | 41 +++++++--
 app/client/src/routes/submissions.tsx         | 80 +++++++++++------
 11 files changed, 414 insertions(+), 156 deletions(-)

diff --git a/app/client/src/components/confirmationDialog.tsx b/app/client/src/components/confirmationDialog.tsx
index c2b61dca..0e48390f 100644
--- a/app/client/src/components/confirmationDialog.tsx
+++ b/app/client/src/components/confirmationDialog.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
 // ---
 import { useDialogState, useDialogActions } from "@/contexts/dialog";
 
@@ -23,7 +24,7 @@ export function ConfirmationDialog() {
     <Transition.Root show={dialogShown} as={Fragment}>
       <Dialog
         as="div"
-        className="tw-relative tw-z-10"
+        className={clsx("tw-relative tw-z-10")}
         initialFocus={cancelRef}
         open={dialogShown}
         onClose={(_ev) => {
@@ -33,42 +34,70 @@ export function ConfirmationDialog() {
       >
         <Transition.Child
           as={Fragment}
-          enter="tw-duration-300 tw-ease-out"
-          enterFrom="tw-opacity-0"
-          enterTo="tw-opacity-100"
-          leave="tw-duration-200 tw-ease-in"
-          leaveFrom="tw-opacity-100"
-          leaveTo="tw-opacity-0"
+          enter={clsx("tw-duration-300 tw-ease-out")}
+          enterFrom={clsx("tw-opacity-0")}
+          enterTo={clsx("tw-opacity-100")}
+          leave={clsx("tw-duration-200 tw-ease-in")}
+          leaveFrom={clsx("tw-opacity-100")}
+          leaveTo={clsx("tw-opacity-0")}
         >
-          <div className="tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors" />
+          <div
+            className={clsx(
+              "tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors",
+            )}
+          />
         </Transition.Child>
 
-        <div className="tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto">
-          <div className="tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4 sm:tw-items-center">
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4",
+              "sm:tw-items-center",
+            )}
+          >
             <Transition.Child
               as={Fragment}
-              enter="tw-duration-300 tw-ease-out"
-              enterFrom="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
-              enterTo="tw-translate-y-0 tw-opacity-100"
-              leave="tw-duration-200 tw-ease-in"
-              leaveFrom="tw-translate-y-0 tw-opacity-100"
-              leaveTo="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
+              enter={clsx("tw-duration-300 tw-ease-out")}
+              enterFrom={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
+              enterTo={clsx("tw-translate-y-0 tw-opacity-100")}
+              leave={clsx("tw-duration-200 tw-ease-in")}
+              leaveFrom={clsx("tw-translate-y-0 tw-opacity-100")}
+              leaveTo={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
             >
-              <Dialog.Panel className="tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all sm:tw-w-full sm:tw-max-w-md sm:tw-p-6">
+              <Dialog.Panel
+                className={clsx(
+                  "tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all",
+                  "sm:tw-w-full sm:tw-max-w-md sm:tw-p-6",
+                )}
+              >
                 {dismissable && dismissText && (
                   <div className="twpf">
-                    <div className="tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4">
+                    <div
+                      className={clsx(
+                        "tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4",
+                      )}
+                    >
                       <button
                         type="button"
-                        className="tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
+                        className={clsx(
+                          "tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
+                          "hover:tw-text-gray-700",
+                          "focus:tw-text-gray-700",
+                        )}
                         onClick={(_ev) => {
                           dismissedAction && dismissedAction();
                           resetDialog();
                         }}
                       >
-                        <span className="tw-sr-only">Close</span>
+                        <span className={clsx("tw-sr-only")}>Close</span>
                         <XMarkIcon
-                          className="tw-h-6 tw-w-6 tw-transition-none"
+                          className={clsx("tw-h-6 tw-w-6 tw-transition-none")}
                           aria-hidden="true"
                         />
                       </button>
@@ -76,12 +105,12 @@ export function ConfirmationDialog() {
                   </div>
                 )}
 
-                <div className="tw-m-4">
-                  <h2 className="tw-text-xl">{heading}</h2>
+                <div className={clsx("tw-m-4")}>
+                  <h2 className={clsx("tw-text-xl")}>{heading}</h2>
 
                   <div className="usa-prose">{description}</div>
 
-                  <div className="tw-mt-4">
+                  <div className={clsx("tw-mt-4")}>
                     <ul className="usa-button-group">
                       <li className="usa-button-group__item">
                         <button
diff --git a/app/client/src/components/notifications.tsx b/app/client/src/components/notifications.tsx
index c37a304c..38b88691 100644
--- a/app/client/src/components/notifications.tsx
+++ b/app/client/src/components/notifications.tsx
@@ -5,6 +5,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 import { XMarkIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 // ---
 import {
   useNotificationsState,
@@ -19,59 +20,83 @@ export function Notifications() {
     <div className="twpf">
       <div
         aria-live="assertive"
-        className="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4 sm:tw-items-start"
+        className={clsx(
+          "tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4",
+          "sm:tw-items-start",
+        )}
       >
-        <div className="tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4 sm:tw-items-end">
+        <div
+          className={clsx(
+            "tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4",
+            "sm:tw-items-end",
+          )}
+        >
           <Transition
             show={displayed}
             as={Fragment}
-            enter="tw-transform tw-transition tw-duration-300 tw-ease-out"
-            enterFrom="tw-translate-y-2 tw-opacity-0 sm:tw-translate-y-0 sm:tw-translate-x-2"
-            enterTo="tw-translate-y-0 tw-opacity-100 sm:tw-translate-x-0"
-            leave="tw-transition tw-duration-100 tw-ease-in"
-            leaveFrom="tw-opacity-100"
-            leaveTo="tw-opacity-0"
+            enter={clsx(
+              "tw-transform tw-transition tw-duration-300 tw-ease-out",
+            )}
+            enterFrom={clsx(
+              "tw-translate-y-2 tw-opacity-0",
+              "sm:tw-translate-y-0 sm:tw-translate-x-2",
+            )}
+            enterTo={clsx(
+              "tw-translate-y-0 tw-opacity-100",
+              "sm:tw-translate-x-0",
+            )}
+            leave={clsx("tw-transition tw-duration-100 tw-ease-in")}
+            leaveFrom={clsx("tw-opacity-100")}
+            leaveTo={clsx("tw-opacity-0")}
           >
-            <div className="tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10">
-              <div className="tw-p-4">
-                <div className="tw-flex tw-items-start">
-                  <div className="tw-flex-shrink-0">
+            <div
+              className={clsx(
+                "tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10",
+              )}
+            >
+              <div className={clsx("tw-p-4")}>
+                <div className={clsx("tw-flex tw-items-start")}>
+                  <div className={clsx("tw-flex-shrink-0")}>
                     {type === "info" ? (
                       <InformationCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-blue-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-blue-400")}
                         aria-hidden="true"
                       />
                     ) : type === "success" ? (
                       <CheckCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-green-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-green-400")}
                         aria-hidden="true"
                       />
                     ) : type === "warning" ? (
                       <ExclamationTriangleIcon
-                        className="tw-h-6 tw-w-6 tw-text-yellow-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-yellow-400")}
                         aria-hidden="true"
                       />
                     ) : type === "error" ? (
                       <XCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-red-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-red-400")}
                         aria-hidden="true"
                       />
                     ) : null}
                   </div>
 
-                  <div className="tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5">
+                  <div className={clsx("tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5")}>
                     {body}
                   </div>
 
-                  <div className="tw-flex-shrink-0">
+                  <div className={clsx("tw-flex-shrink-0")}>
                     <button
+                      className={clsx(
+                        "tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
+                        "hover:tw-text-gray-700",
+                        "focus:tw-text-gray-700",
+                      )}
                       type="button"
-                      className="tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
-                      onClick={() => dismissNotification({ id: 0 })}
+                      onClick={(_ev) => dismissNotification({ id: 0 })}
                     >
-                      <span className="tw-sr-only">Close</span>
+                      <span className={clsx("tw-sr-only")}>Close</span>
                       <XMarkIcon
-                        className="tw-h-5 tw-w-5 tw-transition-none"
+                        className={clsx("tw-h-5 tw-w-5 tw-transition-none")}
                         aria-hidden="true"
                       />
                     </button>
diff --git a/app/client/src/components/tooltip.tsx b/app/client/src/components/tooltip.tsx
index 2329a501..9fea67f9 100644
--- a/app/client/src/components/tooltip.tsx
+++ b/app/client/src/components/tooltip.tsx
@@ -1,4 +1,5 @@
 import { Root, Trigger, Portal, Content, Arrow } from "@radix-ui/react-tooltip";
+import clsx from "clsx";
 import icons from "uswds/img/sprite.svg";
 
 export function TextWithTooltip(props: {
@@ -9,17 +10,17 @@ export function TextWithTooltip(props: {
 }) {
   const { text, tooltip, iconName, iconClassNames } = props;
 
-  const svgClassNames = iconClassNames
-    ? `usa-icon text-base ${iconClassNames}`
-    : `usa-icon text-base`;
-
   return (
     <span className="display-inline-flex flex-align-center text-no-wrap">
       <Root delayDuration={0}>
         <Trigger asChild>
-          <button className="tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0">
+          <button
+            className={clsx(
+              "tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0",
+            )}
+          >
             <svg
-              className={svgClassNames}
+              className={clsx("usa-icon text-base", iconClassNames)}
               aria-hidden="true"
               focusable="false"
               role="img"
diff --git a/app/client/src/routes/crf2022.tsx b/app/client/src/routes/crf2022.tsx
index c7e9f97f..85ea267f 100644
--- a/app/client/src/routes/crf2022.tsx
+++ b/app/client/src/routes/crf2022.tsx
@@ -4,6 +4,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
 import { Formio, Form } from "@formio/react";
 import s3 from "formiojs/providers/storage/s3";
+import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -246,10 +247,18 @@ function CloseOutRequestForm(props: { email: string }) {
       </ul>
 
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
-        <div className="tw-fixed tw-inset-0 tw-bg-black/30" />
-        <div className="tw-fixed tw-inset-0 tw-z-20">
-          <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <Dialog.Panel className="tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl">
+        <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-center tw-justify-center",
+            )}
+          >
+            <Dialog.Panel
+              className={clsx(
+                "tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl",
+              )}
+            >
               <Loading />
             </Dialog.Panel>
           </div>
@@ -312,7 +321,11 @@ function CloseOutRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>
                           Close Out <em>{rebateId}</em> submitted successfully.
@@ -340,7 +353,11 @@ function CloseOutRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>Error submitting Close Out form.</>
                       ) : (
@@ -403,7 +420,11 @@ function CloseOutRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Draft saved successfully.
                     </p>
                   ),
@@ -415,7 +436,11 @@ function CloseOutRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Error saving draft.
                     </p>
                   ),
diff --git a/app/client/src/routes/frf2022.tsx b/app/client/src/routes/frf2022.tsx
index f918d519..076e8f5d 100644
--- a/app/client/src/routes/frf2022.tsx
+++ b/app/client/src/routes/frf2022.tsx
@@ -4,6 +4,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
 import { Formio, Form } from "@formio/react";
 import s3 from "formiojs/providers/storage/s3";
+import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -264,10 +265,12 @@ function FundingRequestForm(props: { email: string }) {
             id: Date.now(),
             body: (
               <>
-                <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                <p
+                  className={clsx("tw-text-sm tw-font-medium tw-text-gray-900")}
+                >
                   Error deleting Payment Request <em>{rebate.rebateId}</em>.
                 </p>
-                <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                <p className={clsx("tw-mt-1 tw-text-sm tw-text-gray-500")}>
                   Please notify the helpdesk that a problem exists preventing
                   the deletion of Payment Request form submission{" "}
                   <em>{rebate.rebateId}</em>.
@@ -284,7 +287,7 @@ function FundingRequestForm(props: { email: string }) {
         displayInfoNotification({
           id: Date.now(),
           body: (
-            <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+            <p className={clsx("tw-text-sm tw-font-medium tw-text-gray-900")}>
               Deleting Payment Request <em>{rebate.rebateId}</em>...
             </p>
           ),
@@ -305,10 +308,14 @@ function FundingRequestForm(props: { email: string }) {
               id: Date.now(),
               body: (
                 <>
-                  <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                  <p
+                    className={clsx(
+                      "tw-text-sm tw-font-medium tw-text-gray-900",
+                    )}
+                  >
                     Error deleting Payment Request <em>{rebate.rebateId}</em>.
                   </p>
-                  <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                  <p className={clsx("tw-mt-1 tw-text-sm tw-text-gray-500")}>
                     Please reload the page to attempt the deletion again, or
                     contact the helpdesk if the problem persists.
                   </p>
@@ -388,10 +395,18 @@ function FundingRequestForm(props: { email: string }) {
       </ul>
 
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
-        <div className="tw-fixed tw-inset-0 tw-bg-black/30" />
-        <div className="tw-fixed tw-inset-0 tw-z-20">
-          <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <Dialog.Panel className="tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl">
+        <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-center tw-justify-center",
+            )}
+          >
+            <Dialog.Panel
+              className={clsx(
+                "tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl",
+              )}
+            >
               <Loading />
             </Dialog.Panel>
           </div>
@@ -460,7 +475,11 @@ function FundingRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>
                           Application <em>{mongoId}</em> submitted successfully.
@@ -488,7 +507,11 @@ function FundingRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>Error submitting Application form.</>
                       ) : (
@@ -557,7 +580,11 @@ function FundingRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Draft saved successfully.
                     </p>
                   ),
@@ -569,7 +596,11 @@ function FundingRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Error saving draft.
                     </p>
                   ),
diff --git a/app/client/src/routes/frf2023.tsx b/app/client/src/routes/frf2023.tsx
index 58407d9b..e66dd0e5 100644
--- a/app/client/src/routes/frf2023.tsx
+++ b/app/client/src/routes/frf2023.tsx
@@ -4,6 +4,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
 import { Formio, Form } from "@formio/react";
 import s3 from "formiojs/providers/storage/s3";
+import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -250,10 +251,12 @@ function FundingRequestForm(props: { email: string }) {
             id: Date.now(),
             body: (
               <>
-                <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                <p
+                  className={clsx("tw-text-sm tw-font-medium tw-text-gray-900")}
+                >
                   Error deleting Payment Request <em>{rebate.rebateId}</em>.
                 </p>
-                <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                <p className={clsx("tw-mt-1 tw-text-sm tw-text-gray-500")}>
                   Please notify the helpdesk that a problem exists preventing
                   the deletion of Payment Request form submission{" "}
                   <em>{rebate.rebateId}</em>.
@@ -270,7 +273,7 @@ function FundingRequestForm(props: { email: string }) {
         displayInfoNotification({
           id: Date.now(),
           body: (
-            <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+            <p className={clsx("tw-text-sm tw-font-medium tw-text-gray-900")}>
               Deleting Payment Request <em>{rebate.rebateId}</em>...
             </p>
           ),
@@ -291,10 +294,14 @@ function FundingRequestForm(props: { email: string }) {
               id: Date.now(),
               body: (
                 <>
-                  <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                  <p
+                    className={clsx(
+                      "tw-text-sm tw-font-medium tw-text-gray-900",
+                    )}
+                  >
                     Error deleting Payment Request <em>{rebate.rebateId}</em>.
                   </p>
-                  <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                  <p className={clsx("tw-mt-1 tw-text-sm tw-text-gray-500")}>
                     Please reload the page to attempt the deletion again, or
                     contact the helpdesk if the problem persists.
                   </p>
@@ -374,10 +381,18 @@ function FundingRequestForm(props: { email: string }) {
       </ul>
 
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
-        <div className="tw-fixed tw-inset-0 tw-bg-black/30" />
-        <div className="tw-fixed tw-inset-0 tw-z-20">
-          <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <Dialog.Panel className="tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl">
+        <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-center tw-justify-center",
+            )}
+          >
+            <Dialog.Panel
+              className={clsx(
+                "tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl",
+              )}
+            >
               <Loading />
             </Dialog.Panel>
           </div>
@@ -436,7 +451,11 @@ function FundingRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>
                           Application <em>{mongoId}</em> submitted successfully.
@@ -464,7 +483,11 @@ function FundingRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>Error submitting Application form.</>
                       ) : (
@@ -524,7 +547,11 @@ function FundingRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Draft saved successfully.
                     </p>
                   ),
@@ -536,7 +563,11 @@ function FundingRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Error saving draft.
                     </p>
                   ),
diff --git a/app/client/src/routes/frfNew.tsx b/app/client/src/routes/frfNew.tsx
index e3319674..a76e1e3e 100644
--- a/app/client/src/routes/frfNew.tsx
+++ b/app/client/src/routes/frfNew.tsx
@@ -2,6 +2,7 @@ import { Fragment, useState } from "react";
 import { useNavigate, useOutletContext } from "react-router-dom";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
 import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
@@ -132,67 +133,103 @@ export function FRFNew() {
     <Transition.Root show={true} as={Fragment}>
       <Dialog
         as="div"
-        className="tw-relative tw-z-10"
+        className={clsx("tw-relative tw-z-10")}
         onClose={(_value) => navigate("/")}
       >
         <Transition.Child
           as={Fragment}
-          enter="tw-duration-300 tw-ease-out"
-          enterFrom="tw-opacity-0"
-          enterTo="tw-opacity-100"
-          leave="tw-duration-200 tw-ease-in"
-          leaveFrom="tw-opacity-100"
-          leaveTo="tw-opacity-0"
+          enter={clsx("tw-duration-300 tw-ease-out")}
+          enterFrom={clsx("tw-opacity-0")}
+          enterTo={clsx("tw-opacity-100")}
+          leave={clsx("tw-duration-200 tw-ease-in")}
+          leaveFrom={clsx("tw-opacity-100")}
+          leaveTo={clsx("tw-opacity-0")}
         >
-          <div className="tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors" />
+          <div
+            className={clsx(
+              "tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors",
+            )}
+          />
         </Transition.Child>
 
-        <div className="tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto">
-          <div className="tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4 sm:tw-items-center">
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4",
+              "sm:tw-items-center",
+            )}
+          >
             <Transition.Child
               as={Fragment}
-              enter="tw-duration-300 tw-ease-out"
-              enterFrom="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
-              enterTo="tw-translate-y-0 tw-opacity-100"
-              leave="tw-duration-200 tw-ease-in"
-              leaveFrom="tw-translate-y-0 tw-opacity-100"
-              leaveTo="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
+              enter={clsx("tw-duration-300 tw-ease-out")}
+              enterFrom={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
+              enterTo={clsx("tw-translate-y-0 tw-opacity-100")}
+              leave={clsx("tw-duration-200 tw-ease-in")}
+              leaveFrom={clsx("tw-translate-y-0 tw-opacity-100")}
+              leaveTo={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
             >
-              <Dialog.Panel className="tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all sm:tw-w-full sm:tw-max-w-4xl sm:tw-p-6">
+              <Dialog.Panel
+                className={clsx(
+                  "tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all",
+                  "sm:tw-w-full sm:tw-max-w-4xl sm:tw-p-6",
+                )}
+              >
                 <div className="twpf">
-                  <div className="tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4">
+                  <div
+                    className={clsx(
+                      "tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4",
+                    )}
+                  >
                     <button
+                      className={clsx(
+                        "tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
+                        "hover:tw-text-gray-700",
+                        "focus:tw-text-gray-700",
+                      )}
                       type="button"
-                      className="tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
                       onClick={(_ev) => navigate("/")}
                     >
-                      <span className="tw-sr-only">Close</span>
+                      <span className={clsx("tw-sr-only")}>Close</span>
                       <XMarkIcon
-                        className="tw-h-6 tw-w-6 tw-transition-none"
+                        className={clsx("tw-h-6 tw-w-6 tw-transition-none")}
                         aria-hidden="true"
                       />
                     </button>
                   </div>
                 </div>
 
-                <div className="tw-m-auto tw-max-w-3xl tw-p-4 sm:tw-p-8">
+                <div
+                  className={clsx("tw-m-auto tw-max-w-3xl tw-p-4", "sm:tw-p-8")}
+                >
                   {!frfSubmissionPeriodOpen ? (
-                    <div className="-tw-mb-4">
+                    <div className={clsx("-tw-mb-4")}>
                       <Message type="info" text={messages.frfClosed} />
                     </div>
                   ) : activeSamEntities.length <= 0 ? (
-                    <div className="-tw-mb-4">
+                    <div className={clsx("-tw-mb-4")}>
                       <Message type="info" text={messages.bapNoSamResults} />
                     </div>
                   ) : (
                     <>
                       {content && (
                         <MarkdownContent
-                          className="tw-mt-4 tw-text-center"
+                          className={clsx("tw-mt-4 tw-text-center")}
                           children={content.newFRFDialog}
                           components={{
                             h2: (props) => (
-                              <h2 className="tw-text-xl sm:tw-text-2xl md:tw-text-3xl">
+                              <h2
+                                className={clsx(
+                                  "tw-text-xl",
+                                  "sm:tw-text-2xl",
+                                  "md:tw-text-3xl",
+                                )}
+                              >
                                 {props.children}
                               </h2>
                             ),
diff --git a/app/client/src/routes/helpdesk.tsx b/app/client/src/routes/helpdesk.tsx
index 4bdfdc1c..42bee296 100644
--- a/app/client/src/routes/helpdesk.tsx
+++ b/app/client/src/routes/helpdesk.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Form } from "@formio/react";
+import clsx from "clsx";
 import icon from "uswds/img/usa-icons-bg/search--white.svg";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -200,8 +201,10 @@ export function Helpdesk() {
             </label>
             <select
               id="rebate-year"
+              className={clsx(
+                "tw-rounded-md tw-border-0 tw-text-sm tw-font-bold tw-leading-4 tw-ring-1 tw-ring-inset tw-ring-gray-300",
+              )}
               name="rebate-year"
-              className="tw-rounded-md tw-border-0 tw-text-sm tw-font-bold tw-leading-4 tw-ring-1 tw-ring-inset tw-ring-gray-300"
               onChange={(ev) => setRebateYear(ev.target.value as RebateYear)}
               defaultValue={rebateYear}
             >
diff --git a/app/client/src/routes/prf2022.tsx b/app/client/src/routes/prf2022.tsx
index 9d7ccf31..8355763f 100644
--- a/app/client/src/routes/prf2022.tsx
+++ b/app/client/src/routes/prf2022.tsx
@@ -4,6 +4,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
 import { Formio, Form } from "@formio/react";
 import s3 from "formiojs/providers/storage/s3";
+import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -267,10 +268,18 @@ function PaymentRequestForm(props: { email: string }) {
       </ul>
 
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
-        <div className="tw-fixed tw-inset-0 tw-bg-black/30" />
-        <div className="tw-fixed tw-inset-0 tw-z-20">
-          <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <Dialog.Panel className="tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl">
+        <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-center tw-justify-center",
+            )}
+          >
+            <Dialog.Panel
+              className={clsx(
+                "tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl",
+              )}
+            >
               <Loading />
             </Dialog.Panel>
           </div>
@@ -339,7 +348,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>
                           Payment Request <em>{rebateId}</em> submitted
@@ -368,7 +381,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>Error submitting Payment Request form.</>
                       ) : (
@@ -454,7 +471,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Draft saved successfully.
                     </p>
                   ),
@@ -466,7 +487,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Error saving draft.
                     </p>
                   ),
diff --git a/app/client/src/routes/prf2023.tsx b/app/client/src/routes/prf2023.tsx
index 4c5416a8..1f4b6a71 100644
--- a/app/client/src/routes/prf2023.tsx
+++ b/app/client/src/routes/prf2023.tsx
@@ -4,6 +4,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
 import { Formio, Form } from "@formio/react";
 import s3 from "formiojs/providers/storage/s3";
+import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -265,10 +266,18 @@ function PaymentRequestForm(props: { email: string }) {
       </ul>
 
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
-        <div className="tw-fixed tw-inset-0 tw-bg-black/30" />
-        <div className="tw-fixed tw-inset-0 tw-z-20">
-          <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <Dialog.Panel className="tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl">
+        <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-center tw-justify-center",
+            )}
+          >
+            <Dialog.Panel
+              className={clsx(
+                "tw-rounded-lg tw-bg-white tw-px-4 tw-pb-4 tw-shadow-xl",
+              )}
+            >
               <Loading />
             </Dialog.Panel>
           </div>
@@ -334,7 +343,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>
                           Payment Request <em>{rebateId}</em> submitted
@@ -363,7 +376,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       {onSubmitSubmission.state === "submitted" ? (
                         <>Error submitting Payment Request form.</>
                       ) : (
@@ -427,7 +444,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displaySuccessNotification({
                   id,
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Draft saved successfully.
                     </p>
                   ),
@@ -439,7 +460,11 @@ function PaymentRequestForm(props: { email: string }) {
                 displayErrorNotification({
                   id: Date.now(),
                   body: (
-                    <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                    <p
+                      className={clsx(
+                        "tw-text-sm tw-font-medium tw-text-gray-900",
+                      )}
+                    >
                       Error saving draft.
                     </p>
                   ),
diff --git a/app/client/src/routes/submissions.tsx b/app/client/src/routes/submissions.tsx
index 09600605..5be128f2 100644
--- a/app/client/src/routes/submissions.tsx
+++ b/app/client/src/routes/submissions.tsx
@@ -5,6 +5,7 @@ import {
   useNavigate,
   useOutletContext,
 } from "react-router-dom";
+import clsx from "clsx";
 import icons from "uswds/img/sprite.svg";
 // ---
 import { serverUrl, messages } from "@/config";
@@ -42,13 +43,16 @@ const highlightedTableRowClassNames = "bg-primary-lighter";
 function FormButtonLink(props: { type: "edit" | "view"; to: LinkProps["to"] }) {
   const icon = props.type === "edit" ? "edit" : "visibility";
   const text = props.type === "edit" ? "Edit" : "View";
-  const linkClassNames =
-    `usa-button ` +
-    `${props.type === "view" ? "usa-button--base " : ""}` +
-    `font-sans-2xs margin-right-0 padding-x-105 padding-y-1`;
 
   return (
-    <Link to={props.to} className={linkClassNames}>
+    <Link
+      to={props.to}
+      className={clsx(
+        "usa-button",
+        props.type === "view" && "usa-button--base",
+        "font-sans-2xs margin-right-0 padding-x-105 padding-y-1",
+      )}
+    >
       <span className="display-flex flex-align-center">
         <svg
           className="usa-icon"
@@ -185,9 +189,7 @@ function FRF2022Submission(props: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
-  const statusIconClassNames = frfSelected
-    ? "usa-icon text-primary" // blue
-    : "usa-icon";
+  const statusIconClassNames = clsx("usa-icon", frfSelected && "text-primary");
 
   const statusIcon = frfNeedsEdits
     ? `${icons}#priority_high` // !
@@ -454,11 +456,19 @@ function PRF2022Submission(props: { rebate: Rebate }) {
                     id: Date.now(),
                     body: (
                       <>
-                        <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                        <p
+                          className={clsx(
+                            "tw-text-sm tw-font-medium tw-text-gray-900",
+                          )}
+                        >
                           Error creating Payment Request{" "}
                           <em>{frf.bap?.rebateId}</em>.
                         </p>
-                        <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                        <p
+                          className={clsx(
+                            "tw-mt-1 tw-text-sm tw-text-gray-500",
+                          )}
+                        >
                           Please try again.
                         </p>
                       </>
@@ -524,9 +534,10 @@ function PRF2022Submission(props: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
-  const statusIconClassNames = prfFundingApproved
-    ? "usa-icon text-primary" // blue
-    : "usa-icon";
+  const statusIconClassNames = clsx(
+    "usa-icon",
+    prfFundingApproved && "text-primary",
+  );
 
   const statusIcon = prfNeedsEdits
     ? `${icons}#priority_high` // !
@@ -690,10 +701,18 @@ function CRF2022Submission(props: { rebate: Rebate }) {
                     id: Date.now(),
                     body: (
                       <>
-                        <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                        <p
+                          className={clsx(
+                            "tw-text-sm tw-font-medium tw-text-gray-900",
+                          )}
+                        >
                           Error creating Close Out <em>{prf.bap?.rebateId}</em>.
                         </p>
-                        <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                        <p
+                          className={clsx(
+                            "tw-mt-1 tw-text-sm tw-text-gray-500",
+                          )}
+                        >
                           Please try again.
                         </p>
                       </>
@@ -752,9 +771,7 @@ function CRF2022Submission(props: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
-  const statusIconClassNames = crfApproved
-    ? "usa-icon text-primary" // blue
-    : "usa-icon";
+  const statusIconClassNames = clsx("usa-icon", crfApproved && "text-primary");
 
   const statusIcon = crfNeedsEdits
     ? `${icons}#priority_high` // !
@@ -892,9 +909,7 @@ function FRF2023Submission(props: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
-  const statusIconClassNames = frfSelected
-    ? "usa-icon text-primary" // blue
-    : "usa-icon";
+  const statusIconClassNames = clsx("usa-icon", frfSelected && "text-primary");
 
   const statusIcon = frfNeedsEdits
     ? `${icons}#priority_high` // !
@@ -1120,11 +1135,19 @@ function PRF2023Submission(props: { rebate: Rebate }) {
                     id: Date.now(),
                     body: (
                       <>
-                        <p className="tw-text-sm tw-font-medium tw-text-gray-900">
+                        <p
+                          className={clsx(
+                            "tw-text-sm tw-font-medium tw-text-gray-900",
+                          )}
+                        >
                           Error creating Payment Request{" "}
                           <em>{frf.bap?.rebateId}</em>.
                         </p>
-                        <p className="tw-mt-1 tw-text-sm tw-text-gray-500">
+                        <p
+                          className={clsx(
+                            "tw-mt-1 tw-text-sm tw-text-gray-500",
+                          )}
+                        >
                           Please try again.
                         </p>
                       </>
@@ -1190,9 +1213,10 @@ function PRF2023Submission(props: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
-  const statusIconClassNames = prfFundingApproved
-    ? "usa-icon text-primary" // blue
-    : "usa-icon";
+  const statusIconClassNames = clsx(
+    "usa-icon",
+    prfFundingApproved && "text-primary",
+  );
 
   const statusIcon = prfNeedsEdits
     ? `${icons}#priority_high` // !
@@ -1447,8 +1471,10 @@ export function Submissions() {
             </label>
             <select
               id="rebate-year"
+              className={clsx(
+                "tw-rounded-md tw-border-0 tw-text-sm tw-font-bold tw-leading-4 tw-ring-1 tw-ring-inset tw-ring-gray-300",
+              )}
               name="rebate-year"
-              className="tw-rounded-md tw-border-0 tw-text-sm tw-font-bold tw-leading-4 tw-ring-1 tw-ring-inset tw-ring-gray-300"
               onChange={(ev) => setRebateYear(ev.target.value as RebateYear)}
               defaultValue={rebateYear}
             >