diff --git a/.eslintrc.js b/.eslintrc.js
index cf67b0050..96f813f7e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,7 +14,6 @@ module.exports = {
     sourceType: "module",
   },
   rules: {
-    "prettier/prettier": ["error", { trailingComma: "es5" }],
     "react/forbid-component-props": [
       "error",
       {
diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
index 42c5d9b0e..dde1711b0 100644
--- a/src/components/Accordion/Accordion.test.tsx
+++ b/src/components/Accordion/Accordion.test.tsx
@@ -22,7 +22,7 @@ describe("Accordion", () => {
             content: <>More test content</>,
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("tablist")).toMatchSnapshot();
   });
@@ -37,11 +37,11 @@ describe("Accordion", () => {
           },
         ]}
         titleElement="h4"
-      />
+      />,
     );
     // Check for the specific element as defined in the titleElement prop.
     expect(
-      within(screen.getByRole("listitem")).getByRole("heading").tagName
+      within(screen.getByRole("listitem")).getByRole("heading").tagName,
     ).toBe("H4");
   });
 
@@ -60,7 +60,7 @@ describe("Accordion", () => {
             content: <>More test content</>,
           },
         ]}
-      />
+      />,
     );
     const tab = screen.getByRole("tab", { name: "Advanced topics" });
     await userEvent.click(tab);
