From 649a517e9f18680e4f7f959e994314cce84f6cda Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 30 Oct 2023 05:57:56 +0000
Subject: [PATCH 1/5] build(deps-dev): Bump @storybook/theming from 7.4.6 to
 7.5.1 (#2647)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b5ea1e7bd1..efe16aa1dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2756,6 +2756,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/client-logger@7.5.1":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.5.1.tgz#dc4c693900ae1f7ebda9f7faeea46956e70ef184"
+  integrity sha512-XxbLvg0aQRoBrzxYLcVYCbjDkGbkU8Rfb74XbV2CLiO2bIbFPmA1l1Nwbp+wkCGA+O6Z1zwzSl6wcKKqZ6XZCg==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/components@6.5.16":
   version "6.5.16"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.16.tgz#f8dc51213bc08fe32154be964e1e8b0e2f670ed6"
@@ -3381,7 +3388,7 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
-"@storybook/theming@7.4.6", "@storybook/theming@^7.0.8":
+"@storybook/theming@7.4.6":
   version "7.4.6"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.4.6.tgz#72f7e42a57347d84128cef9abfba5ac1a810118e"
   integrity sha512-HW77iJ9ptCMqhoBOYFjRQw7VBap+38fkJGHP5KylEJCyYCgIAm2dEcQmtWpMVYFssSGcb6djfbtAMhYU4TL4Iw==
@@ -3391,6 +3398,16 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
+"@storybook/theming@^7.0.8":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.5.1.tgz#b3a78f493d644ac8cba5136e04479a58a9ba5546"
+  integrity sha512-ETLAOn10hI4Mkmjsr0HGcM6HbzaURrrPBYmfXOrdbrzEVN+AHW4FlvP9d8fYyP1gdjPE1F39XvF0jYgt1zXiHQ==
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
+
 "@storybook/types@7.0.27":
   version "7.0.27"
   resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.27.tgz#5e8a3bc8d973a519f1ca48fca5b34d53de9683e0"
@@ -16237,4 +16254,4 @@ zip-stream@^4.1.0:
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
\ No newline at end of file
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==

From c307f4b2a4989b911dd4339da8fe0181825925b1 Mon Sep 17 00:00:00 2001
From: lindsay <techells22@gmail.com>
Date: Tue, 31 Oct 2023 10:15:57 -0500
Subject: [PATCH 2/5] docs: add @AnnaGingle as a contributor (#2649)

---
 .all-contributorsrc | 127 ++++++++++++--------------------------------
 README.md           |   3 +-
 2 files changed, 37 insertions(+), 93 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 030b1d5c8f..5f10d07db3 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -3,9 +3,7 @@
   "projectOwner": "trussworks",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "commit": true,
   "contributors": [
@@ -14,248 +12,193 @@
       "name": "Suzanne Rozier",
       "avatar_url": "https://avatars.githubusercontent.com/u/2723066?v=4",
       "profile": "https://github.com/suzubara",
-      "contributions": [
-        "code",
-        "doc"
-      ]
+      "contributions": ["code", "doc"]
     },
     {
       "login": "haworku",
       "name": "haworku",
       "avatar_url": "https://avatars.githubusercontent.com/u/10750442?v=4",
       "profile": "https://github.com/haworku",
-      "contributions": [
-        "code",
-        "doc"
-      ]
+      "contributions": ["code", "doc"]
     },
     {
       "login": "ahobson",
       "name": "Andrew Hobson",
       "avatar_url": "https://avatars.githubusercontent.com/u/21983?v=4",
       "profile": "https://github.com/ahobson",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "gidjin",
       "name": "John Gedeon",
       "avatar_url": "https://avatars.githubusercontent.com/u/940173?v=4",
       "profile": "https://github.com/gidjin",
-      "contributions": [
-        "code",
-        "maintenance"
-      ]
+      "contributions": ["code", "maintenance"]
     },
     {
       "login": "eamahanna",
       "name": "Emily Mahanna",
       "avatar_url": "https://avatars.githubusercontent.com/u/56279459?v=4",
       "profile": "https://github.com/eamahanna",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "brandonlenz",
       "name": "Brandon Lenz",
       "avatar_url": "https://avatars.githubusercontent.com/u/15805554?v=4",
       "profile": "https://github.com/brandonlenz",
-      "contributions": [
-        "code",
-        "doc",
-        "maintenance",
-        "bug"
-      ]
+      "contributions": ["code", "doc", "maintenance", "bug"]
     },
     {
       "login": "sojeri",
       "name": "Jeri Sommers",
       "avatar_url": "https://avatars.githubusercontent.com/u/10818509?v=4",
       "profile": "https://github.com/sojeri",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "tinyels",
       "name": "Erin Stanfill",
       "avatar_url": "https://avatars.githubusercontent.com/u/3142631?v=4",
       "profile": "https://github.com/tinyels",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "esacteksab",
       "name": "Barry Morrison",
       "avatar_url": "https://avatars.githubusercontent.com/u/689591?v=4",
       "profile": "http://www.barrymorrison.com/",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "duncan-truss",
       "name": "Duncan",
       "avatar_url": "https://avatars.githubusercontent.com/u/52669884?v=4",
       "profile": "https://github.com/duncan-truss",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "SirenaBorracha",
       "name": "Arianna Kellogg",
       "avatar_url": "https://avatars.githubusercontent.com/u/16230705?v=4",
       "profile": "https://github.com/SirenaBorracha",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "christopherhuii",
       "name": "Christopher Hui",
       "avatar_url": "https://avatars.githubusercontent.com/u/8367504?v=4",
       "profile": "https://github.com/christopherhuii",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "jim",
       "name": "Jim Benton",
       "avatar_url": "https://avatars.githubusercontent.com/u/3331?v=4",
       "profile": "http://pandasguide.com/",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "jenbutongit",
       "name": "Jen Duong",
       "avatar_url": "https://avatars.githubusercontent.com/u/22080510?v=4",
       "profile": "https://github.com/jenbutongit",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "kimallen",
       "name": "Kim Allen",
       "avatar_url": "https://avatars.githubusercontent.com/u/13249580?v=4",
       "profile": "https://github.com/kimallen",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "kylehilltruss",
       "name": "Kyle Hill",
       "avatar_url": "https://avatars.githubusercontent.com/u/83614364?v=4",
       "profile": "https://github.com/kylehilltruss",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "rswerve",
       "name": "Mazdak Atighi",
       "avatar_url": "https://avatars.githubusercontent.com/u/8964335?v=4",
       "profile": "https://github.com/rswerve",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "Igarfinkle",
       "name": "Isaac Garfinkle",
       "avatar_url": "https://avatars.githubusercontent.com/u/7664177?v=4",
       "profile": "https://github.com/Igarfinkle",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "rogeruiz",
       "name": "Roger Steve Ruiz",
       "avatar_url": "https://avatars.githubusercontent.com/u/706004?v=4",
       "profile": "https://github.com/rogeruiz",
-      "contributions": [
-        "code",
-        "doc"
-      ]
+      "contributions": ["code", "doc"]
     },
     {
       "login": "lpsinger",
       "name": "Leo Singer",
       "avatar_url": "https://avatars.githubusercontent.com/u/728407?v=4",
       "profile": "https://github.com/lpsinger",
-      "contributions": [
-        "bug",
-        "code"
-      ]
+      "contributions": ["bug", "code"]
     },
     {
       "login": "Shkeating",
       "name": "Shauna Keating",
       "avatar_url": "https://avatars.githubusercontent.com/u/59394696?v=4",
       "profile": "https://github.com/Shkeating",
-      "contributions": [
-        "a11y",
-        "code"
-      ]
+      "contributions": ["a11y", "code"]
     },
     {
       "login": "jcbcapps",
       "name": "Jacob Capps",
       "avatar_url": "https://avatars.githubusercontent.com/u/99674188?v=4",
       "profile": "https://github.com/jcbcapps",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "pearl-truss",
       "name": "pearl-truss",
       "avatar_url": "https://avatars.githubusercontent.com/u/67110378?v=4",
       "profile": "https://github.com/pearl-truss",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "werdnanoslen",
       "name": "Andrew Nelson",
       "avatar_url": "https://avatars.githubusercontent.com/u/764090?v=4",
       "profile": "https://andyhub.com/",
-      "contributions": [
-        "code",
-        "doc"
-      ]
+      "contributions": ["code", "doc"]
     },
     {
       "login": "sawyerh",
       "name": "Sawyer Hollenshead",
       "avatar_url": "https://avatars.githubusercontent.com/u/371943?v=4",
       "profile": "https://sawyer.soy",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "rpdelaney",
       "name": "Ryan Delaney",
       "avatar_url": "https://avatars.githubusercontent.com/u/1139517?v=4",
       "profile": "https://keybase.io/rpdelaney",
-      "contributions": [
-        "maintenance",
-        "infra"
-      ]
+      "contributions": ["maintenance", "infra"]
+    },
+    {
+      "login": "AnnaGingle",
+      "name": "Anna Gingle",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48488699?v=4",
+      "profile": "https://github.com/AnnaGingle",
+      "contributions": ["design", "code"]
     }
   ],
   "contributorsPerLine": 7,
   "commitConvention": "angular",
   "commitType": "chore(all-contributors)"
 }
