Fix vite-plugin-dts TypeScript errors so yarn build is clean.

src/components/alert/alert.stories.tsx

@@ -1,8 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
 import { Alert } from './alert';
-import { AlertFieldLevel } from './alert-field-level';
+import {
+  AlertFieldLevel,
+  type AlertFieldLevelType,
+} from './alert-field-level';
 import { TextInput } from '../text-input/text-input';
+import type { TextInputStatusType } from '../text-input/text-input-status';
 
 const meta: Meta<typeof Alert> = {
   title: 'Components (Draft)/Alerts',
@@ -26,7 +30,7 @@ const alertExplanation = (type: string): string =>
   `This is an optional explanation of the ${type}.`;
 
 const externalLinkProperties = {
-  href: '/',
+  to: '/',
   label: 'This is an external link',
   isExternal: true,
 };
@@ -61,7 +65,7 @@ export const InformationWithLinks: Story = {
     children: 'This is the explanation of the alert.',
     links: [
       {
-        href: '/',
+        to: '/',
         label: 'This is a link below the explanation',
       },
       externalLinkProperties,
@@ -112,13 +116,20 @@ export const InProgress: Story = {
   },
 };
 
+const textInputStatus = (
+  status?: AlertFieldLevelType,
+): TextInputStatusType | undefined =>
+  status !== undefined && ['error', 'warning', 'success'].includes(status)
+    ? status
+    : undefined;
+
 export const SuccessFieldLevel: FieldLevelStory = {
   render: (_arguments) => (
     <div className='m-form-field'>
       <TextInput
         id={_arguments.status as string}
         name={_arguments.status as string}
-        status={_arguments.status}
+        status={textInputStatus(_arguments.status)}
         placeholder='Input text'
         type='text'
       />
@@ -138,7 +149,7 @@ export const WarningFieldLevel: FieldLevelStory = {
       <TextInput
         id={_arguments.status as string}
         name={_arguments.status as string}
-        status={_arguments.status}
+        status={textInputStatus(_arguments.status)}
         placeholder='Input text'
         type='text'
       />
@@ -158,7 +169,7 @@ export const ErrorFieldLevel: FieldLevelStory = {
       <TextInput
         id={_arguments.status as string}
         name={_arguments.status as string}
-        status={_arguments.status}
+        status={textInputStatus(_arguments.status)}
         placeholder='Input text'
         type='text'
       />

src/components/alert/alert.test.tsx

@@ -2,7 +2,10 @@ import '@testing-library/jest-dom';
 import { render, screen, within } from '@testing-library/react';
 import Paragraph from '../paragraph/paragraph';
 import { Alert, AlertType } from './alert';
-import { AlertFieldLevel } from './alert-field-level';
+import {
+  AlertFieldLevel,
+  type AlertFieldLevelType,
+} from './alert-field-level';
 
 const statusesWithModifier: AlertType[] = ['success', 'warning', 'error'];
 
@@ -215,7 +218,8 @@ describe('<Alert />', () => {
     render(
       <AlertFieldLevel
         data-testid={testId}
-        status={unSupportedStatus}
+        // Intentional invalid status to exercise runtime error path
+        status={unSupportedStatus as AlertFieldLevelType}
         message='squish'
       />,
     );

src/components/buttons/buttons.stories.tsx

@@ -163,7 +163,7 @@ export const ButtonLink: Story = {
     <ButtonGroup>
       <Link
         isButton
-        href='/'
+        to='/'
         label='Link styled as a button'
         iconRight='download'
       />

src/components/footer/back-to-top.tsx

@@ -8,7 +8,7 @@ export const BackToTop = (): JSX.Element => (
     data-gtm_ignore='true'
     data-js-hook='behavior_return-to-top'
     data-testid='back-to-top'
-    href='#'
+    to='#'
     iconRight='arrow-up'
   />
 );

src/components/footer/footer-cf-gov.tsx

@@ -143,19 +143,19 @@ export const FooterCfGov = ({
   const linksCol3 = [
     <Link
       key='usa-gov'
-      href='https://usa.gov/'
+      to='https://usa.gov/'
       label='USA.gov'
       iconRight='external-link'
     />,
     <Link
       key='inspector'
-      href='https://oig.federalreserve.gov/'
+      to='https://oig.federalreserve.gov/'
       label='Office of Inspector General'
       iconRight='external-link'
     />,
     <Link
       key='archive'
-      href='https://archive-it.org/organizations/2800'
+      to='https://archive-it.org/organizations/2800'
       label='Public Archive'
       iconRight='external-link'
     />,

src/components/footer/footer.stories.tsx

@@ -32,8 +32,8 @@ export const App: Story = {
   render: () => (
     <AppFooter
       navLinks={[
-        <Link label='Link 1' key='link_1' href='#' />,
-        <Link label='Longer link 2' key='link_2' href='#' />,
+        <Link label='Link 1' key='link_1' to='#' />,
+        <Link label='Longer link 2' key='link_2' to='#' />,
       ]}
       footerContent={
         <>
@@ -44,7 +44,7 @@ export const App: Story = {
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
             aliquip ex ea commodo consequat.
           </Paragraph>
-          <Link href='#'>Link</Link>
+          <Link to='#'>Link</Link>
         </>
       }
     />

src/components/header/header.test.tsx

@@ -20,11 +20,8 @@ describe('Header', () => {
   });
 
   it('Renders with bottom border by default', () => {
-    const { container } = render(<Header />);
-    expect(container.firstChild.className).toBe('o-header-scope');
-    expect(container.firstChild.firstChild?.className).toBe(
-      'o-header bottom-border',
-    );
+    render(<Header />);
+    expect(screen.getByRole('banner')).toHaveClass('o-header', 'bottom-border');
   });
 
   it('renders the English logo by default', () => {

src/components/header/header.tsx

@@ -1,12 +1,13 @@
 import classnames from 'classnames';
+import type { ReactNode } from 'react';
 import { JSX } from 'react';
 import { Banner } from '../banner/banner';
 import type { LogoLanguage } from './logo';
 import ResponsiveMenu from './responsive-menu';
 import './header.scss';
 
 export interface HeaderProperties {
-  links?: JSX.Element[];
+  links?: ReactNode[];
   href?: string;
   lang?: LogoLanguage;
 }

src/components/label/label.test.tsx

@@ -41,7 +41,7 @@ describe('<Label />', () => {
   });
 
   it('does not render if no label text is provided', () => {
-    render(<Label htmlFor={htmlFor} />);
+    render(<Label htmlFor={htmlFor}>{null}</Label>);
     expect(screen.queryByText(text)).not.toBeInTheDocument();
   });
 });

src/components/list/list.stories.tsx

@@ -67,7 +67,7 @@ export const Links: Story = {
         The{' '}
         <Link
           label='list links'
-          href='./?path=/docs/components-verified-links--listlink'
+          to='./?path=/docs/components-verified-links--listlink'
         />{' '}
         component presents each list item as a standalone link, which converts
         to a touch-friendly link with a large tap area at smaller screen widths.

src/components/pagination/pagination.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ReactElement, useState } from 'react';
+import { noOp } from '../../utils/no-op';
 import { Pagination } from './pagination';
 
 const user = userEvent.setup();
@@ -16,14 +17,25 @@ const ControlledPagination = (): ReactElement => {
       page={page}
       pageCount={3}
       tableId='pagination'
+      onClickPrevious={noOp}
+      onClickNext={noOp}
       onClickGo={onSubmit}
     />
   );
 };
 
 describe('<Pagination />', () => {
   it('displays pagination controls when provided', () => {
-    render(<Pagination page={2} pageCount={3} tableId='pagination' />);
+    render(
+      <Pagination
+        page={2}
+        pageCount={3}
+        tableId='pagination'
+        onClickPrevious={noOp}
+        onClickNext={noOp}
+        onClickGo={noOp}
+      />,
+    );
     const next = screen.getByText('Next');
     expect(next).toBeInTheDocument();
 
@@ -32,13 +44,31 @@ describe('<Pagination />', () => {
   });
 
   it('disables previous button on first page', () => {
-    render(<Pagination page={1} pageCount={3} tableId='pagination' />);
+    render(
+      <Pagination
+        page={1}
+        pageCount={3}
+        tableId='pagination'
+        onClickPrevious={noOp}
+        onClickNext={noOp}
+        onClickGo={noOp}
+      />,
+    );
     const previous = screen.getByRole('button', { name: 'Previous' });
     expect(previous.classList.contains('a-btn--disabled')).toBe(true);
   });
 
   it('disables next button on last page', () => {
-    render(<Pagination page={3} pageCount={3} tableId='pagination' />);
+    render(
+      <Pagination
+        page={3}
+        pageCount={3}
+        tableId='pagination'
+        onClickPrevious={noOp}
+        onClickNext={noOp}
+        onClickGo={noOp}
+      />,
+    );
     const next = screen.getByRole('button', { name: 'Next' });
     expect(next.classList.contains('a-btn--disabled')).toBe(true);
   });

src/components/radio-button/radio-button.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode, RefObject } from 'react';
+import type { ReactElement, ReactNode, Ref } from 'react';
 import { JSX } from 'react';
 import { HelperText } from '../helper-text/helper-text';
 import { Label } from '../label/label';
@@ -8,12 +8,7 @@ interface RadioProperties {
   label: ReactNode;
   className?: string;
   helperText?: string;
-  inputRef?:
-    | RefObject<HTMLInputElement>
-    | string
-    | ((instance: HTMLInputElement | null) => void)
-    | null
-    | undefined;
+  inputRef?: Ref<HTMLInputElement>;
   disabled?: boolean;
   isLarge?: boolean;
   name?: string;

src/components/table/table.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { Table } from './table';
+import { Table, type TableColumn } from './table';
 
 const defaultCaption = (
   <>
@@ -22,7 +22,7 @@ const defaultRows = [
   ['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3', 'Row 3, Column 4'],
 ];
 
-const columnsWithConfig = [
+const columnsWithConfig: TableColumn[] = [
   { header: 'Col 1', width: 30 },
   'Col 2',
   'Col 3',

src/components/table/table.tsx

@@ -68,7 +68,7 @@ export interface TableProperties {
  */
 export const Table = forwardRef<
   HTMLDivElement,
-  HTMLProps<HTMLTableElement> & TableProperties
+  Omit<HTMLProps<HTMLTableElement>, 'rows'> & TableProperties
 >(
   (
     {

src/components/text-introduction/test-helpers.tsx

@@ -11,7 +11,7 @@ export const description =
 export const callToActionText = 'Call-to-action link';
 
 export const callToAction = (
-  <ListLink href='/#' key='example1' label='Call-to-action link' />
+  <ListLink to='/#' key='example1' label='Call-to-action link' />
 );
 
 export const placeholders = {