@@ -86,7 +86,7 @@ describe("Accordion", () => {
             key: "networking",
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("tabpanel", { name: "Networking" })).toBeVisible();
   });
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index e8b56cb48..a572832bb 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -54,7 +54,7 @@ const generateSections = (
   sections: Section[],
   setExpanded,
   expanded,
-  titleElement
+  titleElement,
 ) =>
   sections.map(({ key, ...props }, i) => (
     <AccordionSection
@@ -98,7 +98,7 @@ const Accordion = ({
           sections,
           setExpanded,
           externallyControlled ? expanded : expandedSection,
-          titleElement
+          titleElement,
         )}
       </ul>
     </aside>
diff --git a/src/components/Accordion/AccordionSection/AccordionSection.test.tsx b/src/components/Accordion/AccordionSection/AccordionSection.test.tsx
index 205804dae..55e089da4 100644
--- a/src/components/Accordion/AccordionSection/AccordionSection.test.tsx
+++ b/src/components/Accordion/AccordionSection/AccordionSection.test.tsx
@@ -12,7 +12,7 @@ describe("AccordionSection ", () => {
         expanded="abcd-1234"
         setExpanded={jest.fn()}
         title="Test section"
-      />
+      />,
     );
 
     expect(screen.getByRole("listitem")).toMatchSnapshot();
@@ -26,7 +26,7 @@ describe("AccordionSection ", () => {
         setExpanded={jest.fn()}
         title="Test section"
         titleElement="h4"
-      />
+      />,
     );
     // Query for the specific element as defined in the titleElement prop.
     // eslint-disable-next-line testing-library/no-node-access
@@ -47,7 +47,7 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
     expect(onTitleClick).toHaveBeenCalledWith(true, ":r4:");
@@ -60,7 +60,7 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     // Clicking the title again should close the accordion section.
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
@@ -81,7 +81,7 @@ describe("AccordionSection ", () => {
           expanded = id;
         }}
         title="Test section"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("tab", { name: "Test section" }));
 
@@ -100,7 +100,7 @@ describe("AccordionSection ", () => {
             <span>optional</span>
           </>
         }
-      />
+      />,
     );
     const title = screen.getByRole("tab");
     expect(title.children).toHaveLength(2);
diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
index 44929fe43..fcefd36ba 100644
--- a/src/components/ActionButton/ActionButton.tsx
+++ b/src/components/ActionButton/ActionButton.tsx
@@ -126,7 +126,7 @@ const ActionButton = ({
       "is-processing": showLoader || showSuccess,
       "is-disabled": disabled,
       "is-inline": inline,
-    }
+    },
   );
   const showIcon = showLoader || showSuccess;
   const icon = (showLoader && "spinner") || (showSuccess && "success") || null;
diff --git a/src/components/ApplicationLayout/ApplicationLayout.test.tsx b/src/components/ApplicationLayout/ApplicationLayout.test.tsx
index 32b288aac..e13859011 100644
--- a/src/components/ApplicationLayout/ApplicationLayout.test.tsx
+++ b/src/components/ApplicationLayout/ApplicationLayout.test.tsx
@@ -17,7 +17,7 @@ it("displays a logo", () => {
   const link = screen.getAllByRole("link", { name: "Juju" })[0];
   expect(within(link).getByRole("img", { name: "Juju" })).toHaveAttribute(
     "src",
-    "name.svg"
+    "name.svg",
   );
 });
 
@@ -39,7 +39,7 @@ it("displays main content", () => {
   render(
     <ApplicationLayout logo={logo} navItems={[]}>
       {content}
-    </ApplicationLayout>
+    </ApplicationLayout>,
   );
   expect(screen.getByText(content)).toBeInTheDocument();
 });
@@ -58,7 +58,7 @@ it("displays an aside", () => {
       logo={logo}
       navItems={[]}
       aside={<AppAside>{content}</AppAside>}
-    />
+    />,
   );
   expect(screen.getByText(content)).toBeInTheDocument();
   expect(document.querySelector(".l-aside")).toBeInTheDocument();
@@ -79,7 +79,7 @@ it("pins the menu using external state", async () => {
       navItems={[]}
       menuPinned={true}
       onPinMenu={onPinMenu}
-    />
+    />,
   );
   expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");
   await userEvent.click(screen.getByRole("button", { name: "Unpin menu" }));
@@ -91,7 +91,7 @@ it("opens and collapses the menu", async () => {
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));
   expect(document.querySelector(".l-navigation")).not.toHaveClass(
-    "is-collapsed"
+    "is-collapsed",
   );
   await userEvent.click(screen.getByRole("button", { name: "Close menu" }));
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
@@ -105,7 +105,7 @@ it("collapses the menu using external state", async () => {
       navItems={[]}
       menuCollapsed={true}
       onCollapseMenu={onCollapseMenu}
-    />
+    />,
   );
   expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));
diff --git a/src/components/ArticlePagination/ArticlePagination.test.tsx b/src/components/ArticlePagination/ArticlePagination.test.tsx
index 94891dedc..b5406de53 100644
--- a/src/components/ArticlePagination/ArticlePagination.test.tsx
+++ b/src/components/ArticlePagination/ArticlePagination.test.tsx
@@ -11,7 +11,7 @@ describe("ArticlePagination ", () => {
         nextURL="#next"
         previousLabel="Lorem ipsum dolor sit amet"
         previousURL="#previous"
-      />
+      />,
     );
     expect(screen.getByRole("contentinfo")).toMatchSnapshot();
   });
diff --git a/src/components/Badge/Badge.test.tsx b/src/components/Badge/Badge.test.tsx
index 960638aa4..c2ff8d48e 100644
--- a/src/components/Badge/Badge.test.tsx
+++ b/src/components/Badge/Badge.test.tsx
@@ -29,7 +29,7 @@ it("rounds number correctly for thousands", () => {
 
 it("rounds number correctly for millions", () => {
   render(
-    <Badge value={132456455} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge value={132456455} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("132M")).toBeInTheDocument();
@@ -37,7 +37,7 @@ it("rounds number correctly for millions", () => {
 
 it("rounds number correctly for billions", () => {
   render(
-    <Badge value={13245645512} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge value={13245645512} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("13B")).toBeInTheDocument();
@@ -45,7 +45,10 @@ it("rounds number correctly for billions", () => {
 
 it("rounds number correctly for trillions", () => {
   render(
-    <Badge value={132456455123112} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />
+    <Badge
+      value={132456455123112}
+      badgeType={BadgeType.ROUNDED_LARGE_NUMBER}
+    />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("132T")).toBeInTheDocument();
@@ -56,7 +59,7 @@ it("displays the correct max value if it exceeds 999T", () => {
     <Badge
       value={1324564551231125}
       badgeType={BadgeType.ROUNDED_LARGE_NUMBER}
-    />
+    />,
   );
   // Check that the correct value is displayed.
   expect(screen.getByText("999T")).toBeInTheDocument();
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 79f209f05..1a49a3552 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -72,7 +72,7 @@ const Badge = ({
       [`p-badge--negative`]: !!isNegative,
       "p-badge": !isNegative,
     },
-    className
+    className,
   );
 
   let safeValue = Math.round(value);
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 0861f6e01..1dbf4adb5 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -14,7 +14,7 @@ describe("Button ", () => {
     render(
       <Button element="a" href="http://example.com">
         Test content
-      </Button>
+      </Button>,
     );
     expect(screen.getByRole("link")).toMatchSnapshot();
   });
@@ -53,7 +53,7 @@ describe("Button ", () => {
         disabled={true}
         href="http://example.com"
         onClick={onClick}
-      />
+      />,
     );
     const button = screen.getByRole("link");
     expect(button).toHaveClass("is-disabled");
@@ -71,7 +71,7 @@ describe("Button ", () => {
         disabled={true}
         href="http://example.com"
         onClick={onClick}
-      />
+      />,
     );
     const button = screen.getByRole("link");
     const clickEvent = createEvent.click(button);
@@ -109,7 +109,7 @@ describe("Button ", () => {
   it("puts additional classes at the end", () => {
     render(<Button className="extra-class" dense />);
     expect(screen.getByRole("button").className).toEqual(
-      "p-button is-dense extra-class"
+      "p-button is-dense extra-class",
     );
   });
 
@@ -134,7 +134,7 @@ describe("Button ", () => {
     render(<Button element={Link} to="http://example.com" />);
     expect(screen.getByRole("link")).toHaveAttribute(
       "href",
-      "http://example.com"
+      "http://example.com",
     );
   });
 });
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 665775e89..87220f327 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -94,7 +94,7 @@ const Button = <P,>({
       "is-inline": inline,
       "is-small": small,
     },
-    className
+    className,
   );
   const onClickDisabled = (e: MouseEvent) => e.preventDefault();
 
diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
index b1c220aad..bfd503cab 100644
--- a/src/components/Card/Card.test.tsx
+++ b/src/components/Card/Card.test.tsx
@@ -12,7 +12,7 @@ describe("Card ", () => {
   it("can have a title", () => {
     render(<Card title="This is the title">Test content</Card>);
     expect(
-      screen.getByRole("group", { name: "This is the title" })
+      screen.getByRole("group", { name: "This is the title" }),
     ).toBeInTheDocument();
   });
 
diff --git a/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx b/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx
index af5407d70..8ac0c4886 100644
--- a/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx
+++ b/src/components/CheckboxInput/CheckableInput/CheckableInput.test.tsx
@@ -6,7 +6,7 @@ import CheckableInput from "./CheckableInput";
 describe("CheckableInput ", () => {
   it("renders a checkable input", () => {
     render(
-      <CheckableInput inputType="checkbox" label="Test label"></CheckableInput>
+      <CheckableInput inputType="checkbox" label="Test label"></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBeInTheDocument();
   });
@@ -17,7 +17,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test disabled"
         disabled
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBeDisabled();
   });
@@ -28,7 +28,7 @@ describe("CheckableInput ", () => {
         inputType="radio"
         label="Test required"
         required
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("is-required");
@@ -40,7 +40,7 @@ describe("CheckableInput ", () => {
         inputType="radio"
         label="Test required"
         inline
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("p-radio--inline");
@@ -52,7 +52,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test label"
         indeterminate
-      ></CheckableInput>
+      ></CheckableInput>,
     );
     expect(screen.getByRole("checkbox")).toBePartiallyChecked();
   });
@@ -63,7 +63,7 @@ describe("CheckableInput ", () => {
         inputType="checkbox"
         label="Test label"
         labelClassName="label-class-name"
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector("label")).toHaveClass("label-class-name");
diff --git a/src/components/CheckboxInput/CheckableInput/CheckableInput.tsx b/src/components/CheckboxInput/CheckableInput/CheckableInput.tsx
index a1dd38cfb..d1c36a66a 100644
--- a/src/components/CheckboxInput/CheckableInput/CheckableInput.tsx
+++ b/src/components/CheckboxInput/CheckableInput/CheckableInput.tsx
@@ -54,7 +54,7 @@ const CheckableInput = ({
         `p-${inputType}${inline ? "--inline" : ""}`,
         {
           "is-required": checkboxProps.required,
-        }
+        },
       )}
     >
       <input
diff --git a/src/components/CheckboxInput/CheckboxInput.test.tsx b/src/components/CheckboxInput/CheckboxInput.test.tsx
index e4ea91083..915baf057 100644
--- a/src/components/CheckboxInput/CheckboxInput.test.tsx
+++ b/src/components/CheckboxInput/CheckboxInput.test.tsx
@@ -6,6 +6,6 @@ import CheckboxInput from "./CheckboxInput";
 it("renders a checkbox", () => {
   render(<CheckboxInput label="Test checkbox"></CheckboxInput>);
   expect(
-    screen.getByRole("checkbox", { name: "Test checkbox" })
+    screen.getByRole("checkbox", { name: "Test checkbox" }),
   ).toBeInTheDocument();
 });
diff --git a/src/components/Chip/Chip.test.tsx b/src/components/Chip/Chip.test.tsx
index 544bc3f00..fcefdd84f 100644
--- a/src/components/Chip/Chip.test.tsx
+++ b/src/components/Chip/Chip.test.tsx
@@ -18,7 +18,7 @@ describe("Chip ", () => {
   it("displays the value", () => {
     render(<Chip data-testid="chip" value="positive" />);
     expect(
-      within(screen.getByTestId("chip")).getByText("positive")
+      within(screen.getByTestId("chip")).getByText("positive"),
     ).toBeInTheDocument();
   });
 
@@ -32,25 +32,35 @@ describe("Chip ", () => {
   it("displays the dismiss action", () => {
     const onDismiss = jest.fn();
     render(
-      <Chip data-testid="chip" lead="Owner" value="Bob" onDismiss={onDismiss} />
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        value="Bob"
+        onDismiss={onDismiss}
+      />,
     );
     expect(
       within(screen.getByTestId("chip")).getByRole("button", {
         name: Label.Dismiss,
-      })
+      }),
     ).toBeInTheDocument();
   });
 
   it("calls onDismiss when clicked", async () => {
     const onDismiss = jest.fn();
     render(
-      <Chip data-testid="chip" lead="Owner" value="Bob" onDismiss={onDismiss} />
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        value="Bob"
+        onDismiss={onDismiss}
+      />,
     );
     const dismissButton = within(screen.getByTestId("chip")).getByRole(
       "button",
       {
         name: Label.Dismiss,
-      }
+      },
     );
     await userEvent.click(dismissButton);
     expect(onDismiss).toHaveBeenCalledTimes(1);
@@ -59,7 +69,7 @@ describe("Chip ", () => {
   it("calls onKeyDown when key pressed", async () => {
     const onClick = jest.fn();
     render(
-      <Chip data-testid="chip" lead="Owner" value="Bob" onClick={onClick} />
+      <Chip data-testid="chip" lead="Owner" value="Bob" onClick={onClick} />,
     );
     const chip = screen.getByTestId("chip");
     await userEvent.type(chip, "{enter}");
@@ -69,7 +79,7 @@ describe("Chip ", () => {
   it("calls onClick when clicking on the chip", async () => {
     const onClick = jest.fn();
     render(
-      <Chip data-testid="chip" lead="Owner" value="Bob" onClick={onClick} />
+      <Chip data-testid="chip" lead="Owner" value="Bob" onClick={onClick} />,
     );
     await userEvent.click(screen.getByTestId("chip"));
     expect(onClick).toHaveBeenCalledTimes(1);
@@ -92,7 +102,7 @@ describe("Chip ", () => {
 
   it("renders information chip", () => {
     render(
-      <Chip data-testid="chip" appearance="information" value="information" />
+      <Chip data-testid="chip" appearance="information" value="information" />,
     );
     expect(screen.getByTestId("chip")).toHaveClass("p-chip--information");
   });
@@ -105,7 +115,7 @@ describe("Chip ", () => {
         lead="Owner"
         value="Bob"
         disabled
-      />
+      />,
     );
     expect(screen.getByTestId("chip")).toBeDisabled();
   });
@@ -117,7 +127,7 @@ describe("Chip ", () => {
         className="extra-extra"
         lead="Owner"
         value="Bob"
-      />
+      />,
     );
     expect(screen.getByTestId("chip")).toHaveClass("extra-extra");
   });
@@ -130,7 +140,7 @@ describe("Chip ", () => {
         lead="Owner"
         onDismiss={jest.fn()}
         value="Bob"
-      />
+      />,
     );
     expect(screen.getByTestId("chip")).toHaveClass("extra-extra");
   });
@@ -140,7 +150,7 @@ describe("Chip ", () => {
     render(
       <form onSubmit={onSubmit}>
         <Chip data-testid="chip" lead="Owner" value="Bob" />
-      </form>
+      </form>,
     );
     await userEvent.click(screen.getByTestId("chip"));
     expect(onSubmit).not.toHaveBeenCalled();
@@ -156,13 +166,13 @@ describe("Chip ", () => {
           onDismiss={jest.fn()}
           value="Bob"
         />
-      </form>
+      </form>,
     );
     const dismissButton = within(screen.getByTestId("chip")).getByRole(
       "button",
       {
         name: Label.Dismiss,
-      }
+      },
     );
     await userEvent.click(dismissButton);
     expect(onSubmit).not.toHaveBeenCalled();
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index a2cd284f0..a8e2c015e 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -30,7 +30,7 @@ export type Props = PropsWithSpread<
      * Function for handling chip div click event.
      */
     onClick?: (
-      event: MouseEvent<HTMLButtonElement> | { lead: string; value: string }
+      event: MouseEvent<HTMLButtonElement> | { lead: string; value: string },
     ) => void;
     /**
      * Function for handling dismissing a chip.
@@ -103,7 +103,7 @@ const Chip = ({
       [`p-chip--${appearance}`]: !!appearance,
       "p-chip": !appearance,
     },
-    props.className
+    props.className,
   );
 
   if (onDismiss) {
diff --git a/src/components/Code/Code.tsx b/src/components/Code/Code.tsx
index a4a7a9bec..82979fc9a 100644
--- a/src/components/Code/Code.tsx
+++ b/src/components/Code/Code.tsx
@@ -26,7 +26,7 @@ const Code = ({
 }: Props): JSX.Element => {
   if (IS_DEV) {
     console.warn(
-      "Code component is deprecated. Use CodeSnippet component or inline `<code>` instead."
+      "Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.",
     );
   }
   if (inline) {
diff --git a/src/components/CodeSnippet/CodeSnippet.test.tsx b/src/components/CodeSnippet/CodeSnippet.test.tsx
index 9d22b418b..4c7d3bdb9 100644
--- a/src/components/CodeSnippet/CodeSnippet.test.tsx
+++ b/src/components/CodeSnippet/CodeSnippet.test.tsx
@@ -13,7 +13,7 @@ describe("CodeSnippet ", () => {
   it("renders title for a code block", () => {
     render(<CodeSnippet blocks={[{ title: "Title", code: "Test" }]} />);
     expect(screen.getByRole("heading", { name: "Title" })).toHaveClass(
-      "p-code-snippet__title"
+      "p-code-snippet__title",
     );
   });
 
@@ -24,7 +24,7 @@ describe("CodeSnippet ", () => {
           { title: "Title", code: "Test" },
           { title: "Title 2", code: "Test 2" },
         ]}
-      />
+      />,
     );
     expect(screen.getByText("Test")).toBeInTheDocument();
     expect(screen.getByText("Test 2")).toBeInTheDocument();
@@ -43,11 +43,11 @@ describe("CodeSnippet ", () => {
             code: multilineCode,
           },
         ]}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-code-snippet__block--numbered")
+      document.querySelector(".p-code-snippet__block--numbered"),
     ).toBeInTheDocument();
     expect(screen.getByText("Test line 1;")).toBeInTheDocument();
     expect(screen.getByText("Test line 2;")).toBeInTheDocument();
@@ -69,15 +69,15 @@ describe("CodeSnippet ", () => {
             code: multilineCode,
           },
         ]}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-code-snippet__block--numbered")
+      document.querySelector(".p-code-snippet__block--numbered"),
     ).toBeInTheDocument();
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelectorAll(".p-code-snippet__line")
+      document.querySelectorAll(".p-code-snippet__line"),
     ).toHaveLength(3);
     expect(screen.getByText("Test line 1;")).toBeInTheDocument();
     expect(screen.getByText("Test line 2;")).toBeInTheDocument();
@@ -96,11 +96,11 @@ describe("CodeSnippet ", () => {
             ),
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByTestId("jsx-content")).toBeInTheDocument();
     expect(
-      screen.getByRole("link", { name: "functionCall()" })
+      screen.getByRole("link", { name: "functionCall()" }),
     ).toBeInTheDocument();
   });
 
@@ -110,11 +110,11 @@ describe("CodeSnippet ", () => {
         blocks={[
           { appearance: CodeSnippetBlockAppearance.LINUX_PROMPT, code: "Test" },
         ]}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-code-snippet__block--icon")
+      document.querySelector(".p-code-snippet__block--icon"),
     ).toBeInTheDocument();
   });
 
@@ -127,11 +127,11 @@ describe("CodeSnippet ", () => {
             code: "Test",
           },
         ]}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-code-snippet__block--icon.is-windows-prompt")
+      document.querySelector(".p-code-snippet__block--icon.is-windows-prompt"),
     ).toBeInTheDocument();
   });
 
@@ -139,11 +139,11 @@ describe("CodeSnippet ", () => {
     render(
       <CodeSnippet
         blocks={[{ appearance: CodeSnippetBlockAppearance.URL, code: "Test" }]}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-code-snippet__block--icon.is-url")
+      document.querySelector(".p-code-snippet__block--icon.is-url"),
     ).toBeInTheDocument();
   });
 
@@ -173,7 +173,7 @@ describe("CodeSnippet ", () => {
             ],
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("combobox")).toBeInTheDocument();
     expect(screen.getAllByRole("option")[0]).toHaveValue("js");
@@ -194,7 +194,7 @@ describe("CodeSnippet ", () => {
             ),
           },
         ]}
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(".test")).toBeInTheDocument();
@@ -216,7 +216,7 @@ describe("CodeSnippet ", () => {
           },
         ]}
         data-testid="testID"
-      />
+      />,
     );
     expect(screen.getByTestId("testID")).toBeInTheDocument();
   });
diff --git a/src/components/CodeSnippet/CodeSnippet.tsx b/src/components/CodeSnippet/CodeSnippet.tsx
index b1891a79f..b0e4969c4 100644
--- a/src/components/CodeSnippet/CodeSnippet.tsx
+++ b/src/components/CodeSnippet/CodeSnippet.tsx
@@ -37,7 +37,7 @@ export default function CodeSnippet({
       className={classNames(
         "p-code-snippet",
         { "is-bordered": blocks.some((block) => block.content) },
-        className
+        className,
       )}
       {...props}
     >
diff --git a/src/components/Col/Col.test.tsx b/src/components/Col/Col.test.tsx
index 9b8d2f9d7..15b6716e7 100644
--- a/src/components/Col/Col.test.tsx
+++ b/src/components/Col/Col.test.tsx
@@ -8,7 +8,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toMatchSnapshot();
   });
@@ -17,7 +17,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} small={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-small-1");
   });
@@ -26,7 +26,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} medium={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-medium-1");
   });
@@ -35,7 +35,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} large={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-large-1");
   });
@@ -44,7 +44,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} emptySmall={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-start-small-1");
   });
@@ -53,7 +53,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} emptyMedium={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-start-medium-1");
   });
@@ -62,7 +62,7 @@ describe("Col ", () => {
     render(
       <Col data-testid="col" size={3} emptyLarge={1}>
         Test content
-      </Col>
+      </Col>,
     );
     expect(screen.getByTestId("col")).toHaveClass("col-start-large-1");
   });
diff --git a/src/components/ConfirmationButton/ConfirmationButton.test.tsx b/src/components/ConfirmationButton/ConfirmationButton.test.tsx
index abd553350..75f045475 100644
--- a/src/components/ConfirmationButton/ConfirmationButton.test.tsx
+++ b/src/components/ConfirmationButton/ConfirmationButton.test.tsx
@@ -16,7 +16,7 @@ describe("ConfirmationButton ", () => {
       >
         <Icon name={ICONS.delete} />
         <span>Delete</span>
-      </ConfirmationButton>
+      </ConfirmationButton>,
     );
     expect(screen.getByRole("button")).toContainHTML("p-icon--delete");
     expect(screen.getByRole("button")).toContainHTML("<span>Delete</span>");
@@ -30,10 +30,10 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm: jest.fn(),
         }}
-      />
+      />,
     );
     expect(screen.getByRole("button")).toContainHTML(
-      "u-animation--spin p-icon--spinner"
+      "u-animation--spin p-icon--spinner",
     );
   });
 
@@ -45,7 +45,7 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm: jest.fn(),
         }}
-      />
+      />,
     );
     expect(screen.getByTitle("Delete")).toBeInTheDocument();
   });
@@ -59,7 +59,7 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm,
         }}
-      />
+      />,
     );
     const user = userEvent.setup();
     await user.keyboard("{Shift>}");
@@ -77,7 +77,7 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm: jest.fn(),
         }}
-      />
+      />,
     );
     const button = screen.getByTitle("Confirm");
     const clickEvent = createEvent.click(button);
@@ -93,7 +93,7 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm: jest.fn(),
         }}
-      />
+      />,
     );
     const button = screen.getByTitle("Confirm");
     const clickEvent = createEvent.click(button);
@@ -109,7 +109,7 @@ describe("ConfirmationButton ", () => {
           confirmButtonLabel: "Confirm",
           onConfirm: jest.fn(),
         }}
-      />
+      />,
     );
     expect(screen.getByTitle("Confirm")).toHaveClass("extra-class");
   });
diff --git a/src/components/ConfirmationButton/ConfirmationButton.tsx b/src/components/ConfirmationButton/ConfirmationButton.tsx
index faab63bfa..d750beae4 100644
--- a/src/components/ConfirmationButton/ConfirmationButton.tsx
+++ b/src/components/ConfirmationButton/ConfirmationButton.tsx
@@ -95,7 +95,7 @@ export const ConfirmationButton = ({
         {...actionButtonProps}
         onClick={shiftClickEnabled ? handleShiftClick : openPortal}
         title={generateTitle(
-          onHoverText ?? confirmationModalProps.confirmButtonLabel
+          onHoverText ?? confirmationModalProps.confirmButtonLabel,
         )}
       >
         {actionButtonProps.children}
diff --git a/src/components/ConfirmationModal/ConfirmationModal.test.tsx b/src/components/ConfirmationModal/ConfirmationModal.test.tsx
index f5decf754..525733cb6 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.test.tsx
+++ b/src/components/ConfirmationModal/ConfirmationModal.test.tsx
@@ -13,7 +13,7 @@ describe("ConfirmationModal ", () => {
         onConfirm={jest.fn()}
       >
         Test cancel button label
-      </ConfirmationModal>
+      </ConfirmationModal>,
     );
     expect(container.innerHTML).toContain("Go back");
     expect(container.innerHTML).not.toContain("Cancel");
@@ -27,7 +27,7 @@ describe("ConfirmationModal ", () => {
         onConfirm={jest.fn()}
       >
         Test confirm button appearance
-      </ConfirmationModal>
+      </ConfirmationModal>,
     );
     expect(screen.getByText("Proceed")).toHaveClass("p-button--positive");
   });
@@ -40,7 +40,7 @@ describe("ConfirmationModal ", () => {
         onConfirm={jest.fn()}
       >
         Test confirm extra
-      </ConfirmationModal>
+      </ConfirmationModal>,
     );
     expect(screen.getByTestId("extraElement")).toBeInTheDocument();
   });
@@ -50,7 +50,7 @@ describe("ConfirmationModal ", () => {
     render(
       <ConfirmationModal confirmButtonLabel="Proceed" onConfirm={onConfirm}>
         Test confirm button click
-      </ConfirmationModal>
+      </ConfirmationModal>,
     );
     await userEvent.click(screen.getByText("Proceed"));
     expect(onConfirm).toHaveBeenCalled();
@@ -67,7 +67,7 @@ describe("ConfirmationModal ", () => {
         >
           Test click propagation
         </ConfirmationModal>
-      </div>
+      </div>,
     );
 
     await userEvent.click(screen.getByText("Go back"));
@@ -86,7 +86,7 @@ describe("ConfirmationModal ", () => {
         >
           Test click propagation
         </ConfirmationModal>
-      </div>
+      </div>,
     );
 
     await userEvent.click(screen.getByText("Go back"));
@@ -100,7 +100,7 @@ describe("ConfirmationModal ", () => {
         <ConfirmationModal confirmButtonLabel="Proceed" onConfirm={jest.fn()}>
           Test click propagation
         </ConfirmationModal>
-      </div>
+      </div>,
     );
 
     await userEvent.click(screen.getByText("Proceed"));
@@ -118,7 +118,7 @@ describe("ConfirmationModal ", () => {
         >
           Test click propagation
         </ConfirmationModal>
-      </div>
+      </div>,
     );
 
     await userEvent.click(screen.getByText("Proceed"));
@@ -139,15 +139,15 @@ describe("ConfirmationModal ", () => {
         onConfirm={jest.fn()}
       >
         Test
-      </ConfirmationModal>
+      </ConfirmationModal>,
     );
     expect(screen.getByRole("button", { name: "cancel" })).toHaveAttribute(
       "type",
-      "button"
+      "button",
     );
     expect(screen.getByRole("button", { name: "submit" })).toHaveAttribute(
       "type",
-      "submit"
+      "submit",
     );
   });
 });
diff --git a/src/components/ContextualMenu/ContextualMenu.stories.tsx b/src/components/ContextualMenu/ContextualMenu.stories.tsx
index 252248718..170aa6731 100644
--- a/src/components/ContextualMenu/ContextualMenu.stories.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.stories.tsx
@@ -20,7 +20,7 @@ const ScrollTemplate = (args) => (
         cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis,
         sequi voluptates architecto ipsa dolorum eaque rem expedita inventore
         voluptas odit aspernatur alias molestias facere.
-      </p>
+      </p>,
     )}
     <ContextualMenu {...args} />
   </div>
diff --git a/src/components/ContextualMenu/ContextualMenu.test.tsx b/src/components/ContextualMenu/ContextualMenu.test.tsx
index 1b26c3922..272a3c6e9 100644
--- a/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -42,7 +42,7 @@ describe("ContextualMenu ", () => {
   it("can be disabled", () => {
     render(<ContextualMenu links={[]} toggleDisabled toggleLabel="Toggle" />);
     expect(screen.getByRole("button", { name: "Toggle" })).toHaveAttribute(
-      "aria-disabled"
+      "aria-disabled",
     );
   });
 
@@ -51,8 +51,8 @@ describe("ContextualMenu ", () => {
     expect(
       // eslint-disable-next-line testing-library/no-node-access
       document.querySelector(
-        ".p-contextual-menu__toggle .p-contextual-menu__indicator"
-      )
+        ".p-contextual-menu__toggle .p-contextual-menu__indicator",
+      ),
     ).toBeInTheDocument();
     const toggle = screen.getByRole("button", { name: Label.Toggle });
     expect(toggle.childNodes).toHaveLength(1);
@@ -60,13 +60,13 @@ describe("ContextualMenu ", () => {
 
   it("makes the icon light if the toggle is positive or negative", () => {
     render(
-      <ContextualMenu hasToggleIcon links={[]} toggleAppearance="positive" />
+      <ContextualMenu hasToggleIcon links={[]} toggleAppearance="positive" />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
       document.querySelector(
-        ".p-contextual-menu__toggle .p-contextual-menu__indicator"
-      )
+        ".p-contextual-menu__toggle .p-contextual-menu__indicator",
+      ),
     ).toHaveClass("is-light");
   });
 
@@ -77,7 +77,7 @@ describe("ContextualMenu ", () => {
         links={[]}
         toggleLabel="Toggle"
         toggleLabelFirst
-      />
+      />,
     );
     const toggle = screen.getByRole("button", { name: "Toggle" });
     expect(toggle.childNodes[0].textContent).toBe("Toggle");
@@ -90,7 +90,7 @@ describe("ContextualMenu ", () => {
         links={[]}
         toggleLabel="Toggle"
         toggleLabelFirst={false}
-      />
+      />,
     );
     const toggle = screen.getByRole("button", { name: "Toggle" });
     expect(toggle.childNodes[1].textContent).toBe("Toggle");
@@ -101,7 +101,7 @@ describe("ContextualMenu ", () => {
     expect(screen.getByRole("button", { name: "Toggle" })).toBeInTheDocument();
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-contextual-menu__indicator")
+      document.querySelector(".p-contextual-menu__indicator"),
     ).not.toBeInTheDocument();
   });
 
@@ -114,21 +114,21 @@ describe("ContextualMenu ", () => {
   it("can not have a toggle button", () => {
     render(<ContextualMenu links={[]} />);
     expect(
-      screen.queryByRole("button", { name: Label.Toggle })
+      screen.queryByRole("button", { name: Label.Toggle }),
     ).not.toBeInTheDocument();
   });
 
   it("can use the toggle button to display the menu", async () => {
     render(<ContextualMenu links={[]} toggleLabel="Toggle" />);
     expect(
-      screen.queryByLabelText(DropdownLabel.Dropdown)
+      screen.queryByLabelText(DropdownLabel.Dropdown),
     ).not.toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "Toggle", expanded: false })
+      screen.getByRole("button", { name: "Toggle", expanded: false }),
     ).toBeInTheDocument();
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
     expect(
-      screen.getByRole("button", { name: "Toggle", expanded: true })
+      screen.getByRole("button", { name: "Toggle", expanded: true }),
     ).toBeInTheDocument();
     expect(screen.getByLabelText(DropdownLabel.Dropdown)).toBeInTheDocument();
   });
@@ -147,11 +147,11 @@ describe("ContextualMenu ", () => {
     render(<ContextualMenu links={[[{ children: "Link1" }]]} visible />);
     // eslint-disable-next-line testing-library/no-node-access
     const group = document.querySelector(
-      ".p-contextual-menu__group"
+      ".p-contextual-menu__group",
     ) as HTMLElement;
     expect(group).toBeInTheDocument();
     expect(
-      within(group).getByRole("button", { name: "Link1" })
+      within(group).getByRole("button", { name: "Link1" }),
     ).toBeInTheDocument();
   });
 
@@ -160,18 +160,18 @@ describe("ContextualMenu ", () => {
       <ContextualMenu
         links={[[{ children: "Link1" }], { children: "Link2" }]}
         visible
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     const group = document.querySelector(
-      ".p-contextual-menu__group"
+      ".p-contextual-menu__group",
     ) as HTMLElement;
     expect(group).toBeInTheDocument();
     expect(
-      within(group).getByRole("button", { name: "Link1" })
+      within(group).getByRole("button", { name: "Link1" }),
     ).toBeInTheDocument();
     expect(
-      within(group).queryByRole("button", { name: "Link2" })
+      within(group).queryByRole("button", { name: "Link2" }),
     ).not.toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Link2" })).toBeInTheDocument();
   });
@@ -180,12 +180,12 @@ describe("ContextualMenu ", () => {
     render(
       <ContextualMenu visible>
         <span data-testid="content">content</span>
-      </ContextualMenu>
+      </ContextualMenu>,
     );
     expect(screen.getByTestId("content")).toBeInTheDocument();
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-contextual-menu__link")
+      document.querySelector(".p-contextual-menu__link"),
     ).not.toBeInTheDocument();
   });
 
@@ -194,7 +194,7 @@ describe("ContextualMenu ", () => {
       <ContextualMenu
         links={[{ onClick: jest.fn(), children: "Link1" }]}
         toggleLabel="Toggle"
-      />
+      />,
     );
     // Open the menu:
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
@@ -202,7 +202,7 @@ describe("ContextualMenu ", () => {
     // Click on an item:
     await userEvent.click(screen.getByRole("button", { name: "Link1" }));
     expect(
-      screen.queryByLabelText(DropdownLabel.Dropdown)
+      screen.queryByLabelText(DropdownLabel.Dropdown),
     ).not.toBeInTheDocument();
   });
 
@@ -217,7 +217,7 @@ describe("ContextualMenu ", () => {
       <ContextualMenu
         links={[{ children: "Link1", element: Link, to: "http://example.com" }]}
         visible
-      />
+      />,
     );
     expect(screen.getByRole("link", { name: "Link1" })).toBeInTheDocument();
   });
@@ -238,13 +238,13 @@ describe("ContextualMenu ", () => {
           appearance: "negative",
           "data-testid": "extra-prop",
         }}
-      />
+      />,
     );
     expect(screen.getByTestId("extra-prop")).toBeInTheDocument();
     expect(screen.getByTestId("extra-prop")).toHaveClass("p-button--negative");
     // Check that the props were applied to the toggle element:
     expect(screen.getByTestId("extra-prop")).toHaveClass(
-      "p-contextual-menu__toggle"
+      "p-contextual-menu__toggle",
     );
   });
 
@@ -256,14 +256,14 @@ describe("ContextualMenu ", () => {
         dropdownProps={{
           "data-testid": "extra-prop",
         }}
-      />
+      />,
     );
     // Open the menu.
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
     expect(screen.getByTestId("extra-prop")).toBeInTheDocument();
     // Check that the props were applied to the dropdown element:
     expect(screen.getByTestId("extra-prop")).toHaveClass(
-      "p-contextual-menu__dropdown"
+      "p-contextual-menu__dropdown",
     );
   });
 
@@ -273,7 +273,7 @@ describe("ContextualMenu ", () => {
         links={[]}
         position="right"
         toggleLabel={<span>toggleLabel component text</span>}
-      />
+      />,
     );
     expect(screen.getByText("toggleLabel component text")).toBeInTheDocument();
   });
@@ -282,7 +282,7 @@ describe("ContextualMenu ", () => {
     render(
       <ContextualMenu position="right" toggleLabel="Toggle">
         {(close: () => void) => <Button onClick={close}>child</Button>}
-      </ContextualMenu>
+      </ContextualMenu>,
     );
 
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
@@ -290,7 +290,7 @@ describe("ContextualMenu ", () => {
     // Click on an item:
     await userEvent.click(screen.getByRole("button", { name: "child" }));
     expect(
-      screen.queryByLabelText(DropdownLabel.Dropdown)
+      screen.queryByLabelText(DropdownLabel.Dropdown),
     ).not.toBeInTheDocument();
   });
 
@@ -298,7 +298,7 @@ describe("ContextualMenu ", () => {
     render(
       <ContextualMenu position="right" toggleLabel="Toggle">
         <span data-testid="child-span">child</span>
-      </ContextualMenu>
+      </ContextualMenu>,
     );
 
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index fbb656db3..d87626471 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -128,14 +128,14 @@ export type Props<L> = BaseProps<L> &
  */
 const getPositionNode = (
   wrapper: HTMLElement,
-  positionNode?: HTMLElement
+  positionNode?: HTMLElement,
 ): HTMLElement | null => {
   if (positionNode) {
     return positionNode;
   } else if (wrapper) {
     // We want to position the menu in relation to the toggle, if it exists.
     const toggle = wrapper.querySelector<HTMLElement>(
-      ".p-contextual-menu__toggle"
+      ".p-contextual-menu__toggle",
     );
     return toggle || wrapper;
   }
@@ -237,7 +237,7 @@ const ContextualMenu = <L,>({
         updatePositionCoords();
       }
     },
-    [updatePositionCoords]
+    [updatePositionCoords],
   );
 
   // Handle controlling updates to the menu visibility from outside
@@ -266,7 +266,7 @@ const ContextualMenu = <L,>({
         updatePositionCoords();
       }
     },
-    [closePortal, positionNode, updatePositionCoords]
+    [closePortal, positionNode, updatePositionCoords],
   );
 
   const onScroll = useCallback(
@@ -279,7 +279,7 @@ const ContextualMenu = <L,>({
         updatePositionCoords();
       }
     },
-    [positionNode, updatePositionCoords]
+    [positionNode, updatePositionCoords],
   );
 
   useListener(window, onResize, "resize", true, isOpen);
@@ -317,7 +317,7 @@ const ContextualMenu = <L,>({
               "p-icon--chevron-down p-contextual-menu__indicator",
               {
                 "is-light": ["negative", "positive"].includes(toggleAppearance),
-              }
+              },
             )}
           ></i>
         ) : null}
diff --git a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx
index 1f8032db4..d34e04126 100644
--- a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx
+++ b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx
@@ -19,10 +19,10 @@ describe("ContextualMenuDropdown ", () => {
       <ContextualMenuDropdown
         isOpen
         links={Array.from({ length: 10 }).map((_, i) => i)}
-      />
+      />,
     );
     expect(
-      document.querySelector(".p-contextual-menu__dropdown")
+      document.querySelector(".p-contextual-menu__dropdown"),
     ).not.toHaveAttribute("style");
   });
 
@@ -37,7 +37,7 @@ describe("ContextualMenuDropdown ", () => {
         links={links}
         positionNode={positionNode}
         scrollOverflow
-      />
+      />,
     );
     // Rerender the component so that the hooks run again once the elements have
     // been created in the DOM.
@@ -47,14 +47,14 @@ describe("ContextualMenuDropdown ", () => {
         links={links}
         positionNode={positionNode}
         scrollOverflow
-      />
+      />,
     );
     await waitFor(() => {
       expect(
-        document.querySelector(".p-contextual-menu__dropdown")
+        document.querySelector(".p-contextual-menu__dropdown"),
       ).toHaveAttribute(
         "style",
-        "min-height: 2rem; overflow-x: auto; max-height: 100px;"
+        "min-height: 2rem; overflow-x: auto; max-height: 100px;",
       );
     });
     positionNode.remove();
@@ -118,8 +118,8 @@ describe("ContextualMenuDropdown ", () => {
           "left",
           generateFits({
             fromLeft: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("right");
     });
 
@@ -129,8 +129,8 @@ describe("ContextualMenuDropdown ", () => {
           "right",
           generateFits({
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("left");
     });
 
@@ -142,8 +142,8 @@ describe("ContextualMenuDropdown ", () => {
             fromCenter: { fitsCentered: { fitsLeft: false, fitsRight: false } },
             fromLeft: { fitsRight: false },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("center");
     });
 
@@ -154,8 +154,8 @@ describe("ContextualMenuDropdown ", () => {
           generateFits({
             fromCenter: { fitsCentered: { fitsLeft: false } },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("left");
     });
 
@@ -166,8 +166,8 @@ describe("ContextualMenuDropdown ", () => {
           generateFits({
             fromCenter: { fitsCentered: { fitsRight: false } },
             fromLeft: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("right");
     });
   });
@@ -196,13 +196,13 @@ describe("ContextualMenuDropdown ", () => {
           isOpen
           links={links}
           positionNode={positionNode}
-        />
+        />,
       );
 
       // get the dropdown menu dom element and set its height
       // NOTE: we can only do this after the component has been rendered at least once
       let dropdownNode = document.querySelector(
-        ".p-contextual-menu__dropdown"
+        ".p-contextual-menu__dropdown",
       ) as HTMLElement;
 
       dropdownNode.getBoundingClientRect = jest
@@ -216,14 +216,14 @@ describe("ContextualMenuDropdown ", () => {
           isOpen
           links={links}
           positionNode={positionNode}
-        />
+        />,
       );
     };
 
     const assertMenuPosition = async (position: "above" | "below") => {
       await waitFor(() => {
         const dropdownNode = document.querySelector(
-          ".p-contextual-menu__dropdown"
+          ".p-contextual-menu__dropdown",
         ) as HTMLElement;
 
         let condition = expect(dropdownNode);
diff --git a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx
index 3561e85b2..62133fcac 100644
--- a/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx
+++ b/src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx
@@ -58,7 +58,7 @@ const getPositionStyle = (
   position: Position,
   verticalPosition: VerticalPosition,
   positionCoords: Props["positionCoords"],
-  constrainPanelWidth: Props["constrainPanelWidth"]
+  constrainPanelWidth: Props["constrainPanelWidth"],
 ): React.CSSProperties => {
   if (!positionCoords) {
     return null;
@@ -101,7 +101,7 @@ const getPositionStyle = (
  */
 export const adjustForWindow = (
   position: Position,
-  fitsWindow: WindowFitment
+  fitsWindow: WindowFitment,
 ): Position => {
   let newPosition: string = position;
   if (!fitsWindow.fromRight.fitsLeft && newPosition === "right") {
@@ -144,7 +144,7 @@ export const adjustForWindow = (
 const generateLink = <L,>(
   link: ButtonProps,
   key: React.Key,
-  handleClose: Props["handleClose"]
+  handleClose: Props["handleClose"],
 ) => {
   const { children, className, onClick, ...props } = link;
   return (
@@ -167,7 +167,7 @@ const generateLink = <L,>(
 };
 
 const getClosestScrollableParent = (
-  node: HTMLElement | null
+  node: HTMLElement | null,
 ): HTMLElement | null => {
   let currentNode = node;
   while (currentNode && currentNode !== document.body) {
@@ -209,8 +209,8 @@ const ContextualMenuDropdown = <L,>({
       adjustedPosition,
       verticalPosition,
       positionCoords,
-      constrainPanelWidth
-    )
+      constrainPanelWidth,
+    ),
   );
   const [maxHeight, setMaxHeight] = useState<number>();
   // Update the styles to position the menu.
@@ -220,8 +220,8 @@ const ContextualMenuDropdown = <L,>({
         adjustedPosition,
         verticalPosition,
         positionCoords,
-        constrainPanelWidth
-      )
+        constrainPanelWidth,
+      ),
     );
   }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
 
@@ -256,7 +256,7 @@ const ContextualMenuDropdown = <L,>({
         windowSpaceBelow >= dropdownHeight) ||
         windowSpaceBelow > scrollParentSpaceAbove
         ? "bottom"
-        : "top"
+        : "top",
     );
   }, [positionNode]);
 
@@ -277,7 +277,7 @@ const ContextualMenuDropdown = <L,>({
       scrollOverflow,
       setAdjustedPosition,
       updateVerticalPosition,
-    ]
+    ],
   );
 
   // Handle adjusting the horizontal position and scrolling of the dropdown so that it remains on screen.
@@ -286,7 +286,7 @@ const ContextualMenuDropdown = <L,>({
     positionNode,
     onUpdateWindowFitment,
     0,
-    isOpen && (autoAdjust || scrollOverflow)
+    isOpen && (autoAdjust || scrollOverflow),
   );
 
   // Update the styles when the position changes.
@@ -328,7 +328,7 @@ const ContextualMenuDropdown = <L,>({
                 return (
                   <span className="p-contextual-menu__group" key={i}>
                     {item.map((link, j) =>
-                      generateLink<L>(link, j, handleClose)
+                      generateLink<L>(link, j, handleClose),
                     )}
                   </span>
                 );
diff --git a/src/components/EmptyState/EmptyState.test.tsx b/src/components/EmptyState/EmptyState.test.tsx
index a9ea1afc6..132d669d4 100644
--- a/src/components/EmptyState/EmptyState.test.tsx
+++ b/src/components/EmptyState/EmptyState.test.tsx
@@ -15,7 +15,7 @@ describe("EmptyState ", () => {
       <EmptyState
         title="Test title"
         image={<img alt="pic" src="path/to/image" />}
-      />
+      />,
     );
     expect(screen.getByRole("img")).toHaveAttribute("src", "path/to/image");
   });
@@ -24,7 +24,7 @@ describe("EmptyState ", () => {
     render(
       <EmptyState title="Test title" image={<img alt="" src="" />}>
         Empty
-      </EmptyState>
+      </EmptyState>,
     );
     expect(screen.getByText("Empty")).toBeInTheDocument();
   });
@@ -38,7 +38,7 @@ describe("EmptyState ", () => {
         data-testid="wrapper"
       >
         Empty
-      </EmptyState>
+      </EmptyState>,
     );
     expect(screen.getByTestId("wrapper")).toHaveClass("extra-class");
   });
diff --git a/src/components/Field/Field.test.tsx b/src/components/Field/Field.test.tsx
index b7550b373..825fb05e5 100644
--- a/src/components/Field/Field.test.tsx
+++ b/src/components/Field/Field.test.tsx
@@ -8,7 +8,7 @@ describe("Field ", () => {
     render(
       <Field forId="test-id" label="Test label" data-testid="field">
         Test content
-      </Field>
+      </Field>,
     );
     expect(screen.getByTestId("field")).toMatchSnapshot();
   });
@@ -24,10 +24,10 @@ describe("Field ", () => {
     render(
       <Field caution="Are you sure?" validationId="id-1" data-testid="field">
         <input aria-errormessage="id-1" aria-invalid="true" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
-      "Are you sure?"
+      "Are you sure?",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-caution");
   });
@@ -40,10 +40,10 @@ describe("Field ", () => {
         data-testid="field"
       >
         <input aria-errormessage="id-1" aria-invalid="true" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
-      "Are you sure?"
+      "Are you sure?",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-caution");
   });
@@ -52,10 +52,10 @@ describe("Field ", () => {
     render(
       <Field error="You can't do that" validationId="id-1" data-testid="field">
         <input aria-errormessage="id-1" aria-invalid="true" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
-      "You can't do that"
+      "You can't do that",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-error");
   });
@@ -68,10 +68,10 @@ describe("Field ", () => {
         data-testid="field"
       >
         <input aria-errormessage="id-1" aria-invalid="true" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
-      "You can't do that"
+      "You can't do that",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-error");
   });
@@ -80,10 +80,10 @@ describe("Field ", () => {
     render(
       <Field success="You did it!" validationId="id-1" data-testid="field">
         <input aria-describedby="id-1" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
-      "You did it!"
+      "You did it!",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-success");
   });
@@ -96,10 +96,10 @@ describe("Field ", () => {
         data-testid="field"
       >
         <input aria-describedby="id-1" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
-      "You did it!"
+      "You did it!",
     );
     expect(screen.getByTestId("field")).toHaveClass("is-success");
   });
@@ -108,10 +108,10 @@ describe("Field ", () => {
     render(
       <Field help="This is how you do it" helpId="id-1">
         <input aria-describedby="id-1" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
-      "This is how you do it"
+      "This is how you do it",
     );
   });
 
@@ -119,10 +119,10 @@ describe("Field ", () => {
     render(
       <Field help={<span>This is how you do it</span>} helpId="id-1">
         <input aria-describedby="id-1" />
-      </Field>
+      </Field>,
     );
     expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
-      "This is how you do it"
+      "This is how you do it",
     );
   });
 
@@ -133,14 +133,14 @@ describe("Field ", () => {
         label="Test label"
         labelClassName="label-node"
         data-testid="field"
-      />
+      />,
     );
     const field = screen.getByTestId("field");
     expect(field.childNodes[0]).toHaveClass("label-node");
     // The label should not be inside the control.
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-form__control .p-form__label")
+      document.querySelector(".p-form__control .p-form__label"),
     ).not.toBeInTheDocument();
   });
 
@@ -152,7 +152,7 @@ describe("Field ", () => {
     // The label should be inside the control.
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-form__control .p-form__label")
+      document.querySelector(".p-form__control .p-form__label"),
     ).toBeInTheDocument();
   });
 
@@ -176,12 +176,12 @@ describe("Field ", () => {
     // The Label should be inside a col-4.
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".col-4 .p-form__label")
+      document.querySelector(".col-4 .p-form__label"),
     ).toBeInTheDocument();
     // The control should be inside a col-8.
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".col-8 .p-form__control")
+      document.querySelector(".col-8 .p-form__control"),
     ).toBeInTheDocument();
     expect(screen.getByTestId("field")).toHaveClass("row");
   });
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index 6dc09eb17..f6f6e1776 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -102,7 +102,7 @@ const generateError = (
   error: Props["error"],
   caution: Props["caution"],
   success: Props["success"],
-  validationId: Props["validationId"]
+  validationId: Props["validationId"],
 ) => {
   if (!error && !caution && !success) {
     return null;
@@ -119,7 +119,7 @@ const generateLabel = (
   required: Props["required"],
   label: Props["label"],
   labelClassName: Props["labelClassName"],
-  stacked: Props["stacked"]
+  stacked: Props["stacked"],
 ) => {
   if (!label) {
     return null;
@@ -195,7 +195,7 @@ const Field = ({
     required,
     label,
     labelClassName,
-    stacked
+    stacked,
   );
 
   const content = generateContent({
diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index 0bfd43a5e..21b35662f 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -6,7 +6,7 @@ import Form from "./Form";
 describe("Form ", () => {
   it("renders", () => {
     render(
-      <Form name="this needs a name so RTL can find it">Test content</Form>
+      <Form name="this needs a name so RTL can find it">Test content</Form>,
     );
     expect(screen.getByRole("form")).toMatchSnapshot();
   });
@@ -27,7 +27,7 @@ describe("Form ", () => {
         name="this needs a name so RTL can find it"
         stacked={true}
         className="extra-class"
-      />
+      />,
     );
     const form = screen.getByRole("form");
     expect(form).toHaveClass("p-form");
diff --git a/src/components/FormikField/FormikField.test.tsx b/src/components/FormikField/FormikField.test.tsx
index 75da14fc0..349099f07 100644
--- a/src/components/FormikField/FormikField.test.tsx
+++ b/src/components/FormikField/FormikField.test.tsx
@@ -10,7 +10,7 @@ describe("FormikField", () => {
     render(
       <Formik initialValues={{}} onSubmit={jest.fn()}>
         <FormikField component={Component} name="username" />
-      </Formik>
+      </Formik>,
     );
 
     expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -26,7 +26,7 @@ describe("FormikField", () => {
         onSubmit={jest.fn()}
       >
         <FormikField name="username" />
-      </Formik>
+      </Formik>,
     );
 
     expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage("Uh oh!");
@@ -41,7 +41,7 @@ describe("FormikField", () => {
         onSubmit={jest.fn()}
       >
         <FormikField displayError={false} name="username" />
-      </Formik>
+      </Formik>,
     );
 
     expect(screen.getByRole("textbox")).not.toHaveAccessibleErrorMessage();
diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
index 11ea7b910..a2131bfa1 100644
--- a/src/components/Input/Input.test.tsx
+++ b/src/components/Input/Input.test.tsx
@@ -20,13 +20,13 @@ describe("Input", () => {
     render(<Input type="radio" label="text label" />);
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-radio__label")
+      document.querySelector(".p-radio__label"),
     ).toBeInTheDocument();
 
     expect(screen.getByRole("radio")).toHaveAccessibleName("text label");
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-form__label")
+      document.querySelector(".p-form__label"),
     ).not.toBeInTheDocument();
   });
 
@@ -35,11 +35,11 @@ describe("Input", () => {
     expect(screen.getByRole("checkbox")).toHaveAccessibleName("text label");
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-checkbox__label")
+      document.querySelector(".p-checkbox__label"),
     ).toBeInTheDocument();
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-form__label")
+      document.querySelector(".p-form__label"),
     ).not.toBeInTheDocument();
   });
 
@@ -84,7 +84,7 @@ describe("Input", () => {
     render(<Input type="radio" labelClassName="label-class-name" />);
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-radio")
+      document.querySelector(".p-radio"),
     ).toHaveClass("label-class-name");
   });
 
@@ -92,7 +92,7 @@ describe("Input", () => {
     render(<Input type="checkbox" labelClassName="label-class-name" />);
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-checkbox")
+      document.querySelector(".p-checkbox"),
     ).toHaveClass("label-class-name");
   });
 
@@ -141,15 +141,15 @@ describe("Input", () => {
         className="extra-class"
         help="additional description"
         helpClassName="additional-help-text-class"
-      />
+      />,
     );
     expect(screen.getByRole("textbox")).toHaveClass(
       "p-form-validation__input",
-      "extra-class"
+      "extra-class",
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     expect(container.querySelector(".p-form-help-text")).toHaveClass(
-      "additional-help-text-class"
+      "additional-help-text-class",
     );
   });
 });
diff --git a/src/components/Label/Label.test.tsx b/src/components/Label/Label.test.tsx
index 179428a85..9231411bf 100644
--- a/src/components/Label/Label.test.tsx
+++ b/src/components/Label/Label.test.tsx
@@ -8,7 +8,7 @@ describe("Label ", () => {
     render(
       <Label forId="test-id" data-testid="label">
         Test content
-      </Label>
+      </Label>,
     );
     expect(screen.getByTestId("label")).toMatchSnapshot();
   });
diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx
index 8eb9046ff..386ad92f8 100644
--- a/src/components/Link/Link.test.tsx
+++ b/src/components/Link/Link.test.tsx
@@ -28,7 +28,7 @@ describe("Link ", () => {
     render(
       <Link soft={true} className="extra-class">
         Test content
-      </Link>
+      </Link>,
     );
     const link = screen.getByRole("link");
     expect(link).toHaveClass("p-link--soft");
diff --git a/src/components/List/List.test.tsx b/src/components/List/List.test.tsx
index 2c690ca38..4b3de2e4e 100644
--- a/src/components/List/List.test.tsx
+++ b/src/components/List/List.test.tsx
@@ -19,7 +19,7 @@ describe("List ", () => {
   it("can define items as JSX", () => {
     render(<List items={[<button>test</button>, <span>items</span>]} />);
     expect(
-      within(screen.getAllByRole("listitem")[0]).getByRole("button")
+      within(screen.getAllByRole("listitem")[0]).getByRole("button"),
     ).toBeInTheDocument();
   });
 
@@ -32,7 +32,7 @@ describe("List ", () => {
             className: "item-class",
           },
         ]}
-      />
+      />,
     );
     const item = within(screen.getByRole("listitem")).getByText("test");
     expect(item).toBeInTheDocument();
@@ -48,7 +48,7 @@ describe("List ", () => {
     render(<List inline={true} items={items} />);
     expect(screen.getByRole("list")).toHaveClass("p-inline-list");
     expect(screen.getAllByRole("listitem")[0]).toHaveClass(
-      "p-inline-list__item"
+      "p-inline-list__item",
     );
   });
 
@@ -56,7 +56,7 @@ describe("List ", () => {
     render(<List middot={true} items={items} />);
     expect(screen.getByRole("list")).toHaveClass("p-inline-list--middot");
     expect(screen.getAllByRole("listitem")[0]).toHaveClass(
-      "p-inline-list__item"
+      "p-inline-list__item",
     );
   });
 
@@ -65,7 +65,7 @@ describe("List ", () => {
     expect(screen.getByRole("list")).toHaveClass("p-inline-list--stretch");
     expect(screen.getByRole("list")).not.toHaveClass("p-list");
     expect(screen.getAllByRole("listitem")[0]).toHaveClass(
-      "p-inline-list__item"
+      "p-inline-list__item",
     );
   });
 
@@ -97,16 +97,16 @@ describe("List ", () => {
               content: "test",
             },
           ]}
-        />
+        />,
       );
       expect(screen.getByRole("list")).toHaveClass("p-stepped-list");
       const item = screen.getAllByRole("listitem")[0];
       expect(item).toHaveClass("p-stepped-list__item");
       expect(within(item).getByText("Test title")).toHaveClass(
-        "p-stepped-list__title"
+        "p-stepped-list__title",
       );
       expect(within(item).getByText("test")).toHaveClass(
-        "p-stepped-list__content"
+        "p-stepped-list__content",
       );
     });
 
@@ -121,16 +121,16 @@ describe("List ", () => {
               content: "test",
             },
           ]}
-        />
+        />,
       );
       expect(screen.getByRole("list")).toHaveClass("p-stepped-list--detailed");
       const item = screen.getAllByRole("listitem")[0];
       expect(item).toHaveClass("p-stepped-list__item");
       expect(within(item).getByText("Test title")).toHaveClass(
-        "p-stepped-list__title"
+        "p-stepped-list__title",
       );
       expect(within(item).getByText("test")).toHaveClass(
-        "p-stepped-list__content"
+        "p-stepped-list__content",
       );
     });
 
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 639d00d50..42ffcebec 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -10,7 +10,7 @@ import { IS_DEV } from "../../utils";
 const Loader = (props: SpinnerProps): JSX.Element => {
   if (IS_DEV) {
     console.warn(
-      "The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical.github.io/react-components/?path=/story/spinner--default-story"
+      "The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical.github.io/react-components/?path=/story/spinner--default-story",
     );
   }
   return <Spinner {...props} />;
diff --git a/src/components/LoginPageLayout/LoginPageLayout.test.tsx b/src/components/LoginPageLayout/LoginPageLayout.test.tsx
index f41c6cd2d..567eee5f8 100644
--- a/src/components/LoginPageLayout/LoginPageLayout.test.tsx
+++ b/src/components/LoginPageLayout/LoginPageLayout.test.tsx
@@ -9,7 +9,7 @@ it("should display the default logo", () => {
   const link = screen.getByRole("link", { name: "Logo Canonical" });
   expect(within(link).getByRole("img", { name: "Logo" })).toHaveAttribute(
     "src",
-    "https://assets.ubuntu.com/v1/82818827-CoF_white.svg"
+    "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
   );
 });
 
@@ -18,19 +18,19 @@ it("should display a custom logo", () => {
     <LoginPageLayout
       title="Login page"
       logo={{ src: "logo.png", title: "My logo", url: "/" }}
-    />
+    />,
   );
   const link = screen.getByRole("link", { name: "Logo My logo" });
   expect(within(link).getByRole("img", { name: "Logo" })).toHaveAttribute(
     "src",
-    "logo.png"
+    "logo.png",
   );
 });
 
 it("should display the title", () => {
   render(<LoginPageLayout title="Login page" />);
   expect(
-    screen.getByRole("heading", { name: "Login page" })
+    screen.getByRole("heading", { name: "Login page" }),
   ).toBeInTheDocument();
 });
 
diff --git a/src/components/MainTable/MainTable.test.tsx b/src/components/MainTable/MainTable.test.tsx
index c18814da9..ac5f432de 100644
--- a/src/components/MainTable/MainTable.test.tsx
+++ b/src/components/MainTable/MainTable.test.tsx
@@ -101,7 +101,7 @@ describe("MainTable", () => {
     expect(columns.length).toEqual(rows[rows.length - 1].columns.length + 1);
     const expandingColumn = columns[columns.length - 1];
     expect(expandingColumn.classList.contains("p-table__expanding-panel")).toBe(
-      true
+      true,
     );
     expect(expandingColumn.textContent).toBe("Expand this");
   });
@@ -115,14 +115,14 @@ describe("MainTable", () => {
     render(<MainTable headers={headers} responsive={true} rows={rows} />);
     expect(screen.getAllByRole("rowheader")[0]).toHaveAttribute(
       "data-heading",
-      "Status"
+      "Status",
     );
   });
 
   it("doesn't contain data-heading attribute if there is no heading", () => {
     render(<MainTable responsive={true} rows={rows} />);
     expect(screen.getAllByRole("rowheader")[0]).not.toHaveAttribute(
-      "data-heading"
+      "data-heading",
     );
   });
 
@@ -131,14 +131,14 @@ describe("MainTable", () => {
     render(<MainTable headers={headers} responsive={true} rows={rows} />);
     expect(screen.getAllByRole("gridcell")[2]).toHaveAttribute(
       "data-heading",
-      "Replacement"
+      "Replacement",
     );
   });
 
   it("can be paginated", () => {
     render(<MainTable paginate={2} rows={rows} />);
     expect(
-      screen.getByRole("button", { name: PaginationButtonLabel.Next })
+      screen.getByRole("button", { name: PaginationButtonLabel.Next }),
     ).toBeInTheDocument();
     expect(screen.getAllByRole("row")).toHaveLength(2);
   });
@@ -146,7 +146,7 @@ describe("MainTable", () => {
   it("can change the page", async () => {
     render(<MainTable paginate={2} rows={rows} />);
     await userEvent.click(
-      screen.getByRole("button", { name: PaginationButtonLabel.Next })
+      screen.getByRole("button", { name: PaginationButtonLabel.Next }),
     );
     expect(screen.getAllByRole("row")).toHaveLength(1);
     expect(screen.getAllByRole("rowheader")[0].textContent).toEqual("Idle");
@@ -174,11 +174,11 @@ describe("MainTable", () => {
       render(<MainTable headers={headers} rows={rows} sortable={true} />);
       // Sortable headers should have the sort prop set.
       expect(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       ).toHaveAttribute("aria-sort", "none");
       // non-sortable headers should not have the sort prop set.
       expect(
-        screen.getByRole("columnheader", { name: "Disks" })
+        screen.getByRole("columnheader", { name: "Disks" }),
       ).not.toHaveAttribute("aria-sort");
     });
 
@@ -187,63 +187,63 @@ describe("MainTable", () => {
       const rowItems = screen.getAllByRole("row");
       // Check the initial status order.
       expect(within(rowItems[1]).getByRole("rowheader").textContent).toBe(
-        "Ready"
+        "Ready",
       );
 
       expect(within(rowItems[2]).getByRole("rowheader").textContent).toBe(
-        "Waiting"
+        "Waiting",
       );
 
       expect(within(rowItems[3]).getByRole("rowheader").textContent).toBe(
-        "Idle"
+        "Idle",
       );
 
       await userEvent.click(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       );
       // The status should now be ascending.
       expect(within(rowItems[1]).getByRole("rowheader").textContent).toBe(
-        "Idle"
+        "Idle",
       );
 
       expect(within(rowItems[2]).getByRole("rowheader").textContent).toBe(
-        "Ready"
+        "Ready",
       );
 
       expect(within(rowItems[3]).getByRole("rowheader").textContent).toBe(
-        "Waiting"
+        "Waiting",
       );
 
       await userEvent.click(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       );
       // The status should now be descending.
       expect(within(rowItems[1]).getByRole("rowheader").textContent).toBe(
-        "Waiting"
+        "Waiting",
       );
 
       expect(within(rowItems[2]).getByRole("rowheader").textContent).toBe(
-        "Ready"
+        "Ready",
       );
 
       expect(within(rowItems[3]).getByRole("rowheader").textContent).toBe(
-        "Idle"
+        "Idle",
       );
 
       await userEvent.click(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       );
       // The status be back to the original order.
       expect(within(rowItems[1]).getByRole("rowheader").textContent).toBe(
-        "Ready"
+        "Ready",
       );
 
       expect(within(rowItems[2]).getByRole("rowheader").textContent).toBe(
-        "Waiting"
+        "Waiting",
       );
 
       expect(within(rowItems[3]).getByRole("rowheader").textContent).toBe(
-        "Idle"
+        "Idle",
       );
     });
 
@@ -251,14 +251,14 @@ describe("MainTable", () => {
       render(<MainTable headers={headers} rows={rows} sortable={true} />);
       const rowItems = screen.getAllByRole("row");
       await userEvent.click(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       );
 
       const expectedOrder = ["Idle", "Ready", "Waiting"];
       // The status should now be ascending.
       for (let i = 1; i < 4; i++) {
         expect(within(rowItems[i]).getByRole("rowheader").textContent).toBe(
-          expectedOrder[i - 1]
+          expectedOrder[i - 1],
         );
       }
 
@@ -266,7 +266,7 @@ describe("MainTable", () => {
       // The status should not change
       for (let i = 1; i < 4; i++) {
         expect(within(rowItems[i]).getByRole("rowheader").textContent).toBe(
-          expectedOrder[i - 1]
+          expectedOrder[i - 1],
         );
       }
 
@@ -274,7 +274,7 @@ describe("MainTable", () => {
       // The status should not change
       for (let i = 1; i < 4; i++) {
         expect(within(rowItems[i]).getByRole("rowheader").textContent).toBe(
-          expectedOrder[i - 1]
+          expectedOrder[i - 1],
         );
       }
     });
@@ -287,11 +287,11 @@ describe("MainTable", () => {
           headers={headers}
           rows={rows}
           sortable={true}
-        />
+        />,
       );
       // Sortable headers should have the sort prop set.
       expect(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       ).toHaveAttribute("aria-sort", "descending");
     });
 
@@ -303,13 +303,13 @@ describe("MainTable", () => {
           headers={headers}
           rows={rows}
           sortable={true}
-        />
+        />,
       );
       expect(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       ).toHaveAttribute("aria-sort", "descending");
       expect(
-        screen.getByRole("columnheader", { name: "Cores" })
+        screen.getByRole("columnheader", { name: "Cores" }),
       ).toHaveAttribute("aria-sort", "none");
       rerender(
         <MainTable
@@ -318,13 +318,13 @@ describe("MainTable", () => {
           headers={headers}
           rows={rows}
           sortable={true}
-        />
+        />,
       );
       expect(
-        screen.getByRole("columnheader", { name: "Status" })
+        screen.getByRole("columnheader", { name: "Status" }),
       ).toHaveAttribute("aria-sort", "none");
       expect(
-        screen.getByRole("columnheader", { name: "Cores" })
+        screen.getByRole("columnheader", { name: "Cores" }),
       ).toHaveAttribute("aria-sort", "ascending");
     });
 
@@ -339,12 +339,12 @@ describe("MainTable", () => {
           rows={rows}
           sortable={true}
           hiddenCaption={captionText}
-        />
+        />,
       );
 
       // can't target the caption using getByRole :(
       expect(screen.getByTestId("hidden-caption").textContent).toEqual(
-        captionText
+        captionText,
       );
     });
   });
diff --git a/src/components/MainTable/MainTable.tsx b/src/components/MainTable/MainTable.tsx
index 0f812ac59..88934c6c4 100644
--- a/src/components/MainTable/MainTable.tsx
+++ b/src/components/MainTable/MainTable.tsx
@@ -117,7 +117,7 @@ export type Props = PropsWithSpread<
       a: MainTableRow,
       b: MainTableRow,
       currentSortDirection: SortDirection,
-      currentSortKey: MainTableHeader["sortKey"]
+      currentSortKey: MainTableHeader["sortKey"],
     ) => -1 | 0 | 1;
     /**
      * A hidden caption to display on the table for screen readers
@@ -131,7 +131,7 @@ const updateSort = (
   setSortKey: (sortKey: MainTableHeader["sortKey"]) => void,
   setSortDirection: (direction: SortDirection) => void,
   sortKey: MainTableHeader["sortKey"],
-  sortDirection: SortDirection
+  sortDirection: SortDirection,
 ) => {
   let newDirection = null;
   if (sortDirection === "none") {
@@ -152,7 +152,7 @@ const generateHeaders = (
   headers: Props["headers"],
   sortable: Props["sortable"],
   setSortKey: (sortKey: MainTableHeader["sortKey"]) => void,
-  setSortDirection: (direction: SortDirection) => void
+  setSortDirection: (direction: SortDirection) => void,
 ) => {
   const headerItems = headers.map(({ content, sortKey, ...props }, index) => {
     let sortDirection: SortDirection;
@@ -174,7 +174,7 @@ const generateHeaders = (
                 setSortKey,
                 setSortDirection,
                 sortKey,
-                sortDirection
+                sortDirection,
               )
             : undefined
         }
@@ -206,7 +206,7 @@ const generateRows = ({
   rows.map(
     (
       { columns, expanded, expandedContent, key, sortData, ...rowProps },
-      index
+      index,
     ) => {
       const cellItems = columns?.map(({ content, ...cellProps }, index) => {
         const headerContent = headers && headers[index]["content"];
@@ -242,7 +242,7 @@ const generateRows = ({
           )}
         </TableRow>
       );
-    }
+    },
   );
 
 const sortRows = ({
@@ -275,7 +275,7 @@ const sortRows = ({
       };
     }
     sortedRows.sort((a, b) =>
-      sortFunction(a, b, currentSortDirection, currentSortKey)
+      sortFunction(a, b, currentSortDirection, currentSortKey),
     );
   }
   return sortedRows;
@@ -327,7 +327,7 @@ const MainTable = ({
         sortable,
         sortFunction,
       }),
-    [currentSortDirection, currentSortKey, rows, sortable, sortFunction]
+    [currentSortDirection, currentSortKey, rows, sortable, sortFunction],
   );
 
   const {
@@ -365,7 +365,7 @@ const MainTable = ({
             headers,
             sortable,
             updateSort,
-            setSortDirection
+            setSortDirection,
           )}
         {
           // If the table has no rows, return empty state message
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index b596f1af8..8792a4153 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -14,14 +14,14 @@ describe("Modal ", () => {
         ]}
       >
         Button tester
-      </Modal>
+      </Modal>,
     );
     expect(screen.getAllByRole("button").length).toEqual(2);
   });
 
   it("displays any content in the button row", () => {
     const { container } = render(
-      <Modal buttonRow={<div>I am not a button</div>}>Button tester</Modal>
+      <Modal buttonRow={<div>I am not a button</div>}>Button tester</Modal>,
     );
     expect(container.innerHTML).toContain("I am not a button");
     expect(container.innerHTML).toContain("Button tester");
@@ -31,7 +31,7 @@ describe("Modal ", () => {
     const { container } = render(
       <Modal close={jest.fn()} title="Confirm delete">
         Are you sure?
-      </Modal>
+      </Modal>,
     );
     expect(container.querySelector(".p-modal__button-row")).toBeNull();
   });
@@ -48,7 +48,7 @@ describe("Modal ", () => {
 
   it("can pass extra classes to the wrapper", () => {
     const { container } = render(
-      <Modal className="extra-class">Bare bones.</Modal>
+      <Modal className="extra-class">Bare bones.</Modal>,
     );
     expect(container.querySelector(".extra-class")).toBeInTheDocument();
   });
@@ -57,10 +57,10 @@ describe("Modal ", () => {
     const { container } = render(
       <Modal title="Test" close={jest.fn()}>
         My modal
-      </Modal>
+      </Modal>,
     );
     expect(container.querySelector("button.p-modal__close")).toBe(
-      document.activeElement
+      document.activeElement,
     );
   });
 
@@ -77,7 +77,7 @@ describe("Modal ", () => {
         }
       >
         Bare bones
-      </Modal>
+      </Modal>,
     );
 
     const closeButton = container.querySelector("button.p-modal__close");
@@ -94,7 +94,7 @@ describe("Modal ", () => {
     const { container } = render(
       <Modal title="Test" close={jest.fn()}>
         Bare bones
-      </Modal>
+      </Modal>,
     );
 
     const closeButton = container.querySelector("button.p-modal__close");
@@ -132,7 +132,7 @@ describe("Modal ", () => {
           Bare bones
         </Modal>
         <MockEscEventComponent onEscPress={mockHandleEscPress} />
-      </>
+      </>,
     );
 
     await userEvent.keyboard("{Escape}");
@@ -147,7 +147,7 @@ describe("Modal ", () => {
         <Modal title="Test" close={jest.fn()}>
           Bare bones
         </Modal>
-      </div>
+      </div>,
     );
 
     const closeButton = container.querySelector("button.p-modal__close");
@@ -163,7 +163,7 @@ describe("Modal ", () => {
         <Modal title="Test" close={jest.fn()} shouldPropagateClickEvent={true}>
           Bare bones
         </Modal>
-      </div>
+      </div>,
     );
 
     const closeButton = container.querySelector("button.p-modal__close");
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index cca0e6f96..e264d58ae 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -78,7 +78,7 @@ export const Modal = ({
   };
 
   const handleEscKey = (
-    event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>
+    event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>,
   ) => {
     if ("nativeEvent" in event && event.nativeEvent.stopImmediatePropagation) {
       event.nativeEvent.stopImmediatePropagation();
@@ -103,7 +103,7 @@ export const Modal = ({
 
   useEffect(() => {
     focusableModalElements.current = modalRef.current.querySelectorAll(
-      focusableElementSelectors
+      focusableElementSelectors,
     );
     let focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
@@ -134,7 +134,7 @@ export const Modal = ({
   };
 
   const handleOverlayOnMouseDown = (
-    event: React.MouseEvent<HTMLDivElement>
+    event: React.MouseEvent<HTMLDivElement>,
   ) => {
     if (event.target === modalRef.current) {
       shouldClose.current = true;
diff --git a/src/components/ModularTable/ModularTable.stories.tsx b/src/components/ModularTable/ModularTable.stories.tsx
index c7c063499..2a3899cf7 100644
--- a/src/components/ModularTable/ModularTable.stories.tsx
+++ b/src/components/ModularTable/ModularTable.stories.tsx
@@ -79,7 +79,7 @@ export const Default: Story = {
             className: "u-align-text--right",
           },
         ],
-        []
+        [],
       )}
       // eslint-disable-next-line react-hooks/rules-of-hooks
       data={React.useMemo(
@@ -106,7 +106,7 @@ export const Default: Story = {
             finished: "ages ago",
           },
         ],
-        []
+        [],
       )}
     />
   ),
@@ -143,7 +143,7 @@ export const Empty: Story = {
             className: "u-align-text--right",
           },
         ],
-        []
+        [],
       )}
       data={[]}
       emptyMsg="Waiting for data..."
@@ -217,7 +217,7 @@ export const Sortable: Story = {
             sortType: "basic",
           },
         ],
-        []
+        [],
       )}
       // eslint-disable-next-line react-hooks/rules-of-hooks
       data={React.useMemo(
@@ -244,7 +244,7 @@ export const Sortable: Story = {
             finished: "ages ago",
           },
         ],
-        []
+        [],
       )}
     />
   ),
@@ -290,7 +290,7 @@ export const Subrows: Story = {
               ),
           },
         ],
-        []
+        [],
       )}
       // eslint-disable-next-line react-hooks/rules-of-hooks
       data={React.useMemo(
@@ -334,7 +334,7 @@ export const Subrows: Story = {
             ],
           },
         ],
-        []
+        [],
       )}
     />
   ),
diff --git a/src/components/ModularTable/ModularTable.test.tsx b/src/components/ModularTable/ModularTable.test.tsx
index 923707c21..67dd28c7c 100644
--- a/src/components/ModularTable/ModularTable.test.tsx
+++ b/src/components/ModularTable/ModularTable.test.tsx
@@ -92,19 +92,19 @@ describe("ModularTable", () => {
         initialSortColumn="disks"
         initialSortDirection="descending"
         sortable
-      />
+      />,
     );
     const tableBody = screen.getAllByRole("rowgroup")[1];
     const rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(3);
     expect(within(rowItems[0]).queryAllByRole("cell")[3]).toHaveTextContent(
-      "3"
+      "3",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[3]).toHaveTextContent(
-      "2"
+      "2",
     );
     expect(within(rowItems[2]).queryAllByRole("cell")[3]).toHaveTextContent(
-      "2"
+      "2",
     );
   });
 
@@ -136,13 +136,13 @@ describe("ModularTable", () => {
     const rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(3);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Waiting"
+      "Waiting",
     );
     expect(within(rowItems[2]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
   });
 
@@ -179,30 +179,30 @@ describe("ModularTable", () => {
     const tableBody = screen.getAllByRole("rowgroup")[1];
     let rowItems = within(tableBody).getAllByRole("row");
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Waiting"
+      "Waiting",
     );
     expect(within(rowItems[2]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Error"
+      "Error",
     );
     expect(within(rowItems[3]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     await userEvent.click(screen.getByRole("columnheader", { name: "Cores" }));
     rowItems = within(tableBody).getAllByRole("row");
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[2]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Error"
+      "Error",
     );
     expect(within(rowItems[3]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Waiting"
+      "Waiting",
     );
   });
 
@@ -215,7 +215,7 @@ describe("ModularTable", () => {
 
   it("renders empty message when data is empty", () => {
     render(
-      <ModularTable columns={columns} data={[]} emptyMsg="Nothing here" />
+      <ModularTable columns={columns} data={[]} emptyMsg="Nothing here" />,
     );
 
     const rowItems = screen.getAllByRole("row");
@@ -223,13 +223,13 @@ describe("ModularTable", () => {
     expect(
       within(rowItems[rowItems.length - 1]).getByRole("gridcell", {
         name: "Nothing here",
-      })
+      }),
     ).toBeInTheDocument();
   });
 
   it("renders a row with footer content", () => {
     render(
-      <ModularTable columns={columns} data={data} footer="This is a footer" />
+      <ModularTable columns={columns} data={data} footer="This is a footer" />,
     );
 
     const rowItems = screen.getAllByRole("row");
@@ -237,7 +237,7 @@ describe("ModularTable", () => {
     expect(
       within(rowItems[rowItems.length - 1]).getByRole("gridcell", {
         name: "This is a footer",
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -258,11 +258,11 @@ describe("ModularTable", () => {
               ? "This is a cell with custom label"
               : undefined,
         })}
-      />
+      />,
     );
 
     expect(
-      screen.getByRole("cell", { name: "This is a cell with custom label" })
+      screen.getByRole("cell", { name: "This is a cell with custom label" }),
     ).toBeInTheDocument();
   });
 
@@ -274,7 +274,7 @@ describe("ModularTable", () => {
         getCellProps={({ column }) => ({
           role: column.id === "status" ? "rowheader" : undefined,
         })}
-      />
+      />,
     );
     const tableBody = screen.getAllByRole("rowgroup")[1];
     const rowItems = within(tableBody).getAllByRole("row");
@@ -294,13 +294,13 @@ describe("ModularTable", () => {
           "aria-label":
             row.values.status === "Idle" ? "Custom idle row label" : undefined,
         })}
-      />
+      />,
     );
     const tableBody = screen.getAllByRole("rowgroup")[1];
     expect(
       within(tableBody).getByRole("row", {
         name: "Custom idle row label",
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -347,33 +347,33 @@ describe("ModularTable", () => {
     let rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     await userEvent.click(screen.getByRole("columnheader", { name: "Cores" }));
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     await userEvent.click(
-      screen.getByRole("button", { name: "Change table data" })
+      screen.getByRole("button", { name: "Change table data" }),
     );
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(3);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Error"
+      "Error",
     );
     expect(within(rowItems[2]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
   });
 
@@ -396,33 +396,33 @@ describe("ModularTable", () => {
 
     expect(screen.getAllByRole("columnheader")).toHaveLength(2);
     expect(
-      screen.getByRole("columnheader", { name: "Status" })
+      screen.getByRole("columnheader", { name: "Status" }),
     ).toHaveAttribute("aria-sort", "none");
     expect(
-      screen.getByRole("columnheader", { name: "Not Sortable" })
+      screen.getByRole("columnheader", { name: "Not Sortable" }),
     ).not.toHaveAttribute("aria-sort");
 
     const tableBody = screen.getAllByRole("rowgroup")[1];
     let rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
 
     await userEvent.click(
-      screen.getByRole("columnheader", { name: "Not Sortable" })
+      screen.getByRole("columnheader", { name: "Not Sortable" }),
     );
 
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
   });
 
@@ -458,10 +458,10 @@ describe("ModularTable", () => {
     let rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
 
     await userEvent.click(header[1]);
@@ -469,10 +469,10 @@ describe("ModularTable", () => {
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
 
     await userEvent.click(header[2]);
@@ -480,10 +480,10 @@ describe("ModularTable", () => {
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
   });
 
@@ -510,21 +510,21 @@ describe("ModularTable", () => {
 
     expect(screen.getAllByRole("columnheader")).toHaveLength(2);
     expect(
-      screen.getByRole("columnheader", { name: "Status" })
+      screen.getByRole("columnheader", { name: "Status" }),
     ).toHaveAttribute("aria-sort", "none");
     expect(screen.getByRole("columnheader", { name: "0" })).toHaveAttribute(
       "aria-sort",
-      "none"
+      "none",
     );
 
     const tableBody = screen.getAllByRole("rowgroup")[1];
     let rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
 
     await userEvent.click(screen.getByRole("columnheader", { name: "0" }));
@@ -532,10 +532,10 @@ describe("ModularTable", () => {
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
   });
 
@@ -562,21 +562,21 @@ describe("ModularTable", () => {
 
     expect(screen.getAllByRole("columnheader")).toHaveLength(2);
     expect(
-      screen.getByRole("columnheader", { name: "Status" })
+      screen.getByRole("columnheader", { name: "Status" }),
     ).toHaveAttribute("aria-sort", "none");
     expect(screen.getByRole("columnheader", { name: "JSX" })).toHaveAttribute(
       "aria-sort",
-      "none"
+      "none",
     );
 
     const tableBody = screen.getAllByRole("rowgroup")[1];
     let rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
 
     await userEvent.click(screen.getByRole("columnheader", { name: "JSX" }));
@@ -584,10 +584,10 @@ describe("ModularTable", () => {
     rowItems = within(tableBody).getAllByRole("row");
     expect(rowItems).toHaveLength(2);
     expect(within(rowItems[0]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Ready"
+      "Ready",
     );
     expect(within(rowItems[1]).queryAllByRole("cell")[0]).toHaveTextContent(
-      "Idle"
+      "Idle",
     );
   });
 });
diff --git a/src/components/ModularTable/ModularTable.tsx b/src/components/ModularTable/ModularTable.tsx
index e7004b3c3..7c70a2a1f 100644
--- a/src/components/ModularTable/ModularTable.tsx
+++ b/src/components/ModularTable/ModularTable.tsx
@@ -46,19 +46,19 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<
      * This function is used to resolve any props needed for a particular column's header cell.
      */
     getHeaderProps?: (
-      header: HeaderGroup<D>
+      header: HeaderGroup<D>,
     ) => Partial<TableHeaderProps & HTMLProps<HTMLTableHeaderCellElement>>;
     /**
      * This function is used to resolve any props needed for a particular row.
      */
     getRowProps?: (
-      row: Row<D>
+      row: Row<D>,
     ) => Partial<TableRowProps & HTMLProps<HTMLTableRowElement>>;
     /**
      * This function is used to resolve any props needed for a particular cell.
      */
     getCellProps?: (
-      cell: Cell<D>
+      cell: Cell<D>,
     ) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
     getRowId?: UseTableOptions<D>["getRowId"];
     /**
@@ -79,7 +79,7 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<
 
 const generateCell = <D extends Record<string, unknown>>(
   cell: Cell<D>,
-  getCellProps: Props<D>["getCellProps"]
+  getCellProps: Props<D>["getCellProps"],
 ) => {
   const hasColumnIcon = cell.column.getCellIcon;
   const iconName = hasColumnIcon && cell.column.getCellIcon?.(cell);
@@ -106,7 +106,7 @@ const generateRows = <D extends Record<string, unknown>>(
   rows: Row<D>[],
   prepareRow: (row: Row<D>) => void,
   getRowProps: Props<D>["getRowProps"],
-  getCellProps: Props<D>["getCellProps"]
+  getCellProps: Props<D>["getCellProps"],
 ) => {
   let tableRows: ReactNode[] = [];
   rows.forEach((row) => {
@@ -117,11 +117,11 @@ const generateRows = <D extends Record<string, unknown>>(
     tableRows.push(
       <TableRow {...row.getRowProps(getRowProps?.(row))}>
         {row.cells.map((cell) => generateCell<D>(cell, getCellProps))}
-      </TableRow>
+      </TableRow>,
     );
     if (row.subRows?.length) {
       tableRows = tableRows.concat(
-        generateRows<D>(row.subRows, prepareRow, getRowProps, getCellProps)
+        generateRows<D>(row.subRows, prepareRow, getRowProps, getCellProps),
       );
     }
   });
@@ -205,7 +205,7 @@ function ModularTable<D extends Record<string, unknown>>({
             },
           ]
         : [],
-    [initialSortColumn, initialSortDirection]
+    [initialSortColumn, initialSortDirection],
   );
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
     useTable<D>(
@@ -218,7 +218,7 @@ function ModularTable<D extends Record<string, unknown>>({
         },
         autoResetSortBy,
       },
-      sortable ? useSortBy : undefined
+      sortable ? useSortBy : undefined,
     );
 
   const showEmpty: boolean = !!emptyMsg && (!rows || rows.length === 0);
diff --git a/src/components/MultiSelect/FadeInDown/FadeInDown.test.tsx b/src/components/MultiSelect/FadeInDown/FadeInDown.test.tsx
index 73f218756..3ef4778d2 100644
--- a/src/components/MultiSelect/FadeInDown/FadeInDown.test.tsx
+++ b/src/components/MultiSelect/FadeInDown/FadeInDown.test.tsx
@@ -7,7 +7,7 @@ it("renders with correct attributes", () => {
   render(
     <FadeInDown className="test-class" isVisible>
       <div>Content</div>
-    </FadeInDown>
+    </FadeInDown>,
   );
 
   // eslint-disable-next-line testing-library/no-node-access
@@ -20,14 +20,14 @@ it("hides and reveals children", () => {
   const { rerender } = render(
     <FadeInDown isVisible>
       <div>Content</div>
-    </FadeInDown>
+    </FadeInDown>,
   );
   expect(screen.getByText("Content")).toBeInTheDocument();
 
   rerender(
     <FadeInDown className="test-class" isVisible={false}>
       <div>Test child</div>
-    </FadeInDown>
+    </FadeInDown>,
   );
 
   expect(screen.queryByText("Content")).not.toBeInTheDocument();
diff --git a/src/components/MultiSelect/MultiSelect.stories.tsx b/src/components/MultiSelect/MultiSelect.stories.tsx
index c94821f2d..0ba38f1f4 100644
--- a/src/components/MultiSelect/MultiSelect.stories.tsx
+++ b/src/components/MultiSelect/MultiSelect.stories.tsx
@@ -6,7 +6,7 @@ import { MultiSelect, MultiSelectItem, MultiSelectProps } from "./MultiSelect";
 
 const Template = (props: MultiSelectProps) => {
   const [selectedItems, setSelectedItems] = useState<MultiSelectItem[]>(
-    props.selectedItems || []
+    props.selectedItems || [],
   );
   return (
     <MultiSelect
diff --git a/src/components/MultiSelect/MultiSelect.test.tsx b/src/components/MultiSelect/MultiSelect.test.tsx
index b1038af14..0cef6d39a 100644
--- a/src/components/MultiSelect/MultiSelect.test.tsx
+++ b/src/components/MultiSelect/MultiSelect.test.tsx
@@ -15,7 +15,7 @@ it("shows options when opened", async () => {
 
   items.forEach((item) => {
     expect(
-      screen.queryByRole("checkbox", { name: item.label })
+      screen.queryByRole("checkbox", { name: item.label }),
     ).not.toBeInTheDocument();
   });
 
@@ -23,7 +23,7 @@ it("shows options when opened", async () => {
 
   items.forEach((item) => {
     expect(
-      screen.getByRole("checkbox", { name: item.label })
+      screen.getByRole("checkbox", { name: item.label }),
     ).toBeInTheDocument();
   });
 });
@@ -37,15 +37,19 @@ it("opens the dropdown when the combobox is clicked", async () => {
 
 it("can have some options preselected", async () => {
   render(
-    <MultiSelect variant="condensed" items={items} selectedItems={[items[0]]} />
+    <MultiSelect
+      variant="condensed"
+      items={items}
+      selectedItems={[items[0]]}
+    />,
   );
   expect(screen.getByRole("combobox")).toHaveTextContent(items[0].label);
   expect(
-    screen.queryByRole("checkbox", { name: items[0].label })
+    screen.queryByRole("checkbox", { name: items[0].label }),
   ).not.toBeInTheDocument();
   await userEvent.click(screen.getByRole("combobox"));
   expect(
-    screen.getByRole("checkbox", { name: items[0].label })
+    screen.getByRole("checkbox", { name: items[0].label }),
   ).toBeInTheDocument();
 });
 
@@ -57,7 +61,7 @@ it("can select options from the dropdown", async () => {
       items={items}
       onItemsUpdate={onItemsUpdate}
       onSelectItem={onSelectItem}
-    />
+    />,
   );
   await userEvent.click(screen.getByRole("combobox"));
   await userEvent.click(screen.getByLabelText(items[0].label));
@@ -74,12 +78,12 @@ it("can remove options that have been selected", async () => {
       selectedItems={items}
       onItemsUpdate={onItemsUpdate}
       onDeselectItem={onDeselectItem}
-    />
+    />,
   );
   await userEvent.click(screen.getByRole("combobox"));
   expect(screen.getAllByRole("listitem")).toHaveLength(3);
   await userEvent.click(
-    within(screen.getByRole("listbox")).getByLabelText(items[0].label)
+    within(screen.getByRole("listbox")).getByLabelText(items[0].label),
   );
   expect(onItemsUpdate).toHaveBeenCalledWith(items.slice(1));
   expect(onDeselectItem).toHaveBeenCalledWith(items[0]);
@@ -99,14 +103,14 @@ it("can display a custom dropdown header and footer", async () => {
       dropdownHeader={<button>custom header button</button>}
       dropdownFooter={<button>custom footer button</button>}
       items={items}
-    />
+    />,
   );
   await userEvent.click(screen.getByRole("combobox"));
   expect(
-    screen.getByRole("button", { name: "custom header button" })
+    screen.getByRole("button", { name: "custom header button" }),
   ).toBeInTheDocument();
   expect(
-    screen.getByRole("button", { name: "custom footer button" })
+    screen.getByRole("button", { name: "custom footer button" }),
   ).toBeInTheDocument();
 });
 
@@ -116,18 +120,22 @@ it("can not display the footer", async () => {
       dropdownFooter={<button>custom footer button</button>}
       items={items}
       showDropdownFooter={false}
-    />
+    />,
   );
   await userEvent.click(screen.getByRole("combobox"));
   expect(
-    screen.queryByRole("button", { name: "custom footer button" })
+    screen.queryByRole("button", { name: "custom footer button" }),
   ).not.toBeInTheDocument();
 });
 
 it("selects all items and clears selection when respective buttons are clicked", async () => {
   const onItemsUpdate = jest.fn();
   render(
-    <MultiSelect items={items} variant="search" onItemsUpdate={onItemsUpdate} />
+    <MultiSelect
+      items={items}
+      variant="search"
+      onItemsUpdate={onItemsUpdate}
+    />,
   );
   await userEvent.click(screen.getByRole("combobox"));
   await userEvent.type(screen.getByRole("combobox"), "item");
@@ -155,7 +163,11 @@ it("closes the dropdown when clicking on the button", async () => {
 
 it("updates text in the input field if something is selected", async () => {
   render(
-    <MultiSelect items={items} selectedItems={[items[0]]} variant="condensed" />
+    <MultiSelect
+      items={items}
+      selectedItems={[items[0]]}
+      variant="condensed"
+    />,
   );
   expect(screen.getByRole("combobox")).toHaveTextContent(items[0].label);
 });
@@ -169,7 +181,7 @@ it("can display the placeholder when items are selected", async () => {
       variant="condensed"
       listSelected={false}
       placeholder={placeholder}
-    />
+    />,
   );
   expect(screen.getByRole("combobox")).toHaveTextContent(placeholder);
 });
@@ -186,7 +198,7 @@ it("can have one or more sections with titles", async () => {
 
   itemsWithGroup.forEach((item) => {
     expect(
-      screen.getByRole("heading", { name: item.group })
+      screen.getByRole("heading", { name: item.group }),
     ).toBeInTheDocument();
     expect(screen.getByRole("list", { name: item.group })).toBeInTheDocument();
   });
@@ -205,15 +217,15 @@ it("sorts grouped options alphabetically", async () => {
 
   const checkGroupOrder = async (
     groupName: string,
-    expectedLabels: string[]
+    expectedLabels: string[],
   ) => {
     const group = screen.getByRole("list", { name: groupName });
     await waitFor(() =>
       within(group)
         .getAllByRole("listitem")
         .forEach((item, index) =>
-          expect(item).toHaveTextContent(expectedLabels[index])
-        )
+          expect(item).toHaveTextContent(expectedLabels[index]),
+        ),
     );
   };
 
@@ -234,7 +246,7 @@ it("hides group title when no items match the search query", async () => {
 
   await userEvent.type(screen.getByRole("combobox"), "item two");
   expect(
-    screen.queryByRole("heading", { name: "Group 1" })
+    screen.queryByRole("heading", { name: "Group 1" }),
   ).not.toBeInTheDocument();
   expect(screen.getByRole("heading", { name: "Group 2" })).toBeInTheDocument();
 });
diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx
index e5aa95dfe..2cdcc768b 100644
--- a/src/components/MultiSelect/MultiSelect.tsx
+++ b/src/components/MultiSelect/MultiSelect.tsx
@@ -35,7 +35,7 @@ export type MultiSelectProps = {
 
 type ValueSet = Set<MultiSelectItem["value"]>;
 type GroupFn = (
-  items: Parameters<typeof getGroupedItems>[0]
+  items: Parameters<typeof getGroupedItems>[0],
 ) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
 type MultiSelectDropdownProps = {
@@ -97,11 +97,11 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
 }: MultiSelectDropdownProps) => {
   const selectedItemValues = useMemo(
     () => new Set(selectedItems.map((item) => item.value)),
-    [selectedItems]
+    [selectedItems],
   );
   const disabledItemValues = useMemo(
     () => new Set(disabledItems.map((item) => item.value)),
-    [disabledItems]
+    [disabledItems],
   );
   const [previouslySelectedItemValues, setPreviouslySelectedItemValues] =
     useState<ValueSet>(new Set(selectedItemValues));
@@ -117,7 +117,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
   const groupedItems = useMemo(
     () => (hasGroup ? groupFn(items) : [{ group: "Ungrouped", items }]),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [items, groupFn]
+    [items, groupFn],
   );
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = event.target;
@@ -211,7 +211,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
   const inputId = useId();
   const selectedItemsLabel = selectedItems
     .filter((selectedItem) =>
-      items.some((item) => item.value === selectedItem.value)
+      items.some((item) => item.value === selectedItem.value),
     )
     .map((el) => el.label)
     .join(", ");
@@ -227,8 +227,8 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
             const enabledItems = items.filter(
               (item) =>
                 !disabledItems.some(
-                  (disabledItem) => disabledItem.value === item.value
-                )
+                  (disabledItem) => disabledItem.value === item.value,
+                ),
             );
             updateItems([...selectedItems, ...enabledItems]);
           }}
@@ -241,8 +241,8 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
           onClick={() => {
             const disabledSelectedItems = selectedItems.filter((item) =>
               disabledItems.some(
-                (disabledItem) => disabledItem.value === item.value
-              )
+                (disabledItem) => disabledItem.value === item.value,
+              ),
             );
             updateItems(disabledSelectedItems);
           }}
@@ -333,7 +333,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
         items={
           filter.length > 0
             ? items.filter((item) =>
-                item.label.toLowerCase().includes(filter.toLowerCase())
+                item.label.toLowerCase().includes(filter.toLowerCase()),
               )
             : items
         }
diff --git a/src/components/Navigation/Navigation.test.tsx b/src/components/Navigation/Navigation.test.tsx
index 3fef6df84..ec7de53a7 100644
--- a/src/components/Navigation/Navigation.test.tsx
+++ b/src/components/Navigation/Navigation.test.tsx
@@ -29,7 +29,7 @@ it("displays full width", () => {
   render(<Navigation fullWidth logo={<img src="" alt="" />} />);
 
   expect(
-    document.querySelector(".p-navigation__row--full-width")
+    document.querySelector(".p-navigation__row--full-width"),
   ).toBeInTheDocument();
   expect(document.querySelector(".p-navigation__row")).not.toBeInTheDocument();
 });
@@ -39,10 +39,10 @@ it("passes additional classes to the header element", () => {
     <Navigation
       className="not-a-footer-thats-for-sure"
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(screen.getByRole("banner")).toHaveClass(
-    "p-navigation not-a-footer-thats-for-sure"
+    "p-navigation not-a-footer-thats-for-sure",
   );
 });
 
@@ -51,11 +51,11 @@ it("passes additional props to the header element", () => {
     <Navigation
       aria-label="This is definitely the header"
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(screen.getByRole("banner")).toHaveAttribute(
     "aria-label",
-    "This is definitely the header"
+    "This is definitely the header",
   );
 });
 
@@ -68,7 +68,7 @@ it("can display a standard logo", () => {
         title: "This is the site name",
         url: "/this/is/the/logo/link",
       }}
-    />
+    />,
   );
   const homePageLink = screen.getByRole("link", { name: "Homepage" });
   expect(homePageLink).toBeInTheDocument();
@@ -100,7 +100,7 @@ it("can display a standard logo with a generated link", () => {
         title: "This is the site name",
         url: "/this/is/the/logo/link",
       }}
-    />
+    />,
   );
   const homePageLink = screen.getByRole("link", { name: "Homepage" });
   expect(homePageLink).toBeInTheDocument();
@@ -121,12 +121,12 @@ it("can provide a custom logo", () => {
           This logo is totally not anything like the normal one.
         </a>
       }
-    />
+    />,
   );
   expect(
     screen.getByRole("link", {
       name: "This logo is totally not anything like the normal one.",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -135,10 +135,10 @@ it("can display menus", () => {
     <Navigation
       items={[{ items: [], label: "THIS IS A MENU" }]}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(
-    screen.getByRole("button", { name: "THIS IS A MENU" })
+    screen.getByRole("button", { name: "THIS IS A MENU" }),
   ).toBeInTheDocument();
 });
 
@@ -147,10 +147,10 @@ it("can display links", () => {
     <Navigation
       items={[{ label: "THIS IS A LINK", url: "/this/is/the/url" }]}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(
-    screen.getByRole("link", { name: "THIS IS A LINK" })
+    screen.getByRole("link", { name: "THIS IS A LINK" }),
   ).toBeInTheDocument();
 });
 
@@ -165,10 +165,10 @@ it("can pass additional classes to links", () => {
         },
       ]}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(screen.getByRole("link", { name: "THIS IS A LINK" })).toHaveClass(
-    "p-navigation__link this-link-has-a-very-nice-custom-class"
+    "p-navigation__link this-link-has-a-very-nice-custom-class",
   );
 });
 
@@ -184,12 +184,12 @@ it("can mark a nav item as selected", () => {
       ]}
       leftNavProps={{ "aria-label": "Left nav" }}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   expect(
     within(screen.getByLabelText("Left nav"))
       .getByRole("listitem")
-      .className.includes("is-selected")
+      .className.includes("is-selected"),
   ).toBe(true);
 });
 
@@ -198,18 +198,18 @@ it("displays without search", () => {
   expect(
     screen.queryByRole("button", {
       name: "Search",
-    })
+    }),
   ).not.toBeInTheDocument();
   expect(
     screen.queryByRole("listitem", {
       name: "Search",
-    })
+    }),
   ).not.toBeInTheDocument();
   expect(
-    document.querySelector(".p-navigation__search")
+    document.querySelector(".p-navigation__search"),
   ).not.toBeInTheDocument();
   expect(
-    document.querySelector(".p-navigation__search-overlay")
+    document.querySelector(".p-navigation__search-overlay"),
   ).not.toBeInTheDocument();
 });
 
@@ -219,19 +219,19 @@ it("displays with search", () => {
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
       rightNavProps={{ "aria-label": "Right nav" }}
-    />
+    />,
   );
   expect(
     within(screen.getByLabelText("Right nav")).getByRole("button", {
       name: "Search",
-    })
+    }),
   ).toBeInTheDocument();
   expect(
-    document.querySelector(".p-navigation__link--search-toggle")
+    document.querySelector(".p-navigation__link--search-toggle"),
   ).toBeInTheDocument();
   expect(document.querySelector(".p-navigation__search")).toBeInTheDocument();
   expect(
-    document.querySelector(".p-navigation__search-overlay")
+    document.querySelector(".p-navigation__search-overlay"),
   ).toBeInTheDocument();
 });
 
@@ -240,11 +240,11 @@ it("can open the search form", async () => {
     <Navigation
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   await userEvent.click(screen.getAllByRole("button", { name: "Search" })[0]);
   expect(screen.getByRole("banner").className.includes("has-search-open")).toBe(
-    true
+    true,
   );
   expect(screen.getByRole("searchbox")).toBeInTheDocument();
 });
@@ -254,7 +254,7 @@ it("focuses on the searchbox when it appears", async () => {
     <Navigation
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   await userEvent.click(screen.getAllByRole("button", { name: "Search" })[0]);
   expect(screen.getByRole("searchbox")).toHaveFocus();
@@ -265,11 +265,11 @@ it("closes the search form when the escape key is pressed", async () => {
     <Navigation
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   await userEvent.click(screen.getAllByRole("button", { name: "Search" })[0]);
   expect(screen.getByRole("banner").className.includes("has-search-open")).toBe(
-    true
+    true,
   );
   expect(screen.getByRole("searchbox")).toBeInTheDocument();
   fireEvent.keyDown(document, { key: "Escape", code: "Escape" });
@@ -282,7 +282,7 @@ it("closes the search form when opening the mobile menu", async () => {
       items={items}
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   const banner = screen.getByRole("banner");
   // Open the search form.
@@ -298,7 +298,7 @@ it("closes the search form when clicking on the overlay", async () => {
     <Navigation
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   const banner = screen.getByRole("banner");
   // Open the search form.
@@ -306,7 +306,7 @@ it("closes the search form when clicking on the overlay", async () => {
   expect(banner.className.includes("has-search-open")).toBe(true);
   expect(screen.getByRole("searchbox")).toBeInTheDocument();
   await userEvent.click(
-    document.querySelector(".p-navigation__search-overlay")
+    document.querySelector(".p-navigation__search-overlay"),
   );
   expect(banner.className.includes("has-search-open")).toBe(false);
   expect(screen.queryByRole("searchbox")).not.toBeInTheDocument();
@@ -318,7 +318,7 @@ it("closes the mobile menu when opening the search form", async () => {
       items={items}
       logo={<img src="" alt="" />}
       searchProps={{ onSearch: jest.fn() }}
-    />
+    />,
   );
   const banner = screen.getByRole("banner");
   // Open the mobile menu.
@@ -339,11 +339,11 @@ it("can open the mobile menu", async () => {
 
 it("hides the mobile menu button when there are no navigation items to display", () => {
   render(
-    <Navigation items={[]} itemsRight={[]} logo={<img src="" alt="" />} />
+    <Navigation items={[]} itemsRight={[]} logo={<img src="" alt="" />} />,
   );
   const banner = screen.getByRole("banner");
   expect(
-    within(banner).queryByRole("button", { name: "Menu" })
+    within(banner).queryByRole("button", { name: "Menu" }),
   ).not.toBeInTheDocument();
 });
 
@@ -352,7 +352,7 @@ it("closes the mobile menu when clicking on a nav link", async () => {
     <Navigation
       items={[{ label: "THIS IS A LINK", url: "/this/is/the/url" }]}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   const banner = screen.getByRole("banner");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));
@@ -366,7 +366,7 @@ it("does not close the mobile menu when clicking on a nav menu", async () => {
     <Navigation
       items={[{ items: [], label: "THIS IS A MENU" }]}
       logo={<img src="" alt="" />}
-    />
+    />,
   );
   const banner = screen.getByRole("banner");
   await userEvent.click(screen.getByRole("button", { name: "Menu" }));
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 7a8392654..5dd87c2f0 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -131,7 +131,7 @@ const generateLogo = (logo: Props["logo"], generateLink: GenerateLink) => {
 const generateItems = (
   items: NavItem[],
   closeMobileMenu: () => void,
-  generateLink?: GenerateLink | null
+  generateLink?: GenerateLink | null,
 ) =>
   items.map((item, i) =>
     isMenu(item) ? (
@@ -155,7 +155,7 @@ const generateItems = (
           }}
         />
       </li>
-    )
+    ),
   );
 
 /**
diff --git a/src/components/Navigation/NavigationLink/NavigationLink.test.tsx b/src/components/Navigation/NavigationLink/NavigationLink.test.tsx
index 911ace66d..ebecde4d9 100644
--- a/src/components/Navigation/NavigationLink/NavigationLink.test.tsx
+++ b/src/components/Navigation/NavigationLink/NavigationLink.test.tsx
@@ -9,7 +9,7 @@ it("generates a standard anchor", () => {
   expect(
     screen.getByRole("link", {
       name: "Go here",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -18,7 +18,7 @@ it("generates a button", () => {
   expect(
     screen.getByRole("button", {
       name: "Go here",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -26,12 +26,12 @@ it("can select an anchor", () => {
   render(
     <NavigationLink
       link={{ isSelected: true, label: "Go here", url: "/to/here" }}
-    />
+    />,
   );
   expect(
     screen.getByRole("link", {
       name: "Go here",
-    })
+    }),
   ).toHaveAttribute("aria-current", "page");
 });
 
@@ -40,12 +40,12 @@ it("generates a custom link", () => {
     <NavigationLink
       generateLink={({ label }) => <button>{label}</button>}
       link={{ label: "Go here", url: "/to/here" }}
-    />
+    />,
   );
   expect(
     screen.getByRole("button", {
       name: "Go here",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -56,11 +56,11 @@ it("can select a custom link", () => {
         <button aria-current={props["aria-current"]}>{label}</button>
       )}
       link={{ isSelected: true, label: "Go here", url: "/to/here" }}
-    />
+    />,
   );
   expect(
     screen.getByRole("button", {
       name: "Go here",
-    })
+    }),
   ).toHaveAttribute("aria-current", "page");
 });
diff --git a/src/components/Navigation/NavigationMenu/NavigationMenu.test.tsx b/src/components/Navigation/NavigationMenu/NavigationMenu.test.tsx
index b3ebac744..3d607b907 100644
--- a/src/components/Navigation/NavigationMenu/NavigationMenu.test.tsx
+++ b/src/components/Navigation/NavigationMenu/NavigationMenu.test.tsx
@@ -12,7 +12,7 @@ it("can display when closed", () => {
   expect(
     screen.getByRole("button", {
       name: "Today's menu",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -21,13 +21,13 @@ it("can open the menu", async () => {
   expect(screen.queryByRole("list")).not.toBeInTheDocument();
   await userEvent.click(screen.getByRole("button", { name: "Today's menu" }));
   expect(screen.getByRole("listitem").className.includes("is-active")).toBe(
-    true
+    true,
   );
   expect(screen.getByRole("list")).toHaveAttribute("aria-hidden", "false");
   expect(
     screen.getByRole("button", {
       name: "Today's menu",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -35,7 +35,9 @@ it("can align menu items to the right", async () => {
   render(<NavigationMenu alignRight items={[]} label="Today's menu" />);
   await userEvent.click(screen.getByRole("button", { name: "Today's menu" }));
   expect(
-    screen.getByRole("list").className.includes("p-navigation__dropdown--right")
+    screen
+      .getByRole("list")
+      .className.includes("p-navigation__dropdown--right"),
   ).toBe(true);
 });
 
@@ -44,14 +46,14 @@ it("can display links using a standard anchor", async () => {
     <NavigationMenu
       items={[{ label: "Eggs florentine", url: "/eggs/florentine" }]}
       label="Today's menu"
-    />
+    />,
   );
   // Open the menu so the links are displayed.
   await userEvent.click(screen.getByRole("button", { name: "Today's menu" }));
   expect(
     screen.getByRole("link", {
       name: "Eggs florentine",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -61,14 +63,14 @@ it("can display links using a custom link", async () => {
       generateLink={({ label }) => <button>{label}</button>}
       items={[{ label: "Eggs benedict", url: "/eggs/benedict" }]}
       label="Today's menu"
-    />
+    />,
   );
   // Open the menu so the links are displayed.
   await userEvent.click(screen.getByRole("button", { name: "Today's menu" }));
   expect(
     screen.getByRole("button", {
       name: "Eggs benedict",
-    })
+    }),
   ).toBeInTheDocument();
 });
 
@@ -83,13 +85,13 @@ it("can pass additional classes to the links", async () => {
         },
       ]}
       label="Today's menu"
-    />
+    />,
   );
   // Open the menu so the links are displayed.
   await userEvent.click(screen.getByRole("button", { name: "Today's menu" }));
   expect(
     screen.getByRole("link", {
       name: "Smashed avo",
-    })
+    }),
   ).toHaveClass("p-navigation__dropdown-item on-24-hour-rye");
 });
diff --git a/src/components/Navigation/NavigationMenu/NavigationMenu.tsx b/src/components/Navigation/NavigationMenu/NavigationMenu.tsx
index ff74a1b50..e6dee8ddf 100644
--- a/src/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/src/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -38,7 +38,7 @@ const NavigationMenu = ({
         "p-navigation__item--dropdown-toggle",
         {
           "is-active": isOpen,
-        }
+        },
       )}
       ref={menuRef}
     >
@@ -67,7 +67,7 @@ const NavigationMenu = ({
                 ...item,
                 className: classNames(
                   "p-navigation__dropdown-item",
-                  item.className
+                  item.className,
                 ),
               }}
             />
diff --git a/src/components/Notification/Notification.test.tsx b/src/components/Notification/Notification.test.tsx
index 424c84450..2190e1f08 100644
--- a/src/components/Notification/Notification.test.tsx
+++ b/src/components/Notification/Notification.test.tsx
@@ -17,7 +17,7 @@ describe("Notification", () => {
         title="Permissions changed"
       >
         Anyone with access can view your invited users.
-      </Notification>
+      </Notification>,
     );
     expect(screen.getByTestId("notification")).toMatchSnapshot();
   });
@@ -52,11 +52,11 @@ describe("Notification", () => {
     const onDismiss = jest.fn();
     const { rerender } = render(<Notification />);
     expect(
-      screen.queryByRole("button", { name: Label.Close })
+      screen.queryByRole("button", { name: Label.Close }),
     ).not.toBeInTheDocument();
     rerender(<Notification onDismiss={onDismiss} />);
     expect(
-      screen.getByRole("button", { name: Label.Close })
+      screen.getByRole("button", { name: Label.Close }),
     ).toBeInTheDocument();
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await user.click(screen.getByRole("button", { name: Label.Close }));
@@ -70,7 +70,7 @@ describe("Notification", () => {
     rerender(<Notification timestamp={timestamp} />);
     expect(screen.getByText(timestamp)).toBeInTheDocument();
     expect(screen.getByText(timestamp)).toHaveClass(
-      "p-notification__timestamp"
+      "p-notification__timestamp",
     );
   });
 
@@ -80,7 +80,7 @@ describe("Notification", () => {
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
 
     rerender(
-      <Notification actions={[{ label: "Action", onClick: onActionClick }]} />
+      <Notification actions={[{ label: "Action", onClick: onActionClick }]} />,
     );
     expect(screen.getByRole("button", { name: "Action" })).toBeInTheDocument();
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 79c62fae4..46ea259c6 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -150,7 +150,7 @@ const Notification = ({
 
   if (IS_DEV && (close || status || type)) {
     console.warn(
-      "The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical.github.io/react-components/?path=/docs/notification--information#deprecated"
+      "The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical.github.io/react-components/?path=/docs/notification--information#deprecated",
     );
   }
 
diff --git a/src/components/NotificationProvider/NotificationProvider.test.tsx b/src/components/NotificationProvider/NotificationProvider.test.tsx
index 3a1297c59..81143bd8e 100644
--- a/src/components/NotificationProvider/NotificationProvider.test.tsx
+++ b/src/components/NotificationProvider/NotificationProvider.test.tsx
@@ -28,7 +28,7 @@ describe("NotificationProvider", () => {
               label: "Retry",
               onClick: handleRetry,
             },
-          ]
+          ],
         );
 
       return (
@@ -49,7 +49,7 @@ describe("NotificationProvider", () => {
             <NotificationConsumer />
           </div>
         </NotificationProvider>
-      </div>
+      </div>,
     );
 
     const clickBtn = async (testId: string) =>
diff --git a/src/components/NotificationProvider/NotificationProvider.tsx b/src/components/NotificationProvider/NotificationProvider.tsx
index ac193c00d..30b12408f 100644
--- a/src/components/NotificationProvider/NotificationProvider.tsx
+++ b/src/components/NotificationProvider/NotificationProvider.tsx
@@ -31,7 +31,7 @@ export const NotificationProvider: FC<NotifyProviderProps> = ({
   pathname,
 }) => {
   const [notification, setNotification] = useState<NotificationType | null>(
-    null
+    null,
   );
 
   const clear = () => notification !== null && setNotification(null);
diff --git a/src/components/NotificationProvider/messageBuilder.tsx b/src/components/NotificationProvider/messageBuilder.tsx
index f3fe3efe3..921b03de1 100644
--- a/src/components/NotificationProvider/messageBuilder.tsx
+++ b/src/components/NotificationProvider/messageBuilder.tsx
@@ -20,7 +20,7 @@ export const info = (message: ReactNode, title?: string): NotificationType => {
 
 export const success = (
   message: ReactNode,
-  title?: string
+  title?: string,
 ): NotificationType => {
   return {
     message,
@@ -33,7 +33,7 @@ export const failure = (
   title: string,
   error: unknown,
   message?: ReactNode,
-  actions?: NotificationAction[]
+  actions?: NotificationAction[],
 ): NotificationType => {
   return {
     actions,
diff --git a/src/components/NotificationProvider/types.ts b/src/components/NotificationProvider/types.ts
index 9b3bee529..852247876 100644
--- a/src/components/NotificationProvider/types.ts
+++ b/src/components/NotificationProvider/types.ts
@@ -36,7 +36,7 @@ export interface NotificationHelper {
     title: string,
     error: unknown,
     message?: ReactNode,
-    actions?: NotificationAction[]
+    actions?: NotificationAction[],
   ) => NotificationType;
   info: (message: ReactNode, title?: string) => NotificationType;
   success: (message: ReactNode, title?: string) => NotificationType;
diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx
index a0b172e42..22b2caca1 100644
--- a/src/components/Pagination/Pagination.test.tsx
+++ b/src/components/Pagination/Pagination.test.tsx
@@ -16,7 +16,7 @@ describe("<Pagination />", () => {
         totalItems={50}
         paginate={jest.fn()}
         currentPage={1}
-      />
+      />,
     );
 
     expect(screen.getByRole("navigation")).toMatchSnapshot();
@@ -30,7 +30,7 @@ describe("<Pagination />", () => {
         totalItems={5}
         paginate={jest.fn()}
         currentPage={1}
-      />
+      />,
     );
 
     expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
@@ -43,17 +43,17 @@ describe("<Pagination />", () => {
         totalItems={50}
         paginate={jest.fn()}
         currentPage={1}
-      />
+      />,
     );
 
     expect(
-      screen.queryByRole("listitem", { name: "…" })
+      screen.queryByRole("listitem", { name: "…" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: PaginationButtonLabel.Next })
+      screen.getByRole("button", { name: PaginationButtonLabel.Next }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: PaginationButtonLabel.Previous })
+      screen.getByRole("button", { name: PaginationButtonLabel.Previous }),
     ).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "1" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "2" })).toBeInTheDocument();
@@ -69,15 +69,15 @@ describe("<Pagination />", () => {
         totalItems={1000}
         paginate={jest.fn()}
         currentPage={5}
-      />
+      />,
     );
 
     expect(screen.getAllByText("…")).toHaveLength(2);
     expect(
-      screen.getByRole("button", { name: PaginationButtonLabel.Next })
+      screen.getByRole("button", { name: PaginationButtonLabel.Next }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: PaginationButtonLabel.Previous })
+      screen.getByRole("button", { name: PaginationButtonLabel.Previous }),
     ).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "1" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "4" })).toBeInTheDocument();
@@ -93,7 +93,7 @@ describe("<Pagination />", () => {
         totalItems={1000}
         paginate={jest.fn()}
         currentPage={2}
-      />
+      />,
     );
 
     // There should only be one ellipsis.
@@ -107,7 +107,7 @@ describe("<Pagination />", () => {
         totalItems={1000}
         paginate={jest.fn()}
         currentPage={98}
-      />
+      />,
     );
 
     // There should only be one ellipsis.
@@ -124,7 +124,7 @@ describe("<Pagination />", () => {
           paginate={jest.fn()}
           currentPage={98}
         />
-      </form>
+      </form>,
     );
 
     await userEvent.click(screen.getByRole("button", { name: "Next page" }));
@@ -140,10 +140,10 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={98}
         centered
-      />
+      />,
     );
     expect(document.querySelector(".p-pagination__items")).toHaveClass(
-      "u-align--center"
+      "u-align--center",
     );
   });
 
@@ -155,25 +155,25 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={1}
         showLabels
-      />
+      />,
     );
     const previousButton = screen.getByRole("button", {
       name: new RegExp(PaginationButtonLabel.Previous),
     });
     expect(previousButton.querySelector("span")).toHaveTextContent(
-      PaginationButtonLabel.Previous
+      PaginationButtonLabel.Previous,
     );
     const nextButton = screen.getByRole("button", {
       name: new RegExp(PaginationButtonLabel.Next),
     });
     expect(nextButton.querySelector("span")).toHaveTextContent(
-      PaginationButtonLabel.Next
+      PaginationButtonLabel.Next,
     );
     expect(
       previousButton &&
         nextButton &&
         previousButton.compareDocumentPosition(nextButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -187,25 +187,25 @@ describe("<Pagination />", () => {
         showLabels
         forwardLabel={CustomButtonLabel.Next}
         backLabel={CustomButtonLabel.Previous}
-      />
+      />,
     );
     const previousButton = screen.getByRole("button", {
       name: new RegExp(CustomButtonLabel.Previous),
     });
     expect(previousButton.querySelector("span")).toHaveTextContent(
-      CustomButtonLabel.Previous
+      CustomButtonLabel.Previous,
     );
     const nextButton = screen.getByRole("button", {
       name: new RegExp(CustomButtonLabel.Next),
     });
     expect(nextButton.querySelector("span")).toHaveTextContent(
-      CustomButtonLabel.Next
+      CustomButtonLabel.Next,
     );
     expect(
       previousButton &&
         nextButton &&
         previousButton.compareDocumentPosition(nextButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -218,17 +218,17 @@ describe("<Pagination />", () => {
         currentPage={1}
         forwardDisabled
         backDisabled
-      />
+      />,
     );
     expect(
       screen.getByRole("button", {
         name: PaginationButtonLabel.Next,
-      })
+      }),
     ).toBeDisabled();
     expect(
       screen.getByRole("button", {
         name: PaginationButtonLabel.Previous,
-      })
+      }),
     ).toBeDisabled();
   });
 
@@ -242,12 +242,12 @@ describe("<Pagination />", () => {
         paginate={mockHandlePaginate}
         currentPage={1}
         onForward={mockHandleForward}
-      />
+      />,
     );
     await userEvent.click(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Next),
-      })
+      }),
     );
     expect(mockHandlePaginate).toHaveBeenCalledTimes(1);
     expect(mockHandlePaginate).toHaveBeenCalledWith(2);
@@ -265,12 +265,12 @@ describe("<Pagination />", () => {
         paginate={mockHandlePaginate}
         currentPage={2}
         onBack={mockHandleBack}
-      />
+      />,
     );
     await userEvent.click(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Previous),
-      })
+      }),
     );
     expect(mockHandlePaginate).toHaveBeenCalledTimes(1);
     expect(mockHandlePaginate).toHaveBeenCalledWith(1);
@@ -286,18 +286,18 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={2}
         hideNumbers
-      />
+      />,
     );
     expect(screen.getAllByRole("button")).toHaveLength(2);
     expect(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Next),
-      })
+      }),
     ).toBeVisible();
     expect(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Previous),
-      })
+      }),
     ).toBeVisible();
   });
 
@@ -309,7 +309,7 @@ describe("<Pagination />", () => {
   it("should center the buttons-only pagination", () => {
     render(<Pagination onForward={jest.fn()} onBack={jest.fn()} centered />);
     expect(document.querySelector(".p-pagination__items")).toHaveClass(
-      "u-align--center"
+      "u-align--center",
     );
   });
 
@@ -319,19 +319,19 @@ describe("<Pagination />", () => {
       name: new RegExp(PaginationButtonLabel.Previous),
     });
     expect(previousButton.querySelector("span")).toHaveTextContent(
-      PaginationButtonLabel.Previous
+      PaginationButtonLabel.Previous,
     );
     const nextButton = screen.getByRole("button", {
       name: new RegExp(PaginationButtonLabel.Next),
     });
     expect(nextButton.querySelector("span")).toHaveTextContent(
-      PaginationButtonLabel.Next
+      PaginationButtonLabel.Next,
     );
     expect(
       previousButton &&
         nextButton &&
         previousButton.compareDocumentPosition(nextButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -343,25 +343,25 @@ describe("<Pagination />", () => {
         showLabels
         forwardLabel={CustomButtonLabel.Next}
         backLabel={CustomButtonLabel.Previous}
-      />
+      />,
     );
     const previousButton = screen.getByRole("button", {
       name: new RegExp(CustomButtonLabel.Previous),
     });
     expect(previousButton.querySelector("span")).toHaveTextContent(
-      CustomButtonLabel.Previous
+      CustomButtonLabel.Previous,
     );
     const nextButton = screen.getByRole("button", {
       name: new RegExp(CustomButtonLabel.Next),
     });
     expect(nextButton.querySelector("span")).toHaveTextContent(
-      CustomButtonLabel.Next
+      CustomButtonLabel.Next,
     );
     expect(
       previousButton &&
         nextButton &&
         previousButton.compareDocumentPosition(nextButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -372,17 +372,17 @@ describe("<Pagination />", () => {
         onBack={jest.fn()}
         backDisabled
         forwardDisabled
-      />
+      />,
     );
     expect(
       screen.getByRole("button", {
         name: PaginationButtonLabel.Next,
-      })
+      }),
     ).toBeDisabled();
     expect(
       screen.getByRole("button", {
         name: PaginationButtonLabel.Previous,
-      })
+      }),
     ).toBeDisabled();
   });
 
@@ -392,7 +392,7 @@ describe("<Pagination />", () => {
     await userEvent.click(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Next),
-      })
+      }),
     );
     expect(mockHandleForward).toHaveBeenCalledTimes(1);
   });
@@ -403,7 +403,7 @@ describe("<Pagination />", () => {
     await userEvent.click(
       screen.getByRole("button", {
         name: new RegExp(PaginationButtonLabel.Previous),
-      })
+      }),
     );
     expect(mockHandleBack).toHaveBeenCalledTimes(1);
   });
@@ -416,7 +416,7 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={1}
         truncateThreshold={3}
-      />
+      />,
     );
 
     expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
@@ -434,7 +434,7 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={2}
         truncateThreshold={3}
-      />
+      />,
     );
 
     expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
@@ -452,7 +452,7 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={3}
         truncateThreshold={3}
-      />
+      />,
     );
 
     expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
@@ -470,7 +470,7 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={4}
         truncateThreshold={3}
-      />
+      />,
     );
 
     expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
@@ -488,7 +488,7 @@ describe("<Pagination />", () => {
         paginate={jest.fn()}
         currentPage={4}
         truncateThreshold={3}
-      />
+      />,
     );
 
     expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
@@ -496,7 +496,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "5" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "10" })).toHaveLength(
-      1
+      1,
     );
     expect(screen.queryAllByText("…")).toHaveLength(2);
   });
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index f5777c4e2..e90d5e365 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -14,7 +14,7 @@ const generatePaginationItems = (
   pageNumbers: number[],
   currentPage: number,
   truncateThreshold: number,
-  changePage: (page: number) => void
+  changePage: (page: number) => void,
 ) => {
   const lastPage = pageNumbers.length;
   const truncated = lastPage > truncateThreshold;
@@ -53,7 +53,7 @@ const generatePaginationItems = (
         number={1}
         isActive={currentPage === 1}
         onClick={() => changePage(1)}
-      />
+      />,
     );
     if (!visiblePages.includes(2)) {
       items.push(<PaginationItemSeparator key="sep1" />);
@@ -68,7 +68,7 @@ const generatePaginationItems = (
         isActive={number === currentPage}
         onClick={() => changePage(number)}
       />
-    ))
+    )),
   );
 
   if (truncated) {
@@ -82,7 +82,7 @@ const generatePaginationItems = (
         number={lastPage}
         isActive={currentPage === lastPage}
         onClick={() => changePage(lastPage)}
-      />
+      />,
     );
   }
   return items;
@@ -286,7 +286,7 @@ const Pagination = ({
               pageNumbers,
               currentPage,
               truncateThreshold,
-              changeNumberedPage
+              changeNumberedPage,
             )
           : null}
         <PaginationButton
diff --git a/src/components/Pagination/PaginationButton/PaginationButton.test.tsx b/src/components/Pagination/PaginationButton/PaginationButton.test.tsx
index da5a27634..a0d21c54f 100644
--- a/src/components/Pagination/PaginationButton/PaginationButton.test.tsx
+++ b/src/components/Pagination/PaginationButton/PaginationButton.test.tsx
@@ -18,7 +18,7 @@ describe("PaginationButton", () => {
 
   it("should contain default label before the forward icon", () => {
     render(
-      <PaginationButton direction="forward" onClick={() => {}} showLabel />
+      <PaginationButton direction="forward" onClick={() => {}} showLabel />,
     );
     const defaultLabel = screen
       .getByRole("button", { name: new RegExp(Label.Next) })
@@ -29,7 +29,7 @@ describe("PaginationButton", () => {
       defaultLabel &&
         icon &&
         defaultLabel.compareDocumentPosition(icon) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -44,7 +44,7 @@ describe("PaginationButton", () => {
       defaultLabel &&
         icon &&
         defaultLabel.compareDocumentPosition(icon) &
-          Node.DOCUMENT_POSITION_PRECEDING
+          Node.DOCUMENT_POSITION_PRECEDING,
     ).toBeTruthy();
   });
 
@@ -55,7 +55,7 @@ describe("PaginationButton", () => {
         onClick={() => {}}
         showLabel
         label={CustomLabel.Next}
-      />
+      />,
     );
     const customLabel = screen
       .getByRole("button", { name: new RegExp(CustomLabel.Next) })
@@ -66,7 +66,7 @@ describe("PaginationButton", () => {
       customLabel &&
         icon &&
         customLabel.compareDocumentPosition(icon) &
-          Node.DOCUMENT_POSITION_FOLLOWING
+          Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
   });
 
@@ -77,7 +77,7 @@ describe("PaginationButton", () => {
         onClick={() => {}}
         showLabel
         label={CustomLabel.Previous}
-      />
+      />,
     );
     const customLabel = screen
       .getByRole("button", { name: new RegExp(CustomLabel.Previous) })
@@ -88,7 +88,7 @@ describe("PaginationButton", () => {
       customLabel &&
         icon &&
         customLabel.compareDocumentPosition(icon) &
-          Node.DOCUMENT_POSITION_PRECEDING
+          Node.DOCUMENT_POSITION_PRECEDING,
     ).toBeTruthy();
   });
 
@@ -113,7 +113,7 @@ describe("PaginationButton", () => {
         direction="forward"
         onClick={mockHandleClick}
         disabled
-      />
+      />,
     );
     const disabledButton = screen.getByRole("button", { name: Label.Next });
     expect(disabledButton).toBeDisabled();
@@ -124,7 +124,7 @@ describe("PaginationButton", () => {
   it("should be diabled and onClick will not be called when clicking the back button", async () => {
     const mockHandleClick = jest.fn();
     render(
-      <PaginationButton direction="back" onClick={mockHandleClick} disabled />
+      <PaginationButton direction="back" onClick={mockHandleClick} disabled />,
     );
     const disabledButton = screen.getByRole("button", { name: Label.Previous });
     expect(disabledButton).toBeDisabled();
diff --git a/src/components/Pagination/PaginationItem/PaginationItem.test.tsx b/src/components/Pagination/PaginationItem/PaginationItem.test.tsx
index d878fc718..d8ece8b31 100644
--- a/src/components/Pagination/PaginationItem/PaginationItem.test.tsx
+++ b/src/components/Pagination/PaginationItem/PaginationItem.test.tsx
@@ -7,7 +7,7 @@ describe("<PaginationItem />", () => {
   // snapshot tests
   it("renders and matches the snapshot", () => {
     const { container } = render(
-      <PaginationItem number={1} onClick={jest.fn()} />
+      <PaginationItem number={1} onClick={jest.fn()} />,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx
index c7cbd5312..feff651e0 100644
--- a/src/components/Panel/Panel.test.tsx
+++ b/src/components/Panel/Panel.test.tsx
@@ -21,17 +21,17 @@ it("displays a logo", () => {
         name: "name.svg",
         nameAlt: "Name SVG",
       }}
-    />
+    />,
   );
   const link = screen.getByRole("link", { name: "Icon SVG Name SVG" });
   expect(link).toHaveAttribute("href", "http://example.com");
   expect(within(link).getByRole("img", { name: "Icon SVG" })).toHaveAttribute(
     "src",
-    "icon.svg"
+    "icon.svg",
   );
   expect(within(link).getByRole("img", { name: "Name SVG" })).toHaveAttribute(
     "src",
-    "name.svg"
+    "name.svg",
   );
 });
 
@@ -49,10 +49,10 @@ it("logo handles different components", () => {
         name: "name.svg",
         nameAlt: "Name SVG",
       }}
-    />
+    />,
   );
   expect(
-    screen.getByRole("button", { name: "Icon SVG Name SVG" })
+    screen.getByRole("button", { name: "Icon SVG Name SVG" }),
   ).toHaveAttribute("title", "http://example.com");
 });
 
diff --git a/src/components/PasswordToggle/PasswordToggle.test.tsx b/src/components/PasswordToggle/PasswordToggle.test.tsx
index 0df83024e..505784e1a 100644
--- a/src/components/PasswordToggle/PasswordToggle.test.tsx
+++ b/src/components/PasswordToggle/PasswordToggle.test.tsx
@@ -7,10 +7,10 @@ import userEvent from "@testing-library/user-event";
 describe("PasswordToggle", () => {
   it("can add additional classes", () => {
     render(
-      <PasswordToggle label="password" id="test-id" className="extra-class" />
+      <PasswordToggle label="password" id="test-id" className="extra-class" />,
     );
     expect(screen.getByLabelText("password")).toHaveClass(
-      "p-form-validation__input"
+      "p-form-validation__input",
     );
     expect(screen.getByLabelText("password")).toHaveClass("extra-class");
   });
@@ -26,7 +26,7 @@ describe("PasswordToggle", () => {
     render(<PasswordToggle label="password" id="test-id" />);
     expect(screen.getByLabelText("password")).toHaveAttribute(
       "type",
-      "password"
+      "password",
     );
     await userEvent.click(screen.getByRole("button", { name: Label.Show }));
     expect(screen.getByLabelText("password")).toHaveAttribute("type", "text");
@@ -39,18 +39,18 @@ describe("PasswordToggle", () => {
         id="test-id"
         value="My test value"
         onChange={() => null}
-      />
+      />,
     );
     expect(screen.getByLabelText("password")).toHaveAttribute(
       "value",
-      "My test value"
+      "My test value",
     );
   });
 
   it("can display an error", async () => {
     render(<PasswordToggle error="Uh oh!" id="test-id" label="password" />);
     expect(screen.getByLabelText("password")).toHaveAccessibleErrorMessage(
-      "Uh oh!"
+      "Uh oh!",
     );
   });
 
diff --git a/src/components/PasswordToggle/PasswordToggle.tsx b/src/components/PasswordToggle/PasswordToggle.tsx
index 0af1b3a8f..5cc5a0e62 100644
--- a/src/components/PasswordToggle/PasswordToggle.tsx
+++ b/src/components/PasswordToggle/PasswordToggle.tsx
@@ -87,7 +87,7 @@ const PasswordToggle = React.forwardRef<HTMLInputElement, Props>(
       wrapperClassName,
       ...inputProps
     },
-    ref
+    ref,
   ): JSX.Element => {
     const [isPassword, setIsPassword] = useState(true);
     const validationId = useId();
@@ -152,7 +152,7 @@ const PasswordToggle = React.forwardRef<HTMLInputElement, Props>(
         />
       </Field>
     );
-  }
+  },
 );
 
 export default PasswordToggle;
diff --git a/src/components/Row/Row.test.tsx b/src/components/Row/Row.test.tsx
index ed8021b67..1a351651a 100644
--- a/src/components/Row/Row.test.tsx
+++ b/src/components/Row/Row.test.tsx
@@ -13,7 +13,7 @@ describe("Row ", () => {
     render(
       <Row data-testid="row" className="extra-class">
         Test content
-      </Row>
+      </Row>,
     );
     const row = screen.getByTestId("row");
     expect(row).toHaveClass("row");
diff --git a/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.tsx b/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.tsx
index ec64b0f97..a18843d2a 100644
--- a/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.tsx
+++ b/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.tsx
@@ -18,7 +18,7 @@ describe("Filter panel section", () => {
         searchTerm=""
         toggleSelected={jest.fn()}
         data={sampleData}
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(".p-filter-panel-section")).toMatchSnapshot();
@@ -31,23 +31,23 @@ describe("Filter panel section", () => {
         searchTerm=""
         toggleSelected={jest.fn()}
         data={sampleData}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-filter-panel-section")
+      document.querySelector(".p-filter-panel-section"),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "us-east1" })
+      screen.getByRole("button", { name: "us-east1" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "us-east2" })
+      screen.getByRole("button", { name: "us-east2" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "us-east3" })
+      screen.getByRole("button", { name: "us-east3" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("heading", { name: "Regions" })
+      screen.getByRole("heading", { name: "Regions" }),
     ).toBeInTheDocument();
   });
 
@@ -68,11 +68,11 @@ describe("Filter panel section", () => {
         searchTerm=""
         toggleSelected={jest.fn()}
         data={sampleData}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-search-and-filter__selected-count")
+      document.querySelector(".p-search-and-filter__selected-count"),
     ).not.toBeInTheDocument();
   });
 
@@ -93,13 +93,13 @@ describe("Filter panel section", () => {
         searchTerm=""
         toggleSelected={jest.fn()}
         data={sampleData}
-      />
+      />,
     );
     expect(
       // Use a query selector because the element's text is split up over
       // multiple elements so it can't be selected by its content.
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-filter-panel-section__counter")?.textContent
+      document.querySelector(".p-filter-panel-section__counter")?.textContent,
     ).toBe("+3");
   });
 
@@ -111,21 +111,21 @@ describe("Filter panel section", () => {
         toggleSelected={jest.fn()}
         data={sampleData}
         sectionHidden={false}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-filter-panel-section__chips")
+      document.querySelector(".p-filter-panel-section__chips"),
     ).toHaveAttribute("aria-expanded", "false");
     await userEvent.click(
       // Use a query selector because the element's text is split up over
       // multiple elements so it can't be selected by its content.
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-filter-panel-section__counter") as HTMLElement
+      document.querySelector(".p-filter-panel-section__counter") as HTMLElement,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-filter-panel-section__chips")
+      document.querySelector(".p-filter-panel-section__chips"),
     ).toHaveAttribute("aria-expanded", "true");
   });
 });
diff --git a/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx b/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx
index e0c371809..b6d6b0d7d 100644
--- a/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx
+++ b/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx
@@ -63,7 +63,7 @@ const FilterPanelSection = ({
   // Search chips for character match with search term
   const searchTermInChips = highlightSubString(
     chipValues.toString(),
-    searchTerm
+    searchTerm,
   ).match;
 
   const panelSectionVisible =
@@ -114,7 +114,7 @@ const FilterPanelSection = ({
               // should display
               const searchTermInChip = highlightSubString(
                 chip.value,
-                searchTerm
+                searchTerm,
               ).match;
               const chipVisible =
                 searchTermInChip ||
diff --git a/src/components/SearchAndFilter/SearchAndFilter.test.tsx b/src/components/SearchAndFilter/SearchAndFilter.test.tsx
index ef46bbdb5..595c4c5a0 100644
--- a/src/components/SearchAndFilter/SearchAndFilter.test.tsx
+++ b/src/components/SearchAndFilter/SearchAndFilter.test.tsx
@@ -41,7 +41,7 @@ describe("Search and filter", () => {
         data-testid="searchandfilter"
         filterPanelData={[]}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(screen.getByTestId("searchandfilter")).toMatchSnapshot();
   });
@@ -52,10 +52,10 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={[]}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(
-      screen.queryByRole("button", { name: Label.Clear })
+      screen.queryByRole("button", { name: Label.Clear }),
     ).not.toBeInTheDocument();
   });
 
@@ -66,7 +66,7 @@ describe("Search and filter", () => {
         data-testid="searchandfilter"
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(getPanel()).toHaveAttribute("aria-hidden", "true");
     await waitFor(async () => {
@@ -81,12 +81,12 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(getPanel()).toHaveAttribute("aria-hidden", "true");
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     expect(getPanel()).toHaveAttribute("aria-hidden", "false");
@@ -108,11 +108,11 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-search-and-filter__selected-count")
+      document.querySelector(".p-search-and-filter__selected-count"),
     ).not.toBeInTheDocument();
   });
 
@@ -132,15 +132,15 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-search-and-filter__selected-count")
+      document.querySelector(".p-search-and-filter__selected-count"),
     ).not.toBeInTheDocument();
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
@@ -165,12 +165,12 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     expect(getSearchContainer()).toHaveAttribute("aria-expanded", "false");
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
@@ -188,30 +188,30 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-search-and-filter__search-prompt")
+      document.querySelector(".p-search-and-filter__search-prompt"),
     ).not.toBeInTheDocument();
     await waitFor(async () => {
       await userEvent.clear(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.type(
         screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
-        "My new value"
+        "My new value",
       );
     });
     expect(
-      screen.getByRole("button", { name: "Search for My new value ..." })
+      screen.getByRole("button", { name: "Search for My new value ..." }),
     ).toBeInTheDocument();
   });
 
@@ -221,31 +221,31 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelectorAll(".p-filter-panel-section").length).toEqual(
-      3
+      3,
     );
     await waitFor(async () => {
       await userEvent.clear(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.type(
         screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
-        "Unknown value"
+        "Unknown value",
       );
     });
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelectorAll(".p-filter-panel-section").length).toEqual(
-      0
+      0,
     );
   });
 
@@ -255,42 +255,42 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.clear(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.type(
         screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
-        "Google"
+        "Google",
       );
     });
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelectorAll(".p-filter-panel-section").length).toEqual(
-      1
+      1,
     );
     await waitFor(async () => {
       await userEvent.clear(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.type(
         screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
-        "re"
+        "re",
       );
     });
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelectorAll(".p-filter-panel-section").length).toEqual(
-      2
+      2,
     );
   });
 
@@ -300,22 +300,22 @@ describe("Search and filter", () => {
       <SearchAndFilter
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.clear(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
       await userEvent.type(
         screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
-        "Google"
+        "Google",
       );
     });
     const boldText = document
@@ -333,15 +333,15 @@ describe("Search and filter", () => {
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
         existingSearchData={[{ lead: "Cloud", value: "Google" }]}
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     const lead = document.querySelector(
-      ".p-search-and-filter__search-container .p-chip__lead"
+      ".p-search-and-filter__search-container .p-chip__lead",
     )?.textContent;
     // eslint-disable-next-line testing-library/no-node-access
     const value = document.querySelector(
-      ".p-search-and-filter__search-container .p-chip__value"
+      ".p-search-and-filter__search-container .p-chip__value",
     )?.textContent;
     expect(lead).toBe("CLOUD");
     expect(value).toBe("Google");
@@ -357,23 +357,23 @@ describe("Search and filter", () => {
           { lead: "Cloud", value: "Google" },
           { lead: "Region", value: "eu-west-1" },
         ]}
-      />
+      />,
     );
     // eslint-disable-next-line testing-library/no-node-access
     const chips = document.querySelectorAll(
-      ".p-search-and-filter__search-container .p-chip"
+      ".p-search-and-filter__search-container .p-chip",
     );
     expect(chips.length).toBe(2);
 
     // eslint-disable-next-line testing-library/no-node-access
     const chip1Value = document.querySelector(
-      ".p-search-and-filter__search-container .p-chip:nth-child(1) .p-chip__value"
+      ".p-search-and-filter__search-container .p-chip:nth-child(1) .p-chip__value",
     )?.textContent;
     expect(chip1Value).toEqual("Google");
 
     // eslint-disable-next-line testing-library/no-node-access
     const chip2Value = document.querySelector(
-      ".p-search-and-filter__search-container .p-chip:nth-child(2) .p-chip__value"
+      ".p-search-and-filter__search-container .p-chip:nth-child(2) .p-chip__value",
     )?.textContent;
     expect(chip2Value).toEqual("eu-west-1");
   });
@@ -386,11 +386,11 @@ describe("Search and filter", () => {
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
         onPanelToggle={onPanelToggle}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     expect(onPanelToggle).toHaveBeenCalled();
@@ -414,11 +414,11 @@ describe("Search and filter", () => {
         filterPanelData={sampleData}
         returnSearchData={returnSearchData}
         onExpandChange={onExpandChange}
-      />
+      />,
     );
     await waitFor(async () => {
       await userEvent.click(
-        screen.getByRole("searchbox", { name: Label.SearchAndFilter })
+        screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
       );
     });
     await waitFor(async () => {
diff --git a/src/components/SearchAndFilter/SearchAndFilter.tsx b/src/components/SearchAndFilter/SearchAndFilter.tsx
index 685d75141..98ec155fd 100644
--- a/src/components/SearchAndFilter/SearchAndFilter.tsx
+++ b/src/components/SearchAndFilter/SearchAndFilter.tsx
@@ -128,7 +128,7 @@ const SearchAndFilter = ({
       const updatedCurrentSelected = currentSelected.filter(
         (currentSelectedChip) => {
           return currentSelectedChip.value !== chip.value;
-        }
+        },
       );
       setSearchData(updatedCurrentSelected);
     }
@@ -138,7 +138,7 @@ const SearchAndFilter = ({
   const removeFromSelected = (chip: SearchAndFilterChip) => {
     if (searchData.includes(chip)) {
       const updatedSelected = searchData.filter(
-        (searchDataChip) => searchDataChip !== chip
+        (searchDataChip) => searchDataChip !== chip,
       );
       setSearchData(updatedSelected);
     }
@@ -203,7 +203,7 @@ const SearchAndFilter = ({
     searchAndFilterRef.current,
     (fitsWindow) => setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16),
     0,
-    !filterPanelHidden
+    !filterPanelHidden,
   );
 
   // Add search prompt value to search on Enter key
diff --git a/src/components/SearchAndFilter/utils.tsx b/src/components/SearchAndFilter/utils.tsx
index 2c036aaee..70117ac6f 100644
--- a/src/components/SearchAndFilter/utils.tsx
+++ b/src/components/SearchAndFilter/utils.tsx
@@ -23,5 +23,5 @@ export const overflowingChipsCount = (chips, overflowRowLimit) => {
 export const isChipInArray = (chip, existingArr) =>
   existingArr?.some(
     (searchDataItem) =>
-      searchDataItem.lead === chip.lead && searchDataItem.value === chip.value
+      searchDataItem.lead === chip.lead && searchDataItem.value === chip.value,
   );
diff --git a/src/components/SearchBox/SearchBox.test.tsx b/src/components/SearchBox/SearchBox.test.tsx
index da398b822..7af21f22a 100644
--- a/src/components/SearchBox/SearchBox.test.tsx
+++ b/src/components/SearchBox/SearchBox.test.tsx
@@ -14,17 +14,17 @@ describe("SearchBox ", () => {
   it("shows the clear button when there is a value", () => {
     render(<SearchBox value="admin" />);
     expect(
-      screen.getByRole("button", { name: Label.Clear })
+      screen.getByRole("button", { name: Label.Clear }),
     ).toBeInTheDocument();
   });
 
   it("can externally control the value", () => {
     const { rerender } = render(
-      <SearchBox externallyControlled onChange={jest.fn()} value="admin" />
+      <SearchBox externallyControlled onChange={jest.fn()} value="admin" />,
     );
     expect(screen.getByRole("searchbox")).toHaveAttribute("value", "admin");
     rerender(
-      <SearchBox externallyControlled onChange={jest.fn()} value="new-admin" />
+      <SearchBox externallyControlled onChange={jest.fn()} value="new-admin" />,
     );
     expect(screen.getByRole("searchbox")).toHaveAttribute("value", "new-admin");
   });
@@ -55,7 +55,7 @@ describe("SearchBox ", () => {
     render(<SearchBox data-testid="testID" />);
     expect(screen.getByRole("searchbox")).toHaveAttribute(
       "data-testid",
-      "testID"
+      "testID",
     );
   });
 
@@ -68,7 +68,7 @@ describe("SearchBox ", () => {
 
   it("after pressing the clear button focus remains on the button", async () => {
     render(
-      <SearchBox externallyControlled onChange={jest.fn()} value="admin" />
+      <SearchBox externallyControlled onChange={jest.fn()} value="admin" />,
     );
     const searchInput = screen.getByRole("searchbox");
     const clearButton = screen.getByRole("button", {
@@ -86,7 +86,7 @@ describe("SearchBox ", () => {
         shouldRefocusAfterReset
         onChange={jest.fn()}
         value="admin"
-      />
+      />,
     );
     const searchInput = screen.getByRole("searchbox");
     const clearButton = screen.getByRole("button", {
@@ -105,7 +105,7 @@ describe("SearchBox ", () => {
         onChange={jest.fn()}
         onClear={handleOnClear}
         value="admin"
-      />
+      />,
     );
     await userEvent.click(screen.getByRole("button", { name: Label.Clear }));
     expect(handleOnClear).toBeCalled();
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 36f89d800..0ac5688f7 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -85,7 +85,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
       value,
       ...props
     }: Props,
-    forwardedRef
+    forwardedRef,
   ): JSX.Element => {
     const internalRef = useRef<HTMLInputElement>();
     const resetInput = () => {
@@ -157,7 +157,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
         </button>
       </div>
     );
-  }
+  },
 );
 
 SearchBox.displayName = "SearchBox";
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 0d11cee02..f6f67fa1d 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -15,7 +15,7 @@ describe("Select", () => {
           { value: "3", label: "Xenial Xerus" },
         ]}
         wrapperClassName="select"
-      />
+      />,
     );
     expect(screen.getByRole("combobox")).toMatchSnapshot();
   });
@@ -30,7 +30,7 @@ describe("Select", () => {
     render(<Select options={[]} onChange={onChangeMock} />);
     fireEvent.change(screen.getByRole("combobox"), event);
     expect(onChangeMock.mock.calls[0][0].target).toBe(
-      screen.getByRole("combobox")
+      screen.getByRole("combobox"),
     );
   });
 
diff --git a/src/components/SideNavigation/SideNavigation.test.tsx b/src/components/SideNavigation/SideNavigation.test.tsx
index d05a01496..2bdeccfa7 100644
--- a/src/components/SideNavigation/SideNavigation.test.tsx
+++ b/src/components/SideNavigation/SideNavigation.test.tsx
@@ -32,7 +32,7 @@ it("can apply props to the list elements", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("list")).toHaveClass("custom-list-class-one");
   expect(screen.getByRole("list")).toHaveClass("custom-list-class-two");
@@ -55,12 +55,12 @@ it("can display text items", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("link", { name: "Link one" })).toBeInTheDocument();
   expect(screen.getByText("Text one")).toBeInTheDocument();
   expect(
-    screen.queryByRole("link", { name: "Text one" })
+    screen.queryByRole("link", { name: "Text one" }),
   ).not.toBeInTheDocument();
 });
 
@@ -78,7 +78,7 @@ it("can display custom elements", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("button", { name: "Hello" })).toBeInTheDocument();
 });
@@ -100,7 +100,7 @@ it("displays links by default", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("link", { name: "Link one" })).toBeInTheDocument();
   expect(screen.getByRole("link", { name: "Link two" })).toBeInTheDocument();
@@ -120,7 +120,7 @@ it("displays links using a custom component", () => {
         },
       ]}
       linkComponent={Link}
-    />
+    />,
   );
   expect(screen.getByRole("button", { name: "Link one" })).toBeInTheDocument();
   expect(screen.getByRole("button", { name: "Link two" })).toBeInTheDocument();
@@ -140,7 +140,7 @@ it("displays a mix of links and custom components", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("link", { name: "Link one" })).toBeInTheDocument();
   expect(screen.getByRole("button", { name: "Link two" })).toBeInTheDocument();
@@ -163,7 +163,7 @@ it("sets components per link", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("button", { name: "Link one" })).toBeInTheDocument();
   expect(screen.getByRole("heading", { name: "Link two" })).toBeInTheDocument();
@@ -182,7 +182,7 @@ it("sets icons", () => {
           ],
         },
       ]}
-    />
+    />,
   );
   expect(container.firstChild).toHaveClass("p-side-navigation--icons");
 });
@@ -201,7 +201,7 @@ it("automatically determines if icon class should be applied from a list of item
           ],
         },
       ]}
-    />
+    />,
   );
   expect(container.firstChild).toHaveClass("p-side-navigation--icons");
 });
@@ -228,7 +228,7 @@ it("automatically determines if icon class should be applied from multiple menus
           ],
         },
       ]}
-    />
+    />,
   );
   expect(container.firstChild).toHaveClass("p-side-navigation--icons");
 });
@@ -255,7 +255,7 @@ it("automatically determines if icon class should be applied from object menus",
           ],
         },
       ]}
-    />
+    />,
   );
   expect(container.firstChild).toHaveClass("p-side-navigation--icons");
 });
diff --git a/src/components/SideNavigation/SideNavigation.tsx b/src/components/SideNavigation/SideNavigation.tsx
index dc60eeddd..4253ce958 100644
--- a/src/components/SideNavigation/SideNavigation.tsx
+++ b/src/components/SideNavigation/SideNavigation.tsx
@@ -67,7 +67,7 @@ const generateItem = <L = SideNavigationLinkDefaultElement,>(
   item: NavItem<L>,
   index: number,
   linkComponent?: Props<L>["linkComponent"],
-  dark?: boolean
+  dark?: boolean,
 ) => {
   if (isReactNode(item)) {
     return <SideNavigationItem key={index}>{item}</SideNavigationItem>;
@@ -97,7 +97,7 @@ const generateItems = <L = SideNavigationLinkDefaultElement,>(
   groups: (NavItemGroup<L> | null)[] | (NavGroup<L> | null)[] | null,
   listClassName?: string,
   linkComponent?: SideNavigationLinkProps["component"],
-  dark?: boolean
+  dark?: boolean,
 ) => {
   return groups
     ?.filter(Boolean)
@@ -115,7 +115,7 @@ const generateItems = <L = SideNavigationLinkDefaultElement,>(
           className={classNames(
             "p-side-navigation__list",
             listClassName,
-            "className" in group ? group.className : null
+            "className" in group ? group.className : null,
           )}
           key={g}
         >
@@ -128,12 +128,12 @@ const generateItems = <L = SideNavigationLinkDefaultElement,>(
 };
 
 const getHasIcons = <L = SideNavigationLinkDefaultElement,>(
-  groups: (NavItemGroup<L> | null)[] | (NavGroup<L> | null)[]
+  groups: (NavItemGroup<L> | null)[] | (NavGroup<L> | null)[],
 ) =>
   groups?.some((group) =>
     (group && "items" in group ? group.items : group)?.some((item) =>
-      isReactNode(item) ? false : item && "icon" in item && !!item.icon
-    )
+      isReactNode(item) ? false : item && "icon" in item && !!item.icon,
+    ),
   );
 
 /**
diff --git a/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.tsx b/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.tsx
index d78e61ee7..0101375ea 100644
--- a/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.tsx
+++ b/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.tsx
@@ -23,7 +23,7 @@ it("can use a custom component", () => {
 
 it("displays an icon", () => {
   render(
-    <SideNavigationBase icon="user" label="Test content" component="button" />
+    <SideNavigationBase icon="user" label="Test content" component="button" />,
   );
   expect(document.querySelector(".p-icon--user")).toBeInTheDocument();
 });
@@ -35,7 +35,7 @@ it("displays a light icon", () => {
       icon="user"
       label="Test content"
       component="button"
-    />
+    />,
   );
   expect(document.querySelector(".p-icon--user")).toHaveClass("is-light");
 });
@@ -47,7 +47,7 @@ it("displays a dark icon", () => {
       icon="user"
       label="Test content"
       component="button"
-    />
+    />,
   );
   expect(document.querySelector(".p-icon--user")).not.toHaveClass("is-light");
 });
diff --git a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.tsx b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.tsx
index 38c76c6b1..3a5f4d136 100644
--- a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.tsx
+++ b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.tsx
@@ -8,7 +8,7 @@ it("displays a link from props", () => {
   const label = "Test content";
   render(<SideNavigationItem label={label} href="#" />);
   expect(screen.getByRole("link", { name: label })).toHaveClass(
-    "p-side-navigation__link"
+    "p-side-navigation__link",
   );
 });
 
@@ -19,7 +19,7 @@ it("can use a custom link component", () => {
   const label = "Test content";
   render(<SideNavigationItem label={label} component={Link} />);
   expect(screen.getByRole("button", { name: label })).toHaveClass(
-    "p-side-navigation__link"
+    "p-side-navigation__link",
   );
 });
 
@@ -28,10 +28,10 @@ it("can replace link content with children", () => {
   render(
     <SideNavigationItem>
       <button>{label}</button>
-    </SideNavigationItem>
+    </SideNavigationItem>,
   );
   expect(screen.getByRole("button", { name: label })).toBeInTheDocument();
   expect(
-    document.querySelector(".p-side-navigation__link")
+    document.querySelector(".p-side-navigation__link"),
   ).not.toBeInTheDocument();
 });
diff --git a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
index 4b9ef0770..2222bda78 100644
--- a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
+++ b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
@@ -29,7 +29,7 @@ export type Props<L = SideNavigationLinkDefaultElement> =
   | ContentProps<L>;
 
 const SideNavigationItem = <L = SideNavigationLinkDefaultElement,>(
-  props: Props<L>
+  props: Props<L>,
 ) => {
   let content: ReactNode;
   let liProps: HTMLProps<HTMLLIElement> = {};
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
index eaba3716a..8990982bc 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
@@ -38,6 +38,6 @@ it("can use a custom link component", () => {
   const label = "Test content";
   render(<SideNavigationLink label={label} component={Link} />);
   expect(screen.getByRole("button", { name: label })).toHaveClass(
-    "p-side-navigation__link"
+    "p-side-navigation__link",
   );
 });
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
index 858250120..291790570 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
@@ -31,7 +31,7 @@ const SideNavigationLink = forwardRef<HTMLAnchorElement, Props>(
         {...props}
       />
     );
-  }
+  },
 );
 
 export default SideNavigationLink;
diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
index 9145996c1..9f5abe701 100644
--- a/src/components/Slider/Slider.test.tsx
+++ b/src/components/Slider/Slider.test.tsx
@@ -12,14 +12,14 @@ describe("Slider", () => {
         onChange={jest.fn()}
         showInput={false}
         value={5}
-      />
+      />,
     );
     expect(screen.queryByRole("spinbutton")).not.toBeInTheDocument();
   });
 
   it("can render with an additional number input", () => {
     render(
-      <Slider max={10} min={0} onChange={jest.fn()} showInput value={5} />
+      <Slider max={10} min={0} onChange={jest.fn()} showInput value={5} />,
     );
     expect(screen.getByRole("spinbutton")).toBeInTheDocument();
   });
@@ -33,7 +33,7 @@ describe("Slider", () => {
         showInput={false}
         value={5}
         error="Uh oh!"
-      />
+      />,
     );
     expect(screen.getByRole("slider")).toHaveAccessibleErrorMessage("Uh oh!");
   });
@@ -48,7 +48,7 @@ describe("Slider", () => {
         showInput={false}
         value={5}
         help={help}
-      />
+      />,
     );
     expect(screen.getByRole("slider")).toHaveAccessibleDescription(help);
   });
diff --git a/src/components/Spinner/Spinner.test.tsx b/src/components/Spinner/Spinner.test.tsx
index 97b0670d6..7313d2023 100644
--- a/src/components/Spinner/Spinner.test.tsx
+++ b/src/components/Spinner/Spinner.test.tsx
@@ -32,7 +32,7 @@ describe("<Spinner />", () => {
     expect(screen.getByText(text)).toBeInTheDocument();
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-icon--spinner")?.textContent
+      document.querySelector(".p-icon--spinner")?.textContent,
     ).not.toContain(text);
   });
 
@@ -40,7 +40,7 @@ describe("<Spinner />", () => {
     render(<Spinner />);
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-icon--spinner")?.textContent
+      document.querySelector(".p-icon--spinner")?.textContent,
     ).toBe("Loading");
   });
 
@@ -55,7 +55,7 @@ describe("<Spinner />", () => {
 
     expect(
       // eslint-disable-next-line testing-library/no-node-access
-      document.querySelector(".p-icon--spinner")
+      document.querySelector(".p-icon--spinner"),
     ).toHaveClass("is-light");
   });
 
@@ -64,7 +64,7 @@ describe("<Spinner />", () => {
 
     expect(screen.getByRole("alert")).toHaveAttribute(
       "aria-label",
-      "custom loading text"
+      "custom loading text",
     );
   });
 });
diff --git a/src/components/StatusLabel/StatusLabel.test.tsx b/src/components/StatusLabel/StatusLabel.test.tsx
index b6670d1f1..df200624d 100644
--- a/src/components/StatusLabel/StatusLabel.test.tsx
+++ b/src/components/StatusLabel/StatusLabel.test.tsx
@@ -13,11 +13,11 @@ it("can set an appearance", () => {
   render(
     <StatusLabel appearance="caution" data-testid="StatusLabel">
       Test
-    </StatusLabel>
+    </StatusLabel>,
   );
   // Check that the wrapping element contains the default class.
   expect(screen.getByTestId("StatusLabel")).toHaveClass(
-    "p-status-label--caution"
+    "p-status-label--caution",
   );
 });
 
@@ -29,10 +29,10 @@ it("can pass additional classes", () => {
       data-testid="StatusLabel"
     >
       Test
-    </StatusLabel>
+    </StatusLabel>,
   );
   // Check that the wrapping element contains the custon class.
   expect(screen.getByTestId("StatusLabel")).toHaveClass(
-    "p-status-label--caution custom"
+    "p-status-label--caution custom",
   );
 });
diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx
index ebdc89367..4c1f1123c 100644
--- a/src/components/StatusLabel/StatusLabel.tsx
+++ b/src/components/StatusLabel/StatusLabel.tsx
@@ -46,7 +46,7 @@ const StatusLabel = ({
 }: Props): JSX.Element => {
   const classes = classNames(
     appearance ? `p-status-label--${appearance}` : "p-status-label",
-    className
+    className,
   );
   return (
     <div {...labelProps} className={classes}>
diff --git a/src/components/Strip/Strip.test.tsx b/src/components/Strip/Strip.test.tsx
index 065dda1b3..7fb3ad35e 100644
--- a/src/components/Strip/Strip.test.tsx
+++ b/src/components/Strip/Strip.test.tsx
@@ -13,7 +13,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" background="test.png">
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveStyle({
       backgroundImage: "url('test.png')",
@@ -24,7 +24,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" type="dark">
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("p-strip--dark");
   });
@@ -33,7 +33,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" element="section">
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip").nodeName).toEqual("SECTION");
   });
@@ -42,7 +42,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" bordered={true}>
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("is-bordered");
   });
@@ -51,7 +51,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" dark={true}>
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("is-dark");
   });
@@ -60,7 +60,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" deep={true}>
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("is-deep");
   });
@@ -69,7 +69,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" light={true}>
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("is-light");
   });
@@ -78,7 +78,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" shallow={true}>
         Test content
-      </Strip>
+      </Strip>,
     );
     expect(screen.getByTestId("strip")).toHaveClass("is-shallow");
   });
@@ -87,7 +87,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" colSize={4}>
         Test content
-      </Strip>
+      </Strip>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(".row .col-4")).toBeInTheDocument();
@@ -97,7 +97,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" includeCol={false}>
         Test content
-      </Strip>
+      </Strip>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(".row .col-12")).not.toBeInTheDocument();
@@ -107,7 +107,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" rowClassName="row--extra">
         Test content
-      </Strip>
+      </Strip>,
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(".row")).toHaveClass("row--extra");
@@ -117,7 +117,7 @@ describe("Strip ", () => {
     render(
       <Strip data-testid="strip" className="extra-class">
         Test content
-      </Strip>
+      </Strip>,
     );
     const strip = screen.getByTestId("strip");
     expect(strip).toHaveClass("p-strip");
diff --git a/src/components/SummaryButton/SummaryButton.test.tsx b/src/components/SummaryButton/SummaryButton.test.tsx
index c48e32999..c54bb025c 100644
--- a/src/components/SummaryButton/SummaryButton.test.tsx
+++ b/src/components/SummaryButton/SummaryButton.test.tsx
@@ -12,7 +12,7 @@ describe("<SummaryButton />", () => {
         summary="Showing some items"
         label="Show more"
         onClick={jest.fn()}
-      />
+      />,
     );
 
     expect(container.firstChild).toMatchSnapshot();
@@ -21,7 +21,7 @@ describe("<SummaryButton />", () => {
   // unit tests
   it("renders a spinner icon", () => {
     const { container } = render(
-      <SummaryButton label="Show more" onClick={jest.fn()} isLoading />
+      <SummaryButton label="Show more" onClick={jest.fn()} isLoading />,
     );
 
     expect(container.querySelector("i.u-animation--spin")).toBeInTheDocument();
diff --git a/src/components/Switch/Switch.test.tsx b/src/components/Switch/Switch.test.tsx
index 27212e576..fade9967f 100644
--- a/src/components/Switch/Switch.test.tsx
+++ b/src/components/Switch/Switch.test.tsx
@@ -29,7 +29,7 @@ describe("<Switch />", () => {
     const { container } = render(<Switch label="Disabled switch" disabled />);
 
     expect(container.querySelector("input.p-switch__input")).toHaveAttribute(
-      "disabled"
+      "disabled",
     );
   });
 });
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 4ef8e996d..42b104e1e 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -10,7 +10,7 @@ describe("Table", () => {
     render(
       <Table data-testid={TEST_ID}>
         <thead></thead>
-      </Table>
+      </Table>,
     );
     expect(screen.getByTestId(TEST_ID)).toMatchSnapshot();
   });
@@ -27,7 +27,7 @@ describe("Table", () => {
 
   it("can pass additional classes", () => {
     render(
-      <Table data-testid={TEST_ID} responsive={true} className="extra-class" />
+      <Table data-testid={TEST_ID} responsive={true} className="extra-class" />,
     );
     expect(screen.getByTestId(TEST_ID)).toHaveClass("p-table--mobile-card");
     expect(screen.getByTestId(TEST_ID)).toHaveClass("extra-class");
diff --git a/src/components/TableCell/TableCell.test.tsx b/src/components/TableCell/TableCell.test.tsx
index 7a52a32ba..45a5d8e8e 100644
--- a/src/components/TableCell/TableCell.test.tsx
+++ b/src/components/TableCell/TableCell.test.tsx
@@ -34,11 +34,11 @@ describe("TableCell", () => {
 
   it("can add additional classes", () => {
     const { container } = render(
-      <TableCell expanding={true} className="extra-class" />
+      <TableCell expanding={true} className="extra-class" />,
     );
     expect(container.firstChild).toHaveClass(
       "p-table__expanding-panel",
-      "extra-class"
+      "extra-class",
     );
   });
 });
diff --git a/src/components/TableHeader/TableHeader.test.tsx b/src/components/TableHeader/TableHeader.test.tsx
index 030f362b7..0534f3446 100644
--- a/src/components/TableHeader/TableHeader.test.tsx
+++ b/src/components/TableHeader/TableHeader.test.tsx
@@ -12,7 +12,7 @@ describe("TableHeader", () => {
             <TableHeader>Column 1</TableHeader>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     expect(screen.getByRole("columnheader")).toMatchSnapshot();
   });
@@ -25,11 +25,11 @@ describe("TableHeader", () => {
             <TableHeader sort="ascending">Column 1</TableHeader>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     expect(screen.getByRole("columnheader")).toHaveAttribute(
       "aria-sort",
-      "ascending"
+      "ascending",
     );
   });
 });
diff --git a/src/components/TablePagination/TablePagination.test.tsx b/src/components/TablePagination/TablePagination.test.tsx
index 22fadff79..85148a83e 100644
--- a/src/components/TablePagination/TablePagination.test.tsx
+++ b/src/components/TablePagination/TablePagination.test.tsx
@@ -25,7 +25,7 @@ describe("<TablePagination />", () => {
     render(<TablePagination data={dummyData} />);
 
     expect(screen.getByRole("navigation")).toHaveTextContent(
-      "Showing all 5 items"
+      "Showing all 5 items",
     );
   });
 
@@ -33,7 +33,7 @@ describe("<TablePagination />", () => {
     render(<TablePagination data={dummyData} pageLimits={[1]} />);
 
     expect(screen.getByRole("navigation")).toHaveTextContent(
-      "Showing 1 out of 5 items"
+      "Showing 1 out of 5 items",
     );
   });
 
@@ -43,7 +43,7 @@ describe("<TablePagination />", () => {
     expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
     await userEvent.selectOptions(
       screen.getByRole("combobox", { name: "Items per page" }),
-      "5"
+      "5",
     );
     expect(screen.getByRole("navigation")).toHaveTextContent("5/page");
   });
@@ -54,7 +54,7 @@ describe("<TablePagination />", () => {
     expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
     await userEvent.selectOptions(
       screen.getByRole("combobox", { name: "Items per page" }),
-      "5"
+      "5",
     );
     const currentPageInput = screen.getByRole("spinbutton", {
       name: "Page number",
@@ -109,7 +109,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
 
     const incButton = screen.getByRole("button", { name: "Next page" });
@@ -133,7 +133,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(1);
 
@@ -148,7 +148,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(2);
 
@@ -163,7 +163,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(1);
 
@@ -178,7 +178,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(5);
 
@@ -193,7 +193,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(5);
 
@@ -208,7 +208,7 @@ describe("<TablePagination />", () => {
         pageSize={pageSize}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-      />
+      />,
     );
     expect(currentPageInput).toHaveValue(4);
   });
@@ -227,10 +227,10 @@ describe("<TablePagination />", () => {
           pageSize={5}
           onPageChange={jest.fn()}
           onPageSizeChange={jest.fn()}
-        />
-      )
+        />,
+      ),
     ).toThrow(
-      "pageSize must be a valid option in pageLimits, pageLimits is set to [10,20,50]"
+      "pageSize must be a valid option in pageLimits, pageLimits is set to [10,20,50]",
     );
   });
 });
diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx
index 435006bca..01c2a7f61 100644
--- a/src/components/TablePagination/TablePagination.tsx
+++ b/src/components/TablePagination/TablePagination.tsx
@@ -141,7 +141,7 @@ const TablePagination = (props: Props) => {
 
     if (!pageSizeFound) {
       throw new Error(
-        `pageSize must be a valid option in pageLimits, pageLimits is set to [${pageLimits}]`
+        `pageSize must be a valid option in pageLimits, pageLimits is set to [${pageLimits}]`,
       );
     }
   }
diff --git a/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx b/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx
index bdb1ca0de..8db665b1e 100644
--- a/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx
+++ b/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx
@@ -19,7 +19,7 @@ describe("<TablePaginationControls />", () => {
         pageSize={20}
         onPageChange={jest.fn()}
         onPageSizeChange={jest.fn()}
-      />
+      />,
     );
 
     expect(screen.getAllByRole("button")).toMatchSnapshot();
@@ -40,10 +40,10 @@ describe("<TablePaginationControls />", () => {
         onPageChange={onPageChange}
         onNextPage={onNextPage}
         onPageSizeChange={jest.fn()}
-      />
+      />,
     );
     await userEvent.click(
-      screen.getByRole("button", { name: Label.NEXT_PAGE })
+      screen.getByRole("button", { name: Label.NEXT_PAGE }),
     );
     expect(onPageChange).toHaveBeenCalledWith(3);
     expect(onNextPage).toHaveBeenCalledWith(3);
@@ -63,10 +63,10 @@ describe("<TablePaginationControls />", () => {
         onPageChange={onPageChange}
         onPreviousPage={onPreviousPage}
         onPageSizeChange={jest.fn()}
-      />
+      />,
     );
     await userEvent.click(
-      screen.getByRole("button", { name: Label.PREVIOUS_PAGE })
+      screen.getByRole("button", { name: Label.PREVIOUS_PAGE }),
     );
     expect(onPageChange).toHaveBeenCalledWith(1);
     expect(onPreviousPage).toHaveBeenCalledWith(1);
@@ -86,11 +86,11 @@ describe("<TablePaginationControls />", () => {
         onPreviousPage={jest.fn()}
         onPageSizeChange={jest.fn()}
         onInputPageChange={onInputPageChange}
-      />
+      />,
     );
     await userEvent.type(
       screen.getByRole("spinbutton", { name: Label.PAGE_NUMBER }),
-      "1"
+      "1",
     );
     expect(onInputPageChange).toHaveBeenCalledWith(21);
   });
@@ -108,10 +108,10 @@ describe("<TablePaginationControls />", () => {
         onPreviousPage={jest.fn()}
         onPageSizeChange={jest.fn()}
         showPageInput={false}
-      />
+      />,
     );
     expect(
-      screen.queryByRole("spinbutton", { name: Label.PAGE_NUMBER })
+      screen.queryByRole("spinbutton", { name: Label.PAGE_NUMBER }),
     ).not.toBeInTheDocument();
   });
 
@@ -128,10 +128,10 @@ describe("<TablePaginationControls />", () => {
         onPreviousPage={jest.fn()}
         onPageSizeChange={jest.fn()}
         showPageInput={false}
-      />
+      />,
     );
     expect(document.querySelector(".description")?.textContent).toBe(
-      "Showing 5 out of 100 items"
+      "Showing 5 out of 100 items",
     );
   });
 
@@ -148,10 +148,10 @@ describe("<TablePaginationControls />", () => {
         onPreviousPage={jest.fn()}
         onPageSizeChange={jest.fn()}
         displayDescription={false}
-      />
+      />,
     );
     expect(
-      document.querySelector(".description")?.textContent
+      document.querySelector(".description")?.textContent,
     ).not.toBeUndefined();
   });
 });
diff --git a/src/components/TablePagination/utils.tsx b/src/components/TablePagination/utils.tsx
index cfd62f674..1513fcad2 100644
--- a/src/components/TablePagination/utils.tsx
+++ b/src/components/TablePagination/utils.tsx
@@ -29,7 +29,7 @@ export const figureSmallScreen = () => {
 export const renderChildren = (
   children: ReactNode,
   dataForwardProp: string,
-  data: unknown[]
+  data: unknown[],
 ) => {
   return Children.map(children, (child) => {
     return cloneElement(child as ReactElement, {
diff --git a/src/components/TableRow/TableRow.test.tsx b/src/components/TableRow/TableRow.test.tsx
index f7a1d17ce..a908b4dc6 100644
--- a/src/components/TableRow/TableRow.test.tsx
+++ b/src/components/TableRow/TableRow.test.tsx
@@ -12,7 +12,7 @@ describe("TableRow", () => {
             <td></td>
           </TableRow>
         </tbody>
-      </table>
+      </table>,
     );
     expect(screen.getByRole("row")).toMatchSnapshot();
   });
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
index a330a5b8f..340f9a302 100644
--- a/src/components/Tabs/Tabs.test.tsx
+++ b/src/components/Tabs/Tabs.test.tsx
@@ -19,7 +19,7 @@ describe("Tabs", () => {
             label: "label2",
           },
         ]}
-      />
+      />,
     );
     expect(container).toMatchSnapshot();
   });
@@ -39,17 +39,17 @@ describe("Tabs", () => {
             label: "label2",
           },
         ]}
-      />
+      />,
     );
     // TODO: use a more appropriate attribute once the issue below is addressed:
     // https://github.com/canonical-web-and-design/vanilla-framework/issues/4481
     expect(screen.getByRole("link", { name: "label1" })).toHaveAttribute(
       "aria-selected",
-      "true"
+      "true",
     );
     expect(screen.getByRole("link", { name: "label2" })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 
@@ -66,7 +66,7 @@ describe("Tabs", () => {
             href: "/path1",
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("navigation")).toHaveClass("nav-class");
     expect(screen.getByRole("list")).toHaveClass("list-class");
@@ -84,7 +84,7 @@ describe("Tabs", () => {
             to: "/path",
           },
         ]}
-      />
+      />,
     );
     expect(screen.getByRole("button", { name: "label1" })).toBeInTheDocument();
   });
@@ -103,7 +103,7 @@ describe("Tabs", () => {
             to: "/path",
           },
         ]}
-      />
+      />,
     );
 
     expect(screen.queryByRole("link", { name })).not.toBeInTheDocument();
diff --git a/src/components/Textarea/Textarea.test.tsx b/src/components/Textarea/Textarea.test.tsx
index c24da6d62..8d136e017 100644
--- a/src/components/Textarea/Textarea.test.tsx
+++ b/src/components/Textarea/Textarea.test.tsx
@@ -6,7 +6,7 @@ import Textarea from "./Textarea";
 describe("Textarea ", () => {
   it("renders", () => {
     const { container } = render(
-      <Textarea id="test-id" wrapperClassName="textarea" />
+      <Textarea id="test-id" wrapperClassName="textarea" />,
     );
     // Get the wrapping element.
     // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
@@ -61,7 +61,7 @@ describe("Textarea ", () => {
         onControlEnter={() => {
           console.log("OnControlEnter was here.");
         }}
-      />
+      />,
     );
 
     // Capture the event handler
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 7b3b4a2e9..e2f0e09c4 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -120,7 +120,7 @@ const Textarea = ({
         onControlEnter();
       }
     },
-    [onControlEnter]
+    [onControlEnter],
   );
 
   useEffect(() => {
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index e36eab6e1..71cd59602 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -24,7 +24,7 @@ describe("Tooltip", () => {
     const { container } = render(
       <Tooltip message="text">
         <button>button text</button>
-      </Tooltip>
+      </Tooltip>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -39,11 +39,11 @@ describe("Tooltip", () => {
         }
       >
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.click(
-        screen.getByRole("button", { name: /open the tooltip/i })
+        screen.getByRole("button", { name: /open the tooltip/i }),
       );
       jest.runAllTimers();
     });
@@ -57,14 +57,14 @@ describe("Tooltip", () => {
     render(
       <Tooltip message="Additional description">
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.tab();
     });
     jest.runAllTimers();
     expect(
-      screen.getByRole("button", { name: /open the tooltip/ })
+      screen.getByRole("button", { name: /open the tooltip/ }),
     ).toHaveAccessibleDescription("Additional description");
   });
 
@@ -89,7 +89,7 @@ describe("Tooltip", () => {
         }
       >
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     await act(async () => {
@@ -98,7 +98,7 @@ describe("Tooltip", () => {
     });
     await act(async () => {
       await userEventWithTimers.click(
-        screen.getByRole("link", { name: "Canonical" })
+        screen.getByRole("link", { name: "Canonical" }),
       );
     });
 
@@ -112,7 +112,7 @@ describe("Tooltip", () => {
         <Tooltip message="a message">
           <button>open the tooltip</button>
         </Tooltip>
-      </div>
+      </div>,
     );
     await act(async () => {
       await userEventWithTimers.hover(screen.getByRole("button"));
@@ -145,7 +145,7 @@ describe("Tooltip", () => {
         >
           <button>open the tooltip</button>
         </Tooltip>
-      </div>
+      </div>,
     );
     await act(async () => {
       await userEventWithTimers.hover(screen.getByRole("button"));
@@ -153,7 +153,7 @@ describe("Tooltip", () => {
     });
     await act(async () => {
       await userEventWithTimers.click(
-        screen.getByRole("link", { name: "Canonical" })
+        screen.getByRole("link", { name: "Canonical" }),
       );
     });
     expect(parentClick).not.toHaveBeenCalled();
@@ -169,7 +169,7 @@ describe("Tooltip", () => {
     render(
       <Tooltip message="tooltip text">
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     expect(screen.queryByTestId("tooltip-portal")).not.toBeInTheDocument();
@@ -188,17 +188,17 @@ describe("Tooltip", () => {
         position="right"
       >
         <button>Child</button>
-      </Tooltip>
+      </Tooltip>,
     );
     global.innerWidth = 20;
     await act(async () => {
       await userEventWithTimers.hover(
-        screen.getByRole("button", { name: "Child" })
+        screen.getByRole("button", { name: "Child" }),
       );
       jest.runAllTimers();
     });
     expect(screen.getByTestId("tooltip-portal")).toHaveClass(
-      "p-tooltip--btm-left"
+      "p-tooltip--btm-left",
     );
     expect(screen.getByTestId("tooltip-portal")).toHaveClass("is-detached");
   });
@@ -209,16 +209,16 @@ describe("Tooltip", () => {
     render(
       <Tooltip message="text" position="right">
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.hover(
-        screen.getByRole("button", { name: "open the tooltip" })
+        screen.getByRole("button", { name: "open the tooltip" }),
       );
       jest.runAllTimers();
     });
     expect(screen.getByTestId("tooltip-portal")).toHaveClass(
-      "p-tooltip--right"
+      "p-tooltip--right",
     );
   });
 
@@ -226,11 +226,11 @@ describe("Tooltip", () => {
     render(
       <Tooltip message="text" zIndex={999}>
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.hover(
-        screen.getByRole("button", { name: "open the tooltip" })
+        screen.getByRole("button", { name: "open the tooltip" }),
       );
       jest.runAllTimers();
     });
@@ -242,11 +242,11 @@ describe("Tooltip", () => {
     render(
       <Tooltip delay={delay} message="text" zIndex={999}>
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.hover(
-        screen.getByRole("button", { name: "open the tooltip" })
+        screen.getByRole("button", { name: "open the tooltip" }),
       );
       jest.advanceTimersByTime(delay - 1);
     });
@@ -261,7 +261,7 @@ describe("Tooltip", () => {
     render(
       <Tooltip delay={1} message="text" zIndex={999}>
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     await act(async () => {
       await userEventWithTimers.hover(screen.getByRole("button"));
@@ -276,7 +276,7 @@ describe("Tooltip", () => {
     render(
       <Tooltip delay={delay} message="text" zIndex={999}>
         <button>open the tooltip</button>
-      </Tooltip>
+      </Tooltip>,
     );
     const button = screen.getByRole("button");
 
@@ -360,8 +360,8 @@ describe("Tooltip", () => {
           "left",
           generateFits({
             fromLeft: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -372,8 +372,8 @@ describe("Tooltip", () => {
           generateFits({
             fromTop: { fitsAbove: false },
             fromLeft: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
 
@@ -383,8 +383,8 @@ describe("Tooltip", () => {
           "btm-left",
           generateFits({
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -395,8 +395,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsRight: false },
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
 
@@ -406,8 +406,8 @@ describe("Tooltip", () => {
           "btm-left",
           generateFits({
             fromBottom: { fitsBelow: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -418,8 +418,8 @@ describe("Tooltip", () => {
           generateFits({
             fromBottom: { fitsBelow: false },
             fromLeft: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -429,8 +429,8 @@ describe("Tooltip", () => {
           "btm-right",
           generateFits({
             fromLeft: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
 
@@ -441,8 +441,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -452,8 +452,8 @@ describe("Tooltip", () => {
           "btm-right",
           generateFits({
             fromBottom: { fitsBelow: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -464,8 +464,8 @@ describe("Tooltip", () => {
           generateFits({
             fromBottom: { fitsBelow: false },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -475,8 +475,8 @@ describe("Tooltip", () => {
           "right",
           generateFits({
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -487,8 +487,8 @@ describe("Tooltip", () => {
           generateFits({
             fromTop: { fitsAbove: false },
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -498,8 +498,8 @@ describe("Tooltip", () => {
           "top-left",
           generateFits({
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -510,8 +510,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsRight: false },
             fromRight: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -521,8 +521,8 @@ describe("Tooltip", () => {
           "top-left",
           generateFits({
             fromTop: { fitsAbove: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -533,8 +533,8 @@ describe("Tooltip", () => {
           generateFits({
             fromTop: { fitsAbove: false },
             fromLeft: { fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
 
@@ -544,8 +544,8 @@ describe("Tooltip", () => {
           "top-right",
           generateFits({
             fromLeft: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -556,8 +556,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -567,8 +567,8 @@ describe("Tooltip", () => {
           "top-right",
           generateFits({
             fromTop: { fitsAbove: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
 
@@ -579,8 +579,8 @@ describe("Tooltip", () => {
           generateFits({
             fromTop: { fitsAbove: false },
             fromRight: { fitsLeft: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -591,8 +591,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false, fitsRight: false },
             fromRight: { fitsLeft: false, fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-center");
     });
 
@@ -603,8 +603,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false, fitsRight: false },
             fromRight: { fitsLeft: false, fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("top-center");
     });
 
@@ -614,8 +614,8 @@ describe("Tooltip", () => {
           "top-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsLeft: false, fitsRight: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("top-center");
       // top-center
     });
@@ -626,8 +626,8 @@ describe("Tooltip", () => {
           "top-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsLeft: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("top-left");
     });
 
@@ -637,8 +637,8 @@ describe("Tooltip", () => {
           "top-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsRight: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("top-right");
     });
 
@@ -649,8 +649,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false, fitsRight: false },
             fromRight: { fitsLeft: false, fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-center");
     });
 
@@ -661,8 +661,8 @@ describe("Tooltip", () => {
           generateFits({
             fromLeft: { fitsLeft: false, fitsRight: false },
             fromRight: { fitsLeft: false, fitsRight: false },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-center");
     });
 
@@ -672,8 +672,8 @@ describe("Tooltip", () => {
           "btm-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsLeft: false, fitsRight: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-center");
     });
 
@@ -683,8 +683,8 @@ describe("Tooltip", () => {
           "btm-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsLeft: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-left");
     });
 
@@ -694,8 +694,8 @@ describe("Tooltip", () => {
           "btm-center",
           generateFits({
             fromCenter: { fitsCentered: { fitsRight: false } },
-          })
-        )
+          }),
+        ),
       ).toBe("btm-right");
     });
   });
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index f4c17b1e6..912596ab0 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -82,7 +82,7 @@ export type Props = {
 
 const getPositionStyle = (
   pos: Position,
-  wrapperNode: HTMLElement
+  wrapperNode: HTMLElement,
 ): PositionStyle => {
   if (!wrapperNode) {
     return null;
@@ -128,7 +128,7 @@ const getPositionStyle = (
 
 export const adjustForWindow = (
   position: Position,
-  fitsWindow: WindowFitment
+  fitsWindow: WindowFitment,
 ): Position => {
   let newPosition: string = position;
   if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
@@ -209,7 +209,7 @@ const Tooltip = ({
   });
   const tooltipId = useId();
   const [timer, setTimer] = useState<ReturnType<typeof setTimeout> | null>(
-    null
+    null,
   );
   const cancelableClosePortal = useCallback(() => {
     clearTimeout(timer);
@@ -238,7 +238,7 @@ const Tooltip = ({
     (fitsWindow) => {
       setAdjustedPosition(adjustForWindow(position, fitsWindow));
     },
-    [setAdjustedPosition, position]
+    [setAdjustedPosition, position],
   );
 
   // Handle mouse events.
@@ -247,7 +247,7 @@ const Tooltip = ({
     mouseHandler,
     "mousemove",
     true,
-    followMouse && isOpen
+    followMouse && isOpen,
   );
 
   // Handle adjusting the position of the tooltip so that it remains on screen.
@@ -257,7 +257,7 @@ const Tooltip = ({
     onUpdateWindowFitment,
     20,
     isOpen,
-    autoAdjust && followMouse
+    autoAdjust && followMouse,
   );
 
   const handleKeyPress = useCallback(
@@ -266,7 +266,7 @@ const Tooltip = ({
         cancelableClosePortal();
       }
     },
-    [cancelableClosePortal]
+    [cancelableClosePortal],
   );
 
   useEffect(() => {
@@ -333,7 +333,7 @@ const Tooltip = ({
                 ? React.cloneElement(child, {
                     "aria-describedby": isOpen ? tooltipId : undefined,
                   } as React.HTMLAttributes<HTMLElement>)
-                : child
+                : child,
             )}
           </span>
           {isOpen ? (
@@ -342,7 +342,7 @@ const Tooltip = ({
                 className={classNames(
                   `p-tooltip--${adjustedPosition}`,
                   "is-detached",
-                  tooltipClassName
+                  tooltipClassName,
                 )}
                 data-testid="tooltip-portal"
                 style={positionStyle as React.CSSProperties}
diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
index dc615d9fe..689a7c757 100644
--- a/src/hooks/useId.ts
+++ b/src/hooks/useId.ts
@@ -9,7 +9,7 @@ export const useId = () => {
   const id = useIdReact();
   if (IS_DEV) {
     console.warn(
-      'The useId hook has been deprecated. Use `import { useId } from "react";` instead.'
+      'The useId hook has been deprecated. Use `import { useId } from "react";` instead.',
     );
   }
   return id;
diff --git a/src/hooks/useListener.test.ts b/src/hooks/useListener.test.ts
index 73a7dccc7..a3e0c7df7 100644
--- a/src/hooks/useListener.test.ts
+++ b/src/hooks/useListener.test.ts
@@ -41,14 +41,14 @@ describe("useListener", () => {
             args.eventType,
             args.shouldThrottle,
             args.shouldListen,
-            args.options
+            args.options,
           ),
         {
           initialProps: {
             ...defaultArgs,
             ...initialProps,
           },
-        }
+        },
       );
   });
 
@@ -57,7 +57,7 @@ describe("useListener", () => {
     expect(addEventListener).toHaveBeenCalledWith(
       "mousemove",
       callback,
-      undefined
+      undefined,
     );
   });
 
@@ -153,7 +153,7 @@ describe("useListener", () => {
 
   it("stops listening when unmounting", () => {
     const { unmount } = renderHook(() =>
-      useListener(targetNode, callback, "mousemove")
+      useListener(targetNode, callback, "mousemove"),
     );
     expect(removeEventListener).not.toHaveBeenCalled();
     unmount();
diff --git a/src/hooks/useListener.ts b/src/hooks/useListener.ts
index 8016ac7e4..7edf99cfa 100644
--- a/src/hooks/useListener.ts
+++ b/src/hooks/useListener.ts
@@ -19,7 +19,7 @@ export const useListener = (
   eventType: string,
   shouldThrottle = false,
   shouldListen = true,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): void => {
   const isListening = useRef(false);
   const throttle = useThrottle(callback);
@@ -43,7 +43,7 @@ export const useListener = (
       previousTargetNode.removeEventListener(
         previousEventType,
         eventListener.current,
-        previousOptions
+        previousOptions,
       );
       isListening.current = false;
     }
@@ -83,10 +83,10 @@ export const useListener = (
         targetNode.removeEventListener(
           eventType,
           eventListener.current,
-          options
+          options,
         );
       }
     },
-    [eventType, targetNode, options]
+    [eventType, targetNode, options],
   );
 };
diff --git a/src/hooks/useOnClickOutside.test.tsx b/src/hooks/useOnClickOutside.test.tsx
index 5fa2cc592..55b19881e 100644
--- a/src/hooks/useOnClickOutside.test.tsx
+++ b/src/hooks/useOnClickOutside.test.tsx
@@ -43,7 +43,7 @@ describe("useOnClickOutside", () => {
     render(
       <TestComponent onClickOutside={onClickOutside}>
         <svg data-testid="no-classname" />
-      </TestComponent>
+      </TestComponent>,
     );
     await userEvent.click(screen.getByTestId("no-classname"));
     expect(onClickOutside).toHaveBeenCalled();
diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 75463dc7e..b2b15bbdb 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -6,7 +6,7 @@ import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 export const useOnClickOutside = <E extends HTMLElement>(
   elementRef: ReturnType<typeof useRef<E | null>>,
   onClickOutside: () => void,
-  { isEnabled } = { isEnabled: true }
+  { isEnabled } = { isEnabled: true },
 ): void => {
   const handleClickOutside = useCallback(
     (evt: MouseEvent) => {
@@ -24,7 +24,7 @@ export const useOnClickOutside = <E extends HTMLElement>(
         onClickOutside();
       }
     },
-    [elementRef, onClickOutside]
+    [elementRef, onClickOutside],
   );
 
   useEffect(() => {
@@ -41,7 +41,7 @@ export const useOnClickOutside = <E extends HTMLElement>(
  * @returns A ref to pass to the element to handle clicks outside of.
  */
 export const useClickOutside = <E extends HTMLElement>(
-  onClickOutside: () => void
+  onClickOutside: () => void,
 ): MutableRefObject<E> => {
   const ref = useRef<E | null>(null);
 
diff --git a/src/hooks/useOnEscapePressed.ts b/src/hooks/useOnEscapePressed.ts
index 092585470..0aa4bb581 100644
--- a/src/hooks/useOnEscapePressed.ts
+++ b/src/hooks/useOnEscapePressed.ts
@@ -5,7 +5,7 @@ import { useCallback, useEffect } from "react";
  */
 export const useOnEscapePressed = (
   onEscape: () => void,
-  { isEnabled } = { isEnabled: true }
+  { isEnabled } = { isEnabled: true },
 ) => {
   const keyDown = useCallback(
     (evt) => {
@@ -13,7 +13,7 @@ export const useOnEscapePressed = (
         onEscape();
       }
     },
-    [onEscape]
+    [onEscape],
   );
   useEffect(() => {
     if (isEnabled) {
diff --git a/src/hooks/usePagination.test.ts b/src/hooks/usePagination.test.ts
index 627856335..9c1296dba 100644
--- a/src/hooks/usePagination.test.ts
+++ b/src/hooks/usePagination.test.ts
@@ -4,7 +4,7 @@ import { usePagination } from "./usePagination";
 
 it("returns correct data", () => {
   const { result } = renderHook(() =>
-    usePagination([1, 2, 3], { itemsPerPage: 2 })
+    usePagination([1, 2, 3], { itemsPerPage: 2 }),
   );
   const { pageData, currentPage, paginate, itemsPerPage, totalItems } =
     result.current;
@@ -17,7 +17,7 @@ it("returns correct data", () => {
 
 it("correctly sets the initial page", () => {
   const { result } = renderHook(() =>
-    usePagination([1, 2], { itemsPerPage: 1, initialPage: 2 })
+    usePagination([1, 2], { itemsPerPage: 1, initialPage: 2 }),
   );
   const { pageData, currentPage } = result.current;
   expect(currentPage).toBe(2);
@@ -33,7 +33,7 @@ it("goes to the last available page if the current page is out of bounds", () =>
         data: [1, 2, 3],
         options,
       },
-    }
+    },
   );
   expect(result.current.currentPage).toBe(3);
   expect(result.current.pageData).toEqual([3]);
@@ -51,7 +51,7 @@ it("go to the initial page if autoResetPage is true", () => {
         data: [1, 2, 3],
         options,
       },
-    }
+    },
   );
   expect(result.current.currentPage).toBe(3);
   expect(result.current.pageData).toEqual([3]);
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 67a482d9c..d74f0bc47 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -15,7 +15,7 @@ export function usePagination<D, I = number | null>(
     itemsPerPage: I;
     initialPage?: number;
     autoResetPage?: boolean;
-  }
+  },
 ): {
   pageData: Array<D>;
   currentPage: number;
@@ -29,7 +29,7 @@ export function usePagination<D, I = number | null>(
   };
   const { itemsPerPage, initialPage, autoResetPage } = Object.assign(
     defaultOptions,
-    options
+    options,
   );
   const totalItems = data?.length ?? 0;
   const initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
@@ -60,7 +60,7 @@ export function usePagination<D, I = number | null>(
       typeof itemsPerPage === "number"
         ? data?.slice(startIndex, startIndex + itemsPerPage)
         : data,
-    [startIndex, data, itemsPerPage]
+    [startIndex, data, itemsPerPage],
   );
 
   return {
diff --git a/src/hooks/useThrottle.ts b/src/hooks/useThrottle.ts
index 092a64046..b2e698144 100644
--- a/src/hooks/useThrottle.ts
+++ b/src/hooks/useThrottle.ts
@@ -12,7 +12,7 @@ export type Callback = (...args: any[]) => any; // eslint-disable-line @typescri
  */
 export const useThrottle = (
   callback: Callback,
-  delay = THROTTLE_DELAY
+  delay = THROTTLE_DELAY,
 ): Callback => {
   const timeout = useRef<number>();
   const lastCall = useRef<number>();
@@ -44,7 +44,7 @@ export const useThrottle = (
         createTimeout();
       }
     },
-    [callback, delay]
+    [callback, delay],
   );
 
   useEffect(
@@ -54,7 +54,7 @@ export const useThrottle = (
         clearTimeout(timeout.current);
       }
     },
-    []
+    [],
   );
 
   return throttle;
diff --git a/src/hooks/useWindowFitment.test.ts b/src/hooks/useWindowFitment.test.ts
index 831c2c701..2e5ce101a 100644
--- a/src/hooks/useWindowFitment.test.ts
+++ b/src/hooks/useWindowFitment.test.ts
@@ -63,7 +63,7 @@ describe("useWindowFitment", () => {
 
   it("does not respond when not checking", () => {
     renderHook(() =>
-      useWindowFitment(targetNode, referenceNode, callback, 0, false)
+      useWindowFitment(targetNode, referenceNode, callback, 0, false),
     );
     expect(callback).not.toHaveBeenCalled();
   });
diff --git a/src/hooks/useWindowFitment.ts b/src/hooks/useWindowFitment.ts
index 542cdc9ea..70c50109a 100644
--- a/src/hooks/useWindowFitment.ts
+++ b/src/hooks/useWindowFitment.ts
@@ -119,7 +119,7 @@ export const useWindowFitment = (
   callback: (fitsWindow: WindowFitment) => void,
   spacer = 0,
   shouldCheck = true,
-  fromMouse = false
+  fromMouse = false,
 ): void => {
   const htmlRef = useRef<HTMLElement>(document.querySelector("html"));
 
@@ -210,7 +210,7 @@ export const useWindowFitment = (
         });
       }
     },
-    [shouldCheck, targetNode, callback, spacer, fromMouse, referenceNode]
+    [shouldCheck, targetNode, callback, spacer, fromMouse, referenceNode],
   );
 
   useListener(window, update, "resize", true, shouldCheck && !fromMouse);
@@ -222,7 +222,7 @@ export const useWindowFitment = (
     update,
     "mousemove",
     true,
-    fromMouse && shouldCheck
+    fromMouse && shouldCheck,
   );
 
   useEffect(() => {
diff --git a/src/index.test.ts b/src/index.test.ts
index d040b4d00..069e95d8d 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -13,7 +13,7 @@ it("exports all public hooks and components from the index file", () => {
       (fileName) =>
         fileName !== "index.ts" &&
         isNotHidden(fileName) &&
-        fileName.match(/(?<!test)\.(ts|tsx)$/)
+        fileName.match(/(?<!test)\.(ts|tsx)$/),
     )
     .map((file) => file.replace(".ts", ""));
   expect(hooks.length).toBeGreaterThan(0);
diff --git a/src/utils.ts b/src/utils.ts
index 9d487486c..cca6daaf7 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -11,7 +11,7 @@ export const IS_DEV = process.env.NODE_ENV === "development";
  */
 export const highlightSubString = (
   str?: string,
-  subString?: string
+  subString?: string,
 ): { text: string; match: boolean } => {
   if (typeof str !== "string" || typeof subString !== "string") {
     return {
@@ -22,7 +22,7 @@ export const highlightSubString = (
   const caseInsensitiveRegex = new RegExp(subString, "gi");
   const newStr = str.replace(
     caseInsensitiveRegex,
-    (match) => `<strong>${match}</strong>`
+    (match) => `<strong>${match}</strong>`,
   );
 
   return {