+
diff --git a/README.md b/README.md
index 653e453ef1..acc2738123 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # @trussworks/react-uswds
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-27-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://img.shields.io/npm/v/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
@@ -171,6 +171,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://andyhub.com/"><img src="https://avatars.githubusercontent.com/u/764090?v=4?s=100" width="100px;" alt="Andrew Nelson"/><br /><sub><b>Andrew Nelson</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Code">💻</a> <a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://sawyer.soy"><img src="https://avatars.githubusercontent.com/u/371943?v=4?s=100" width="100px;" alt="Sawyer Hollenshead"/><br /><sub><b>Sawyer Hollenshead</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=sawyerh" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://keybase.io/rpdelaney"><img src="https://avatars.githubusercontent.com/u/1139517?v=4?s=100" width="100px;" alt="Ryan Delaney"/><br /><sub><b>Ryan Delaney</b></sub></a><br /><a href="#maintenance-rpdelaney" title="Maintenance">🚧</a> <a href="#infra-rpdelaney" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AnnaGingle"><img src="https://avatars.githubusercontent.com/u/48488699?v=4?s=100" width="100px;" alt="Anna Gingle"/><br /><sub><b>Anna Gingle</b></sub></a><br /><a href="#design-AnnaGingle" title="Design">🎨</a> <a href="https://github.com/trussworks/react-uswds/commits?author=AnnaGingle" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

From d4c0b4e2f2b2c0924c35c96bea050ad8c2a2ae19 Mon Sep 17 00:00:00 2001
From: Muhammad Adeel <87698014+m7adeel@users.noreply.github.com>
Date: Tue, 31 Oct 2023 08:55:28 -0700
Subject: [PATCH 3/5] fix: readme quick links (#2646)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index acc2738123..2eedb9c90e 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ This repository is governed by the [Contributor Covenant](./CODE_OF_CONDUCT.md)
 
 ### Quick links:
 
-- [Yarn scripts](./docs/contributing#available-commands)
+- [Yarn scripts](./docs/contributing.md#available-commands)
 - [PR commit guidelines](./docs/contributing.md#opening--merging-pull-requests)
 - [Adding new components](./docs/adding_new_components.md)
 - [Testing in an application](./docs/contributing.md#testing-in-an-application)

From d330a121b5abcc63f25882d34900fa76f6330a49 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Tue, 31 Oct 2023 09:32:11 -0700
Subject: [PATCH 4/5] feat: in-page navigation (#2551)

Co-authored-by: Shauna Keating <59394696+shkeating@users.noreply.github.com>
---
 .../InPageNavigation.module.scss              |   9 +
 .../InPageNavigation.stories.tsx              |  77 +++
 .../InPageNavigation.test.tsx                 |  63 ++
 .../InPageNavigation/InPageNavigation.tsx     | 104 ++++
 src/components/InPageNavigation/content.tsx   | 557 ++++++++++++++++++
 src/index.ts                                  |   1 +
 6 files changed, 811 insertions(+)
 create mode 100644 src/components/InPageNavigation/InPageNavigation.module.scss
 create mode 100644 src/components/InPageNavigation/InPageNavigation.stories.tsx
 create mode 100644 src/components/InPageNavigation/InPageNavigation.test.tsx
 create mode 100644 src/components/InPageNavigation/InPageNavigation.tsx
 create mode 100644 src/components/InPageNavigation/content.tsx

diff --git a/src/components/InPageNavigation/InPageNavigation.module.scss b/src/components/InPageNavigation/InPageNavigation.module.scss
new file mode 100644
index 0000000000..7e53786975
--- /dev/null
+++ b/src/components/InPageNavigation/InPageNavigation.module.scss
@@ -0,0 +1,9 @@
+@media not (prefers-reduced-motion) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+:target {
+  scroll-margin-top: var(--margin-offset);
+}
diff --git a/src/components/InPageNavigation/InPageNavigation.stories.tsx b/src/components/InPageNavigation/InPageNavigation.stories.tsx
new file mode 100644
index 0000000000..10dc377560
--- /dev/null
+++ b/src/components/InPageNavigation/InPageNavigation.stories.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import { InPageNavigation } from './InPageNavigation'
+import { CONTENT } from './content'
+import { HeadingLevel } from '../../types/headingLevel'
+import classNames from 'classnames'
+
+export default {
+  title: 'Components/In-Page Navigation',
+  component: InPageNavigation,
+  argTypes: {
+    headingLevel: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    },
+    rootMargin: {
+      control: 'text',
+    },
+    threshold: {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    },
+    title: {
+      control: 'text',
+    },
+  },
+  args: {
+    headingLevel: 'h4',
+    rootMargin: '0px 0px 0px 0px',
+    threshold: 1,
+    title: 'On this page',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 3.0 In-Page Navigation component
+
+Source: https://designsystem.digital.gov/components/in-page-navigation/
+`,
+      },
+    },
+  },
+}
+
+type StorybookArguments = {
+  headingLevel: HeadingLevel
+  rootMargin: string
+  scrollOffset: string
+  threshold: number
+  title: string
+}
+
+export const Default = (argTypes: StorybookArguments): React.ReactElement => (
+  <InPageNavigation
+    content={CONTENT}
+    headingLevel={argTypes.headingLevel}
+    mainProps={{ className: 'usa-prose' }}
+    rootMargin={argTypes.rootMargin}
+    threshold={argTypes.threshold}
+    title={argTypes.title}
+  />
+)
+
+// Storybook seems to force anchor links to open in a new window,
+// so this story is just to demonstrate how the scroll offset works
+export const ScrollOffset = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <InPageNavigation
+    content={CONTENT}
+    headingLevel={argTypes.headingLevel}
+    mainProps={{ className: 'usa-prose' }}
+    rootMargin={argTypes.rootMargin}
+    scrollOffset="2rem"
+    threshold={argTypes.threshold}
+    title={argTypes.title}
+  />
+)
diff --git a/src/components/InPageNavigation/InPageNavigation.test.tsx b/src/components/InPageNavigation/InPageNavigation.test.tsx
new file mode 100644
index 0000000000..7a1c6bd6f6
--- /dev/null
+++ b/src/components/InPageNavigation/InPageNavigation.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { screen, render, getByRole } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InPageNavigation } from './InPageNavigation'
+import { HeadingLevel } from '../../types/headingLevel'
+import { CONTENT } from './content'
+
+describe('InPageNavigation component', () => {
+  const props = {
+    content: CONTENT,
+    headingLevel: 'h1' as HeadingLevel,
+    title: 'What do we have <i>here</i>?',
+  }
+
+  const setup = (plain?: boolean) => {
+    const utils = plain
+      ? render(<InPageNavigation content={props.content} />)
+      : render(
+          <InPageNavigation
+            content={props.content}
+            headingLevel={props.headingLevel}
+            title={props.title}
+          />
+        )
+    const nav = screen.getByTestId('InPageNavigation')
+    const user = userEvent.setup()
+    return {
+      nav,
+      user,
+      ...utils,
+    }
+  }
+
+  beforeEach(() => {
+    // IntersectionObserver isn't available in test environment
+    const mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    })
+    window.IntersectionObserver = mockIntersectionObserver
+  })
+
+  it('renders without errors', () => {
+    const { nav } = setup(true)
+    expect(nav).toBeInTheDocument()
+    const heading = getByRole(nav, 'heading', {
+      level: 4,
+      name: 'On this page',
+    })
+    expect(heading).toBeInTheDocument()
+  })
+
+  it('sets the heading and title', () => {
+    const { nav } = setup()
+    const heading = getByRole(nav, 'heading', {
+      level: Number(props.headingLevel.slice(-1)),
+      name: props.title,
+    })
+    expect(heading).toBeInTheDocument()
+  })
+})
diff --git a/src/components/InPageNavigation/InPageNavigation.tsx b/src/components/InPageNavigation/InPageNavigation.tsx
new file mode 100644
index 0000000000..487424d74e
--- /dev/null
+++ b/src/components/InPageNavigation/InPageNavigation.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react'
+import classnames from 'classnames'
+import { HeadingLevel } from '../../types/headingLevel'
+import { Link } from '../Link/Link'
+import styles from './InPageNavigation.module.scss'
+
+type InPageNavigationProps = {
+  className?: string
+  content: JSX.Element
+  headingLevel?: HeadingLevel
+  mainProps?: JSX.IntrinsicElements['main']
+  navProps?: JSX.IntrinsicElements['nav']
+  rootMargin?: string
+  scrollOffset?: string
+  threshold?: number
+  title?: string
+}
+
+export const InPageNavigation = ({
+  className,
+  content,
+  headingLevel = 'h4',
+  mainProps,
+  navProps,
+  rootMargin = '0px 0px 0px 0px',
+  scrollOffset,
+  threshold = 1,
+  title = 'On this page',
+  ...divProps
+}: InPageNavigationProps &
+  JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames('usa-in-page-nav', styles.target, className)
+  const { className: navClassName, ...remainingNavProps } = navProps || {}
+  const navClasses = classnames('usa-in-page-nav__nav', navClassName)
+  const { className: mainClassName, ...remainingMainProps } = mainProps || {}
+  const mainClasses = classnames('main-content', mainClassName)
+  const Heading = headingLevel
+  const offsetStyle = {
+    '--margin-offset': scrollOffset,
+  } as React.CSSProperties
+  const [currentSection, setCurrentSection] = useState('')
+  const sectionHeadings: JSX.Element[] = content.props.children.filter(
+    (el: JSX.Element) => el.type === 'h2' || el.type === 'h3'
+  )
+  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        setCurrentSection(entry.target.id)
+      }
+    })
+  }
+  const observerOptions = {
+    root: null,
+    rootMargin: rootMargin,
+    threshold: [threshold],
+  }
+  const observer = new IntersectionObserver(handleIntersection, observerOptions)
+  useEffect(() => {
+    document.querySelectorAll('h2,h3').forEach((h) => observer.observe(h))
+  })
+
+  return (
+    <div className="usa-in-page-nav-container" {...divProps}>
+      <aside
+        className={classes}
+        aria-label={title}
+        data-testid="InPageNavigation">
+        <nav className={navClasses} {...remainingNavProps}>
+          <Heading className="usa-in-page-nav__heading" tabIndex={0}>
+            {title}
+          </Heading>
+          <ul className="usa-in-page-nav__list">
+            {sectionHeadings.map((el: JSX.Element) => {
+              const heading: JSX.Element = el.props.children
+              const href: string = el.props.id
+              const hClass = classnames('usa-in-page-nav__item', {
+                'usa-in-page-nav__item--sub-item': el.type === 'h3',
+              })
+              const lClass = classnames('usa-in-page-nav__link', {
+                'usa-current': href === currentSection,
+              })
+              return (
+                <li key={`usa-in-page-nav__item_${heading}`} className={hClass}>
+                  <Link href={`#${href}`} className={lClass}>
+                    {heading}
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+      </aside>
+      <main
+        id="main-content"
+        className={mainClasses}
+        {...remainingMainProps}
+        style={scrollOffset ? offsetStyle : undefined}>
+        {content}
+      </main>
+    </div>
+  )
+}
+
+export default InPageNavigation
diff --git a/src/components/InPageNavigation/content.tsx b/src/components/InPageNavigation/content.tsx
new file mode 100644
index 0000000000..151d59549e
--- /dev/null
+++ b/src/components/InPageNavigation/content.tsx
@@ -0,0 +1,557 @@
+import React from 'react'
+export const CONTENT = (
+  <>
+    <h1>Sample in-page navigation page</h1>
+    <h2 tabIndex={-1} id="lorem">
+      Lorem ipsum dolor
+    </h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h2 tabIndex={-1} id="consectetuer">
+      Consectetuer adipiscing elit
+    </h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h3 tabIndex={-1} id="nullam">
+      Nullam sit amet enim
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h3 tabIndex={-1} id="vivamus">
+      Vivamus pharetra posuere sapien
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h3 tabIndex={-1} id="suspendisse">
+      Suspendisse id velit
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h3 tabIndex={-1} id="orci">
+      Orci magna rhoncus neque
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h2 tabIndex={-1} id="aliquam">
+      Aliquam erat volutpat: velit vitae ligula volutpat
+    </h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <h3 tabIndex={-1} id="vitae">
+      Vitae ligula
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
+      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
+      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
+      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
+      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
+      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
+      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
+      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
+      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
+      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
+      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
+      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
+      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
+      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
+      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
+      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
+      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
+      libero. Vivamus pharetra posuere sapien.
+    </p>
+  </>
+)
diff --git a/src/index.ts b/src/index.ts
index 75f7437ffb..b97f944056 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,7 @@ export { Alert } from './components/Alert/Alert'
 export { Accordion } from './components/Accordion/Accordion'
 export { Button } from './components/Button/Button'
 export { ButtonGroup } from './components/ButtonGroup/ButtonGroup'
+export { InPageNavigation } from './components/InPageNavigation/InPageNavigation'
 export { Link } from './components/Link/Link'
 export { MediaBlockBody } from './components/mediablock/MediaBlockBody/MediaBlockBody'
 export { Table } from './components/Table/Table'

From 57e8f348b0bcc72192096ed3f5db1999b80b9b9f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 1 Nov 2023 13:47:46 -0400
Subject: [PATCH 5/5] chore(release): release 6.0.0 (#2643)

---
 CHANGELOG.md | 25 +++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff269d9fa8..698c0462b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.0.0](https://github.com/trussworks/react-uswds/compare/5.5.0...6.0.0) (2023-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* `<TimePicker>` implementations must specify a `label` prop
+* Dropdown has been removed use `<Select>` instead
+
+### Features
+
+* Delete deprecated Dropdown component ([#2644](https://github.com/trussworks/react-uswds/issues/2644)) ([59dffd1](https://github.com/trussworks/react-uswds/commit/59dffd138f745f38a222523360a4666c0c13b030))
+* in-page navigation ([#2551](https://github.com/trussworks/react-uswds/issues/2551)) ([d330a12](https://github.com/trussworks/react-uswds/commit/d330a121b5abcc63f25882d34900fa76f6330a49))
+
+
+### Bug Fixes
+
+* Label is mandatory for TimePicker component ([#2629](https://github.com/trussworks/react-uswds/issues/2629)) ([c7f00d3](https://github.com/trussworks/react-uswds/commit/c7f00d35175d4dd0b59288eb34685edc9525cb0f))
+* readme quick links ([#2646](https://github.com/trussworks/react-uswds/issues/2646)) ([d4c0b4e](https://github.com/trussworks/react-uswds/commit/d4c0b4e2f2b2c0924c35c96bea050ad8c2a2ae19))
+* Updates sign in stories to fix aria-controls issue of show password button ([#2627](https://github.com/trussworks/react-uswds/issues/2627)) ([67c1114](https://github.com/trussworks/react-uswds/commit/67c1114ab1eea857dc76271deb5c85672505e40a))
+
+
+### Documentation & Examples
+
+* add @AnnaGingle as a contributor ([#2649](https://github.com/trussworks/react-uswds/issues/2649)) ([c307f4b](https://github.com/trussworks/react-uswds/commit/c307f4b2a4989b911dd4339da8fe0181825925b1))
+
 ## [5.5.0](https://github.com/trussworks/react-uswds/compare/5.4.0...5.5.0) (2023-10-20)
 
 
diff --git a/package.json b/package.json
index 5e9a4d9e72..9daf9f58d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trussworks/react-uswds",
-  "version": "5.5.0",
+  "version": "6.0.0",
   "description": "React USWDS 3.0 component library",
   "keywords": [
     "react",