diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
index 284199215..849c935de 100755
--- a/.storybook/components/DesignTokens/Tier1/Animation.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
index 44583e23a..0de5059e9 100755
--- a/.storybook/components/DesignTokens/Tier1/Borders.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
index 3621486b0..4c0d2c808 100755
--- a/.storybook/components/DesignTokens/Tier1/Colors.tsx
+++ b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import '../DesignTokens.css';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 
diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
index 8c7e30e2e..65d040c8f 100644
--- a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
+++ b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
index 5cc6e57f3..ead010d23 100644
--- a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
+++ b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
index f9d48bb27..f1e86e0db 100644
--- a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
+++ b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
index fcca01f3e..f93e9b36a 100755
--- a/.storybook/components/DesignTokens/Tier1/Layout.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Layout.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/Shadows.jsx b/.storybook/components/DesignTokens/Tier1/Shadows.jsx
index 54a10d70b..46aba822f 100755
--- a/.storybook/components/DesignTokens/Tier1/Shadows.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Shadows.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
index fffb98f2f..46d0e4b0c 100755
--- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
index 13f0cc8b8..5f918a955 100755
--- a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
+++ b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
@@ -1,7 +1,8 @@
 import { at, forEach } from 'lodash';
 
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import presets from '../../../../src/design-tokens/tier-1-definitions/typography.json';
 import flatten from '../../../util/flattenToken';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
diff --git a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx
index 15557cb20..fbfefa33d 100755
--- a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx
+++ b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
index d5c66c268..6003c6099 100755
--- a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
index d59c20571..013603b6f 100755
--- a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 
diff --git a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
index 779a80c16..8b9f995a4 100755
--- a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx
@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx
index 7c8b3607f..93fa52d5a 100755
--- a/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx
@@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react';
 import { at, capitalize, forEach } from 'lodash';
 
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import usages from '../../../../src/design-tokens/tier-2-usage/typography.json';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore importing of a legacy utility file results in some 'any's, which is acceptable for this docs page
diff --git a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
index af986646c..186ef24fa 100755
--- a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 
diff --git a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
index 46413aaf2..672017d7b 100644
--- a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section, Grid } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
diff --git a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
index fb7c55956..42daeee6d 100755
--- a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
@@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react';
 import { at, capitalize, forEach, merge } from 'lodash';
 
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb-typography.json';
 import button from '../../../../src/design-tokens/tier-3-component/buttons-typography.json';
 import form from '../../../../src/design-tokens/tier-3-component/forms-typography.json';
diff --git a/.storybook/pages/WireframeDemo/WireframeDemo.tsx b/.storybook/pages/WireframeDemo/WireframeDemo.tsx
index df15d78bf..89e8e09c2 100644
--- a/.storybook/pages/WireframeDemo/WireframeDemo.tsx
+++ b/.storybook/pages/WireframeDemo/WireframeDemo.tsx
@@ -10,7 +10,6 @@ import {
   Link,
   Select,
   Tabs,
-  Tab,
   Text,
   Tooltip,
 } from '../../../src';
@@ -79,8 +78,8 @@ const LoggedOutPage = ({ onLogin }: { onLogin: () => void }) => (
           src={PlaceholderImage}
         />
         <div className="flex flex-col items-center gap-6">
-          <Heading size="h1">Application</Heading>
-          <Heading size="h2">Sign in</Heading>
+          <Heading as="h1">Application</Heading>
+          <Heading as="h2">Sign in</Heading>
           <Text>Remember to use your school email to sign in:</Text>
         </div>
         <img
@@ -153,9 +152,9 @@ const StudentTab = ({
     )}
   >
     <div className={clsx(styles['watch-page__avatar'], 'h-10 w-10')}>
-      <Text size="sm">{studentName.slice(0, 1)}</Text>
+      <Text preset="body-sm">{studentName.slice(0, 1)}</Text>
     </div>
-    <Text className="!mt-2 truncate" size="xs">
+    <Text className="!mt-2 truncate" preset="body-xs">
       {studentName}
     </Text>
   </div>
@@ -195,7 +194,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
           </Button>
           <div>
             <Text className="mb-2">Playing reflections in response to:</Text>
-            <Heading as="h1" size="h3">
+            <Heading as="h1" preset="headline-sm">
               What's something in your life, big or small, that you're proud of?
               Why are you proud of it?
             </Heading>
@@ -221,26 +220,26 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
           </div>
 
           <Tabs className="mt-4">
-            <Tab title="All (3)">
+            <Tabs.Tab title="All (3)">
               <div className="flex">
                 <StudentTab active studentName="Mikaela" />
                 <StudentTab studentName="Cesar" />
                 <StudentTab studentName="Truman" />
               </div>
-            </Tab>
+            </Tabs.Tab>
 
-            <Tab title="New (1)">
+            <Tabs.Tab title="New (1)">
               <div className="flex">
                 <StudentTab active studentName="Mikaela" />
               </div>
-            </Tab>
+            </Tabs.Tab>
 
-            <Tab title="Open (2)">
+            <Tabs.Tab title="Open (2)">
               <div className="flex">
                 <StudentTab studentName="Cesar" />
                 <StudentTab studentName="Truman" />
               </div>
-            </Tab>
+            </Tabs.Tab>
           </Tabs>
         </div>
 
@@ -250,12 +249,12 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
               <div
                 className={clsx(styles['watch-page__avatar'], 'mr-2 h-9 w-9')}
               >
-                <Text size="sm">M</Text>
+                <Text preset="body-sm">M</Text>
               </div>
 
               <div>
-                <Text size="sm">Mikaela</Text>
-                <Text size="xs">3d</Text>
+                <Text preset="body-sm">Mikaela</Text>
+                <Text preset="body-xs">3d</Text>
               </div>
             </div>
             <img
@@ -280,7 +279,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             <div className={styles['watch-page__response']}>
               <Label htmlFor={responseTextareaId} text="Respond to Mikaela" />
               <textarea
-                className={clsx(styles['watch-page__textarea'], 'h-[9.25rem')}
+                className={clsx(styles['watch-page__textarea'], 'h-[9.25rem]')}
                 id={responseTextareaId}
                 onChange={handleTextareaChange}
                 placeholder="Type your response to Mikaela"
@@ -313,10 +312,10 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             'm-4 h-[6.25rem] w-[6.25rem]',
           )}
         >
-          <Text size="lg">M</Text>
+          <Text preset="body-lg">M</Text>
         </div>
         <Link className="mb-4">
-          <Heading as="h2" size="h3">
+          <Heading as="h2" preset="headline-sm">
             Mikaela
           </Heading>
         </Link>
@@ -331,22 +330,22 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             <thead>
               <tr>
                 <th>
-                  <Text size="xs">Questions received</Text>
+                  <Text preset="body-xs">Questions received</Text>
                 </th>
                 <th>
-                  <Text size="xs">Reflections submitted</Text>
+                  <Text preset="body-xs">Reflections submitted</Text>
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td>
-                  <Text className="text-center" size="lg">
+                  <Text className="text-center" preset="body-lg">
                     10
                   </Text>
                 </td>
                 <td>
-                  <Text className="text-center" size="lg">
+                  <Text className="text-center" preset="body-lg">
                     8
                   </Text>
                 </td>
@@ -356,7 +355,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
         </div>
 
         <div className={styles['watch-page__teacher-notes-heading']}>
-          <Text size="xs">Your personal notes</Text>
+          <Text preset="body-xs">Your personal notes</Text>
           <Tooltip
             childNotInteractive
             text={
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 993102176..3962ace4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,52 @@
 
 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.
 
+## [14.0.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.12.0...v14.0.0) (2024-03-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove Grid and Section from exports (#1876)
+* **Text:** remove deprecated props (#1873)
+* **Heading:** remove deprecated props and refactor usages (#1872)
+* **Link:** remove and reset deprecated props (#1871)
+* **Select:** remove deprecated props (#1870)
+* **Label:** remove deprecated props (#1868)
+* **InputField:** remove unused prop requiredLabel (#1869)
+* **InlineNotification:** remove deprecated props from component (#1867)
+* **Card:** deprecate orientation prop (#1866)
+* **Badge:** deprecate name prop on component (#1865)
+* **Skeleton:** deprecate .Rect subcomponent mapping (#1864)
+* **Tag:** remove deprecated props and update API (#1862)
+* **Tooltip:** remove deprecated props (#1861)
+* **Tabs:** combine Tab sub-component into Tabs
+* remove deprecated components
+* output a single, cjs build
+
+### Features
+
+* **Badge:** deprecate name prop on component ([#1865](https://github.com/chanzuckerberg/edu-design-system/issues/1865)) ([cff5d5e](https://github.com/chanzuckerberg/edu-design-system/commit/cff5d5e2d88e5414a821756db5b31e4fe1c4873e))
+* **Card:** deprecate orientation prop ([#1866](https://github.com/chanzuckerberg/edu-design-system/issues/1866)) ([bb160c1](https://github.com/chanzuckerberg/edu-design-system/commit/bb160c14e3a8a26ec2d4ff24a31b6d2f9fca3a98))
+* **Heading:** remove deprecated props and refactor usages ([#1872](https://github.com/chanzuckerberg/edu-design-system/issues/1872)) ([a5d6f76](https://github.com/chanzuckerberg/edu-design-system/commit/a5d6f76a333426ef84a68febf337cec5cdb8d1b9))
+* **InlineNotification:** remove deprecated props from component ([#1867](https://github.com/chanzuckerberg/edu-design-system/issues/1867)) ([efc6b43](https://github.com/chanzuckerberg/edu-design-system/commit/efc6b430dec5440789e35382707b574f5372e30f))
+* **InputField:** remove unused prop requiredLabel ([#1869](https://github.com/chanzuckerberg/edu-design-system/issues/1869)) ([f9d73dd](https://github.com/chanzuckerberg/edu-design-system/commit/f9d73dd2806448a01a4d452fa7bcfc4347a56309))
+* **Label:** remove deprecated props ([#1868](https://github.com/chanzuckerberg/edu-design-system/issues/1868)) ([907cc39](https://github.com/chanzuckerberg/edu-design-system/commit/907cc3966be4e519050c2a16c6f0cfb12509308e))
+* **Link:** remove and reset deprecated props ([#1871](https://github.com/chanzuckerberg/edu-design-system/issues/1871)) ([552945a](https://github.com/chanzuckerberg/edu-design-system/commit/552945a6ee161f0359f9db48123dbb94bec704ba))
+* remove deprecated components ([2538aa6](https://github.com/chanzuckerberg/edu-design-system/commit/2538aa67dc0605210812c9597ce1548bba41070f))
+* remove Grid and Section from exports ([#1876](https://github.com/chanzuckerberg/edu-design-system/issues/1876)) ([a0ec79a](https://github.com/chanzuckerberg/edu-design-system/commit/a0ec79a017bacb70f8c9043c3dcb72eb4da2ec31))
+* **Select:** remove deprecated props ([#1870](https://github.com/chanzuckerberg/edu-design-system/issues/1870)) ([e0ad463](https://github.com/chanzuckerberg/edu-design-system/commit/e0ad4632aacee1d107e658c977c77a5e733843d1))
+* **Skeleton:** deprecate .Rect subcomponent mapping ([#1864](https://github.com/chanzuckerberg/edu-design-system/issues/1864)) ([9d3ffec](https://github.com/chanzuckerberg/edu-design-system/commit/9d3ffecbf8a117a6b6534c2076275f4f1ea5e797))
+* **Tabs:** combine Tab sub-component into Tabs ([0479863](https://github.com/chanzuckerberg/edu-design-system/commit/0479863fd27a362aa16db701d96028c2f9a33b9d))
+* **Tag:** remove deprecated props and update API ([#1862](https://github.com/chanzuckerberg/edu-design-system/issues/1862)) ([dbfbaa3](https://github.com/chanzuckerberg/edu-design-system/commit/dbfbaa3c04369c7c144d724f3f2ff644b0130a33))
+* **Text:** remove deprecated props ([#1873](https://github.com/chanzuckerberg/edu-design-system/issues/1873)) ([13fbc18](https://github.com/chanzuckerberg/edu-design-system/commit/13fbc1808e3cb742ddabc33faa1b30516cde275c))
+* **Tooltip:** remove deprecated props ([#1861](https://github.com/chanzuckerberg/edu-design-system/issues/1861)) ([d444607](https://github.com/chanzuckerberg/edu-design-system/commit/d444607ad42bf6779d14fdf1b7f76d7ad316a285))
+
+
+### Bug Fixes
+
+* output a single, cjs build ([523130e](https://github.com/chanzuckerberg/edu-design-system/commit/523130ed29e411e6ef5d9add27f8b78c2736f88a))
+* remove unnecessary type definitions script ([be341c0](https://github.com/chanzuckerberg/edu-design-system/commit/be341c00d6114afbd06191053fa4411676c60eb2))
+
 ## [13.12.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.11.0...v13.12.0) (2024-03-04)
 
 
diff --git a/package.json b/package.json
index 569a7cc5a..cd64d2bdd 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,13 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.12.0",
+  "version": "14.0.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
   "license": "MIT",
+  "type": "commonjs",
   "exports": {
-    ".": {
-      "import": "./lib/index.js",
-      "require": "./lib/index.cjs"
-    },
+    ".": "./lib/index.js",
     "./index.css": "./lib/index.css",
     "./fonts.css": "./lib/tokens/fonts.css",
     "./tailwind.config": "./tailwind.config.ts"
@@ -40,9 +38,8 @@
     "eds-init-theme": "bin/eds-init.js"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:tokens && yarn build:declarations && yarn build:js && yarn copy-fonts-to-lib",
+    "build": "yarn build:clean && yarn build:tokens && yarn build:js && yarn copy-fonts-to-lib",
     "build:clean": "rm -rf lib/",
-    "build:declarations": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js && yarn prettier-tokens-dist",
     "build:js": "rollup --config",
     "build:storybook": "storybook build -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index e17e385ac..17f30ec50 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -7,24 +7,14 @@ import postcss from 'rollup-plugin-postcss';
  */
 export default {
   input: 'src/index.ts',
-  output: [
-    {
-      dir: 'lib',
-      format: 'es',
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      sourcemap: true,
-    },
-    {
-      dir: 'lib',
-      format: 'cjs',
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      sourcemap: true,
-      entryFileNames: '[name].cjs',
-      interop: 'auto',
-    },
-  ],
+  output: {
+    dir: 'lib',
+    format: 'cjs',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    sourcemap: true,
+    interop: 'auto',
+  },
   /**
    * With the nodeResolve plugin, this marks all EDS node_modules as external, aka provided by the consumer.
    * Since EDS is not imported directly into a web <script>, package managers (such as npm or yarn)
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 59f28d5c2..a37332cd5 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -316,7 +316,7 @@ export const UsingComplexHeaders: Story = {
       <>
         <Accordion.Row>
           <Accordion.Button>
-            <Text size="lg">
+            <Text preset="body-lg">
               <Icon
                 className="m-2"
                 name="check-circle"
@@ -335,7 +335,7 @@ export const UsingComplexHeaders: Story = {
         </Accordion.Row>
         <Accordion.Row>
           <Accordion.Button>
-            <Text size="lg">
+            <Text preset="body-lg">
               <Icon
                 className="m-2"
                 name="check-circle"
@@ -373,7 +373,7 @@ export const UsingNumberIconInHeaders: Story = {
           <Accordion.Button>
             <div className="flex flex-wrap items-center gap-2">
               <NumberIcon aria-label="Step 1" number={1} />
-              <Text size="lg">Step 1</Text>
+              <Text preset="body-lg">Step 1</Text>
             </div>
           </Accordion.Button>
           <Accordion.Panel>
@@ -387,7 +387,7 @@ export const UsingNumberIconInHeaders: Story = {
           <Accordion.Button>
             <div className="items flex flex-wrap items-center gap-2">
               <NumberIcon aria-label="Step 2" number={2} />
-              <Text size="lg">Step 2</Text>
+              <Text preset="body-lg">Step 2</Text>
             </div>
           </Accordion.Button>
           <Accordion.Panel>
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 35dd30e65..6f28c47fd 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -200,8 +200,8 @@ const AccordionButton = ({
           {...other}
         >
           <Heading
+            as={headingAs || contextHeadingAs}
             className={headingClassName}
-            size={headingAs || contextHeadingAs}
           >
             {children}
           </Heading>
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 8ae975d86..8fd60bd3c 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -65,7 +65,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -88,7 +88,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -130,7 +130,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -172,7 +172,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -225,7 +225,7 @@ exports[`<Accordion /> Small story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -272,7 +272,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -315,7 +315,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -350,7 +350,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -385,7 +385,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -431,7 +431,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -473,7 +473,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -515,7 +515,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -557,7 +557,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -611,7 +611,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -654,7 +654,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -689,7 +689,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -724,7 +724,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -770,7 +770,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -812,7 +812,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -854,7 +854,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -896,7 +896,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -950,7 +950,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -993,7 +993,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1028,7 +1028,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1063,7 +1063,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1109,7 +1109,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1151,7 +1151,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1193,7 +1193,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1235,7 +1235,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1289,7 +1289,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1332,7 +1332,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1367,7 +1367,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1402,7 +1402,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1448,7 +1448,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1490,7 +1490,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1532,7 +1532,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1574,7 +1574,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1626,10 +1626,10 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <p
-            class="text text--lg"
+            class="text text--body-lg"
           >
             <svg
               aria-hidden="true"
@@ -1678,10 +1678,10 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <p
-            class="text text--lg"
+            class="text text--body-lg"
           >
             <svg
               aria-hidden="true"
@@ -1741,7 +1741,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <div
             class="flex flex-wrap items-center gap-2"
@@ -1754,7 +1754,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
               1
             </span>
             <p
-              class="text text--lg"
+              class="text text--body-lg"
             >
               Step 1
             </p>
@@ -1790,7 +1790,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <div
             class="items flex flex-wrap items-center gap-2"
@@ -1803,7 +1803,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
               2
             </span>
             <p
-              class="text text--lg"
+              class="text text--body-lg"
             >
               Step 2
             </p>
@@ -1851,7 +1851,7 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Accordion Button 
           closed
@@ -1897,7 +1897,7 @@ exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
         </h2>
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 24cc9e0d1..0b7e10bc8 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -100,7 +100,7 @@ export const IconBadge: StoryObj<Args> = {
         >
           Ava
         </div>
-        <Badge.Icon name="alarm" />
+        <Badge.Icon icon="alarm" />
       </>
     ),
   },
diff --git a/src/components/Badge/Badge.test.tsx b/src/components/Badge/Badge.test.tsx
index c62c0eb3d..09c1843b9 100644
--- a/src/components/Badge/Badge.test.tsx
+++ b/src/components/Badge/Badge.test.tsx
@@ -34,7 +34,7 @@ describe('<Badge />', () => {
           <Badge.Icon />
         </Badge>,
       );
-    }).toThrow(/Name or Icon must be passed to the Badge sub-component/);
+    }).toThrow(/Icon must be passed to the Badge sub-component/);
     consoleErrorMock.mockRestore();
   });
 });
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 576c40611..d6cfc680b 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React from 'react';
-import type { EitherExclusive } from '../../util/utility-types';
 import Icon from '../Icon';
 import type { IconName, IconProps } from '../Icon';
 import styles from './Badge.module.css';
@@ -17,22 +16,12 @@ type BadgeProps = {
   className?: string;
 };
 
-type BadgeIconProps = Omit<IconProps, 'purpose' | 'name'> &
-  EitherExclusive<
-    {
-      /**
-       * Name of icon to render. Please use `icon` instead, which has the same behavior.
-       * @deprecated
-       */
-      name: IconName;
-    },
-    {
-      /**
-       * Name of icon to render.
-       */
-      icon: IconName;
-    }
-  >;
+type BadgeIconProps = Omit<IconProps, 'purpose' | 'name'> & {
+  /**
+   * Icon name from the defined set of EDS icons
+   */
+  icon: IconName;
+};
 
 type BadgeTextProps = {
   /**
@@ -45,17 +34,15 @@ type BadgeTextProps = {
   className?: string;
 };
 
-const BadgeIcon = ({ className, name, icon, ...other }: BadgeIconProps) => {
+const BadgeIcon = ({ className, icon, ...other }: BadgeIconProps) => {
   const componentClassName = clsx(styles['badge'], className);
   let iconName: IconName;
 
   if (icon) {
     iconName = icon;
-  } else if (name) {
-    iconName = name;
   } else {
     // both name and icon are undefined. throw an error
-    throw new Error('Name or Icon must be passed to the Badge sub-component');
+    throw new ReferenceError('Icon must be passed to the Badge sub-component');
   }
 
   return (
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index c702620b9..2d27e532c 100755
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -33,58 +33,9 @@
   box-shadow: var(--eds-box-shadow-xl);
 }
 
-/**
- * Card with horizontal contents.
- */
-.card--horizontal {
-  /* Change the orientation to display header, body, and footer in a row. */
-  flex-direction: row;
-}
-
-/**
- * Card header.
- */
-.card__header {
-  /* Add spacing in between the header and body. */
-  margin-bottom: var(--eds-size-2);
-
-  /**
-   * Card header within horizontal card
-   */
-  .card--horizontal & {
-    /**
-     * Remove default spacing for vertical card. Add margin right for spacing between header and body
-     */
-    margin-bottom: 0;
-    margin-right: var(--eds-size-2);
-  }
-}
-
 /**
  * Card body.
  */
 .card__body {
   flex: 1;
 }
-
-/**
- * Card footer
- */
-.card__footer {
-  /**
-   * Using margin-top since card__footer is optional and may not always exist. Putting
-   * margin-bottom on card__body would result in a gap if card__footer does not exist.
-   */
-  margin-top: var(--eds-size-2);
-
-  /**
-   * Card footer within horizontal card
-   */
-  .card--horizontal & {
-    /**
-     * Using margin left to space away from card body. Zero out margin top.
-     */
-    margin-top: 0;
-    margin-left: var(--eds-size-2);
-  }
-}
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
index 6eed61150..b0785bd3f 100644
--- a/src/components/Card/Card.stories.tsx
+++ b/src/components/Card/Card.stories.tsx
@@ -49,11 +49,17 @@ type Args = React.ComponentProps<typeof Card> & {
   isLoading: boolean;
 };
 
+/**
+ * Cards come with structural containers for semantic grouping.
+ */
 export const Default: StoryObj<Args> = {};
 
+/**
+ * You can use utility classes to alter the layout and orientation of those structural containers. Here, we change to a horizontal orientation.
+ */
 export const Horizontal: StoryObj<Args> = {
   args: {
-    orientation: 'horizontal',
+    className: 'flex-row',
   },
 };
 
@@ -125,29 +131,21 @@ export const LoadingProfileCard: StoryObj<Args> = {
             {!isLoading && (
               <>
                 <Avatar size="lg" user={{ fullName: 'Josephine Smith' }} />
-                <Text
-                  className="mb-2 mt-2"
-                  variant="neutral-strong"
-                  weight="bold"
-                >
+                <Text className="mb-2 mt-2 text-neutral-strong">
                   Example Job Title
                 </Text>
-                <Text
-                  className="mb-2 mt-2"
-                  variant="neutral-strong"
-                  weight="bold"
-                >
+                <Text className="mb-2 mt-2 text-neutral-strong">
                   Example Company Name
                 </Text>
                 <Hr />
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Mollitia dolorem doloribus laudantium magnam. Laboriosam!
                 </Text>
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 </Text>
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet.
                 </Text>
               </>
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 1ba6650d0..0058df565 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -27,16 +27,6 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
    * **Default is `false`**.
    */
   isDragging?: boolean;
-  /**
-   * Orientation of a card
-   * - **vertical** renders the header, body, and footer in a columnar fashion (default)
-   * - **horizontal** renders the header, body, and footer in a horizontal fashion
-   * where the body is required but the header and footer are not
-   *
-   * **Default is `"vertical"`**.
-   * @deprecated
-   */
-  orientation?: 'vertical' | 'horizontal';
 }
 
 export interface CardSubComponentProps {
@@ -61,12 +51,10 @@ export const Card = ({
   children,
   elevation = 'none',
   isDragging = false,
-  orientation = 'vertical',
   ...other
 }: CardProps) => {
   const componentClassName = clsx(
     styles['card'],
-    orientation === 'horizontal' && styles['card--horizontal'],
     elevation === 'raised' && styles['card--raised'],
     elevation === 'dragging' && styles['card--dragging'],
     isDragging && styles['card--dragging'],
diff --git a/src/components/Card/__snapshots__/Card.test.ts.snap b/src/components/Card/__snapshots__/Card.test.ts.snap
index b7ad0d88f..9375b2861 100644
--- a/src/components/Card/__snapshots__/Card.test.ts.snap
+++ b/src/components/Card/__snapshots__/Card.test.ts.snap
@@ -81,7 +81,7 @@ exports[`<Card /> Horizontal story renders snapshot 1`] = `
   class="p-8"
 >
   <article
-    class="card card--horizontal"
+    class="card flex-row"
   >
     <header
       class="card__header"
diff --git a/src/components/DataBar/DataBar.module.css b/src/components/DataBar/DataBar.module.css
deleted file mode 100644
index 16c8f5247..000000000
--- a/src/components/DataBar/DataBar.module.css
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # DATA BAR
-\*------------------------------------*/
-
-/**
- * The data bar represents the relative completion of a task.
- */
-.data-bar {
-  /* 0.875rem, a summation of the data bar height of 0.75rem and the border width 1px */
-  --data-bar-height: calc(
-    var(--eds-size-1-and-half) + 2 * var(--eds-theme-border-width)
-  );
-  height: var(--data-bar-height);
-
-  background-color: var(--eds-theme-color-data-bar-background);
-
-  border: var(--eds-theme-color-data-bar-border) solid
-    var(--eds-theme-border-width);
-  /* Rounds the sides rather than making the bar elliptical. */
-  border-radius: var(--eds-border-radius-full);
-
-  /* Prevents segments from overflowing outside borders */
-  overflow: hidden;
-}
-
-/**
- * The label title above the data bar that provides an accessible name.
- */
-.data-bar__label {
-  font: var(--eds-theme-typography-label-md);
-  color: var(--eds-theme-color-text-neutral-strong);
-
-  margin-bottom: 0;
-}
-
-/**
- * Wraps the label and the caption description.
- */
-.data-bar__label-wrapper {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-
-  margin-bottom: var(--eds-size-1);
-}
-
-/**
- * The amount of space the segments can consume. Is overlayed on top of the containing bar.
- */
-.data-bar__segment-space {
-  height: 100%;
-
-  display: flex;
-  gap: var(--eds-size-half);
-  /* Makes the last segment overlap the containing bar right border. */
-  width: calc(100% + 2 * var(--eds-theme-border-width));
-}
-/**
- * Shortens the amount of space the segments consume by an amount equal to the radius of the semicircle end of the containing bar (half the height of the bar).
- * Results in an empty space that visually indicates incompleteness of the relevant task.
- * Required due to disproportionately larger spacing given to small segments to make them visible.
- */
-/* prettier-ignore */
-.data-bar__segment-space--incomplete {
-  width: calc(100% + 2 * var(--eds-theme-border-width) - 0.5 * var(--data-bar-height));
-}
-
-/*------------------------------------*\
-    # DATA BAR SEGMENT
-\*------------------------------------*/
-
-/**
- * A block that represents its progress in a data bar.
- */
-.data-bar-segment {
-  height: 100%;
-}
-
-/**
- * The pointer cursor indicates that the element is hoverable.
- * The non hoverable case is the default cursor, used for the empty state indicator.
- */
-.data-bar-segment--hoverable:hover {
-  cursor: pointer;
-}
-
-/**
- * The color variants of the data bar segments.
- */
-.data-bar-segment--brand {
-  background-color: var(--eds-theme-color-background-brand-primary-strong);
-}
-/* prettier-ignore */
-.data-bar-segment--brand.data-bar-segment--hoverable:hover {
-  background-color: var(--eds-theme-color-background-brand-primary-strong-hover);
-}
-
-.data-bar-segment--success {
-  background-color: var(--eds-theme-color-icon-utility-success);
-}
-.data-bar-segment--success.data-bar-segment--hoverable:hover {
-  background-color: var(--eds-theme-color-icon-utility-success-hover);
-}
diff --git a/src/components/DataBar/DataBar.stories.tsx b/src/components/DataBar/DataBar.stories.tsx
deleted file mode 100644
index f7d1c6422..000000000
--- a/src/components/DataBar/DataBar.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { DataBar } from './DataBar';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-
-export default {
-  title: 'Components/DataBar',
-  component: DataBar,
-  args: {
-    label: 'Data bar',
-    max: 100,
-    segments: [
-      { value: 25, text: 'Segment 1' },
-      { value: 10, text: 'Segment 2' },
-      { value: 15, text: 'Segment 3' },
-    ],
-  },
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-    backgrounds: {
-      default: 'eds-color-neutral-white',
-    },
-  },
-  decorators: [(Story) => <div className="m-4">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof DataBar>;
-
-export const TotalsLessThanMax: StoryObj<Args> = {};
-
-export const TotalsMax: StoryObj<Args> = {
-  args: { max: 50 },
-};
-
-export const TotalsMoreThanMax: StoryObj<Args> = {
-  args: { max: 25 },
-};
-
-export const TotalsRightUnderMax: StoryObj<Args> = {
-  args: { max: 51 },
-};
-
-export const LargeValue: StoryObj<Args> = {
-  args: {
-    max: 100,
-    segments: [{ value: 96, text: 'Segment 1' }],
-  },
-};
-
-export const SmallValue: StoryObj<Args> = {
-  args: {
-    max: 100,
-    segments: [{ value: 1, text: 'Segment 1' }],
-  },
-};
-
-export const NoSegments: StoryObj<Args> = {
-  args: {
-    segments: [],
-  },
-};
-
-export const InteractiveExample: StoryObj<Args> = {
-  render: () => {
-    /* eslint-disable react-hooks/rules-of-hooks */
-    const [max, setMax] = React.useState(100);
-    const [segments, setSegments] = React.useState([
-      { value: 90, text: 'Segment value 90' },
-      { value: 1, text: 'Segment value 1' },
-      { value: 1, text: 'Segment value 1' },
-    ]);
-
-    const [segmentValue, setSegmentValue] = React.useState(1);
-    /* eslint-enable react-hooks/rules-of-hooks */
-
-    const onPush = () => {
-      segments.push({
-        value: segmentValue || 1,
-        text: `Segment value ${segmentValue}`,
-      });
-      setSegments([...segments]);
-    };
-    const onPop = () => {
-      if (segments.length > 0) {
-        segments.pop();
-        setSegments([...segments]);
-      }
-    };
-    return (
-      <div>
-        <DataBar label="Interactive data bar" max={max} segments={segments} />
-        <br />
-        <label htmlFor="segment-value-input">Value add: </label>
-        <input
-          id="segment-value-input"
-          onChange={(e) => {
-            setSegmentValue(Number(e?.target?.value));
-          }}
-          value={segmentValue}
-        ></input>
-        <br />
-        <ButtonGroup>
-          <Button onClick={onPush} variant="primary">
-            Push segment
-          </Button>
-          <Button onClick={onPop} variant="secondary">
-            Pop segment
-          </Button>
-        </ButtonGroup>
-        <br />
-        <label htmlFor="max-value-input">Max: </label>
-        <input
-          id="max-value-input"
-          onChange={(e) => {
-            setMax(Number(e?.target?.value) || 100);
-          }}
-          value={max}
-        ></input>
-      </div>
-    );
-  },
-  parameters: {
-    /**
-     * For interactive purposes only, low value in snapping or checking for visual regression since they should be covered in the other stories.
-     */
-    chromatic: { disableSnapshot: true },
-    snapshot: { skip: true },
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-  },
-};
diff --git a/src/components/DataBar/DataBar.test.tsx b/src/components/DataBar/DataBar.test.tsx
deleted file mode 100644
index 076f4e275..000000000
--- a/src/components/DataBar/DataBar.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { DataBar } from './DataBar';
-import * as stories from './DataBar.stories';
-
-describe('<DataBar />', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('should focus with the tab key and the left and right arrow keys', async () => {
-    const user = userEvent.setup();
-    render(
-      <DataBar
-        data-testid="databar-test"
-        label="databar"
-        max={100}
-        segments={[
-          { value: 25, text: 'Segment 1' },
-          { value: 10, text: 'Segment 2' },
-          { value: 15, text: 'Segment 3' },
-        ]}
-      />,
-    );
-    screen.getByTestId('databar-test').focus();
-
-    await user.tab();
-    expect(screen.getByLabelText('Segment 1')).toHaveFocus();
-
-    await user.keyboard('{arrowright}');
-    expect(screen.getByLabelText('Segment 2')).toHaveFocus();
-
-    await user.keyboard('{arrowleft}');
-    expect(screen.getByLabelText('Segment 1')).toHaveFocus();
-  });
-});
diff --git a/src/components/DataBar/DataBar.tsx b/src/components/DataBar/DataBar.tsx
deleted file mode 100644
index 5fbaa6dcc..000000000
--- a/src/components/DataBar/DataBar.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { useId } from '../../util/useId';
-import Text from '../Text';
-import Tooltip from '../Tooltip';
-
-import styles from './DataBar.module.css';
-
-type Segment = {
-  /**
-   * Tooltip text to be displayed when the segment is hovered.
-   */
-  text: string;
-  /**
-   * The value of the individual segment that accumulates towards the task goal.
-   */
-  value: number;
-};
-
-type Variant = 'brand' | 'success';
-
-export type DataBarSegmentProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Tooltip text to be displayed when the segment is hovered.
-   */
-  text?: string;
-  /**
-   * Width that the segment should consume.
-   */
-  width: string;
-  /**
-   * Color variant of the individual segment.
-   */
-  variant?: Variant;
-} & React.HTMLAttributes<HTMLElement>;
-
-export type DataBarProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Label associated with naming the data bar.
-   */
-  label: string;
-  /**
-   * Max value to be represented by the data bar.
-   * Defaults to 100 to act as a percentage bar.
-   */
-  max: number;
-  /**
-   * A list of segments to be represented by the data bar.
-   */
-  segments: Segment[];
-  /**
-   * Color variant of the data bar. Decorates the segments.
-   */
-  variant?: Variant;
-} & React.HTMLAttributes<HTMLElement>;
-
-/**
- * `import {DataBar} from "@chanzuckerberg/eds";`
- *
- * A data bar component that represents the relative completion of a task represented by one or more segments.
- *
- * Example usage:
- *
- * ```tsx
- * <DataBar
- *  id="data-bar"
- *  max={100}
- *  segments={[
- *    { value: 25, text: 'Segment 1' },
- *    { value: 10, text: 'Segment 2' },
- *    { value: 15, text: 'Segment 3' },
- *  ]} />
- * ```
- * @deprecated
- */
-export const DataBar = ({
-  className,
-  label,
-  max = 100,
-  segments,
-  variant = 'brand',
-  ...other
-}: DataBarProps) => {
-  /**
-   * Calculates the total of the segment values.
-   */
-  const totalSegmentValue = segments.reduce(
-    (previousValue, segment) => previousValue + segment.value,
-    0,
-  );
-
-  const isFull = totalSegmentValue >= max;
-
-  const segmentComponents: React.ReactElement<typeof DataBarSegment>[] = [];
-
-  /**
-   * Manages focus of the progress bar elements and implements left and right arrow key interaction.
-   */
-  /* Used to set tabIndex of the segment components. */
-  const [focusableElementIndex, setFocusableElementIndex] = React.useState(0);
-  /* Collects a list of element refs to set focus. */
-  const segmentsRef = React.useRef<Array<HTMLDivElement | null>>([]);
-  const handleOnKeyDown = (
-    e: React.KeyboardEvent<HTMLElement>,
-    index: number,
-  ) => {
-    if (e.key === 'ArrowLeft' && index > 0) {
-      /* Manage tabIndex to allow focus before setting focus. */
-      setFocusableElementIndex(index - 1);
-      /* Set focus on the next or previous element respective to the arrow key interaction. */
-      segmentsRef.current[index - 1]?.focus();
-    }
-    if (e.key === 'ArrowRight' && index < segmentComponents.length - 1) {
-      /*  Manage tabIndex to allow focus before setting focus. */
-      setFocusableElementIndex(index + 1);
-      /* Set focus on the next or previous element respective to the arrow key interaction. */
-      segmentsRef.current[index + 1]?.focus();
-    }
-  };
-
-  /**
-   * Adds a segment component to the segmentComponents array.
-   */
-  for (
-    /* Keeps a running accumulator to prevent adding any more segments if the accumulated value has already met max. */
-    let index = 0, accumulator = 0;
-    index < segments.length && accumulator < max;
-    index++
-  ) {
-    const segment = segments[index];
-    accumulator += segment.value;
-    /* Ensures a minimumum width of 5% for the segment. */
-    const percentage = Math.max(5, (segment.value / max) * 100);
-    segmentComponents.push(
-      <DataBar.Segment
-        aria-label={segment.text}
-        key={`segment-${index}`}
-        onKeyDown={(e) => handleOnKeyDown(e, index)}
-        ref={(el) => (segmentsRef.current[index] = el)}
-        role="gridcell"
-        tabIndex={focusableElementIndex === index ? 0 : -1}
-        text={segment.text}
-        variant={variant}
-        width={`${percentage}%`}
-      />,
-    );
-  }
-
-  /**
-   * If bar is empty, adds a miniscule amount of segment as a visual indicator that the component is a data/progress bar and not a pill.
-   */
-  if (!segmentComponents.length) {
-    segmentComponents.push(
-      <DataBar.Segment
-        key="segment-empty"
-        role="gridcell"
-        variant={variant}
-        width={'var(--eds-size-1)'}
-      />,
-    );
-  }
-
-  /**
-   * Leaves space if values do not total to max to visibly show space remaining.
-   */
-  const segmentSpaceClassName = clsx(
-    styles['data-bar__segment-space'],
-    !isFull && styles[`data-bar__segment-space--incomplete`],
-  );
-
-  const id = useId();
-  const captionId = useId();
-  const caption = totalSegmentValue + '/' + max;
-  return (
-    <div className={className}>
-      <div className={styles['data-bar__label-wrapper']}>
-        <label className={styles['data-bar__label']} htmlFor={id}>
-          {label}
-        </label>
-        <Text as="span" id={captionId} size="caption">
-          {caption}
-        </Text>
-      </div>
-      {/* the grey data bar */}
-      <div
-        aria-describedby={captionId}
-        className={styles['data-bar']}
-        id={id}
-        role="grid"
-        {...other}
-      >
-        {/* the amount of space the segments take up */}
-        <div className={segmentSpaceClassName} role="row">
-          {segmentComponents}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * A segment sub component for the <DataBar>.
- *
- * Example usage:
- *
- * ```tsx
- * <DataBar.Segment text="Segment 1" width="40%" />
- * ```
- */
-const DataBarSegment = React.forwardRef(
-  (
-    {
-      className,
-      text,
-      width,
-      variant = 'brand',
-      ...other
-    }: DataBarSegmentProps,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) => {
-    const componentClassName = clsx(
-      styles['data-bar-segment'],
-      styles[`data-bar-segment--${variant}`],
-      text && styles['data-bar-segment--hoverable'],
-      className,
-    );
-    const segmentComponent = (
-      <div
-        className={componentClassName}
-        ref={ref}
-        style={{ width: `${width}` }}
-        {...other}
-      />
-    );
-    return text ? (
-      <Tooltip align="bottom" text={text}>
-        {segmentComponent}
-      </Tooltip>
-    ) : (
-      segmentComponent
-    );
-  },
-);
-
-DataBarSegment.displayName = 'DataBarSegment'; // Satisfy eslint
-
-DataBar.Segment = DataBarSegment;
diff --git a/src/components/DataBar/__snapshots__/DataBar.test.tsx.snap b/src/components/DataBar/__snapshots__/DataBar.test.tsx.snap
deleted file mode 100644
index c329e9b5a..000000000
--- a/src/components/DataBar/__snapshots__/DataBar.test.tsx.snap
+++ /dev/null
@@ -1,348 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DataBar /> LargeValue story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":r8:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":r9:"
-      >
-        96/100
-      </span>
-    </div>
-    <div
-      aria-describedby=":r9:"
-      class="data-bar"
-      id=":r8:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space data-bar__segment-space--incomplete"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 96%;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> NoSegments story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":rc:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":rd:"
-      >
-        0/100
-      </span>
-    </div>
-    <div
-      aria-describedby=":rd:"
-      class="data-bar"
-      id=":rc:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space data-bar__segment-space--incomplete"
-        role="row"
-      >
-        <div
-          class="data-bar-segment data-bar-segment--brand"
-          role="gridcell"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> SmallValue story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":ra:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":rb:"
-      >
-        1/100
-      </span>
-    </div>
-    <div
-      aria-describedby=":rb:"
-      class="data-bar"
-      id=":ra:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space data-bar__segment-space--incomplete"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 5%;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> TotalsLessThanMax story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":r0:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":r1:"
-      >
-        50/100
-      </span>
-    </div>
-    <div
-      aria-describedby=":r1:"
-      class="data-bar"
-      id=":r0:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space data-bar__segment-space--incomplete"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 25%;"
-          tabindex="0"
-        />
-        <div
-          aria-label="Segment 2"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 10%;"
-          tabindex="-1"
-        />
-        <div
-          aria-label="Segment 3"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 15%;"
-          tabindex="-1"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> TotalsMax story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":r2:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":r3:"
-      >
-        50/50
-      </span>
-    </div>
-    <div
-      aria-describedby=":r3:"
-      class="data-bar"
-      id=":r2:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 50%;"
-          tabindex="0"
-        />
-        <div
-          aria-label="Segment 2"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 20%;"
-          tabindex="-1"
-        />
-        <div
-          aria-label="Segment 3"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 30%;"
-          tabindex="-1"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> TotalsMoreThanMax story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":r4:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":r5:"
-      >
-        50/25
-      </span>
-    </div>
-    <div
-      aria-describedby=":r5:"
-      class="data-bar"
-      id=":r4:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 100%;"
-          tabindex="0"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataBar /> TotalsRightUnderMax story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <div>
-    <div
-      class="data-bar__label-wrapper"
-    >
-      <label
-        class="data-bar__label"
-        for=":r6:"
-      >
-        Data bar
-      </label>
-      <span
-        class="text text--caption"
-        id=":r7:"
-      >
-        50/51
-      </span>
-    </div>
-    <div
-      aria-describedby=":r7:"
-      class="data-bar"
-      id=":r6:"
-      role="grid"
-    >
-      <div
-        class="data-bar__segment-space data-bar__segment-space--incomplete"
-        role="row"
-      >
-        <div
-          aria-label="Segment 1"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 49.01960784313725%;"
-          tabindex="0"
-        />
-        <div
-          aria-label="Segment 2"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 19.607843137254903%;"
-          tabindex="-1"
-        />
-        <div
-          aria-label="Segment 3"
-          class="data-bar-segment data-bar-segment--brand data-bar-segment--hoverable"
-          role="gridcell"
-          style="width: 29.411764705882355%;"
-          tabindex="-1"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/DataBar/index.ts b/src/components/DataBar/index.ts
deleted file mode 100644
index 56ea7034b..000000000
--- a/src/components/DataBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DataBar as default } from './DataBar';
diff --git a/src/components/DragDrop/DragDrop.module.css b/src/components/DragDrop/DragDrop.module.css
deleted file mode 100644
index 8f61ab55a..000000000
--- a/src/components/DragDrop/DragDrop.module.css
+++ /dev/null
@@ -1,201 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # DRAG DROP
-\*------------------------------------*/
-
-.drag-drop {
-  position: relative;
-  /**
-   * Table object body with content overflowed left
-   */
-  &.eds-is-overflow-left {
-    /**
-     * Right overflow gradient for the overflow list
-     */
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      background: linear-gradient(
-        to left,
-        rgba(255, 255, 255, 0.001) 50%,
-        var(--eds-theme-color-background-neutral-default)
-      );
-      height: 100%;
-      top: 0;
-      left: 0;
-      width: var(--eds-size-4);
-      z-index: 100;
-    }
-  }
-
-  /**
-   * Table object body with content overflowed right
-   */
-  &.eds-is-overflow-right {
-    /**
-     * Right overflow gradient for the overflow list
-     */
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0.001) 50%,
-        var(--eds-theme-color-background-neutral-default)
-      );
-      height: 100%;
-      top: 0;
-      right: 0;
-      width: var(--eds-size-4);
-      z-index: 100;
-    }
-  }
-}
-
-/**
- * Outer container for DragDrop component; provides <DragDropContext />, which wraps droppable components (i.e. containers) and provides them with context.
- * The `:where` pseudo class function allows easy overriding via className.
- */
-:where(.drag-drop__inner) {
-  /* Uses a flex row to align containers. */
-  display: flex;
-  overflow: auto;
-}
-
-/**
- * Drag drop container.
- */
-.drag-drop__container {
-  /* Set to display flex so empty state can span entire column. */
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  margin-right: var(--eds-size-2);
-  width: 20rem;
-  /* Padding added to the top to account for outline of button. */
-  padding-top: var(--eds-size-half);
-
-  &:last-of-type {
-    /* Don't add margin to the side of the end-cap sub-component. */
-    margin-right: 0;
-  }
-}
-
-/**
- * An area that can be dropped into.
- */
-.drag-drop__container-inner {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background-color: var(--eds-theme-color-background-neutral-subtle);
-  list-style: none;
-  margin: 0;
-  padding: var(--eds-size-1);
-  border-radius: var(--eds-border-radius-md);
-
-  /*  DragDropContainer styles are included here rather than in the /DragDropContainer directory as a workaround to CSS Modules' locally scoped class names. */
-  .drag-drop__container--empty & {
-    justify-content: center;
-    align-items: center;
-    padding: var(--eds-size-4);
-    color: var(--eds-theme-color-text-neutral-subtle);
-  }
-
-  /**
-   * When there are more than two containers, apply a border.
-   */
-  .drag-drop--multiple & {
-    border: var(--eds-theme-border-width) solid
-      var(--eds-theme-color-border-neutral-default);
-  }
-}
-
-/**
- * Container that holds droppable content. 
- *
- * DragDropItem styles are included here rather than in the /DragDropItem directory as a workaround to CSS Modules' locally scoped class names.
- */
-
-.drag-drop__item {
-  position: relative;
-  /*  For best experience, use a margin on a single side of an item to add a gap between items. Using a margin on both top and bottom, or using flex or grid gap spacing in the drag-drop-container, cause jumpy behavior. */
-  margin-bottom: var(--eds-size-1);
-  background-color: var(--eds-theme-color-background-neutral-subtle);
-  border-radius: var(--eds-border-radius-lg);
-  box-shadow: var(--eds-box-shadow-sm);
-  border: var(--eds-theme-border-width) solid transparent;
-  transition: border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-border-neutral-subtle);
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  /**
-   * The unstyled variant removes all styling from items.
-   */
-  .drag-drop--unstyled & {
-    background-color: unset;
-    box-shadow: unset;
-  }
-}
-
-/** 
- * Optional title div at the top of an item.
- */
-.drag-drop__item-title {
-  font: var(--eds-typography-preset-007-bold);
-  margin-bottom: var(--eds-size-2);
-}
-
-/**
- * Used with handles variant to wrap children.
- */
-.drag-drop__item-content {
-  flex-grow: 1;
-}
-
-/**
- * Wrapper for drag handle.
- */
-.drag-drop__item-handle {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: calc(100% - 2px);
-  padding: var(--eds-size-1);
-  z-index: 400;
-  border-radius: var(--eds-border-radius-lg);
-  background: var(--eds-theme-color-background-neutral-default);
-  transition: opacity var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  .drag-drop__item--hover & {
-    opacity: 0;
-  }
-
-  .drag-drop__item--hover:hover &,
-  .drag-drop__item--hover:focus &,
-  &:focus {
-    opacity: 1;
-  }
-}
diff --git a/src/components/DragDrop/DragDrop.stories.module.css b/src/components/DragDrop/DragDrop.stories.module.css
deleted file mode 100644
index bc766717e..000000000
--- a/src/components/DragDrop/DragDrop.stories.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.draggable-card {
-  padding-left: var(--eds-size-6);
-}
-
-.grid-square {
-  width: fit-content;
-  display: grid;
-  grid-template-areas: 'a a' 'a a';
-  gap: var(--eds-size-6);
-}
diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
deleted file mode 100644
index 5632b133a..000000000
--- a/src/components/DragDrop/DragDrop.stories.tsx
+++ /dev/null
@@ -1,358 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-import React, { useState } from 'react';
-import { DragDrop, type NewState } from './DragDrop';
-import { Button, Card, Heading, Icon, Text } from '../..';
-import styles from './DragDrop.stories.module.css';
-
-export default {
-  title: 'Components/DragDrop',
-  component: DragDrop,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  decorators: [(Story) => <div className="m-4">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = ComponentProps<typeof DragDrop>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    items: {
-      'item-1': {
-        title: 'Project #1',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 1</Card.Body>
-          </Card>
-        ),
-      },
-      'item-2': {
-        title: 'Project #2',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 2</Card.Body>
-          </Card>
-        ),
-      },
-      'item-3': {
-        title: 'Project #3',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 3</Card.Body>
-          </Card>
-        ),
-      },
-      'item-4': {
-        title: 'Project #4',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 4</Card.Body>
-          </Card>
-        ),
-      },
-      'item-5': {
-        title: 'Project #5',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 5</Card.Body>
-          </Card>
-        ),
-      },
-    },
-    containers: {
-      'container-1': {
-        itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
-        header: (
-          <DragDrop.ContainerHeader>
-            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
-              <Heading as="h5" size="h5">
-                Available items
-              </Heading>
-            </div>
-          </DragDrop.ContainerHeader>
-        ),
-      },
-      'container-2': {
-        itemIds: [],
-        emptyContent: (
-          <>
-            <Text className="mb-8 max-w-xl">Drag available items here</Text>
-            <div className="fpo flex h-20 flex-wrap content-center justify-center p-5">
-              Image Placeholder
-            </div>
-          </>
-        ),
-        header: (
-          <DragDrop.ContainerHeader>
-            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
-              <Heading as="h5" size="h5">
-                Selected Items
-              </Heading>
-            </div>
-          </DragDrop.ContainerHeader>
-        ),
-      },
-    },
-    unstyledItems: true,
-  },
-};
-
-export const HoveredHandle: StoryObj<Args> = {
-  args: {
-    items: {
-      'item-1': {
-        behavior: 'hover',
-        title: 'Project #1',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 1</Card.Body>
-          </Card>
-        ),
-      },
-      'item-2': {
-        behavior: 'hover',
-        title: 'Project #2',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 2</Card.Body>
-          </Card>
-        ),
-      },
-      'item-3': {
-        behavior: 'hover',
-        title: 'Project #3',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 3</Card.Body>
-          </Card>
-        ),
-      },
-      'item-4': {
-        behavior: 'hover',
-        title: 'Project #4',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 4</Card.Body>
-          </Card>
-        ),
-      },
-      'item-5': {
-        behavior: 'hover',
-        title: 'Project #5',
-        children: (
-          <Card className={styles['draggable-card']} elevation="raised">
-            <Card.Body>Card 5</Card.Body>
-          </Card>
-        ),
-      },
-    },
-    containers: {
-      'container-1': {
-        itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
-        header: (
-          <DragDrop.ContainerHeader>
-            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
-              <Heading as="h5" size="h5">
-                Available Items
-              </Heading>
-            </div>
-          </DragDrop.ContainerHeader>
-        ),
-      },
-      'container-2': {
-        itemIds: [],
-        emptyContent: (
-          <>
-            <Text className="mb-8 max-w-xl">Drag available items here</Text>
-            <div className="fpo flex h-20 flex-wrap content-center justify-center p-5">
-              Image Placeholder
-            </div>
-          </>
-        ),
-        header: (
-          <DragDrop.ContainerHeader>
-            <div className="flex items-center gap-4 bg-neutral-subtle px-4 py-2">
-              <Heading as="h5" size="h5">
-                Selected Projects
-              </Heading>
-            </div>
-          </DragDrop.ContainerHeader>
-        ),
-      },
-    },
-    unstyledItems: true,
-  },
-};
-
-const InteractiveDragDrop = () => {
-  const emptyContent = () => (
-    <Text as="p" className="!mb-8">
-      Empty Content
-    </Text>
-  );
-
-  const [indexState, setIndexState] = useState<number | undefined>(2);
-  const [containers, setContainers] = useState<NewState['containers']>({
-    'container-1': {
-      className: 'bg-neutral-subtle',
-      columnClassName: 'bg-neutral-subtle',
-      emptyContent: emptyContent(),
-      itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Available Items
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add item
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-    'container-2': {
-      className: 'bg-neutral-subtle',
-      columnClassName: 'bg-neutral-subtle',
-      emptyContent: emptyContent(),
-      itemIds: [],
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Selected Items
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add Item
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-    'container-3': {
-      className: 'bg-neutral-subtle',
-      columnClassName: 'bg-neutral-subtle',
-      emptyContent: emptyContent(),
-      itemIds: [],
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Selected Items
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add item
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-    'container-4': {
-      className: 'bg-neutral-subtle',
-      columnClassName: 'bg-neutral-subtle',
-      emptyContent: emptyContent(),
-      itemIds: [],
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4 bg-neutral-subtle p-0">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Selected Items
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add item
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-  });
-  const [items, setItems] = useState<NewState['items']>({
-    'item-1': {
-      title: 'Project #1',
-      children: (
-        <Card className={styles['draggable-card']} elevation="raised">
-          <Card.Body>Card 1</Card.Body>
-        </Card>
-      ),
-    },
-    'item-2': {
-      title: 'Project #2',
-      children: (
-        <Card className={styles['draggable-card']} elevation="raised">
-          <Card.Body>Card 2: {indexState}</Card.Body>
-        </Card>
-      ),
-    },
-    'item-3': {
-      title: 'Project #3',
-      children: (
-        <Card className={styles['draggable-card']} elevation="raised">
-          <Card.Body>Card 3</Card.Body>
-        </Card>
-      ),
-    },
-    'item-4': {
-      title: 'Project #4',
-      children: (
-        <Card className={styles['draggable-card']} elevation="raised">
-          <Card.Body>Card 4</Card.Body>
-        </Card>
-      ),
-    },
-    'item-5': {
-      title: 'Project #5',
-      children: (
-        <Card className={styles['draggable-card']} elevation="raised">
-          <Card.Body>Card 5</Card.Body>
-        </Card>
-      ),
-    },
-  });
-  const returnUpdatedItems = (updatedItems: NewState) => {
-    setContainers(updatedItems.containers);
-    setItems(updatedItems.items);
-    updatedItems.containers['container-2'].itemIds.map(
-      (item: string, index: number) => {
-        if (item === 'item-2') {
-          updatedItems.items['item-2'].behavior = 'hover';
-          setIndexState(index + 1);
-        }
-      },
-    );
-  };
-  return (
-    <DragDrop
-      containers={containers}
-      containersClassName={styles['grid-square']}
-      getNewState={(updatedItems) => returnUpdatedItems(updatedItems)}
-      items={items}
-      multipleContainers={false}
-      unstyledItems
-    />
-  );
-};
-
-export const Interactive: StoryObj<Args> = {
-  render: () => <InteractiveDragDrop />,
-};
diff --git a/src/components/DragDrop/DragDrop.test.ts b/src/components/DragDrop/DragDrop.test.ts
deleted file mode 100644
index c5dd5d318..000000000
--- a/src/components/DragDrop/DragDrop.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import * as stories from './DragDrop.stories';
-
-describe('<DragDrop />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/DragDrop/DragDrop.tsx b/src/components/DragDrop/DragDrop.tsx
deleted file mode 100644
index 66253e624..000000000
--- a/src/components/DragDrop/DragDrop.tsx
+++ /dev/null
@@ -1,565 +0,0 @@
-import clsx from 'clsx';
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-  type UIEvent,
-} from 'react';
-import {
-  DragDropContext,
-  Draggable,
-  Droppable,
-  type DraggableProvided,
-  type DropResult,
-  type DroppableProvided,
-} from 'react-beautiful-dnd';
-import { oneByType } from 'react-children-by-type';
-import Icon, { type IconName } from '../Icon';
-import styles from './DragDrop.module.css';
-
-type ItemContents = {
-  id?: string;
-  title?: string;
-  behavior?: 'hover';
-  children?: React.ReactNode;
-  handle?: React.ReactNode;
-};
-
-type Items = {
-  [key: string]: ItemContents;
-};
-
-type ContainerContents = {
-  className?: string;
-  columnClassName?: string;
-  emptyContent?: React.ReactNode;
-  header?: React.ReactNode;
-  id?: string;
-  itemIds: string[];
-};
-
-type Containers = {
-  [key: string]: ContainerContents;
-};
-
-type DragDropProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Draggable items that can be held by a container.
-   */
-  items: Items;
-  /**
-   * Containers can hold items and can accept dropped items from another container in the same context. An array of itemIds may be initially passed into a container.
-   */
-  containers: Containers;
-  /**
-   * CSS class names that can be appended to div wrapping the containers.
-   */
-  containersClassName?: string;
-  /**
-   * By default, the last container in a context gets unique styling. If more than two containers will be used, setting this prop to true will remove this unique styling and give all containers a simple border.
-   */
-  multipleContainers: boolean;
-  /**
-   * Unstyled Items variant removes all styling from content within items
-   */
-  unstyledItems: boolean;
-  /**
-   * Child node(s) that can be nested inside component. `ModalHeader`, `ModalBody`, and `ModelFooter` are the only permissible children of the Modal
-   */
-  children?: ReactNode;
-  /**
-   * Prop that allows parent components to get the updated drag and drop object data from the outside
-   */
-  getNewState?: (newState: NewState) => void;
-};
-
-export type NewState = {
-  containerOrder: string[];
-  containers: Containers;
-  items: Items;
-};
-
-type DragDropItemProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Icon to use when defining a drag handle. Default is "drag-indicator"
-   */
-  icon?: Extract<
-    IconName,
-    | 'drag-indicator'
-    | 'dots-vertical'
-    | 'dots-horizontal'
-    | 'menu'
-    | 'view-headline'
-  >;
-  /**
-   * The contents of an item; includes id, title (optional) and children (optional)
-   */
-  item: ItemContents;
-  /**
-   * Item's original indexed position
-   */
-  index: number;
-};
-
-type DragDropContainerHeaderProps = {
-  /**
-   * Child node(s) to be rendered as the header.
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-};
-
-type DragDropContainerProps = {
-  /**
-   * Prop that will contain an id for each container and an array of itemIds that will be used on initial render
-   */
-  container: ContainerContents;
-  /**
-   * Empty state contents
-   */
-  emptyContent?: ReactNode;
-  /**
-   * Prop that will be an array of items
-   */
-  items: ItemContents[];
-};
-
-/**
- * Container for draggable components to be dropped within the container.
- *
- * @deprecated
- */
-const DragDropContainer = ({
-  container,
-  items,
-  emptyContent,
-}: DragDropContainerProps) => {
-  const componentClassName = clsx(
-    styles['drag-drop__container'],
-    items.length < 1 && styles['drag-drop__container--empty'],
-    container.className,
-  );
-
-  const containerInnerClassName = clsx(
-    styles['drag-drop__container-inner'],
-    container.columnClassName,
-  );
-
-  const dragDropContainerHeader = oneByType(
-    container.header,
-    DragDropContainerHeader,
-  );
-
-  const header = React.Children.map(dragDropContainerHeader, (child) => {
-    return React.cloneElement(child);
-  });
-
-  return container.id ? (
-    <div className={componentClassName}>
-      {header}
-      <Droppable droppableId={container.id} type="item">
-        {(provided: DroppableProvided) =>
-          items.length > 0 ? (
-            <ol
-              className={containerInnerClassName}
-              ref={provided.innerRef}
-              {...provided.droppableProps}
-            >
-              {items.map((item: ItemContents, index: number) => (
-                <DragDropItem index={index} item={item} key={item.id} />
-              ))}
-              {provided.placeholder}
-            </ol>
-          ) : (
-            <div
-              className={containerInnerClassName}
-              ref={provided.innerRef}
-              {...provided.droppableProps}
-            >
-              {emptyContent}
-              {provided.placeholder}
-            </div>
-          )
-        }
-      </Droppable>
-    </div>
-  ) : null;
-};
-
-/**
- * Component that contains header section for the container which consists of drag and drop components.
- *
- * @deprecated
- */
-const DragDropContainerHeader = ({
-  className,
-  children,
-  ...other
-}: DragDropContainerHeaderProps) => {
-  return (
-    <header className={className} {...other}>
-      {children}
-    </header>
-  );
-};
-
-/**
- * Item to be dragged and dropped in containers.
- *
- * @deprecated
- */
-const DragDropItem = ({
-  className,
-  icon = 'drag-indicator',
-  item,
-  index,
-}: DragDropItemProps) => {
-  const componentClassName = clsx(
-    styles['drag-drop__item'],
-    item.behavior === 'hover' && styles['drag-drop__item--hover'],
-    className,
-  );
-
-  // `id` is injected in <DragDrop />
-  return item.id ? (
-    <Draggable draggableId={item.id} index={index}>
-      {(provided: DraggableProvided, snapshot) => {
-        const childrenWithProps = React.Children.map(
-          item.children,
-          (child: ReactNode) => {
-            // Checking isValidElement is the safe way and avoids a typescript
-            // error too.
-            if (React.isValidElement(child)) {
-              // @ts-expect-error "No overload matches this call" error due to type mismatch
-              return React.cloneElement<Props>(child, {
-                isDragging: snapshot.isDragging,
-                number: index + 1,
-              });
-            }
-          },
-        );
-        return (
-          <li
-            className={componentClassName}
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-          >
-            <div
-              aria-label={`Handle for draggable item: ${item.title}`}
-              className={clsx(styles['drag-drop__item-handle'])}
-              {...provided.dragHandleProps}
-            >
-              <Icon name={icon} purpose="decorative" size="1.5rem" />
-            </div>
-            {childrenWithProps}
-          </li>
-        );
-      }}
-    </Draggable>
-  ) : null;
-};
-
-/**
- * `import {DragDrop} from "@chanzuckerberg/eds"`
- *
- * A flexible Drag and Drop component that allows items to be dragged and dropped in containers.
- *
- * @deprecated
- */
-const DragDrop = ({
-  className,
-  items,
-  containers,
-  containersClassName,
-  getNewState,
-  multipleContainers = false,
-  unstyledItems = false,
-}: DragDropProps) => {
-  /**
-   * Set states and refs
-   *
-   * Set isEnd state: set to true, right shadow gradient activates. Removed when false.
-   */
-  const [isEnd, setIsEnd] = useState(true);
-  /**
-   * Set isState state: set to true, left shadow gradient activates. Removed when false.
-   */
-  const [isStart, setIsStart] = useState(false);
-  /**
-   * Target drag drop and drag drop inner DOM elements
-   */
-  const dragDropInnerRef = useRef<HTMLDivElement>(null);
-  const dragDropRef = useRef<HTMLElement | null>(null);
-  /**
-   * Set right and left gradients on tables
-   */
-  const setShadows = () => {
-    if (!dragDropInnerRef.current) {
-      return;
-    }
-
-    /**
-     * Target the actual drag drop inside drag drop.
-     */
-    const overflowListItems = Array.from(dragDropInnerRef.current.children);
-    let childrenWidth = 0;
-
-    overflowListItems.forEach(function (item) {
-      const itemMarginLeft = parseInt(
-        getComputedStyle(item).marginLeft.slice(0, -2),
-        10,
-      );
-      childrenWidth += item.clientWidth + itemMarginLeft;
-    });
-
-    if (dragDropRef.current) {
-      /**
-       * Get the width of the drag drop offscreen when drag drop overflows.
-       */
-      const dragDropWidth = dragDropRef.current.clientWidth;
-      const totalItemsWidth = childrenWidth;
-      const dragDropOffScreen =
-        totalItemsWidth - dragDropRef.current.clientWidth;
-
-      if (totalItemsWidth <= dragDropWidth) {
-        /**
-         * If drag drop width is less than or equal to drag drop width, remove all shadows
-         */
-        setIsEnd(false);
-        setIsStart(false);
-      } else if (
-        dragDropInnerRef.current.scrollLeft > 0 &&
-        dragDropInnerRef.current.scrollLeft < dragDropOffScreen
-      ) {
-        /**
-         * If drag drop inner scroll isn't all the way to the left or to the right, turn all shadows on
-         */
-        setIsEnd(true);
-        setIsStart(true);
-      } else if (dragDropInnerRef.current.scrollLeft >= dragDropOffScreen) {
-        /**
-         * If drag drop inner scroll is >= to width of drag drop offscreen, turn off right shadow and turn left shadow on
-         */
-        setIsEnd(false);
-        setIsStart(true);
-      } else {
-        /**
-         * Else, set the right shadow to true and the left shadow to false
-         */
-        setIsEnd(true);
-        setIsStart(false);
-      }
-    }
-  };
-
-  /**
-   * drag drop inner onscroll
-   *
-   * Set shadows when user scrolls the drag drop right and left.
-   */
-  const handleOnScroll = (e: UIEvent<HTMLElement>): void => {
-    setShadows();
-  };
-
-  /**
-   * Set shadows when component is updated/loaded.
-   */
-  useEffect(() => {
-    dragDropRef.current = dragDropInnerRef.current?.parentNode as HTMLElement;
-    setShadows();
-    window.addEventListener('resize', setShadows);
-    return () => {
-      window.removeEventListener('resize', setShadows);
-    };
-  }, [items]);
-
-  /**
-   * Update sticky wrapper height on mount
-   */
-  const containerOrder: string[] = [];
-  Object.entries(items).forEach(([key, item]) => {
-    items[key] = { ...item, id: key };
-  });
-  Object.entries(containers).forEach(([key, item]) => {
-    containers[key] = { ...item, id: key };
-    containerOrder.push(key);
-  });
-  const itemData = { items, containers, containerOrder };
-
-  /**
-   * A drag has 5 life cycle events that can be monitored: onBeforeCapture, onBeforeDragStart, onDragStart, onDragUpdate, and onDragEnd. We perform our reordering functions and update itemData when onDragEnd is fired
-   */
-  const onDragEnd = (result: DropResult) => {
-    const { destination, source, draggableId } = result;
-
-    /**
-     * If the drag ends over a page element that is not a destination within this context, no further action is required
-     */
-    if (!destination) {
-      return;
-    }
-
-    /**
-     * If the drag ends over the original item's position, no further action is required
-     */
-    if (
-      destination.droppableId === source.droppableId &&
-      destination.index === source.index
-    ) {
-      return;
-    }
-
-    /**
-     * If a drag starts and ends over the same container, re-sort the contents of that container
-     */
-    const start = itemData.containers[source.droppableId];
-    const finish = itemData.containers[destination.droppableId];
-
-    if (start === finish) {
-      const newItemIds = start?.itemIds ? [...start.itemIds] : []; // create new array to avoid mutations
-      newItemIds.splice(source.index, 1);
-      newItemIds.splice(destination.index, 0, draggableId);
-
-      const newContainer = {
-        ...start,
-        itemIds: newItemIds,
-      };
-
-      /**
-       * Reducer for creating a new itemData object for this container
-       */
-      const newState = newContainer.id
-        ? {
-            ...itemData,
-            containers: {
-              ...itemData.containers,
-              [newContainer.id]: newContainer,
-            },
-          }
-        : itemData;
-
-      /**
-       * Update itemData with new container's contents
-       */
-      if (getNewState) {
-        getNewState(newState);
-      }
-      return;
-    }
-
-    /**
-     * The drag has ended over a container that is not the source container, so both containers contents need to be updated
-     */
-    const startItemIds = start?.itemIds ? [...start.itemIds] : [];
-    startItemIds.splice(source.index, 1);
-    const newStart = {
-      ...start,
-      itemIds: startItemIds,
-    };
-
-    const finishItemIds = finish?.itemIds ? [...finish.itemIds] : [];
-    finishItemIds.splice(destination.index, 0, draggableId);
-    const newFinish = {
-      ...finish,
-      itemIds: finishItemIds,
-    };
-
-    /**
-     * Reducer for updating both source and destination containers
-     */
-    const newState =
-      newStart.id && newFinish.id
-        ? {
-            ...itemData,
-            containers: {
-              ...itemData.containers,
-              [newStart.id]: newStart,
-              [newFinish.id]: newFinish,
-            },
-          }
-        : itemData;
-
-    /**
-     * Update itemData with both source and destination containers
-     */
-    if (getNewState) {
-      getNewState(newState);
-    }
-  };
-
-  /**
-   * If either multipleContainers or unstyledItems is set, apply the corresponding class
-   */
-  const componentClassName = clsx(
-    styles['drag-drop'],
-    unstyledItems && styles['drag-drop--unstyled'],
-    multipleContainers && styles['drag-drop--multiple'],
-    isStart && styles['eds-is-overflow-left'],
-    isEnd && styles['eds-is-overflow-right'],
-    className,
-  );
-
-  const innerClassName = clsx(styles['drag-drop__inner'], containersClassName);
-
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable
-        direction="horizontal"
-        droppableId="all-containers"
-        type="container"
-      >
-        {(provided: DroppableProvided) => {
-          return (
-            <section
-              className={componentClassName}
-              {...provided.droppableProps}
-              ref={provided.innerRef}
-            >
-              <div
-                className={innerClassName}
-                onScroll={handleOnScroll}
-                ref={dragDropInnerRef}
-              >
-                {itemData?.containerOrder &&
-                  itemData.containerOrder.map((containerId: string) => {
-                    const container = itemData.containers[containerId];
-                    const items = container.itemIds
-                      ? container.itemIds.map(
-                          (itemId) => itemData.items[itemId],
-                        )
-                      : [];
-
-                    return (
-                      <DragDropContainer
-                        container={container}
-                        emptyContent={container.emptyContent}
-                        items={items}
-                        key={container.id}
-                      />
-                    );
-                  })}
-                {provided.placeholder}
-              </div>
-            </section>
-          );
-        }}
-      </Droppable>
-    </DragDropContext>
-  );
-};
-
-DragDrop.ContainerHeader = DragDropContainerHeader;
-
-export { DragDrop };
diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
deleted file mode 100644
index 30842dd51..000000000
--- a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
+++ /dev/null
@@ -1,955 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DragDrop /> Default story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <section
-    class="drag-drop drag-drop--unstyled eds-is-overflow-right"
-    data-rbd-droppable-context-id="0"
-    data-rbd-droppable-id="all-containers"
-  >
-    <div
-      class="drag-drop__inner"
-    >
-      <div
-        class="drag-drop__container"
-      >
-        <header>
-          <div
-            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
-          >
-            <h5
-              class="heading heading--size-h5"
-            >
-              Available items
-            </h5>
-          </div>
-        </header>
-        <ol
-          class="drag-drop__container-inner"
-          data-rbd-droppable-context-id="0"
-          data-rbd-droppable-id="container-1"
-        >
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="item-1"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-0-hidden-text-0"
-              aria-label="Handle for draggable item: Project #1"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="0"
-              data-rbd-drag-handle-draggable-id="item-1"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="1"
-            >
-              <div
-                class="card__body"
-              >
-                Card 1
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="item-2"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-0-hidden-text-0"
-              aria-label="Handle for draggable item: Project #2"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="0"
-              data-rbd-drag-handle-draggable-id="item-2"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="2"
-            >
-              <div
-                class="card__body"
-              >
-                Card 2
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="item-3"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-0-hidden-text-0"
-              aria-label="Handle for draggable item: Project #3"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="0"
-              data-rbd-drag-handle-draggable-id="item-3"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="3"
-            >
-              <div
-                class="card__body"
-              >
-                Card 3
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="item-4"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-0-hidden-text-0"
-              aria-label="Handle for draggable item: Project #4"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="0"
-              data-rbd-drag-handle-draggable-id="item-4"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="4"
-            >
-              <div
-                class="card__body"
-              >
-                Card 4
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="item-5"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-0-hidden-text-0"
-              aria-label="Handle for draggable item: Project #5"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="0"
-              data-rbd-drag-handle-draggable-id="item-5"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="5"
-            >
-              <div
-                class="card__body"
-              >
-                Card 5
-              </div>
-            </article>
-          </li>
-        </ol>
-      </div>
-      <div
-        class="drag-drop__container drag-drop__container--empty"
-      >
-        <header>
-          <div
-            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
-          >
-            <h5
-              class="heading heading--size-h5"
-            >
-              Selected Items
-            </h5>
-          </div>
-        </header>
-        <div
-          class="drag-drop__container-inner"
-          data-rbd-droppable-context-id="0"
-          data-rbd-droppable-id="container-2"
-        >
-          <p
-            class="text text--body mb-8 max-w-xl"
-          >
-            Drag available items here
-          </p>
-          <div
-            class="fpo flex h-20 flex-wrap content-center justify-center p-5"
-          >
-            Image Placeholder
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`<DragDrop /> HoveredHandle story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <section
-    class="drag-drop drag-drop--unstyled eds-is-overflow-right"
-    data-rbd-droppable-context-id="1"
-    data-rbd-droppable-id="all-containers"
-  >
-    <div
-      class="drag-drop__inner"
-    >
-      <div
-        class="drag-drop__container"
-      >
-        <header>
-          <div
-            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
-          >
-            <h5
-              class="heading heading--size-h5"
-            >
-              Available Items
-            </h5>
-          </div>
-        </header>
-        <ol
-          class="drag-drop__container-inner"
-          data-rbd-droppable-context-id="1"
-          data-rbd-droppable-id="container-1"
-        >
-          <li
-            class="drag-drop__item drag-drop__item--hover"
-            data-rbd-draggable-context-id="1"
-            data-rbd-draggable-id="item-1"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-1-hidden-text-9"
-              aria-label="Handle for draggable item: Project #1"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="1"
-              data-rbd-drag-handle-draggable-id="item-1"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="1"
-            >
-              <div
-                class="card__body"
-              >
-                Card 1
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item drag-drop__item--hover"
-            data-rbd-draggable-context-id="1"
-            data-rbd-draggable-id="item-2"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-1-hidden-text-9"
-              aria-label="Handle for draggable item: Project #2"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="1"
-              data-rbd-drag-handle-draggable-id="item-2"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="2"
-            >
-              <div
-                class="card__body"
-              >
-                Card 2
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item drag-drop__item--hover"
-            data-rbd-draggable-context-id="1"
-            data-rbd-draggable-id="item-3"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-1-hidden-text-9"
-              aria-label="Handle for draggable item: Project #3"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="1"
-              data-rbd-drag-handle-draggable-id="item-3"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="3"
-            >
-              <div
-                class="card__body"
-              >
-                Card 3
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item drag-drop__item--hover"
-            data-rbd-draggable-context-id="1"
-            data-rbd-draggable-id="item-4"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-1-hidden-text-9"
-              aria-label="Handle for draggable item: Project #4"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="1"
-              data-rbd-drag-handle-draggable-id="item-4"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="4"
-            >
-              <div
-                class="card__body"
-              >
-                Card 4
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item drag-drop__item--hover"
-            data-rbd-draggable-context-id="1"
-            data-rbd-draggable-id="item-5"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-1-hidden-text-9"
-              aria-label="Handle for draggable item: Project #5"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="1"
-              data-rbd-drag-handle-draggable-id="item-5"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="5"
-            >
-              <div
-                class="card__body"
-              >
-                Card 5
-              </div>
-            </article>
-          </li>
-        </ol>
-      </div>
-      <div
-        class="drag-drop__container drag-drop__container--empty"
-      >
-        <header>
-          <div
-            class="flex items-center gap-4 bg-neutral-subtle px-4 py-2"
-          >
-            <h5
-              class="heading heading--size-h5"
-            >
-              Selected Projects
-            </h5>
-          </div>
-        </header>
-        <div
-          class="drag-drop__container-inner"
-          data-rbd-droppable-context-id="1"
-          data-rbd-droppable-id="container-2"
-        >
-          <p
-            class="text text--body mb-8 max-w-xl"
-          >
-            Drag available items here
-          </p>
-          <div
-            class="fpo flex h-20 flex-wrap content-center justify-center p-5"
-          >
-            Image Placeholder
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
-<div
-  class="m-4"
->
-  <section
-    class="drag-drop drag-drop--unstyled eds-is-overflow-right"
-    data-rbd-droppable-context-id="2"
-    data-rbd-droppable-id="all-containers"
-  >
-    <div
-      class="drag-drop__inner grid-square"
-    >
-      <div
-        class="drag-drop__container bg-neutral-subtle"
-      >
-        <header>
-          <div
-            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
-          >
-            <h2
-              class="heading heading--size-title-sm heading--neutral-strong"
-            >
-              Available Items
-            </h2>
-            <div
-              class="ml-auto"
-            >
-              <button
-                class="button button--lg button--icon button--brand"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
-                  />
-                </svg>
-                Add item
-              </button>
-            </div>
-          </div>
-        </header>
-        <ol
-          class="drag-drop__container-inner bg-neutral-subtle"
-          data-rbd-droppable-context-id="2"
-          data-rbd-droppable-id="container-1"
-        >
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="2"
-            data-rbd-draggable-id="item-1"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-2-hidden-text-18"
-              aria-label="Handle for draggable item: Project #1"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="2"
-              data-rbd-drag-handle-draggable-id="item-1"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="1"
-            >
-              <div
-                class="card__body"
-              >
-                Card 1
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="2"
-            data-rbd-draggable-id="item-2"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-2-hidden-text-18"
-              aria-label="Handle for draggable item: Project #2"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="2"
-              data-rbd-drag-handle-draggable-id="item-2"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="2"
-            >
-              <div
-                class="card__body"
-              >
-                Card 2: 
-                2
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="2"
-            data-rbd-draggable-id="item-3"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-2-hidden-text-18"
-              aria-label="Handle for draggable item: Project #3"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="2"
-              data-rbd-drag-handle-draggable-id="item-3"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="3"
-            >
-              <div
-                class="card__body"
-              >
-                Card 3
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="2"
-            data-rbd-draggable-id="item-4"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-2-hidden-text-18"
-              aria-label="Handle for draggable item: Project #4"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="2"
-              data-rbd-drag-handle-draggable-id="item-4"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="4"
-            >
-              <div
-                class="card__body"
-              >
-                Card 4
-              </div>
-            </article>
-          </li>
-          <li
-            class="drag-drop__item"
-            data-rbd-draggable-context-id="2"
-            data-rbd-draggable-id="item-5"
-          >
-            <div
-              aria-describedby="rbd-hidden-text-2-hidden-text-18"
-              aria-label="Handle for draggable item: Project #5"
-              class="drag-drop__item-handle"
-              data-rbd-drag-handle-context-id="2"
-              data-rbd-drag-handle-draggable-id="item-5"
-              draggable="false"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 20C8.45 20 7.97933 19.8043 7.588 19.413C7.196 19.021 7 18.55 7 18C7 17.45 7.196 16.979 7.588 16.587C7.97933 16.1957 8.45 16 9 16C9.55 16 10.021 16.1957 10.413 16.587C10.8043 16.979 11 17.45 11 18C11 18.55 10.8043 19.021 10.413 19.413C10.021 19.8043 9.55 20 9 20ZM9 14C8.45 14 7.97933 13.804 7.588 13.412C7.196 13.0207 7 12.55 7 12C7 11.45 7.196 10.979 7.588 10.587C7.97933 10.1957 8.45 10 9 10C9.55 10 10.021 10.1957 10.413 10.587C10.8043 10.979 11 11.45 11 12C11 12.55 10.8043 13.0207 10.413 13.412C10.021 13.804 9.55 14 9 14ZM9 8C8.45 8 7.97933 7.804 7.588 7.412C7.196 7.02067 7 6.55 7 6C7 5.45 7.196 4.97933 7.588 4.588C7.97933 4.196 8.45 4 9 4C9.55 4 10.021 4.196 10.413 4.588C10.8043 4.97933 11 5.45 11 6C11 6.55 10.8043 7.02067 10.413 7.412C10.021 7.804 9.55 8 9 8ZM15 8C14.45 8 13.9793 7.804 13.588 7.412C13.196 7.02067 13 6.55 13 6C13 5.45 13.196 4.97933 13.588 4.588C13.9793 4.196 14.45 4 15 4C15.55 4 16.021 4.196 16.413 4.588C16.8043 4.97933 17 5.45 17 6C17 6.55 16.8043 7.02067 16.413 7.412C16.021 7.804 15.55 8 15 8ZM15 14C14.45 14 13.9793 13.804 13.588 13.412C13.196 13.0207 13 12.55 13 12C13 11.45 13.196 10.979 13.588 10.587C13.9793 10.1957 14.45 10 15 10C15.55 10 16.021 10.1957 16.413 10.587C16.8043 10.979 17 11.45 17 12C17 12.55 16.8043 13.0207 16.413 13.412C16.021 13.804 15.55 14 15 14ZM15 20C14.45 20 13.9793 19.8043 13.588 19.413C13.196 19.021 13 18.55 13 18C13 17.45 13.196 16.979 13.588 16.587C13.9793 16.1957 14.45 16 15 16C15.55 16 16.021 16.1957 16.413 16.587C16.8043 16.979 17 17.45 17 18C17 18.55 16.8043 19.021 16.413 19.413C16.021 19.8043 15.55 20 15 20Z"
-                />
-              </svg>
-            </div>
-            <article
-              class="card card--raised draggable-card"
-              number="5"
-            >
-              <div
-                class="card__body"
-              >
-                Card 5
-              </div>
-            </article>
-          </li>
-        </ol>
-      </div>
-      <div
-        class="drag-drop__container drag-drop__container--empty bg-neutral-subtle"
-      >
-        <header>
-          <div
-            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
-          >
-            <h2
-              class="heading heading--size-title-sm heading--neutral-strong"
-            >
-              Selected Items
-            </h2>
-            <div
-              class="ml-auto"
-            >
-              <button
-                class="button button--lg button--icon button--brand"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
-                  />
-                </svg>
-                Add Item
-              </button>
-            </div>
-          </div>
-        </header>
-        <div
-          class="drag-drop__container-inner bg-neutral-subtle"
-          data-rbd-droppable-context-id="2"
-          data-rbd-droppable-id="container-2"
-        >
-          <p
-            class="text text--body !mb-8"
-          >
-            Empty Content
-          </p>
-        </div>
-      </div>
-      <div
-        class="drag-drop__container drag-drop__container--empty bg-neutral-subtle"
-      >
-        <header>
-          <div
-            class="mb-4 flex items-center gap-4 bg-neutral-subtle"
-          >
-            <h2
-              class="heading heading--size-title-sm heading--neutral-strong"
-            >
-              Selected Items
-            </h2>
-            <div
-              class="ml-auto"
-            >
-              <button
-                class="button button--lg button--icon button--brand"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
-                  />
-                </svg>
-                Add item
-              </button>
-            </div>
-          </div>
-        </header>
-        <div
-          class="drag-drop__container-inner bg-neutral-subtle"
-          data-rbd-droppable-context-id="2"
-          data-rbd-droppable-id="container-3"
-        >
-          <p
-            class="text text--body !mb-8"
-          >
-            Empty Content
-          </p>
-        </div>
-      </div>
-      <div
-        class="drag-drop__container drag-drop__container--empty bg-neutral-subtle"
-      >
-        <header>
-          <div
-            class="mb-4 flex items-center gap-4 bg-neutral-subtle p-0"
-          >
-            <h2
-              class="heading heading--size-title-sm heading--neutral-strong"
-            >
-              Selected Items
-            </h2>
-            <div
-              class="ml-auto"
-            >
-              <button
-                class="button button--lg button--icon button--brand"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
-                  />
-                </svg>
-                Add item
-              </button>
-            </div>
-          </div>
-        </header>
-        <div
-          class="drag-drop__container-inner bg-neutral-subtle"
-          data-rbd-droppable-context-id="2"
-          data-rbd-droppable-id="container-4"
-        >
-          <p
-            class="text text--body !mb-8"
-          >
-            Empty Content
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
diff --git a/src/components/DragDrop/index.ts b/src/components/DragDrop/index.ts
deleted file mode 100644
index 64bdb3476..000000000
--- a/src/components/DragDrop/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DragDrop as default } from './DragDrop';
diff --git a/src/components/Drawer/Drawer.module.css b/src/components/Drawer/Drawer.module.css
deleted file mode 100644
index 6fa5c53b5..000000000
--- a/src/components/Drawer/Drawer.module.css
+++ /dev/null
@@ -1,93 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # DRAWER
-\*------------------------------------*/
-
-/**
- * Box that overlays the application's content, prompting a user to perform an action.
- */
-.drawer__container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-end;
-  visibility: hidden;
-  width: 28rem;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: var(--eds-z-index-bottom);
-  background-color: transparent;
-}
-
-/**
- * Active drawer container
- */
-.drawer__container--is-active {
-  visibility: visible;
-  z-index: 400;
-}
-
-/**
- * Drawer window
- * Actual box with content within
- */
-.drawer {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  transform: translateX(100%);
-  background: var(--eds-theme-color-background-neutral-default);
-  border-left-width: var(--eds-theme-border-width);
-  border-left-style: solid;
-  border-left-color: var(--eds-theme-color-border-neutral-subtle);
-  box-shadow: var(--eds-box-shadow-md);
-  transition: transform var(--eds-anim-move-quick) var(--eds-anim-ease);
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-.drawer:focus-visible {
-  @mixin focusInside;
-}
-
-@supports not selector(:focus-visible) {
-  .drawer:focus {
-    @mixin focusInside;
-  }
-}
-
-/**
- * Drawer window inside active drawer container
- */
-.drawer__container--is-active .drawer {
-  /**
-   * Transform added for animation
-   */
-  transform: translateX(0);
-}
-
-/**
- * Modal header
- */
-.drawer__header {
-  flex-shrink: 0;
-  height: var(--eds-size-9);
-  border-bottom: var(--eds-theme-border-width) solid
-    var(--eds-theme-color-border-neutral-subtle);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/**
- * Drawer body
- */
-.drawer__body {
-  flex: 1;
-}
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
deleted file mode 100644
index d77bfd7fc..000000000
--- a/src/components/Drawer/Drawer.stories.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Drawer } from './Drawer';
-import { DrawerExample } from './DrawerExample';
-import { Button } from '../Button/Button';
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
-import { Heading } from '../Heading/Heading';
-
-export default {
-  title: 'Components/Drawer',
-  component: Drawer,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  args: {
-    'aria-describedby': 'drawer-description-1',
-    'aria-labelledby': 'drawer-heading-1',
-    dismissible: true,
-    isActive: true,
-    children: (
-      <>
-        <Drawer.Header>
-          <Heading id="drawer-heading-1" size="h2">
-            Drawer title
-          </Heading>
-        </Drawer.Header>
-        <Drawer.Body>
-          <div className="fpo">Drawer body</div>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <ButtonGroup>
-            <Button variant="primary">Button 1</Button>
-            <Button>Button 2</Button>
-          </ButtonGroup>
-        </Drawer.Footer>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-    onClose: {
-      action: 'on close',
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Drawer>;
-
-export const Default: StoryObj<Args> = {
-  parameters: {
-    axe: {
-      /**
-       * Axe testing throws error due to Drawer component not being controlled,
-       * but this story is mostly for testing as the interactive story would only
-       * capture the toggle button.
-       */
-      disabledRules: ['aria-allowed-role'],
-    },
-  },
-};
-
-export const DefaultInteractive: StoryObj = {
-  render: () => <DrawerExample />,
-  parameters: {
-    /**
-     * No point snapping the button as this story is an interaction example.
-     */
-    snapshot: { skip: true },
-    chromatic: { disableSnapshot: true },
-  },
-};
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
deleted file mode 100644
index 1127d34f7..000000000
--- a/src/components/Drawer/Drawer.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import * as stories from './Drawer.stories';
-const { DefaultInteractive } = composeStories(stories);
-
-describe('<Drawer />', () => {
-  generateSnapshots(stories, {
-    getElement: async () => {
-      const filters = await screen.findByRole('dialog');
-      return filters.parentElement; // eslint-disable-line testing-library/no-node-access
-    },
-  });
-
-  it('shows the dialog when the open dialog button is clicked', async () => {
-    const user = userEvent.setup();
-    render(<DefaultInteractive />);
-    const openDrawerButton = await screen.findByRole('button', {
-      name: 'Open Drawer',
-    });
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    await user.click(openDrawerButton);
-    expect(screen.getByRole('dialog')).toBeTruthy();
-  });
-});
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
deleted file mode 100644
index 061647584..000000000
--- a/src/components/Drawer/Drawer.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import clsx from 'clsx';
-import React, {
-  useCallback,
-  useState,
-  useEffect,
-  useRef,
-  type ReactNode,
-  type KeyboardEvent,
-} from 'react';
-import { oneByType } from 'react-children-by-type';
-import FocusLock from 'react-focus-lock';
-import { Portal } from 'react-portal';
-import { ESCAPE_KEYCODE } from '../../util/keycodes';
-import DrawerBody from '../DrawerBody';
-import DrawerFooter from '../DrawerFooter';
-import DrawerHeader from '../DrawerHeader';
-import styles from './Drawer.module.css';
-
-export type Props = {
-  /**
-   * HTML id of the helper text used to describe the component after aria-labelledby
-   */
-  'aria-describedby'?: string;
-  /**
-   * HTML id of the helper text used to label the drawer component
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Child node(s) that can be nested inside component. `DrawerHeader`, `DrawerBody`, and `ModelFooter` are the only permissible children of the Drawer
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the Drawer container component that the Drawer components reside in.
-   */
-  className?: string;
-  /**
-   * Toggles the ability to dismiss the Drawer window
-   */
-  dismissible?: boolean;
-  /**
-   * CSS class names that can be appended to the Drawer wrapper component that the Drawer window translates in and out of.
-   */
-  drawerContainerClassName?: string;
-  /**
-   * Sets the drawer to open or close by default
-   */
-  isActive?: boolean;
-  /**
-   * Handler to be called when the drawer is being closed (by ESCAPE / clicking X / clicking outside)
-   */
-  onClose?: (e?: any) => void;
-};
-
-/**
- * `import {Drawer} from "@chanzuckerberg/eds";`
- *
- * A window component that slides from and out of the right side of the screen.
- *
- * @deprecated
- */
-export const Drawer = ({
-  'aria-describedby': ariaDescribedBy,
-  'aria-labelledby': ariaLabelledBy,
-  drawerContainerClassName,
-  isActive,
-  children,
-  dismissible,
-  onClose,
-  className,
-  ...other
-}: Props) => {
-  /**
-   * Initialize states, constants, and refs
-   */
-  const [activeFocus, setActiveFocus] = useState(isActive);
-  const windowRef = useRef<HTMLElement | null>(null);
-  const isMountedRef = useRef(true);
-  const onCloseRef = useRef(onClose);
-
-  /**
-   * Update activeFocus to be consistent with isActive.
-   */
-  useEffect(() => {
-    if (isActive) {
-      activateFocusTrap();
-    } else {
-      deactivateFocusTrap();
-    }
-  }, [isActive]);
-
-  /**
-   * Set a flag when this item has mounted
-   * Otherwise, portals will render which are not handled well
-   * between React and Next.js
-   */
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  /**
-   * Open the Drawer and give it focus.
-   */
-  function activateFocusTrap() {
-    /**
-     * This accommodates drawer animation so that it auto receives focus
-     */
-    setTimeout(() => {
-      if (isMountedRef.current) {
-        setActiveFocus(true);
-      }
-    }, 300);
-  }
-
-  /**
-   * Close the drawer and remove focus.
-   */
-  function deactivateFocusTrap() {
-    setActiveFocus(false);
-  }
-
-  /**
-   * Close the drawer and run the onClose prop (pass in function) if it exists.
-   */
-  const handleOnClose = useCallback(() => {
-    deactivateFocusTrap();
-
-    if (onCloseRef.current) {
-      onCloseRef.current();
-    }
-  }, []);
-
-  /**
-   * Handle "click outside"
-   */
-  useEffect(() => {
-    function handleOnClickOutside(e: MouseEvent) {
-      if (
-        activeFocus &&
-        dismissible &&
-        windowRef.current &&
-        !windowRef.current.contains(e.target as HTMLElement)
-      ) {
-        /**
-         * onClick of the area around the drawer window, close the drawer
-         */
-        handleOnClose();
-      }
-    }
-    document.addEventListener('click', handleOnClickOutside);
-    return () => {
-      document.removeEventListener('click', handleOnClickOutside);
-    };
-  }, [activeFocus, dismissible, handleOnClose, windowRef]);
-
-  /**
-   * If escape button is struck, close the drawer
-   */
-  function handleOnKeyDown(e: KeyboardEvent<HTMLElement>) {
-    if (e.key === ESCAPE_KEYCODE) {
-      handleOnClose();
-    }
-  }
-
-  const drawerHeader = oneByType(children, DrawerHeader);
-  const header = React.Children.map(drawerHeader, (child) => {
-    return React.cloneElement(child, {
-      onClick: () => handleOnClose(),
-      dismissible: dismissible,
-    });
-  });
-  const body = oneByType(children, DrawerBody);
-  const footer = oneByType(children, DrawerFooter);
-
-  const containerClassName = clsx(
-    styles['drawer__container'],
-    isActive && styles['drawer__container--is-active'],
-    drawerContainerClassName,
-  );
-
-  const componentClassName = clsx(styles['drawer'], className);
-
-  if (!isMountedRef.current) return null;
-
-  return (
-    <Portal>
-      <FocusLock disabled={!activeFocus} returnFocus>
-        {/**
-         * the drawer will probably have buttons inside,
-         * We're intentionally not adding role=button for now,
-         * may so we're comfortable suppressing this rule
-         */}
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-        <div
-          aria-hidden={!isActive}
-          className={containerClassName}
-          onKeyDown={handleOnKeyDown}
-          {...other}
-        >
-          <article
-            aria-describedby={ariaDescribedBy}
-            aria-labelledby={ariaLabelledBy}
-            aria-modal={isActive}
-            className={componentClassName}
-            ref={windowRef}
-            role="dialog"
-            tabIndex={0} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-          >
-            {header}
-            {body}
-            {footer}
-          </article>
-        </div>
-      </FocusLock>
-    </Portal>
-  );
-};
-
-Drawer.Body = DrawerBody;
-Drawer.Footer = DrawerFooter;
-Drawer.Header = DrawerHeader;
diff --git a/src/components/Drawer/DrawerExample.tsx b/src/components/Drawer/DrawerExample.tsx
deleted file mode 100644
index 26b5d2da3..000000000
--- a/src/components/Drawer/DrawerExample.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Drawer } from './Drawer';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-import Heading from '../Heading';
-
-/**
- * BETA: This component is still a work in progress and is subject to change.
- *
- * `import {DrawerExample} from "@chanzuckerberg/eds";`
- *
- * An example of a controlled Drawer for use as a story.
- */
-export const DrawerExample = () => {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const drawerButton = useRef<HTMLButtonElement>(null);
-
-  function openDrawerExample() {
-    setDrawerOpen(true);
-  }
-
-  function closeDrawerExample(event: any) {
-    setTimeout(() => {
-      drawerButton?.current?.focus();
-    }, 1);
-    if (event) {
-      event.preventDefault();
-    }
-    setDrawerOpen(false);
-  }
-  return (
-    <div className="min-h-[500px] p-4">
-      <Button onClick={openDrawerExample} ref={drawerButton} variant="primary">
-        Open Drawer
-      </Button>
-
-      <Drawer
-        aria-describedby="drawer-description-1"
-        aria-labelledby="drawer-heading-1"
-        dismissible
-        isActive={drawerOpen}
-        onClose={closeDrawerExample}
-      >
-        <Drawer.Header>
-          <Heading id="drawer-heading-1" size="h2">
-            Drawer title
-          </Heading>
-        </Drawer.Header>
-        <Drawer.Body>
-          <div className="fpo">Drawer body</div>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <ButtonGroup>
-            <Button variant="primary">Button</Button>
-            <Button onClick={closeDrawerExample}>Close Drawer</Button>
-          </ButtonGroup>
-        </Drawer.Footer>
-      </Drawer>
-    </div>
-  );
-};
diff --git a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
deleted file mode 100644
index 160a669c1..000000000
--- a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ /dev/null
@@ -1,79 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Drawer /> Default story renders snapshot 1`] = `
-<div
-  aria-hidden="false"
-  class="drawer__container drawer__container--is-active"
->
-  <article
-    aria-describedby="drawer-description-1"
-    aria-labelledby="drawer-heading-1"
-    aria-modal="true"
-    class="drawer"
-    role="dialog"
-    tabindex="0"
-  >
-    <header
-      class="drawer__header"
-    >
-      <h2
-        class="heading heading--size-h2"
-        id="drawer-heading-1"
-      >
-        Drawer title
-      </h2>
-      <button
-        class="button button--lg button--icon button--neutral"
-        type="button"
-      >
-        <svg
-          class="icon"
-          fill="currentColor"
-          height="1.5rem"
-          role="img"
-          style="--icon-size: 1.5rem;"
-          viewBox="0 0 24 24"
-          width="1.5rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            Close
-          </title>
-          <path
-            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-          />
-        </svg>
-      </button>
-    </header>
-    <div
-      class="drawer__body"
-    >
-      <div
-        class="fpo"
-      >
-        Drawer body
-      </div>
-    </div>
-    <footer
-      class="drawer__footer"
-    >
-      <div
-        class="button-group button-group--spacing-1x"
-      >
-        <button
-          class="button button--lg button--primary button--brand"
-          type="button"
-        >
-          Button 1
-        </button>
-        <button
-          class="button button--lg button--secondary button--brand"
-          type="button"
-        >
-          Button 2
-        </button>
-      </div>
-    </footer>
-  </article>
-</div>
-`;
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
deleted file mode 100644
index 02218d0ab..000000000
--- a/src/components/Drawer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Drawer as default } from './Drawer';
diff --git a/src/components/DrawerBody/DrawerBody.tsx b/src/components/DrawerBody/DrawerBody.tsx
deleted file mode 100644
index 3cf6620ea..000000000
--- a/src/components/DrawerBody/DrawerBody.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from '../Drawer/Drawer.module.css';
-
-export type Props = {
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-};
-
-/**
- * `import {DrawerBody} from "@chanzuckerberg/eds";`
- *
- * The main center content of the Drawer component.
- * @deprecated
- */
-export const DrawerBody = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, className }, ref) => {
-    const componentClassName = clsx(styles['drawer__body'], className);
-    return (
-      <div className={componentClassName} ref={ref}>
-        {children}
-      </div>
-    );
-  },
-);
-DrawerBody.displayName = 'DrawerBody';
diff --git a/src/components/DrawerBody/index.ts b/src/components/DrawerBody/index.ts
deleted file mode 100644
index d17f84108..000000000
--- a/src/components/DrawerBody/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DrawerBody as default } from './DrawerBody';
diff --git a/src/components/DrawerFooter/DrawerFooter.tsx b/src/components/DrawerFooter/DrawerFooter.tsx
deleted file mode 100644
index 268683d7a..000000000
--- a/src/components/DrawerFooter/DrawerFooter.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-
-export type Props = {
-  /**
-   * Child node(s) that can be nested inside component. `DrawerHeader`, `DrawerBody`, and `ModelFooter` are the only permissible children of the Drawer
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-};
-
-/**
- * `import {DrawerFooter} from "@chanzuckerberg/eds";`
- *
- * The footer content of the Drawer component. Usually houses interactible component controlling the Drawer functionality.
- * @deprecated
- */
-export const DrawerFooter = ({ children, className, ...other }: Props) => {
-  const componentClassName = clsx('drawer__footer', className);
-  return (
-    <footer className={componentClassName} {...other}>
-      {children}
-    </footer>
-  );
-};
diff --git a/src/components/DrawerFooter/index.ts b/src/components/DrawerFooter/index.ts
deleted file mode 100644
index ca883c03a..000000000
--- a/src/components/DrawerFooter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DrawerFooter as default } from './DrawerFooter';
diff --git a/src/components/DrawerHeader/DrawerHeader.tsx b/src/components/DrawerHeader/DrawerHeader.tsx
deleted file mode 100644
index 670cd2a69..000000000
--- a/src/components/DrawerHeader/DrawerHeader.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import clsx from 'clsx';
-import type { MouseEventHandler, ReactNode } from 'react';
-import React from 'react';
-import Button from '../../components/Button';
-import Icon from '../../components/Icon';
-import styles from '../Drawer/Drawer.module.css';
-
-export type Props = {
-  /**
-   * Child node(s) that can be nested inside component. `DrawerHeader`, `DrawerBody`, and `DrawerFooter` are the only permissible children of the Drawer
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * onClick function that can be passed in
-   */
-  onClick?: MouseEventHandler;
-  /**
-   * Dismissible toggle on the Drawer
-   */
-  dismissible?: boolean;
-  /**
-   * Close button text that is visually hidden for accessibility
-   */
-  closeButtonText?: string;
-};
-
-/**
- * `import {DrawerHeader} from "@chanzuckerberg/eds";`
- *
- * The header content of the Drawer component. Usually houses the heading and the close button.
- * @deprecated
- */
-export const DrawerHeader = ({
-  className,
-  onClick,
-  closeButtonText = 'Close',
-  dismissible,
-  children,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(styles['drawer__header'], className);
-  return (
-    <header className={componentClassName} {...other}>
-      {children}
-      {dismissible && (
-        <Button onClick={onClick} status="neutral" variant="icon">
-          <Icon
-            name="close"
-            purpose="informative"
-            size="1.5rem"
-            title={closeButtonText}
-          />
-        </Button>
-      )}
-    </header>
-  );
-};
diff --git a/src/components/DrawerHeader/index.ts b/src/components/DrawerHeader/index.ts
deleted file mode 100644
index 161b50569..000000000
--- a/src/components/DrawerHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DrawerHeader as default } from './DrawerHeader';
diff --git a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
index c94add9e1..d6665244a 100644
--- a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
+++ b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
@@ -44,7 +44,7 @@ exports[`<FieldNote /> WithText story renders snapshot 1`] = `
     class="max-w-xl"
   >
     <p
-      class="text text--body mb-6"
+      class="text text--body-md mb-6"
     >
       Here is a field note that involves:
     </p>
diff --git a/src/components/FiltersButton/FiltersButton.module.css b/src/components/FiltersButton/FiltersButton.module.css
deleted file mode 100644
index c30dcbeb3..000000000
--- a/src/components/FiltersButton/FiltersButton.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/*------------------------------------*\
-    # FILTERS BUTTON
-\*------------------------------------*/
-
-/**
- * Trigger button that opens the filters.
- */
-.filters-button {
-  gap: var(--eds-size-1);
-}
diff --git a/src/components/FiltersButton/FiltersButton.tsx b/src/components/FiltersButton/FiltersButton.tsx
deleted file mode 100644
index 87e92c8d4..000000000
--- a/src/components/FiltersButton/FiltersButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import Button, { type ButtonProps } from '../Button';
-import type { VariantStatus } from '../ClickableStyle';
-import Icon from '../Icon';
-import styles from './FiltersButton.module.css';
-
-export type FiltersButtonProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Indicates status that filters have been selected, influencing toggle button variant.
-   */
-  hasSelectedFilters?: boolean;
-  /**
-   * Text to be placed in the button that activates the Filters.
-   */
-  triggerText: string;
-} & Omit<ButtonProps, 'children' | 'variant' | 'status'>;
-
-/**
- * `import {FiltersButton} from "@chanzuckerberg/eds";`
- *
- * Default button for triggering Filters components.
- * @deprecated
- */
-export const FiltersButton = forwardRef<HTMLButtonElement, FiltersButtonProps>(
-  ({ className, hasSelectedFilters, triggerText, ...other }, ref) => {
-    const componentClassName = clsx(styles['filters-button'], className);
-
-    const variantStatus: VariantStatus = hasSelectedFilters
-      ? {
-          variant: 'primary',
-          status: 'brand',
-        }
-      : {
-          variant: 'secondary',
-          status: 'neutral',
-        };
-
-    return (
-      <Button
-        className={componentClassName}
-        ref={ref}
-        {...other}
-        {...variantStatus}
-      >
-        <Icon name="filter-list" purpose="decorative" size="1.5rem" />
-        {triggerText}
-      </Button>
-    );
-  },
-);
-
-FiltersButton.displayName = 'FiltersButton';
diff --git a/src/components/FiltersButton/index.ts b/src/components/FiltersButton/index.ts
deleted file mode 100644
index 680e0cbbe..000000000
--- a/src/components/FiltersButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FiltersButton as default } from './FiltersButton';
diff --git a/src/components/FiltersCheckboxField/FiltersCheckboxField.module.css b/src/components/FiltersCheckboxField/FiltersCheckboxField.module.css
deleted file mode 100644
index 149ab293c..000000000
--- a/src/components/FiltersCheckboxField/FiltersCheckboxField.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # FILTERS FIELDSET
-\*------------------------------------*/
-
-/**
- * The filters checkbox fieldset with legend and various checkbox filters.
- */
-.filters-fieldset {
-  margin: 0;
-}
-
-/**
- * The filters checkbox fieldset legend.
- */
-.filters-fieldset__legend {
-  font: var(--eds-theme-typography-title-sm);
-  margin-bottom: var(--eds-size-3);
-}
-
-/**
- * The filters checkboxes.
- */
-.filters-fieldset__checkboxes > :not(:last-child) {
-  margin-bottom: var(--eds-size-2-and-half);
-}
diff --git a/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx b/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx
deleted file mode 100644
index 6796b1a38..000000000
--- a/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import Fieldset from '../Fieldset';
-import styles from './FiltersCheckboxField.module.css';
-
-export type Props = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * List of checkboxes to be placed in the filters.
-   */
-  children: React.ReactNode;
-  /**
-   * Legend text string that names the fieldset.
-   */
-  legend?: string;
-};
-
-/**
- * ```tsx
- * import {Filters} from "@chanzuckerberg/eds";
- *
- * <Filters.CheckboxField>
- * ```
- *
- * Field of checkboxes that are placed within a FiltersDrawer component.
- * @deprecated
- */
-export const FiltersCheckboxField = ({
-  className,
-  children,
-  legend,
-}: Props) => {
-  const componentClassName = clsx(styles['filters-fieldset'], className);
-
-  return (
-    <Fieldset className={componentClassName}>
-      {legend && (
-        <Fieldset.Legend
-          className={styles['filters-fieldset__legend']}
-          text={legend}
-        />
-      )}
-      <Fieldset.Items className={styles['filters-fieldset__checkboxes']}>
-        {children}
-      </Fieldset.Items>
-    </Fieldset>
-  );
-};
diff --git a/src/components/FiltersCheckboxField/index.ts b/src/components/FiltersCheckboxField/index.ts
deleted file mode 100644
index f424c5264..000000000
--- a/src/components/FiltersCheckboxField/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FiltersCheckboxField as default } from './FiltersCheckboxField';
diff --git a/src/components/FiltersDrawer/FiltersDrawer.module.css b/src/components/FiltersDrawer/FiltersDrawer.module.css
deleted file mode 100644
index 2b9cb769f..000000000
--- a/src/components/FiltersDrawer/FiltersDrawer.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/*------------------------------------*\
-    # FILTERS DRAWER
-\*------------------------------------*/
-
-/**
- * The space the filters drawer takes up.
- */
-.filters-drawer__container {
-  width: 22.5rem;
-}
-
-/**
- * The drawer containing the filters. Resides in the filters drawer container.
- */
-.filters-drawer {
-  height: calc(100vh - var(--eds-size-2));
-  max-width: calc(100vw - var(--eds-size-2));
-  @media all and (min-width: $eds-bp-md) {
-    height: 100vh;
-  }
-}
-
-.filters-drawer__trigger {
-  gap: var(--eds-size-1);
-}
-
-/**
- * The title name of the filters drawer.
- */
-.filters-drawer__title {
-  margin-left: var(--eds-size-4);
-}
-
-/**
- * The body of the filters drawer that houses the filters fields.
- */
-.filters-drawer__body {
-  overflow: auto;
-
-  padding: var(--eds-size-5) var(--eds-size-4);
-  @media all and (min-width: $eds-bp-md) {
-    padding-top: var(--eds-size-6);
-    padding-bottom: var(--eds-size-6);
-  }
-}
-
-/**
- * The footer of the filters drawer that houses the apply and clear all button group.
- */
-.filters-drawer__footer {
-  height: var(--eds-size-10);
-  padding: var(--eds-size-2-and-half) var(--eds-size-3);
-}
-
-/**
- * The footer variant with a shadow in the case of an overflow.
- */
-.filters-drawer__footer--overflow {
-  box-shadow: var(--eds-box-shadow-xl);
-}
-
-/**
- * The button group of the houses the apply and clear all buttons.
- */
-.footer__button-group {
-  display: flex;
-}
-
-/**
- * The apply and clear all buttons.
- */
-.footer__button {
-  flex: 1;
-}
diff --git a/src/components/FiltersDrawer/FiltersDrawer.stories.module.css b/src/components/FiltersDrawer/FiltersDrawer.stories.module.css
deleted file mode 100644
index 88b0a5ad9..000000000
--- a/src/components/FiltersDrawer/FiltersDrawer.stories.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.button-group__apply-only {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.filters-drawer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--eds-size-6);
-}
diff --git a/src/components/FiltersDrawer/FiltersDrawer.stories.tsx b/src/components/FiltersDrawer/FiltersDrawer.stories.tsx
deleted file mode 100644
index 91633d565..000000000
--- a/src/components/FiltersDrawer/FiltersDrawer.stories.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import isChromatic from 'chromatic/isChromatic';
-import React from 'react';
-
-import { FiltersDrawer } from './FiltersDrawer';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { FiltersCheckboxField } from '../FiltersCheckboxField/FiltersCheckboxField';
-import styles from './FiltersDrawer.stories.module.css';
-
-export default {
-  title: 'Components/FiltersDrawer',
-  component: FiltersDrawer,
-  parameters: {
-    badges: ['1.1', BADGE.DEPRECATED],
-  },
-  args: {
-    triggerText: 'Filters',
-    hasSelectedFilters: false,
-    children: (
-      <FiltersCheckboxField legend="Filters Segment 1">
-        <Checkbox label="Filters label 1" onChange={() => {}} />
-        <Checkbox label="Filters label 2" onChange={() => {}} />
-        <Checkbox label="Filters label 3" onChange={() => {}} />
-      </FiltersCheckboxField>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '0.25rem', height: '100vh' }}>{Story()}</div>
-    ),
-  ],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof FiltersDrawer>;
-
-export const Default: StoryObj<Args> = {
-  play: async ({ canvasElement }) => {
-    // We want to test visual regression for the drawer as well as the button, but don't want the drawer open initally outside Chromatic
-    if (isChromatic()) {
-      const canvas = within(canvasElement);
-      const filtersTrigger = await canvas.findByRole('button');
-      await userEvent.click(filtersTrigger);
-    }
-  },
-};
-
-export const WithOnClear: StoryObj<Args> = {
-  ...Default,
-  args: {
-    onClear: () => {},
-  },
-};
-
-export const WithOnApplyAndCustomButtonGroup: StoryObj<Args> = {
-  ...Default,
-  args: {
-    footerButtonGroupClassName: styles['button-group__apply-only'],
-    onApply: () => {},
-  },
-};
-
-export const OverflowInteractive: StoryObj<Args> = {
-  parameters: {
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-  },
-  render: () => {
-    const initialCheckedState = [
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-    ];
-    const [transientChecked, setTransientChecked] =
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useState(initialCheckedState);
-    const onCheckboxChange = (index: number) => {
-      const newTransientChecked = [...transientChecked];
-      newTransientChecked[index] = !transientChecked[index];
-      setTransientChecked(newTransientChecked);
-    };
-
-    const [appliedChecked, setAppliedChecked] =
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useState(initialCheckedState);
-    const onClear = () => {
-      setTransientChecked(initialCheckedState);
-      setAppliedChecked(initialCheckedState);
-    };
-    const onClose = () => {
-      setTransientChecked([...appliedChecked]);
-    };
-    const onApply = () => {
-      setAppliedChecked([...transientChecked]);
-    };
-
-    /**
-     * Counts how many filters have been applied.
-     */
-    const filterCount = Object.values(appliedChecked).reduce(
-      (count: number, status) => {
-        if (status) return count + 1;
-        else return count;
-      },
-      0,
-    );
-
-    const hasSelectedFilters = filterCount > 0;
-    const triggerText = hasSelectedFilters
-      ? `Filters (${filterCount})`
-      : 'Filters';
-
-    return (
-      <FiltersDrawer
-        className={styles['filters-drawer']}
-        hasSelectedFilters={hasSelectedFilters}
-        onApply={onApply}
-        onClear={onClear}
-        onClose={onClose}
-        triggerText={triggerText}
-      >
-        <FiltersCheckboxField legend="Filters Segment 1">
-          <Checkbox
-            checked={transientChecked[0]}
-            label="Filters long label 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-            onChange={() => onCheckboxChange(0)}
-          />
-          <Checkbox
-            checked={transientChecked[1]}
-            label="Filters label 2"
-            onChange={() => onCheckboxChange(1)}
-          />
-          <Checkbox
-            checked={transientChecked[2]}
-            label="Filters label 3"
-            onChange={() => onCheckboxChange(2)}
-          />
-        </FiltersCheckboxField>
-        <FiltersCheckboxField legend="Filters Segment 2">
-          <Checkbox
-            checked={transientChecked[3]}
-            label="Filters label 1"
-            onChange={() => onCheckboxChange(3)}
-          />
-          <Checkbox
-            checked={transientChecked[4]}
-            label="Filters long label 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-            onChange={() => onCheckboxChange(4)}
-          />
-          <Checkbox
-            checked={transientChecked[5]}
-            label="Filters label 3"
-            onChange={() => onCheckboxChange(5)}
-          />
-        </FiltersCheckboxField>
-        <FiltersCheckboxField legend="Filters Segment 3">
-          <Checkbox
-            checked={transientChecked[6]}
-            label="Filters label 1"
-            onChange={() => onCheckboxChange(6)}
-          />
-          <Checkbox
-            checked={transientChecked[7]}
-            label="Filters label 2"
-            onChange={() => onCheckboxChange(7)}
-          />
-          <Checkbox
-            checked={transientChecked[8]}
-            label="Filters long label 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-            onChange={() => onCheckboxChange(8)}
-          />
-        </FiltersCheckboxField>
-        <FiltersCheckboxField legend="Filters Segment 4">
-          <Checkbox
-            checked={transientChecked[9]}
-            label="Filters label 1"
-            onChange={() => onCheckboxChange(9)}
-          />
-          <Checkbox
-            checked={transientChecked[10]}
-            label="Filters label 2"
-            onChange={() => onCheckboxChange(10)}
-          />
-          <Checkbox
-            checked={transientChecked[11]}
-            label="Filters label 3"
-            onChange={() => onCheckboxChange(11)}
-          />
-          <Checkbox
-            checked={transientChecked[12]}
-            label="Filters label 4"
-            onChange={() => onCheckboxChange(12)}
-          />
-          <Checkbox
-            checked={transientChecked[13]}
-            label="Filters label 5"
-            onChange={() => onCheckboxChange(13)}
-          />
-          <Checkbox
-            checked={transientChecked[14]}
-            label="Filters label 6"
-            onChange={() => onCheckboxChange(14)}
-          />
-        </FiltersCheckboxField>
-      </FiltersDrawer>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    // We want to test visual regression for the drawer as well as the button, but don't want the drawer open initally outside Chromatic
-    if (isChromatic()) {
-      const canvas = within(canvasElement);
-      const filtersTrigger = await canvas.findByRole('button');
-      await userEvent.click(filtersTrigger);
-    }
-  },
-};
diff --git a/src/components/FiltersDrawer/FiltersDrawer.test.tsx b/src/components/FiltersDrawer/FiltersDrawer.test.tsx
deleted file mode 100644
index e72eb6759..000000000
--- a/src/components/FiltersDrawer/FiltersDrawer.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import * as stories from './FiltersDrawer.stories';
-
-const { OverflowInteractive } = composeStories(stories);
-
-describe('<Filters />', () => {
-  jest.setTimeout(50000);
-  generateSnapshots(stories as StoryFile, {
-    getElement: async () => {
-      const user = userEvent.setup();
-      const toggleFiltersButton = screen.queryByRole('button', {
-        name: 'Filters',
-      });
-      if (toggleFiltersButton) {
-        await user.click(toggleFiltersButton);
-      }
-      const filters = await screen.findByRole('dialog');
-      return filters.parentElement; // eslint-disable-line testing-library/no-node-access
-    },
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('saves filters appropriately', async () => {
-    const user = userEvent.setup();
-    render(<OverflowInteractive />);
-    const openFiltersButton = screen.getByRole('button', {
-      name: 'Filters',
-    });
-    await user.click(openFiltersButton);
-
-    const checkboxes = screen.getAllByRole('checkbox');
-    await user.click(checkboxes[0]);
-    await user.click(checkboxes[4]);
-    await user.click(checkboxes[9]);
-    const applyFiltersButton = screen.getByRole('button', {
-      name: 'Apply',
-    });
-    await user.click(applyFiltersButton);
-    expect(openFiltersButton).toHaveAccessibleName('Filters (3)');
-
-    await user.click(openFiltersButton);
-    const closeFiltersButton = screen.getByRole('button', {
-      name: 'close filters',
-    });
-    await user.click(closeFiltersButton);
-    expect(openFiltersButton).toHaveAccessibleName('Filters (3)');
-
-    await user.click(openFiltersButton);
-    const clearAllFiltersButton = screen.getByRole('button', {
-      name: 'Clear All',
-    });
-    await user.click(clearAllFiltersButton);
-    expect(openFiltersButton).toHaveAccessibleName('Filters');
-  });
-});
diff --git a/src/components/FiltersDrawer/FiltersDrawer.tsx b/src/components/FiltersDrawer/FiltersDrawer.tsx
deleted file mode 100644
index d9ce4db27..000000000
--- a/src/components/FiltersDrawer/FiltersDrawer.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import clsx from 'clsx';
-import type { ReactElement, ReactNode } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useId } from '../../util/useId';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-import Drawer from '../Drawer';
-import FiltersButton from '../FiltersButton';
-import Heading from '../Heading';
-import styles from './FiltersDrawer.module.css';
-
-export type FiltersDrawerProps = {
-  /**
-   * Form controls, form fields, or other relevant information that will be displayed in the filters drawer.
-   */
-  children: React.ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * CSS class names that can be appended to the footer button group.
-   */
-  footerButtonGroupClassName?: string;
-  /**
-   * Indicates status that filters have been selected, influencing toggle button variant.
-   */
-  hasSelectedFilters?: boolean;
-  /**
-   * Callback called when the clear button is called.
-   */
-  onClear?: () => void;
-  /**
-   * Callback called when filters drawer is closed.
-   */
-  onClose?: () => void;
-  /**
-   * Callback called when the apply button is called.
-   */
-  onApply?: () => void;
-  /**
-   * Trigger element that toggles the filters drawer.
-   * Must be able to accept an 'onClick: () => void' prop.
-   *
-   * Either `triggerElement` or `triggerText` must be passed in, and if both are passed, `triggerElement` will be used.
-   */
-  triggerElement?: ReactNode;
-  /**
-   * Text to be placed in the button that activates the Filters Drawer
-   *
-   * Either `triggerElement` or `triggerText` must be passed in, and if both are passed, `triggerElement` will be used.
-   */
-  triggerText?: string;
-};
-
-/**
- * `import {FiltersDrawer} from "@chanzuckerberg/eds";`
- *
- * A drawer component with fields of checkboxes to select filters.
- * @deprecated
- */
-export const FiltersDrawer = ({
-  children,
-  className,
-  footerButtonGroupClassName,
-  hasSelectedFilters,
-  onClear,
-  onApply,
-  onClose,
-  triggerElement,
-  triggerText,
-}: FiltersDrawerProps) => {
-  if (
-    !triggerElement &&
-    !triggerText &&
-    process.env.NODE_ENV !== 'production'
-  ) {
-    throw new Error(
-      'Provide triggerText as trigger button text or a custom triggerElement for FiltersDrawer control',
-    );
-  }
-
-  /**
-   * Manages the active state of the filters drawer.
-   */
-  const [isActive, setIsActive] = useState(false);
-
-  function closeFiltersDrawer() {
-    setIsActive(false);
-  }
-
-  function closeFilters() {
-    closeFiltersDrawer();
-    onClose && onClose();
-  }
-
-  function clearFilters() {
-    closeFiltersDrawer();
-    onClear && onClear();
-  }
-
-  function applyFilters() {
-    closeFiltersDrawer();
-    onApply && onApply();
-  }
-
-  /**
-   * Manages overflow state.
-   */
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const filtersBody = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (
-      filtersBody.current &&
-      filtersBody.current.scrollHeight > filtersBody.current.clientHeight
-    ) {
-      setIsOverflowing(true);
-    }
-  }, [filtersBody]);
-
-  const addFiltersToTriggerElement = (trigger: ReactNode) => {
-    if (!React.isValidElement(trigger)) return;
-
-    // Grabs the original onClick callback and calls it after toggling the FiltersDrawer
-    const { onClick } = (trigger as ReactElement).props;
-    return React.cloneElement(trigger as ReactElement, {
-      onClick: (event: MouseEvent) => {
-        setIsActive(true);
-        onClick && onClick(event);
-      },
-    });
-  };
-
-  const trigger = triggerElement ? (
-    addFiltersToTriggerElement(triggerElement)
-  ) : (
-    <FiltersButton
-      hasSelectedFilters={hasSelectedFilters}
-      onClick={() => setIsActive(true)}
-      // in this ternary operator, triggerText will never be falsy since we check for it earlier.
-      triggerText={triggerText!} // eslint-disable-line @typescript-eslint/no-non-null-assertion
-    />
-  );
-
-  const bodyClassName = clsx(styles['filters-drawer__body'], className);
-  const footerClassName = clsx(
-    styles['filters-drawer__footer'],
-    isOverflowing && styles['filters-drawer__footer--overflow'],
-  );
-
-  const buttonGroupClassName = clsx(
-    styles['footer__button-group'],
-    footerButtonGroupClassName,
-  );
-
-  const generatedId = useId();
-
-  return (
-    <div>
-      {trigger}
-      <Drawer
-        aria-labelledby={generatedId}
-        className={styles['filters-drawer']}
-        dismissible
-        drawerContainerClassName={styles['filters-drawer__container']}
-        isActive={isActive}
-        onClose={closeFilters}
-      >
-        <Drawer.Header closeButtonText="close filters">
-          <Heading
-            className={styles['filters-drawer__title']}
-            id={generatedId}
-            size="headline-sm"
-          >
-            Filters
-          </Heading>
-        </Drawer.Header>
-        <Drawer.Body className={bodyClassName} ref={filtersBody}>
-          {children}
-        </Drawer.Body>
-        {(onClear || onApply) && (
-          <Drawer.Footer className={footerClassName}>
-            <ButtonGroup className={buttonGroupClassName}>
-              {onClear && (
-                <Button
-                  className={styles['footer__button']}
-                  onClick={clearFilters}
-                >
-                  Clear All
-                </Button>
-              )}
-              {onApply && (
-                <Button
-                  className={styles['footer__button']}
-                  onClick={applyFilters}
-                  variant="primary"
-                >
-                  Apply
-                </Button>
-              )}
-            </ButtonGroup>
-          </Drawer.Footer>
-        )}
-      </Drawer>
-    </div>
-  );
-};
diff --git a/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap b/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap
deleted file mode 100644
index 9c86bf31a..000000000
--- a/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap
+++ /dev/null
@@ -1,715 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Filters /> Default story renders snapshot 1`] = `
-<div
-  aria-hidden="false"
-  class="drawer__container drawer__container--is-active filters-drawer__container"
->
-  <article
-    aria-labelledby=":r0:"
-    aria-modal="true"
-    class="drawer filters-drawer"
-    role="dialog"
-    tabindex="0"
-  >
-    <header
-      class="drawer__header"
-    >
-      <h3
-        class="heading heading--size-headline-sm filters-drawer__title"
-        id=":r0:"
-      >
-        Filters
-      </h3>
-      <button
-        class="button button--lg button--icon button--neutral"
-        type="button"
-      >
-        <svg
-          class="icon"
-          fill="currentColor"
-          height="1.5rem"
-          role="img"
-          style="--icon-size: 1.5rem;"
-          viewBox="0 0 24 24"
-          width="1.5rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            close filters
-          </title>
-          <path
-            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-          />
-        </svg>
-      </button>
-    </header>
-    <div
-      class="drawer__body filters-drawer__body"
-    >
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 1
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r1:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r1:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r2:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r2:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r3:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r3:"
-            >
-              Filters label 3
-            </label>
-          </div>
-        </div>
-      </fieldset>
-    </div>
-  </article>
-</div>
-`;
-
-exports[`<Filters /> OverflowInteractive story renders snapshot 1`] = `
-<div
-  aria-hidden="false"
-  class="drawer__container drawer__container--is-active filters-drawer__container"
->
-  <article
-    aria-labelledby=":rc:"
-    aria-modal="true"
-    class="drawer filters-drawer"
-    role="dialog"
-    tabindex="0"
-  >
-    <header
-      class="drawer__header"
-    >
-      <h3
-        class="heading heading--size-headline-sm filters-drawer__title"
-        id=":rc:"
-      >
-        Filters
-      </h3>
-      <button
-        class="button button--lg button--icon button--neutral"
-        type="button"
-      >
-        <svg
-          class="icon"
-          fill="currentColor"
-          height="1.5rem"
-          role="img"
-          style="--icon-size: 1.5rem;"
-          viewBox="0 0 24 24"
-          width="1.5rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            close filters
-          </title>
-          <path
-            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-          />
-        </svg>
-      </button>
-    </header>
-    <div
-      class="drawer__body filters-drawer__body filters-drawer"
-    >
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 1
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rd:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rd:"
-            >
-              Filters long label 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":re:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":re:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rf:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rf:"
-            >
-              Filters label 3
-            </label>
-          </div>
-        </div>
-      </fieldset>
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 2
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rg:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rg:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rh:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rh:"
-            >
-              Filters long label 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":ri:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":ri:"
-            >
-              Filters label 3
-            </label>
-          </div>
-        </div>
-      </fieldset>
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 3
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rj:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rj:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rk:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rk:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rl:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rl:"
-            >
-              Filters long label 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            </label>
-          </div>
-        </div>
-      </fieldset>
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 4
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rm:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rm:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rn:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rn:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":ro:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":ro:"
-            >
-              Filters label 3
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rp:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rp:"
-            >
-              Filters label 4
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rq:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rq:"
-            >
-              Filters label 5
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rr:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rr:"
-            >
-              Filters label 6
-            </label>
-          </div>
-        </div>
-      </fieldset>
-    </div>
-    <footer
-      class="drawer__footer filters-drawer__footer"
-    >
-      <div
-        class="button-group button-group--spacing-1x footer__button-group"
-      >
-        <button
-          class="button button--lg button--secondary button--brand footer__button"
-          type="button"
-        >
-          Clear All
-        </button>
-        <button
-          class="button button--lg button--primary button--brand footer__button"
-          type="button"
-        >
-          Apply
-        </button>
-      </div>
-    </footer>
-  </article>
-</div>
-`;
-
-exports[`<Filters /> WithOnApplyAndCustomButtonGroup story renders snapshot 1`] = `
-<div
-  aria-hidden="false"
-  class="drawer__container drawer__container--is-active filters-drawer__container"
->
-  <article
-    aria-labelledby=":r8:"
-    aria-modal="true"
-    class="drawer filters-drawer"
-    role="dialog"
-    tabindex="0"
-  >
-    <header
-      class="drawer__header"
-    >
-      <h3
-        class="heading heading--size-headline-sm filters-drawer__title"
-        id=":r8:"
-      >
-        Filters
-      </h3>
-      <button
-        class="button button--lg button--icon button--neutral"
-        type="button"
-      >
-        <svg
-          class="icon"
-          fill="currentColor"
-          height="1.5rem"
-          role="img"
-          style="--icon-size: 1.5rem;"
-          viewBox="0 0 24 24"
-          width="1.5rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            close filters
-          </title>
-          <path
-            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-          />
-        </svg>
-      </button>
-    </header>
-    <div
-      class="drawer__body filters-drawer__body"
-    >
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 1
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r9:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r9:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":ra:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":ra:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":rb:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":rb:"
-            >
-              Filters label 3
-            </label>
-          </div>
-        </div>
-      </fieldset>
-    </div>
-    <footer
-      class="drawer__footer filters-drawer__footer"
-    >
-      <div
-        class="button-group button-group--spacing-1x footer__button-group button-group__apply-only"
-      >
-        <button
-          class="button button--lg button--primary button--brand footer__button"
-          type="button"
-        >
-          Apply
-        </button>
-      </div>
-    </footer>
-  </article>
-</div>
-`;
-
-exports[`<Filters /> WithOnClear story renders snapshot 1`] = `
-<div
-  aria-hidden="false"
-  class="drawer__container drawer__container--is-active filters-drawer__container"
->
-  <article
-    aria-labelledby=":r4:"
-    aria-modal="true"
-    class="drawer filters-drawer"
-    role="dialog"
-    tabindex="0"
-  >
-    <header
-      class="drawer__header"
-    >
-      <h3
-        class="heading heading--size-headline-sm filters-drawer__title"
-        id=":r4:"
-      >
-        Filters
-      </h3>
-      <button
-        class="button button--lg button--icon button--neutral"
-        type="button"
-      >
-        <svg
-          class="icon"
-          fill="currentColor"
-          height="1.5rem"
-          role="img"
-          style="--icon-size: 1.5rem;"
-          viewBox="0 0 24 24"
-          width="1.5rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            close filters
-          </title>
-          <path
-            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-          />
-        </svg>
-      </button>
-    </header>
-    <div
-      class="drawer__body filters-drawer__body"
-    >
-      <fieldset
-        class="fieldset filters-fieldset"
-      >
-        <legend
-          class="fieldset-legend filters-fieldset__legend"
-        >
-          Filters Segment 1
-           
-        </legend>
-        <div
-          class="fieldset-items filters-fieldset__checkboxes"
-        >
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r5:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r5:"
-            >
-              Filters label 1
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r6:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r6:"
-            >
-              Filters label 2
-            </label>
-          </div>
-          <div
-            class="checkbox"
-          >
-            <input
-              class="checkbox__input"
-              id=":r7:"
-              type="checkbox"
-            />
-            <label
-              class="label label--lg"
-              for=":r7:"
-            >
-              Filters label 3
-            </label>
-          </div>
-        </div>
-      </fieldset>
-    </div>
-    <footer
-      class="drawer__footer filters-drawer__footer"
-    >
-      <div
-        class="button-group button-group--spacing-1x footer__button-group"
-      >
-        <button
-          class="button button--lg button--secondary button--brand footer__button"
-          type="button"
-        >
-          Clear All
-        </button>
-      </div>
-    </footer>
-  </article>
-</div>
-`;
diff --git a/src/components/FiltersDrawer/index.ts b/src/components/FiltersDrawer/index.ts
deleted file mode 100644
index 797d7e41c..000000000
--- a/src/components/FiltersDrawer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FiltersDrawer as default } from './FiltersDrawer';
diff --git a/src/components/FiltersPopover/FiltersPopover.module.css b/src/components/FiltersPopover/FiltersPopover.module.css
deleted file mode 100644
index 9bb681601..000000000
--- a/src/components/FiltersPopover/FiltersPopover.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*------------------------------------*\
-    # FILTERS POPOVER
-\*------------------------------------*/
-
-/**
- * A floating panel component with arbitrary content.
- * Styling for the Popover component since the parent <Popover> component provides functionality.
- */
-.filters-popover {
-  padding: var(--eds-size-3);
-}
-
-/**
- * The button group of the houses the apply and clear all buttons.
- */
-.footer__button-group {
-  margin-top: var(--eds-size-3);
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/components/FiltersPopover/FiltersPopover.stories.module.css b/src/components/FiltersPopover/FiltersPopover.stories.module.css
deleted file mode 100644
index 71a8bf9c4..000000000
--- a/src/components/FiltersPopover/FiltersPopover.stories.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.button-group__apply-only {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.filters-popover {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--eds-size-6);
-}
-
-.filters-popover__checkbox-field {
-  max-width: 300px;
-}
diff --git a/src/components/FiltersPopover/FiltersPopover.stories.tsx b/src/components/FiltersPopover/FiltersPopover.stories.tsx
deleted file mode 100644
index c996ba854..000000000
--- a/src/components/FiltersPopover/FiltersPopover.stories.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import isChromatic from 'chromatic/isChromatic';
-import React from 'react';
-
-import type { FiltersPopoverProps } from './FiltersPopover';
-import { FiltersPopover } from './FiltersPopover';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { FiltersCheckboxField } from '../FiltersCheckboxField/FiltersCheckboxField';
-import styles from './FiltersPopover.stories.module.css';
-
-export default {
-  title: 'Components/FiltersPopover',
-  component: FiltersPopover,
-  parameters: {
-    badges: ['1.1', BADGE.BETA],
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    triggerText: 'Filters',
-    hasSelectedFilters: false,
-    children: (
-      <FiltersCheckboxField legend="Filters Segment 1">
-        <Checkbox label="Filters label 1" onChange={() => {}} />
-        <Checkbox label="Filters label 2" onChange={() => {}} />
-        <Checkbox label="Filters label 3" onChange={() => {}} />
-      </FiltersCheckboxField>
-    ),
-    placement: 'bottom-start',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '0.25rem', height: '100vh' }}>{Story()}</div>
-    ),
-  ],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof FiltersPopover>;
-
-export const Default: StoryObj<Args> = {
-  play: async ({ canvasElement }) => {
-    // We want to test visual regression for the drawer as well as the button, but don't want the drawer open initally outside Chromatic
-    if (isChromatic()) {
-      const canvas = within(canvasElement);
-      const filtersTrigger = await canvas.findByRole('button');
-      await userEvent.click(filtersTrigger);
-    }
-  },
-};
-
-export const WithOnClear: StoryObj<Args> = {
-  ...Default,
-  args: {
-    onClear: () => {},
-  },
-};
-
-export const WithOnApplyAndCustomButtonGroup: StoryObj<Args> = {
-  ...Default,
-  args: {
-    footerButtonGroupClassName: styles['button-group__apply-only'],
-    onApply: () => {},
-  },
-};
-
-const OverflowCheckboxFields = ({
-  placement,
-}: {
-  placement: FiltersPopoverProps['placement'];
-}) => {
-  const initialCheckedState = [
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-  ];
-  const [transientChecked, setTransientChecked] =
-    React.useState(initialCheckedState);
-  const onCheckboxChange = (index: number) => {
-    const newTransientChecked = [...transientChecked];
-    newTransientChecked[index] = !transientChecked[index];
-    setTransientChecked(newTransientChecked);
-  };
-
-  const [appliedChecked, setAppliedChecked] =
-    React.useState(initialCheckedState);
-  const onClear = () => {
-    setTransientChecked(initialCheckedState);
-    setAppliedChecked(initialCheckedState);
-  };
-  const onClose = () => {
-    setTransientChecked([...appliedChecked]);
-  };
-  const onApply = () => {
-    setAppliedChecked([...transientChecked]);
-  };
-
-  /**
-   * Counts how many filters have been applied.
-   */
-  const filterCount = Object.values(appliedChecked).reduce(
-    (count: number, status) => {
-      if (status) return count + 1;
-      else return count;
-    },
-    0,
-  );
-
-  const hasSelectedFilters = filterCount > 0;
-  const triggerText = hasSelectedFilters
-    ? `Filters (${filterCount})`
-    : 'Filters';
-
-  return (
-    <FiltersPopover
-      className={styles['filters-popover']}
-      hasSelectedFilters={hasSelectedFilters}
-      onApply={onApply}
-      onClear={onClear}
-      onClose={onClose}
-      placement={placement}
-      triggerText={triggerText}
-    >
-      <FiltersCheckboxField
-        className={styles['filters-popover__checkbox-field']}
-        legend="Filters Segment 1"
-      >
-        <Checkbox
-          checked={transientChecked[0]}
-          label="Filters long label 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-          onChange={() => onCheckboxChange(0)}
-        />
-        <Checkbox
-          checked={transientChecked[1]}
-          label="Filters label 2"
-          onChange={() => onCheckboxChange(1)}
-        />
-        <Checkbox
-          checked={transientChecked[2]}
-          label="Filters label 3"
-          onChange={() => onCheckboxChange(2)}
-        />
-      </FiltersCheckboxField>
-      <FiltersCheckboxField
-        className={styles['filters-popover__checkbox-field']}
-        legend="Filters Segment 2"
-      >
-        <Checkbox
-          checked={transientChecked[3]}
-          label="Filters label 1"
-          onChange={() => onCheckboxChange(3)}
-        />
-        <Checkbox
-          checked={transientChecked[4]}
-          label="Filters long label 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-          onChange={() => onCheckboxChange(4)}
-        />
-        <Checkbox
-          checked={transientChecked[5]}
-          label="Filters label 3"
-          onChange={() => onCheckboxChange(5)}
-        />
-      </FiltersCheckboxField>
-      <FiltersCheckboxField
-        className={styles['filters-popover__checkbox-field']}
-        legend="Filters Segment 3"
-      >
-        <Checkbox
-          checked={transientChecked[6]}
-          label="Filters label 1"
-          onChange={() => onCheckboxChange(6)}
-        />
-        <Checkbox
-          checked={transientChecked[7]}
-          label="Filters label 2"
-          onChange={() => onCheckboxChange(7)}
-        />
-        <Checkbox
-          checked={transientChecked[8]}
-          label="Filters long label 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-          onChange={() => onCheckboxChange(8)}
-        />
-      </FiltersCheckboxField>
-      <FiltersCheckboxField
-        className={styles['filters-popover__checkbox-field']}
-        legend="Filters Segment 4"
-      >
-        <Checkbox
-          checked={transientChecked[9]}
-          label="Filters label 1"
-          onChange={() => onCheckboxChange(9)}
-        />
-        <Checkbox
-          checked={transientChecked[10]}
-          label="Filters label 2"
-          onChange={() => onCheckboxChange(10)}
-        />
-        <Checkbox
-          checked={transientChecked[11]}
-          label="Filters label 3"
-          onChange={() => onCheckboxChange(11)}
-        />
-        <Checkbox
-          checked={transientChecked[12]}
-          label="Filters label 4"
-          onChange={() => onCheckboxChange(12)}
-        />
-        <Checkbox
-          checked={transientChecked[13]}
-          label="Filters label 5"
-          onChange={() => onCheckboxChange(13)}
-        />
-        <Checkbox
-          checked={transientChecked[14]}
-          label="Filters label 6"
-          onChange={() => onCheckboxChange(14)}
-        />
-      </FiltersCheckboxField>
-    </FiltersPopover>
-  );
-};
-
-export const OverflowInteractive: StoryObj<Args> = {
-  render: ({ placement }) => <OverflowCheckboxFields placement={placement} />,
-  play: async ({ canvasElement }) => {
-    // We want to test visual regression for the drawer as well as the button, but don't want the drawer open initally outside Chromatic
-    if (isChromatic()) {
-      const canvas = within(canvasElement);
-      const filtersTrigger = await canvas.findByRole('button');
-      await userEvent.click(filtersTrigger);
-    }
-  },
-};
diff --git a/src/components/FiltersPopover/FiltersPopover.test.tsx b/src/components/FiltersPopover/FiltersPopover.test.tsx
deleted file mode 100644
index e6543d881..000000000
--- a/src/components/FiltersPopover/FiltersPopover.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import * as stories from './FiltersPopover.stories';
-
-const { OverflowInteractive } = composeStories(stories);
-
-describe('<Filters />', () => {
-  generateSnapshots(stories as StoryFile, {
-    getElement: async () => {
-      const user = userEvent.setup();
-      const toggleFiltersButton = screen.getByRole('button', {
-        name: 'Filters',
-      });
-
-      if (toggleFiltersButton) {
-        await user.click(toggleFiltersButton);
-      }
-
-      return toggleFiltersButton.parentElement; // eslint-disable-line testing-library/no-node-access
-    },
-  });
-
-  it('saves filters appropriately', async () => {
-    const user = userEvent.setup();
-    render(<OverflowInteractive />);
-    const openFiltersButton = screen.getByRole('button', {
-      name: 'Filters',
-    });
-    await user.click(openFiltersButton);
-
-    const checkboxes = screen.getAllByRole('checkbox');
-
-    await user.click(checkboxes[0]);
-    await user.click(checkboxes[4]);
-    await user.click(checkboxes[9]);
-
-    const applyFiltersButton = screen.getByRole('button', {
-      name: 'Apply',
-    });
-
-    await user.click(applyFiltersButton);
-    expect(openFiltersButton).toHaveAccessibleName('Filters (3)');
-
-    await user.click(openFiltersButton);
-    await user.keyboard('{Escape}');
-    expect(openFiltersButton).toHaveAccessibleName('Filters (3)');
-
-    await user.click(openFiltersButton);
-    const clearAllFiltersButton = screen.getByRole('button', {
-      name: 'Clear All',
-    });
-
-    await user.click(clearAllFiltersButton);
-    expect(openFiltersButton).toHaveAccessibleName('Filters');
-  });
-});
diff --git a/src/components/FiltersPopover/FiltersPopover.tsx b/src/components/FiltersPopover/FiltersPopover.tsx
deleted file mode 100644
index d779de933..000000000
--- a/src/components/FiltersPopover/FiltersPopover.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import clsx from 'clsx';
-import React, { type ReactNode, useEffect, useRef } from 'react';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-import FiltersButton from '../FiltersButton';
-import type { PopoverProps } from '../Popover';
-import Popover from '../Popover';
-import styles from './FiltersPopover.module.css';
-
-export type FiltersPopoverProps = {
-  /**
-   * Form controls, form fields, or other relevant information that will be displayed in the filters popover.
-   */
-  children: React.ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * CSS class names that can be appended to the footer button group.
-   */
-  footerButtonGroupClassName?: string;
-  /**
-   * Indicates status that filters have been selected, influencing toggle button variant.
-   */
-  hasSelectedFilters?: boolean;
-  /**
-   * Callback called when the clear button is called.
-   */
-  onClear?: () => void;
-  /**
-   * Callback called when filters drawer is closed.
-   */
-  onClose?: () => void;
-  /**
-   * Callback called when the apply button is called.
-   */
-  onApply?: () => void;
-  /**
-   * Popover placement options relative to the filters trigger button.
-   */
-  placement?: PopoverProps['placement'];
-  /**
-   * Trigger element that toggles the filters drawer.
-   * Must be able to forward a ref.
-   */
-  triggerElement?: ReactNode;
-  /**
-   * Text to be placed in the button that activates the Filters Drawer
-   */
-  triggerText?: string;
-};
-
-type FiltersPopoverRenderProps = {
-  /**
-   * Closes popover action render prop passed from Popover parent.
-   */
-  close: (
-    focusableElement?: HTMLElement | React.RefObject<HTMLElement>,
-  ) => void;
-  /**
-   * Popover open status render prop passed from Popover parent.
-   */
-  open: boolean;
-} & Omit<FiltersPopoverProps, 'placement'>;
-
-/**
- * This helper component passes render props from <Popover> to handle onClose functionality
- * that HeadlessUI Popover does not provide natively.
- */
-const FiltersPopoverRender = ({
-  children,
-  className,
-  close,
-  footerButtonGroupClassName,
-  hasSelectedFilters,
-  onApply,
-  onClear,
-  onClose,
-  open,
-  triggerElement,
-  triggerText,
-  ...other
-}: FiltersPopoverRenderProps) => {
-  if (
-    !triggerElement &&
-    !triggerText &&
-    process.env.NODE_ENV !== 'production'
-  ) {
-    throw new Error(
-      'Provide triggerText as trigger button text or a custom triggerElement for FiltersPopover control',
-    );
-  }
-
-  // Get a stable reference to the onClose callback.
-  const onCloseRef = useRef(onClose);
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  /**
-   * Hooks to emulate an onClose callback for the Popover.
-   * Tracking first render is required to prevent useEffect callback from running on first render since Popover may render as closed.
-   */
-  const firstRender = useRef(true);
-  useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-    } else if (!open && onCloseRef.current) {
-      onCloseRef.current();
-    }
-  }, [open]);
-
-  const trigger = triggerElement || (
-    <FiltersButton
-      hasSelectedFilters={hasSelectedFilters}
-      // in this ternary operator, triggerText will never be falsy since we check for it earlier.
-      triggerText={triggerText!} // eslint-disable-line @typescript-eslint/no-non-null-assertion
-    />
-  );
-
-  const buttonGroupClassName = clsx(
-    styles['footer__button-group'],
-    footerButtonGroupClassName,
-  );
-
-  return (
-    <>
-      <Popover.Button as={React.Fragment}>{trigger}</Popover.Button>
-      <Popover.Content bodyClassName={styles['filters-popover']} {...other}>
-        <div className={className}>{children}</div>
-        {(onClear || onApply) && (
-          <ButtonGroup className={buttonGroupClassName}>
-            {onClear && (
-              <Button
-                onClick={() => {
-                  close();
-                  onClear();
-                }}
-              >
-                Clear All
-              </Button>
-            )}
-            {onApply && (
-              <Button
-                onClick={() => {
-                  close();
-                  onApply();
-                }}
-                variant="primary"
-              >
-                Apply
-              </Button>
-            )}
-          </ButtonGroup>
-        )}
-      </Popover.Content>
-    </>
-  );
-};
-
-/**
- * `import {FiltersPopover} from "@chanzuckerberg/eds";`
- *
- * A popover component with fields of form inputs to select filters.
- * @deprecated
- */
-export const FiltersPopover = ({
-  placement = 'bottom-start',
-  ...other
-}: FiltersPopoverProps) => {
-  return (
-    <Popover placement={placement}>
-      {({ close, open }) => (
-        <FiltersPopoverRender close={close} open={open} {...other} />
-      )}
-    </Popover>
-  );
-};
diff --git a/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap b/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap
deleted file mode 100644
index d6aad1a4c..000000000
--- a/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap
+++ /dev/null
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Filters /> Default story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:r2:"
-    aria-expanded="true"
-    class="button button--lg button--secondary button--neutral filters-button"
-    data-headlessui-state="open"
-    id="headlessui-popover-button-:r0:"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      height="1.5rem"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-      />
-    </svg>
-    Filters
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r1:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
-exports[`<Filters /> OverflowInteractive story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:rq:"
-    aria-expanded="true"
-    class="button button--lg button--secondary button--neutral filters-button"
-    data-headlessui-state="open"
-    id="headlessui-popover-button-:ro:"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      height="1.5rem"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-      />
-    </svg>
-    Filters
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:rp:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
-exports[`<Filters /> WithOnApplyAndCustomButtonGroup story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:ri:"
-    aria-expanded="true"
-    class="button button--lg button--secondary button--neutral filters-button"
-    data-headlessui-state="open"
-    id="headlessui-popover-button-:rg:"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      height="1.5rem"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-      />
-    </svg>
-    Filters
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:rh:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
-exports[`<Filters /> WithOnClear story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:ra:"
-    aria-expanded="true"
-    class="button button--lg button--secondary button--neutral filters-button"
-    data-headlessui-state="open"
-    id="headlessui-popover-button-:r8:"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      height="1.5rem"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-      />
-    </svg>
-    Filters
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r9:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
diff --git a/src/components/FiltersPopover/index.ts b/src/components/FiltersPopover/index.ts
deleted file mode 100644
index 516216455..000000000
--- a/src/components/FiltersPopover/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FiltersPopover as default } from './FiltersPopover';
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index f9030d952..3b8ef7699 100644
--- a/src/components/Grid/Grid.tsx
+++ b/src/components/Grid/Grid.tsx
@@ -57,8 +57,6 @@ export interface GridItemProps {
  *
  * Grid component used to layout Grid item components into a grid pattern. This is flexible component
  * allowing for a variety of responsive layout components.
- *
- * @deprecated
  */
 export const Grid = ({
   className,
diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
index 1f1f858ce..7cfb14e0b 100644
--- a/src/components/Heading/Heading.module.css
+++ b/src/components/Heading/Heading.module.css
@@ -2,133 +2,6 @@
     # HEADING
 \*------------------------------------*/
 
-/* Deprecated; moving all size classes to prefer prefix */
-.heading--size-headline-lg {
-  font: var(--eds-theme-typography-headline-lg);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-001-mobile);
-  }
-}
-
-.heading--size-headline-md {
-  font: var(--eds-theme-typography-headline-md);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-002-mobile);
-  }
-}
-
-.heading--size-headline-sm {
-  font: var(--eds-theme-typography-headline-sm);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-003-mobile);
-  }
-}
-
-.heading--size-title-md {
-  font: var(--eds-theme-typography-title-md);
-}
-
-.heading--size-title-sm {
-  font: var(--eds-theme-typography-title-sm);
-}
-
-.heading--size-title-xs {
-  font: var(--eds-theme-typography-title-xs);
-}
-
-/* Deprecated; not in figma */
-.heading--size-body-sm {
-  font: var(--eds-theme-typography-body-sm);
-}
-
-/* Deprecated; not in figma */
-.heading--size-body-xs {
-  font: var(--eds-theme-typography-body-xs);
-}
-
-/**
- * Heading sizes, correlate to similar numerically named typography token.
- * deprecated in favor of only using the typography presets
- */
-.heading--size-h1 {
-  font: var(--eds-theme-typography-headline-lg);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-001-mobile);
-  }
-}
-
-.heading--size-h2 {
-  font: var(--eds-theme-typography-headline-md);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-002-mobile);
-  }
-}
-
-.heading--size-h3 {
-  font: var(--eds-theme-typography-headline-sm);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-003-mobile);
-  }
-}
-
-.heading--size-h4 {
-  font: var(--eds-theme-typography-title-md);
-}
-
-.heading--size-h5 {
-  font: var(--eds-theme-typography-title-sm);
-}
-
-.heading--size-h6 {
-  font: var(--eds-theme-typography-title-xs);
-}
-
-/* Deprecated; not in figma */
-.heading--size-h7 {
-  font: var(--eds-theme-typography-body-xs);
-}
-
-/**
- * Color variants - deprecated in favor of using utility classes
- */
-.heading--error {
-  color: var(--eds-theme-color-text-utility-error);
-}
-.heading--brand {
-  color: var(--eds-theme-color-text-brand-default);
-}
-/* stylelint-disable-next-line eds/no-tier-1-color-variable */
-.heading--info {
-  color: var(--eds-color-info-700);
-}
-.heading--inherit {
-  color: inherit;
-}
-.heading--neutral-subtle {
-  color: var(--eds-theme-color-text-neutral-subtle);
-}
-.heading--neutral-medium {
-  color: var(--eds-theme-color-text-neutral-default);
-}
-.heading--neutral-strong {
-  color: var(--eds-theme-color-text-neutral-strong);
-}
-.heading--success {
-  color: var(--eds-theme-color-text-utility-success);
-}
-.heading--warning {
-  color: var(--eds-theme-color-text-utility-warning);
-}
-.heading--white {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-}
-
 /**
  * Map the component preset names to the defined typography tokens
  *
diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
index 7b89f0d68..c4e2479c4 100644
--- a/src/components/Heading/Heading.stories.tsx
+++ b/src/components/Heading/Heading.stories.tsx
@@ -14,74 +14,82 @@ export default {
 type Args = React.ComponentProps<typeof Heading>;
 type Story = StoryObj<Args>;
 
+/**
+ * The default `Heading` sets a level-one header tag `<h1>` with the prescribed default preset.
+ */
+export const Default: Story = {
+  args: {
+    children: 'Default Heading',
+  },
+};
+
+/**
+ * When using `h1`, the default preset maps to `headline-lg`
+ */
 export const Heading1: Story = {
   args: {
-    size: 'h1',
-    preset: 'headline-lg',
+    as: 'h1',
     children: 'Heading 1',
   },
 };
 
+/**
+ * When using `h2`, the default preset maps to `headline-md`
+ */
 export const Heading2: Story = {
   args: {
-    size: 'h2',
-    preset: 'headline-md',
+    as: 'h2',
     children: 'Heading 2',
   },
 };
 
+/**
+ * When using `h3`, the default preset maps to `headline-sm`
+ */
 export const Heading3: Story = {
   args: {
-    size: 'h3',
-    preset: 'headline-sm',
+    as: 'h3',
     children: 'Heading 3',
   },
 };
 
+/**
+ * When using `h4`, the default preset maps to `title-md`
+ */
 export const Heading4: Story = {
   args: {
-    size: 'h4',
-    preset: 'title-md',
+    as: 'h4',
     children: 'Heading 4',
   },
 };
 
+/**
+ * When using `h5`, the default preset maps to `title-sm`
+ */
 export const Heading5: Story = {
   args: {
-    size: 'h5',
-    preset: 'title-sm',
+    as: 'h5',
     children: 'Heading 5',
   },
 };
 
+/**
+ * When using `h6`, the default preset maps to `title-xs`
+ */
 export const Heading6: Story = {
   args: {
-    size: 'h6',
-    preset: 'title-xs',
+    as: 'h6',
     children: 'Heading 6',
   },
 };
 
-export const Heading7: Story = {
-  args: {
-    size: 'h7',
-    children: 'Heading 7',
-  },
-};
-
 /**
  * Here we demonstrate how to use utility classes to augment the headings.
- * Note that when present, `preset` will override the deprecated props.
  */
 export const UsingColorTokens: Story = {
   render: (args) => (
     <div>
-      <Heading
-        {...args}
-        className="text-utility-warning"
-        preset="title-md"
-        size="h1"
-      >
+      <Heading {...args} className="text-utility-warning" preset="title-md">
         using <code>text-utility-warning</code> utility class
       </Heading>
       <Heading
@@ -89,25 +97,18 @@ export const UsingColorTokens: Story = {
         as="h2"
         className="text-utility-success"
         preset="title-md"
-        size="h3"
       >
-        using <code>text-utility-success</code> utility class
+        using <code>text-utility-success</code> utility class and preset
+        override
       </Heading>
-      <Heading
-        {...args}
-        className="text-utility-error"
-        preset="title-md"
-        size="h3"
-        variant="white"
-      >
+      <Heading {...args} className="text-utility-error" preset="title-md">
         using <code>text-utility-error</code> utility class
       </Heading>
       <Heading
+        className="text-[var(--eds-theme-color-text-utility-success)]"
         preset="title-md"
-        size="h4"
-        style={{ color: 'var(--eds-theme-color-text-utility-success)' }}
       >
-        using inline color
+        using color with token in utility class and preset override
       </Heading>
     </div>
   ),
diff --git a/src/components/Heading/Heading.test.tsx b/src/components/Heading/Heading.test.tsx
index b98036882..35f85102b 100644
--- a/src/components/Heading/Heading.test.tsx
+++ b/src/components/Heading/Heading.test.tsx
@@ -1,25 +1,17 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Heading } from './Heading';
 import * as stories from './Heading.stories';
-import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock';
 
 describe('<Heading />', () => {
-  const consoleWarnMock = consoleWarnMockHelper();
-
   generateSnapshots(stories as StoryFile);
 
   it('should add the passthrough className', () => {
-    render(
-      <Heading className="passthrough" size="h1">
-        Some Heading
-      </Heading>,
-    );
+    render(<Heading className="passthrough">Some Heading</Heading>);
     expect(screen.getByText('Some Heading').classList).toContain('passthrough');
   });
 
@@ -34,9 +26,7 @@ describe('<Heading />', () => {
       };
       return (
         <>
-          <Heading ref={refContainer} size="h1">
-            Ref container parent test
-          </Heading>
+          <Heading ref={refContainer}>Ref container parent test</Heading>
           <button onClick={onButtonClick}>Test ref</button>
         </>
       );
@@ -45,14 +35,4 @@ describe('<Heading />', () => {
     expect(screen.getByText('Ref container parent test')).toBeTruthy();
     await user.click(screen.getByRole('button'));
   });
-
-  it('should display warning message when attempting to use h7 size', () => {
-    const { Heading7 } = composeStories(stories);
-    render(<Heading7 />);
-    expect(consoleWarnMock).toHaveBeenCalledTimes(1);
-    expect(consoleWarnMock).toHaveBeenCalledWith(
-      `The h7 size is deprecated and will be removed in an upcoming release.\n`,
-      'Please bump this heading up to a larger size if possible.',
-    );
-  });
 });
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 7988aa108..d83031380 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -3,80 +3,15 @@ import React, { forwardRef } from 'react';
 import type { Preset } from '../../util/variant-types';
 import styles from './Heading.module.css';
 
-/**
- * @deprecated
- */
-export const VARIANTS = [
-  'inherit',
-  'neutral-subtle',
-  'neutral-medium',
-  'neutral-strong',
-  'brand',
-  'success',
-  'warning',
-  'error',
-  'white',
-  /**
-   * @deprecated Info variant is deprecated.
-   */ 'info',
-] as const;
-
-/**
- * @deprecated
- */
-export type Variant = (typeof VARIANTS)[number];
-
 export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-/**
- * @deprecated
- */
-export type TokenSize =
-  | 'headline-lg'
-  | 'headline-md'
-  | 'headline-sm'
-  | 'title-md'
-  | 'title-sm'
-  | 'body-sm'
-  | 'body-xs'
-  | 'title-xs';
-
-/**
- * @deprecated
- */
-export type HeadingSize = HeadingElement | TokenSize | /** @deprecated */ 'h7';
-
-// For now, "h1"-"h6" sizes point to the old type ramp, while
-// "headline-*" and "title-*" sizes point to the new type ramp.
-// These will be brought in sync with the next major release.
-/**
- * @deprecated
- */
-const TOKEN_TO_SIZE: Record<HeadingSize, HeadingElement> = {
-  'headline-lg': 'h1',
-  'headline-md': 'h2',
-  'headline-sm': 'h3',
-  'title-md': 'h4',
-  'title-sm': 'h5',
-  'body-sm': 'h6',
-  'body-xs': 'h6',
-  'title-xs': 'h5',
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  h7: 'h6',
-};
-
-type HeadingProps = {
+type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
   /**
-   * This prop can be used to specify which size heading should
+   * This prop can be used to specify which level heading should
    * actually be rendered, in the case that you want to render an element
-   * as one heading but style it as if it were another. If both an `as` prop
-   * and a `size` prop are passed, the `as` will be used to determine the element
-   * and the `size` will be used to determine the styling.
+   * as one heading but style it as if it were another.
+   *
+   * **Default is `"h1"`**.
    */
   as?: HeadingElement;
   children: React.ReactNode;
@@ -85,19 +20,23 @@ type HeadingProps = {
   /**
    * Prop to set the desired typography value used in design. Acceptable values
    * match those used across the design system.
+   *
+   * For details, see https://chanzuckerberg.github.io/edu-design-system/?path=/story/design-tokens-tier-2-usage--typography
    */
   preset?: Preset;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  size: HeadingSize;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  variant?: Variant;
-} & React.HTMLAttributes<HTMLHeadingElement>;
+};
+
+/**
+ * Given a certain HeadingElement, what is the default preset to use?
+ */
+const headingPresetMap: Record<HeadingElement, Preset> = {
+  h1: 'headline-lg',
+  h2: 'headline-md',
+  h3: 'headline-sm',
+  h4: 'title-md',
+  h5: 'title-sm',
+  h6: 'title-xs',
+};
 
 /**
  * `import {Heading} from "@chanzuckerberg/eds";`
@@ -108,41 +47,14 @@ type HeadingProps = {
  */
 export const Heading = forwardRef(
   (
-    {
-      as,
-      children,
-      className,
-      preset,
-      size,
-      variant,
-      /**
-       * Components that wrap typography sometimes require properties such as
-       * event handlers, tabIndex, etc. and/or other native heading element
-       * attributes to be passed down into the element.
-       */ ...other
-    }: HeadingProps,
+    { as = 'h1', children, className, preset, ...other }: HeadingProps,
     ref: React.ForwardedRef<HTMLHeadingElement>,
   ) => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (variant === 'info') {
-        console.warn(
-          'Info variant is deprecated and will be removed in an upcoming release. Please use the consider another variant instead.',
-        );
-      }
-      if (size === 'h7') {
-        console.warn(
-          `The ${size} size is deprecated and will be removed in an upcoming release.\n`,
-          'Please bump this heading up to a larger size if possible.',
-        );
-      }
-    }
-
-    const TagName = as || TOKEN_TO_SIZE[size];
+    const TagName = as;
     const componentClassName = clsx(
       styles['heading'],
       preset && styles[`heading--${preset}`],
-      !preset && size && styles[`heading--size-${size}`],
-      !preset && variant && styles[`heading--${variant}`],
+      !preset && styles[`heading--${headingPresetMap[as]}`],
       className,
     );
     return (
diff --git a/src/components/Heading/__snapshots__/Heading.test.tsx.snap b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
index 9aad3ef25..1607e2ef9 100644
--- a/src/components/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Heading /> Default story renders snapshot 1`] = `
+<h1
+  class="heading heading--headline-lg"
+>
+  Default Heading
+</h1>
+`;
+
 exports[`<Heading /> Heading1 story renders snapshot 1`] = `
 <h1
   class="heading heading--headline-lg"
@@ -48,14 +56,6 @@ exports[`<Heading /> Heading6 story renders snapshot 1`] = `
 </h6>
 `;
 
-exports[`<Heading /> Heading7 story renders snapshot 1`] = `
-<h6
-  class="heading heading--size-h7"
->
-  Heading 7
-</h6>
-`;
-
 exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
 <div>
   <h1
@@ -74,9 +74,9 @@ exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
     <code>
       text-utility-success
     </code>
-     utility class
+     utility class and preset override
   </h2>
-  <h3
+  <h1
     class="heading heading--title-md text-utility-error"
   >
     using 
@@ -84,11 +84,11 @@ exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
       text-utility-error
     </code>
      utility class
-  </h3>
-  <h4
-    class="heading heading--title-md"
+  </h1>
+  <h1
+    class="heading heading--title-md text-[var(--eds-theme-color-text-utility-success)]"
   >
-    using inline color
-  </h4>
+    using color with token in utility class and preset override
+  </h1>
 </div>
 `;
diff --git a/src/components/Heading/index.ts b/src/components/Heading/index.ts
index 602d9873e..5d16483e2 100644
--- a/src/components/Heading/index.ts
+++ b/src/components/Heading/index.ts
@@ -1,2 +1,2 @@
 export { Heading as default } from './Heading';
-export type { HeadingElement, HeadingSize } from './Heading';
+export type { HeadingElement } from './Heading';
diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css
index 1332b5fbd..814f5ba91 100644
--- a/src/components/HorizontalStepper/HorizontalStepper.module.css
+++ b/src/components/HorizontalStepper/HorizontalStepper.module.css
@@ -91,6 +91,8 @@
 .horizontal-step__text {
   /* Hides text for smaller screen sizes. */
   display: none;
+  font-weight: var(--eds-font-weight-bold);
+  
   @media all and (min-width: $eds-bp-md) {
     display: inline;
     /* Hides overflow text with ellipsis. */
diff --git a/src/components/HorizontalStepper/HorizontalStepper.tsx b/src/components/HorizontalStepper/HorizontalStepper.tsx
index 1d536ef3f..4afcbb381 100644
--- a/src/components/HorizontalStepper/HorizontalStepper.tsx
+++ b/src/components/HorizontalStepper/HorizontalStepper.tsx
@@ -192,9 +192,7 @@ export const HorizontalStep = ({
       <Text
         as="span"
         className={styles['horizontal-step__text']}
-        size="sm"
-        variant="inherit"
-        weight="bold"
+        preset="body-sm"
       >
         {text}
       </Text>
diff --git a/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap b/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
index ac70d6a51..2c99456f5 100644
--- a/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
+++ b/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
         1
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 1
       </span>
@@ -54,7 +54,7 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 2
       </span>
@@ -90,7 +90,7 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 3
       </span>
@@ -126,7 +126,7 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 4
       </span>
@@ -162,7 +162,7 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 5
       </span>
@@ -199,7 +199,7 @@ exports[`<HorizontalStepper /> CompletedAllSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 1
       </span>
@@ -229,7 +229,7 @@ exports[`<HorizontalStepper /> CompletedAllSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 2
       </span>
@@ -259,7 +259,7 @@ exports[`<HorizontalStepper /> CompletedAllSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 3
       </span>
@@ -289,7 +289,7 @@ exports[`<HorizontalStepper /> CompletedAllSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 4
       </span>
@@ -319,7 +319,7 @@ exports[`<HorizontalStepper /> CompletedAllSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 5
       </span>
@@ -362,7 +362,7 @@ exports[`<HorizontalStepper /> HorizontalSteps story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -378,7 +378,7 @@ exports[`<HorizontalStepper /> HorizontalSteps story renders snapshot 1`] = `
         1
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -404,7 +404,7 @@ exports[`<HorizontalStepper /> HorizontalSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -431,7 +431,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         1
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -447,7 +447,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         2
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -463,7 +463,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         3
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -479,7 +479,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         4
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -495,7 +495,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         5
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -511,7 +511,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         6
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -527,7 +527,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         7
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -543,7 +543,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         8
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -559,7 +559,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         9
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -575,7 +575,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         10
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -591,7 +591,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         21
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -607,7 +607,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         32
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -623,7 +623,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         43
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -639,7 +639,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         54
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -655,7 +655,7 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
         65
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Horizontal step
       </span>
@@ -682,7 +682,7 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
         1
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 1
       </span>
@@ -718,7 +718,7 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 2
       </span>
@@ -754,7 +754,7 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 3
       </span>
@@ -790,7 +790,7 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 4
       </span>
@@ -826,7 +826,7 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 5
       </span>
@@ -863,7 +863,7 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 1
       </span>
@@ -893,7 +893,7 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 2
       </span>
@@ -923,7 +923,7 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 3
       </span>
@@ -953,7 +953,7 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 4
       </span>
@@ -973,7 +973,7 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
         5
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 5
       </span>
@@ -1010,7 +1010,7 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 1
       </span>
@@ -1040,7 +1040,7 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
         />
       </svg>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 2
       </span>
@@ -1060,7 +1060,7 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
         3
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 3
       </span>
@@ -1096,7 +1096,7 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 4
       </span>
@@ -1132,7 +1132,7 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
         </svg>
       </span>
       <span
-        class="text text--sm text--inherit text--bold-weight horizontal-step__text"
+        class="text text--body-sm horizontal-step__text"
       >
         Step 5
       </span>
diff --git a/src/components/Icon/__snapshots__/Icon.test.ts.snap b/src/components/Icon/__snapshots__/Icon.test.ts.snap
index ece16ff2a..c2420fb14 100644
--- a/src/components/Icon/__snapshots__/Icon.test.ts.snap
+++ b/src/components/Icon/__snapshots__/Icon.test.ts.snap
@@ -2808,7 +2808,7 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
 
 exports[`<Icon /> InText story renders snapshot 1`] = `
 <p
-  class="text text--body"
+  class="text text--body-md"
 >
   The svg icon defaults to the surrounding text size (
   <svg
diff --git a/src/components/InlineNotification/InlineNotification.module.css b/src/components/InlineNotification/InlineNotification.module.css
index 6a06310ca..f1ce87791 100644
--- a/src/components/InlineNotification/InlineNotification.module.css
+++ b/src/components/InlineNotification/InlineNotification.module.css
@@ -27,7 +27,6 @@
  */
 .inline-notification__text {
   margin: var(--eds-size-half);
-  font: var(--eds-theme-typography-label-md-subtle);
 }
 
 /**
@@ -51,12 +50,6 @@
   border: var(--eds-theme-border-width) solid
     var(--eds-theme-color-border-utility-warning-strong);
 }
-.inline-notification--yield {
-  @mixin messagingYield;
-
-  border: var(--eds-theme-border-width) solid
-    var(--eds-theme-color-border-grade-revise-strong);
-}
 .inline-notification--subtle {
   background-color: var(--eds-theme-color-background-neutral-default);
 }
@@ -74,14 +67,3 @@
 .inline-notification--full-width-subtle {
   background-color: var(--eds-theme-color-background-neutral-subtle);
 }
-/**
- * Inactive variant of the full width inline notification.
- */
-.inline-notification__icon--inactive {
-  display: none;
-}
-.inline-notification__text--inactive {
-  /* Creates enough space to keep text in the same place. */
-  padding-left: var(--eds-size-3); 
-  color: var(--eds-theme-color-text-neutral-subtle);
-}
diff --git a/src/components/InlineNotification/InlineNotification.stories.tsx b/src/components/InlineNotification/InlineNotification.stories.tsx
index c9737eca6..36eef8750 100644
--- a/src/components/InlineNotification/InlineNotification.stories.tsx
+++ b/src/components/InlineNotification/InlineNotification.stories.tsx
@@ -17,7 +17,7 @@ export default {
       control: {
         type: 'select',
       },
-      options: VARIANTS.filter((item) => item !== 'yield'),
+      options: VARIANTS,
     },
   },
 } as Meta<Args>;
@@ -33,7 +33,7 @@ export const LongText: StoryObj<Args> = {
 };
 
 const getVariants = (optionalArgs: Omit<Args, 'text' | 'variant'> = {}) =>
-  VARIANTS.filter((item) => item !== 'yield').map((variant) => {
+  VARIANTS.map((variant) => {
     return (
       <InlineNotification
         key={variant}
diff --git a/src/components/InlineNotification/InlineNotification.tsx b/src/components/InlineNotification/InlineNotification.tsx
index eeb79c1f7..75eca5e6c 100644
--- a/src/components/InlineNotification/InlineNotification.tsx
+++ b/src/components/InlineNotification/InlineNotification.tsx
@@ -4,7 +4,7 @@ import Icon, { type IconName } from '../Icon';
 import Text from '../Text';
 import styles from './InlineNotification.module.css';
 
-export const VARIANTS = ['brand', 'success', 'warning', 'yield'] as const;
+export const VARIANTS = ['brand', 'success', 'warning'] as const;
 
 const variantToIconAssetsMap: {
   [key in Variant]: {
@@ -12,7 +12,7 @@ const variantToIconAssetsMap: {
       IconName,
       'info' | 'check-circle' | 'warning' | 'error-inverted'
     >;
-    title: 'info' | 'success' | 'alert' | 'yield';
+    title: 'info' | 'success' | 'alert';
   };
 } = {
   brand: {
@@ -27,10 +27,6 @@ const variantToIconAssetsMap: {
     icon: 'warning',
     title: 'alert',
   },
-  yield: {
-    icon: 'error-inverted',
-    title: 'yield',
-  },
 };
 
 type Variant = (typeof VARIANTS)[number];
@@ -40,16 +36,6 @@ type Props = {
    * CSS class names that can be appended to the component for styling.
    */
   className?: string;
-  /**
-   * Indicates an inactive state for the full width variant where the icon
-   * will be hidden and the text will be lighter.
-   * Overrides variant prop and isStrong prop as a result.
-   * Only to be used with isFullWidth.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  inactive?: boolean;
   /**
    * Toggles notification that fills the full width of its container.
    */
@@ -64,8 +50,6 @@ type Props = {
   text: React.ReactNode;
   /**
    * The color variant of the tag.
-   *
-   * **Deprecated**. "Yield" will be removed in the next major version.
    */
   variant: Variant;
 };
@@ -77,38 +61,28 @@ type Props = {
  */
 export const InlineNotification = ({
   className,
-  inactive,
   isFullWidth,
   isStrong,
   text,
   variant,
   ...other
 }: Props) => {
-  if (!isFullWidth && inactive && process.env.NODE_ENV !== 'production') {
-    throw new Error('inactive prop must be used with isFullWidth prop.');
-  }
   const subtle = !isStrong;
   const componentClassName = clsx(
     styles['inline-notification'],
     styles[`inline-notification--${variant}`],
     subtle && styles['inline-notification--subtle'],
     isFullWidth && styles[`inline-notification--full-width`],
-    isFullWidth &&
-      (subtle || inactive) &&
-      styles[`inline-notification--full-width-subtle`],
+    isFullWidth && subtle && styles[`inline-notification--full-width-subtle`],
     className,
   );
 
   const iconClassName = clsx(
     styles['inline-notification__icon'],
     styles[`inline-notification__icon--${variant}`],
-    inactive && styles[`inline-notification__icon--inactive`],
   );
 
-  const textClassName = clsx(
-    styles[`inline-notification__text`],
-    inactive && styles[`inline-notification__text--inactive`],
-  );
+  const textClassName = clsx(styles[`inline-notification__text`]);
 
   return (
     <div className={componentClassName} {...other}>
@@ -119,11 +93,7 @@ export const InlineNotification = ({
         size="1.5rem"
         title={variantToIconAssetsMap[variant].title}
       />
-      <Text
-        as="span"
-        className={textClassName}
-        variant={variant === 'yield' ? 'neutral-medium' : variant}
-      >
+      <Text as="span" className={textClassName} preset="label-md-subtle">
         {text}
       </Text>
     </div>
diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
index 4d403cff3..c54fef784 100644
--- a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
+++ b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
@@ -22,7 +22,7 @@ exports[`<InlineNotification /> FullWidthLongText story renders snapshot 1`] = `
     />
   </svg>
   <span
-    class="text text--body text--success inline-notification__text"
+    class="text text--label-md-subtle inline-notification__text"
   >
     Long text inline notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </span>
@@ -54,7 +54,7 @@ exports[`<InlineNotification /> FullWidthStrongVariants story renders snapshot 1
       />
     </svg>
     <span
-      class="text text--body text--brand inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       brand inline notification lorem ipsum
     </span>
@@ -80,7 +80,7 @@ exports[`<InlineNotification /> FullWidthStrongVariants story renders snapshot 1
       />
     </svg>
     <span
-      class="text text--body text--success inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       success inline notification lorem ipsum
     </span>
@@ -106,7 +106,7 @@ exports[`<InlineNotification /> FullWidthStrongVariants story renders snapshot 1
       />
     </svg>
     <span
-      class="text text--body text--warning inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       warning inline notification lorem ipsum
     </span>
@@ -136,7 +136,7 @@ exports[`<InlineNotification /> FullWidthSuccess story renders snapshot 1`] = `
     />
   </svg>
   <span
-    class="text text--body text--success inline-notification__text"
+    class="text text--label-md-subtle inline-notification__text"
   >
     Inline notifications lorem ipsum text
   </span>
@@ -168,7 +168,7 @@ exports[`<InlineNotification /> FullWidthVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--brand inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       brand inline notification lorem ipsum
     </span>
@@ -194,7 +194,7 @@ exports[`<InlineNotification /> FullWidthVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--success inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       success inline notification lorem ipsum
     </span>
@@ -220,7 +220,7 @@ exports[`<InlineNotification /> FullWidthVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--warning inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       warning inline notification lorem ipsum
     </span>
@@ -250,7 +250,7 @@ exports[`<InlineNotification /> LongText story renders snapshot 1`] = `
     />
   </svg>
   <span
-    class="text text--body text--success inline-notification__text"
+    class="text text--label-md-subtle inline-notification__text"
   >
     Long text inline notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </span>
@@ -282,7 +282,7 @@ exports[`<InlineNotification /> StrongVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--brand inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       brand inline notification lorem ipsum
     </span>
@@ -308,7 +308,7 @@ exports[`<InlineNotification /> StrongVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--success inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       success inline notification lorem ipsum
     </span>
@@ -334,7 +334,7 @@ exports[`<InlineNotification /> StrongVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--warning inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       warning inline notification lorem ipsum
     </span>
@@ -367,7 +367,7 @@ exports[`<InlineNotification /> SubtleVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--brand inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       brand inline notification lorem ipsum
     </span>
@@ -393,7 +393,7 @@ exports[`<InlineNotification /> SubtleVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--success inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       success inline notification lorem ipsum
     </span>
@@ -419,7 +419,7 @@ exports[`<InlineNotification /> SubtleVariants story renders snapshot 1`] = `
       />
     </svg>
     <span
-      class="text text--body text--warning inline-notification__text"
+      class="text text--label-md-subtle inline-notification__text"
     >
       warning inline notification lorem ipsum
     </span>
@@ -449,7 +449,7 @@ exports[`<InlineNotification /> Success story renders snapshot 1`] = `
     />
   </svg>
   <span
-    class="text text--body text--success inline-notification__text"
+    class="text text--label-md-subtle inline-notification__text"
   >
     Inline notifications lorem ipsum text
   </span>
diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
index 6c86c1c98..406ec1bfe 100644
--- a/src/components/InputField/InputField.tsx
+++ b/src/components/InputField/InputField.tsx
@@ -77,13 +77,6 @@ export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    * Indicates that field is required for form to be successfully submitted
    */
   required?: boolean;
-  /**
-   * String for the required label to add additional information if needed. Currently not being used.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  requiredLabel?: string;
   /**
    * Title attribute on input
    */
@@ -233,7 +226,6 @@ export const InputField: InputFieldType = forwardRef(
                 as="span"
                 className={requiredTextClassName}
                 preset="body-sm"
-                size="sm"
               >
                 Required
               </Text>
diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
index 3ecfc7798..e42824b44 100644
--- a/src/components/Label/Label.module.css
+++ b/src/components/Label/Label.module.css
@@ -14,16 +14,6 @@
   display: inline-block;
 }
 
-/**
- * Label flag
- *
- * A flag to mark whether or not a field is required or optional. Currently a flag
- * is only present for optional fields.
- */
-.label__flag {
-  font: var(--eds-theme-typography-body-sm);
-}
-
 /**
  * Label after
  *
diff --git a/src/components/Label/Label.stories.ts b/src/components/Label/Label.stories.ts
deleted file mode 100644
index f83f1d533..000000000
--- a/src/components/Label/Label.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type React from 'react';
-
-import { Label } from './Label';
-
-export default {
-  title: 'Components/Label',
-  component: Label,
-  parameters: {
-    badges: ['1.0'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Label>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    text: 'Label',
-    required: true,
-  },
-};
diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
new file mode 100644
index 000000000..864c6d6b6
--- /dev/null
+++ b/src/components/Label/Label.stories.tsx
@@ -0,0 +1,39 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Label } from './Label';
+import Tooltip from '../Tooltip';
+
+export default {
+  title: 'Components/Label',
+  component: Label,
+  parameters: {
+    badges: ['1.0'],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof Label>;
+
+/**
+ * Labels can denote some text to label the content, and whether that content is marked as required.
+ */
+export const Default: StoryObj<Args> = {
+  args: {
+    text: 'Label',
+    required: true,
+  },
+};
+
+/**
+ * You can use `labelAfter` to affix additional functionality to the label, like an optional `<Tooltip>`.
+ */
+export const LabelAfter: StoryObj<Args> = {
+  args: {
+    text: 'Label',
+    labelAfter: (
+      <Tooltip text="Test">
+        <span>*</span>
+      </Tooltip>
+    ),
+  },
+};
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 8e1d842c3..80b93b0f4 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
+
+import Text from '../Text';
 import styles from './Label.module.css';
 
 export interface Props {
@@ -24,26 +26,10 @@ export interface Props {
    * Slot for node to appear directly after field label. Typically used to include a Toolip
    */
   labelAfter?: ReactNode;
-  /**
-   * String for the optional label.
-   *
-   * **Default is `"(optional)"`**
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  optionalLabel?: string;
   /**
    * Indicates that field is required for form to be successfully submitted.
    */
   required?: boolean;
-  /**
-   * String for the required label to add additional information if needed.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  requiredLabel?: string;
   /**
    * The label text string
    */
@@ -61,9 +47,7 @@ export const Label = ({
   htmlFor,
   id,
   labelAfter,
-  optionalLabel = '(optional)',
   required = true,
-  requiredLabel,
   text,
   ...other
 }: Props) => {
@@ -76,14 +60,10 @@ export const Label = ({
   return (
     <label className={componentClassName} htmlFor={htmlFor} id={id} {...other}>
       {text}{' '}
-      {!required && (
-        <span className={styles['label__flag']}>{optionalLabel}</span>
-      )}
-      {requiredLabel && (
-        <span className={styles['label__flag']}>{requiredLabel}</span>
-      )}
       {labelAfter && (
-        <span className={styles['label__after']}>{labelAfter}</span>
+        <Text as="span" preset="body-sm">
+          {labelAfter}
+        </Text>
       )}
     </label>
   );
diff --git a/src/components/Label/__snapshots__/Label.test.ts.snap b/src/components/Label/__snapshots__/Label.test.ts.snap
index 92a3428c6..6ac6118ce 100644
--- a/src/components/Label/__snapshots__/Label.test.ts.snap
+++ b/src/components/Label/__snapshots__/Label.test.ts.snap
@@ -8,3 +8,19 @@ exports[`<Label /> Default story renders snapshot 1`] = `
    
 </label>
 `;
+
+exports[`<Label /> LabelAfter story renders snapshot 1`] = `
+<label
+  class="label"
+>
+  Label
+   
+  <span
+    class="text text--body-sm"
+  >
+    <span>
+      *
+    </span>
+  </span>
+</label>
+`;
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
deleted file mode 100644
index 181beb93e..000000000
--- a/src/components/Layout/Layout.module.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/*------------------------------------*\
-    # LAYOUT
-\*------------------------------------*/
-
-/**
- * Component that controls an overarching page layout.
- *
- * By default, the layout renders a fixed-position left sidebar on larger screens.
- */
-.layout {
-  display: grid;
-  gap: var(--eds-size-3);
-  /**
-   * minmax(0, 1fr) used to prevent content from overflowing the viewport
-   * when items are stacked
-   */
-  grid-template-columns: minmax(0, 1fr);
-
-  @media all and (min-width: $eds-bp-xl) {
-    grid-template-columns: auto 1fr;
-  }
-}
-
-/**
- * Layout right sidebar variant
- */
-.layout--right-sidebar {
-  @media all and (min-width: $eds-bp-xl) {
-    grid-template-columns: 1fr auto;
-  }
-}
-
-/**
- * Layout 67-33 variant
- */
-.layout--67-33 {
-  @media all and (min-width: $eds-bp-xl) {
-    grid-template-columns: 2fr 1fr;
-  }
-}
-
-/**
- * Layout 50-50 variant with two main columns of equal width
- */
-.layout--50-50 {
-  @media all and (min-width: $eds-bp-xl) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-/**
- * Layout 33-67 variant
- */
-.layout--33-67 {
-  @media all and (min-width: $eds-bp-xl) {
-    grid-template-columns: 1fr 2fr;
-  }
-}
-
-/**
- * Layout no gap variant
- */
-.layout--gap-none {
-  gap: 0;
-}
-
-/**
- * Layout lg-xl gap variant
- */
-.layout--gap-lg-xl {
-  gap: var(--eds-size-5);
-  @media all and (min-width: $eds-bp-xl) {
-    gap: var(--eds-size-12);
-  }
-}
-
-/**
- * Sidebar layout section region
- * 
- * Contains the global header and site navigation.
- */
-.layout__section--sidebar {
-  @media all and (min-width: $eds-bp-xl) {
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 13.5rem;
-    z-index: 500;
-  }
-
-  /**
- * Layout 67-33 variant
- */
-  .layout--67-33 & {
-    @media all and (min-width: $eds-bp-xl) {
-      width: 100%;
-    }
-  }
-
-  /**
- * Layout 33-67 variant
- */
-  .layout--33-67 & {
-    @media all and (min-width: $eds-bp-xl) {
-      width: 100%;
-    }
-  }
-}
-
-/**
- * Sidebar layout section region within right sidebar
- */
-.layout--right-sidebar > .layout__section--sidebar {
-  order: 2;
-}
-
-/**
- * Sidebar layout section region within wide sidebar variant
- *
- * Width should be larger than the default.
- */
-.layout--sidebar-wide > .layout__section--sidebar {
-  @media all and (min-width: $eds-bp-xl) {
-    width: 22rem;
-  }
-}
-
-/**
- * Main layout section region 
- *
- * Contains the main page content.
- */
-.layout__section--main {
-  @media all and (min-width: $eds-bp-xl) {
-    width: 100%;
-    height: 100vh;
-  }
-}
-
-/**
- * Main layout section region within right sidebar
- *
- * Place below the right sidebar on small screens..
- */
-.layout--right-sidebar > .layout__section--main {
-  /* Place to the left of the sidebar on large screens. */
-  order: 1;
-}
diff --git a/src/components/Layout/Layout.stories.tsx b/src/components/Layout/Layout.stories.tsx
deleted file mode 100644
index c029a1e48..000000000
--- a/src/components/Layout/Layout.stories.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Layout } from './Layout';
-import LayoutSection from '../LayoutSection';
-
-export default {
-  title: 'Components/Layout',
-  component: Layout,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  args: {
-    children: (
-      <>
-        <LayoutSection region="sidebar">
-          <div className="fpo">Sidebar Layout Section</div>
-        </LayoutSection>
-        <LayoutSection region="main">
-          <div className="fpo">Main Layout Section</div>
-        </LayoutSection>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Layout>;
-
-export const Default: StoryObj<Args> = {};
-
-export const GapNone: StoryObj<Args> = {
-  args: {
-    gap: 'none',
-  },
-};
-
-export const GapLgXl: StoryObj<Args> = {
-  args: {
-    gap: 'lg-xl',
-  },
-};
-
-export const SixtySevenThirtyThree: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <LayoutSection region="main">
-          <div className="fpo">Main Layout Section</div>
-        </LayoutSection>
-        <LayoutSection region="sidebar">
-          <div className="fpo">Sidebar Layout Section</div>
-        </LayoutSection>
-      </>
-    ),
-    variant: '67-33',
-  },
-};
-
-export const FiftyFifty: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <LayoutSection region="main">
-          <div className="fpo">Main Layout Section 1</div>
-        </LayoutSection>
-        <LayoutSection region="main">
-          <div className="fpo">Main Layout Section 2</div>
-        </LayoutSection>
-      </>
-    ),
-    variant: '50-50',
-  },
-};
-
-export const ThirtyThreeSixtySeven: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <LayoutSection region="sidebar">
-          <div className="fpo">Sidebar Layout Section</div>
-        </LayoutSection>
-        <LayoutSection region="main">
-          <div className="fpo">Main Layout Section</div>
-        </LayoutSection>
-      </>
-    ),
-    variant: '33-67',
-  },
-};
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
deleted file mode 100644
index 93b360158..000000000
--- a/src/components/Layout/Layout.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from './Layout.module.css';
-
-export interface Props {
-  /**
-   * Behavior
-   */
-  behavior?: 'fixed-sidebar';
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Sidebar property
-   *
-   * Adjust the gap between layout sections.
-   */
-  gap?: 'none' | 'lg-xl';
-  /**
-   * Sidebar property
-   *
-   * Adjust the size of the sidebar:
-   * - **right-sidebar** renders a main section with a fixed width right sidebar
-   * - **67-33** renders a 66.66% main section, 33.33% right sidebar section
-   * - **50-50** renders a 50% main section, 50% sidebar section
-   * - **33-67** renders a 66.66% main section, 33.33% left sidebar section
-   */
-  variant?: 'right-sidebar' | '50-50' | '67-33' | '33-67';
-}
-
-/**
- * The Layout components are deprecated and will be removed in an upcoming release.
- * Instead, please make use of utility libraries, like Tailwind CSS:
- * * https://tailwindcss.com/docs/display
- * * https://tailwindcss.com/docs/container
- * * https://tailwindcss.com/docs/columns
- *
- * `import {Layout} from "@chanzuckerberg/eds";`
- *
- * Component that controls an overarching page layout. By default, the layout renders
- * a fixed-position left sidebar on larger screens.
- *
- * @deprecated
- */
-export const Layout = ({
-  behavior,
-  children,
-  className,
-  variant,
-  gap,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['layout'],
-    variant && styles[`layout--${variant}`],
-    behavior === 'fixed-sidebar' && styles['layout--fixed-sidebar'],
-    gap && styles[`layout--gap-${gap}`],
-    className,
-  );
-
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/Layout/__snapshots__/Layout.test.ts.snap b/src/components/Layout/__snapshots__/Layout.test.ts.snap
deleted file mode 100644
index a011613bb..000000000
--- a/src/components/Layout/__snapshots__/Layout.test.ts.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Layout /> Default story renders snapshot 1`] = `
-<div
-  class="layout"
->
-  <div
-    class="layout__section layout__section--sidebar"
-  >
-    <div
-      class="fpo"
-    >
-      Sidebar Layout Section
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Layout /> FiftyFifty story renders snapshot 1`] = `
-<div
-  class="layout layout--50-50"
->
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section 1
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section 2
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Layout /> GapLgXl story renders snapshot 1`] = `
-<div
-  class="layout layout--gap-lg-xl"
->
-  <div
-    class="layout__section layout__section--sidebar"
-  >
-    <div
-      class="fpo"
-    >
-      Sidebar Layout Section
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Layout /> GapNone story renders snapshot 1`] = `
-<div
-  class="layout layout--gap-none"
->
-  <div
-    class="layout__section layout__section--sidebar"
-  >
-    <div
-      class="fpo"
-    >
-      Sidebar Layout Section
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Layout /> SixtySevenThirtyThree story renders snapshot 1`] = `
-<div
-  class="layout layout--67-33"
->
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--sidebar"
-  >
-    <div
-      class="fpo"
-    >
-      Sidebar Layout Section
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Layout /> ThirtyThreeSixtySeven story renders snapshot 1`] = `
-<div
-  class="layout layout--33-67"
->
-  <div
-    class="layout__section layout__section--sidebar"
-  >
-    <div
-      class="fpo"
-    >
-      Sidebar Layout Section
-    </div>
-  </div>
-  <div
-    class="layout__section layout__section--main"
-  >
-    <div
-      class="fpo"
-    >
-      Main Layout Section
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
deleted file mode 100644
index f3ddcb0f4..000000000
--- a/src/components/Layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Layout as default } from './Layout';
diff --git a/src/components/LayoutContainer/LayoutContainer.module.css b/src/components/LayoutContainer/LayoutContainer.module.css
deleted file mode 100755
index 675f74e85..000000000
--- a/src/components/LayoutContainer/LayoutContainer.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/*------------------------------------*\
-    # LAYOUT CONTAINER
-\*------------------------------------*/
-
-/**
- * Layout Container
- *
- * Caps the width of the content to the maximum width and centers the container.
- */
-.layout-container {
-  /**
-  * Uses calc to account for the addition of padding around the layout container
-  * to ensure content doesn't butt up against viewport edge.
-  */
-  max-width: calc(71.25rem + var(--eds-size-6));
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--eds-size-2);
-  padding-right: var(--eds-size-2);
-
-  @media all and (min-width: $eds-bp-lg) {
-    padding-left: var(--eds-size-3);
-    padding-right: var(--eds-size-3);
-  }
-}
-
-/**
- * Layout container centered
- *
- * Used for pages that don't contain the header or the footer.
- */
-.eds-l-container--center {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding-left: 0;
-  padding-right: 0;
-  height: 100vh;
-}
diff --git a/src/components/LayoutContainer/LayoutContainer.stories.tsx b/src/components/LayoutContainer/LayoutContainer.stories.tsx
deleted file mode 100644
index e6b9d5a30..000000000
--- a/src/components/LayoutContainer/LayoutContainer.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { LayoutContainer } from './LayoutContainer';
-
-export default {
-  title: 'Components/Layout Container',
-  component: LayoutContainer,
-  parameters: {
-    axe: {
-      skip: true,
-    },
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  args: {
-    children: <div className="fpo">Layout container</div>,
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof LayoutContainer>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/src/components/LayoutContainer/LayoutContainer.test.ts b/src/components/LayoutContainer/LayoutContainer.test.ts
deleted file mode 100644
index 9d8ce7dcd..000000000
--- a/src/components/LayoutContainer/LayoutContainer.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import * as stories from './LayoutContainer.stories';
-
-describe('<LayoutContainer />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/LayoutContainer/LayoutContainer.tsx b/src/components/LayoutContainer/LayoutContainer.tsx
deleted file mode 100644
index 6810a6e94..000000000
--- a/src/components/LayoutContainer/LayoutContainer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from './LayoutContainer.module.css';
-
-export interface Props {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Child node(s) that can be nested inside component. `PrimaryNavItem` the only permissible children of the PrimaryNav
-   */
-  children: ReactNode;
-  /**
-   * Expands component to the full height of the container
-   */
-  fullHeight?: boolean;
-  /**
-   * Stylistic variations:
-   * - **narrow** yields a LayoutContainer with a narrower width
-   */
-  variant?: 'narrow';
-}
-
-/**
- * The Layout components are deprecated and will be removed in an upcoming release.
- * Instead, please make use of utility libraries, like Tailwind CSS:
- * * https://tailwindcss.com/docs/display
- * * https://tailwindcss.com/docs/container
- * * https://tailwindcss.com/docs/columns
- *
- * `import {LayoutContainer} from "@chanzuckerberg/eds";`
- *
- * Layout container. Caps the width of the content to the maximum width and centers the container.
- *
- * @deprecated
- */
-export const LayoutContainer = ({
-  className,
-  children,
-  fullHeight,
-  variant,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['layout-container'],
-    variant === 'narrow' && styles['layout-container--narrow'],
-    fullHeight && styles['layout-container--narrow'],
-    className,
-  );
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/LayoutContainer/__snapshots__/LayoutContainer.test.ts.snap b/src/components/LayoutContainer/__snapshots__/LayoutContainer.test.ts.snap
deleted file mode 100644
index 4d302746e..000000000
--- a/src/components/LayoutContainer/__snapshots__/LayoutContainer.test.ts.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LayoutContainer /> Default story renders snapshot 1`] = `
-<div
-  class="layout-container"
->
-  <div
-    class="fpo"
-  >
-    Layout container
-  </div>
-</div>
-`;
diff --git a/src/components/LayoutContainer/index.ts b/src/components/LayoutContainer/index.ts
deleted file mode 100644
index 82188cab6..000000000
--- a/src/components/LayoutContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LayoutContainer as default } from './LayoutContainer';
diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css b/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css
deleted file mode 100755
index 62e66ec66..000000000
--- a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*------------------------------------*\
-    # LAYOUT LINELENGTH CONTAINER
-\*------------------------------------*/
-
-/**
- * Linelength Container.
- */
-.layout-linelength-container {
-  /*  Caps the length of an excerpt of text to be easily readable. */
-  max-width: 36rem; 
-}
diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.stories.tsx b/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.stories.tsx
deleted file mode 100644
index 7cdb10b91..000000000
--- a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { LayoutLinelengthContainer } from './LayoutLinelengthContainer';
-
-export default {
-  title: 'Components/Linelength Container',
-  component: LayoutLinelengthContainer,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  args: {
-    children: (
-      <>
-        <p>
-          A Linelength Container caps the width of the content to a comfortable
-          reading width.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof LayoutLinelengthContainer>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.tsx b/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.tsx
deleted file mode 100644
index 5371a4439..000000000
--- a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from './LayoutLinelengthContainer.module.css';
-
-export interface Props {
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-}
-
-/**
- * The Layout components are deprecated and will be removed in an upcoming release.
- * Instead, please make use of utility libraries, like Tailwind CSS:
- * * https://tailwindcss.com/docs/display
- * * https://tailwindcss.com/docs/container
- * * https://tailwindcss.com/docs/columns
- *
- * `import {LayoutLinelengthContainer} from "@chanzuckerberg/eds";`
- *
- * Component that caps the length of an excerpt of text to be easily readable.
- *
- * @deprecated
- */
-export const LayoutLinelengthContainer = ({
-  className,
-  children,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['layout-linelength-container'],
-    className,
-  );
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/LayoutLinelengthContainer/index.ts b/src/components/LayoutLinelengthContainer/index.ts
deleted file mode 100644
index d975c0e1f..000000000
--- a/src/components/LayoutLinelengthContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LayoutLinelengthContainer as default } from './LayoutLinelengthContainer';
diff --git a/src/components/LayoutSection/LayoutSection.tsx b/src/components/LayoutSection/LayoutSection.tsx
deleted file mode 100644
index 4c790f123..000000000
--- a/src/components/LayoutSection/LayoutSection.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from '../Layout/Layout.module.css';
-
-export interface Props {
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Layout section region
-   */
-  region?: 'main' | 'sidebar';
-}
-
-/**
- * The Layout components are deprecated and will be removed in an upcoming release.
- * Instead, please make use of utility libraries, like Tailwind CSS:
- * * https://tailwindcss.com/docs/display
- * * https://tailwindcss.com/docs/container
- * * https://tailwindcss.com/docs/columns
- *
- * `import {LayoutSection} from "@chanzuckerberg/eds";`
- *
- * Layout section.
- *
- * @deprecated
- */
-export const LayoutSection = ({
-  children,
-  className,
-  region,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['layout__section'],
-    region === 'main' && styles['layout__section--main'],
-    region === 'sidebar' && styles['layout__section--sidebar'],
-    className,
-  );
-
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/LayoutSection/index.ts b/src/components/LayoutSection/index.ts
deleted file mode 100644
index 06ee62084..000000000
--- a/src/components/LayoutSection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LayoutSection as default } from './LayoutSection';
diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
index 24b72512c..c27530862 100644
--- a/src/components/Link/Link.module.css
+++ b/src/components/Link/Link.module.css
@@ -525,11 +525,3 @@ button:where(.link--link) {
   padding: 0 var(--eds-size-2);
 }
 
-/**
- * Full-width link style
- * A block link that fills 100% of the width of its container
- * @deprecated ?
- */
- .link--full-width {
-  width: 100%;
-}
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index a2725e76e..d57a20d51 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -14,7 +14,6 @@ export default {
     children: 'Link',
     variant: 'link',
     status: 'brand',
-    fullWidth: false,
     size: 'lg',
     href: 'https://go.czi.team/eds',
     // stop link from navigating to another page so we can click the link for testing
@@ -38,12 +37,6 @@ export default {
         disable: true,
       },
     },
-    fullWidth: {
-      control: 'boolean',
-      table: {
-        disable: true,
-      },
-    },
     onClick: {
       table: {
         disable: true,
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 20e394f5d..b8629ee47 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -15,17 +15,9 @@ export type LinkProps = LinkHTMLElementProps & {
    * The link contents or label.
    */
   children: ReactNode;
-  /**
-   * Toggles link that fills the full width of its container
-   * @deprecated
-   */
-  fullWidth?: boolean;
   'data-testid'?: string;
   /**
    * Link size inherits from the surrounding text.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
    */
   size?: Extract<Size, 'sm' | 'md' | 'lg'>;
 } & VariantStatus;
@@ -48,7 +40,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       variant = 'link',
       status = 'brand',
       size = 'lg',
-      fullWidth,
       ...rest
     },
     ref,
@@ -73,8 +64,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       status === 'success' && styles['link--success'],
       status === 'warning' && styles['link--warning'],
       status === 'error' && styles['link--error'],
-      // Other options
-      fullWidth && styles['link--full-width'],
       className,
     );
 
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 8db7c3ba0..2bbe682e2 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -6,7 +6,6 @@ import { useState } from 'react';
 import { Modal, ModalContent } from './Modal';
 import { Button, ButtonGroup, Heading, Tooltip } from '../../';
 import { chromaticViewports, storybookViewports } from '../../util/viewports';
-import { VARIANTS } from '../Heading/Heading';
 
 export default {
   title: 'Components/Modal',
@@ -61,7 +60,7 @@ const getChildren = (
         <Modal.Title>Modal Title</Modal.Title>
       ) : (
         /* Not using Modal.Title here because it can't exist outside of the Dialog component. */
-        <Heading size="h2">Modal Title</Heading>
+        <Heading as="h2">Modal Title</Heading>
       )}
     </Modal.Header>
     <Modal.Body>{bodyContent}</Modal.Body>
@@ -124,40 +123,11 @@ export const ControlHeadingInteractive: StoryObj<HeadingArgs> = {
       name: 'title "as" prop',
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     },
-    size: {
-      control: 'select',
-      name: 'title "size" prop',
-      // TODO: convert to using `presets` from variant-types and updating modal similar to `Text`
-      options: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'headline-lg',
-        'headline-md',
-        'headline-sm',
-        'title-md',
-        'title-sm',
-        'body-sm',
-        'body-xs',
-        'title-xs',
-      ],
-    },
-    variant: {
-      control: 'select',
-      name: 'title "variant" prop',
-      options: VARIANTS,
-    },
   },
-  render: ({ as, size, variant, ...args }) => (
+  render: ({ as, ...args }) => (
     <InteractiveExample {...args}>
       <Modal.Header>
-        <Modal.Title as={as} size={size} variant={variant}>
-          Modal Title
-        </Modal.Title>
+        <Modal.Title as={as}>Modal Title</Modal.Title>
       </Modal.Header>
       <Modal.Body>Modal Content</Modal.Body>
     </InteractiveExample>
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index d9de1c9d2..d660b801b 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,7 +4,6 @@ import type { MutableRefObject, ReactNode } from 'react';
 import React from 'react';
 import type { ExtractProps } from '../../util/utility-types';
 import type { Size } from '../../util/variant-types';
-import type { HeadingSize } from '../Heading';
 import Heading from '../Heading';
 import { Icon, type IconName } from '../Icon/Icon';
 import styles from './Modal.module.css';
@@ -110,19 +109,15 @@ type ModalProps = ModalContentProps & {
   modalContainerClassName?: string;
 };
 
-type ModalTitleProps = Omit<ExtractProps<typeof Heading>, 'size'> & {
+type ModalTitleProps = ExtractProps<typeof Heading> & {
   /**
-   * Text for the modal title.
+   * Contents for the modal title.
    */
   children: ReactNode;
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
-  /**
-   * Modal Title Heading size. Defaults to 'headline-md'
-   */
-  size?: HeadingSize;
 };
 
 type ModalBodyProps = {
@@ -461,11 +456,11 @@ const ModalStepper = ({
 const ModalTitle = ({
   children,
   className,
-  size = 'headline-md',
+  preset = 'headline-md',
   ...other
 }: ModalTitleProps) => (
   <Dialog.Title as={React.Fragment}>
-    <Heading className={className} size={size} {...other}>
+    <Heading as="h2" className={className} preset={preset} {...other}>
       {children}
     </Heading>
   </Dialog.Title>
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index ab0f288f8..7fc970554 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`Modal Brand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -104,7 +104,7 @@ exports[`Modal ContentDefault story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -180,7 +180,7 @@ exports[`Modal Default story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r2:"
       >
@@ -247,7 +247,7 @@ exports[`Modal Medium story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -311,7 +311,7 @@ exports[`Modal Mobile story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -375,7 +375,7 @@ exports[`Modal MobileBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -448,7 +448,7 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -512,7 +512,7 @@ exports[`Modal MobileLandscapeBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -660,7 +660,7 @@ exports[`Modal Small story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -724,7 +724,7 @@ exports[`Modal Tablet story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -788,7 +788,7 @@ exports[`Modal TabletBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -873,7 +873,7 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r8:"
       >
@@ -959,7 +959,7 @@ exports[`Modal WithStepper story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -1135,7 +1135,7 @@ exports[`Modal WithoutCloseButton story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r5:"
       >
diff --git a/src/components/PageHeader/PageHeader.module.css b/src/components/PageHeader/PageHeader.module.css
deleted file mode 100755
index f70b86592..000000000
--- a/src/components/PageHeader/PageHeader.module.css
+++ /dev/null
@@ -1,95 +0,0 @@
-/*------------------------------------*\
-    # PAGE HEADER
-\*------------------------------------*/
-
-/**
- * Container that consists of a page header title and description.
- */
-.page-header {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  margin-bottom: var(--eds-size-3);
-
-  @media all and (min-width: $eds-bp-md) {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-/**
- * Orientation variant that limits the left and right slots.
- * Useful in aligning content with the 2up grid layouts.
- */
-.page-header--2up {
-  @media all and (min-width: $eds-bp-md) {
-    .page-header__left,
-    .page-header__right {
-      max-width: 50%;
-    }
-  }
-}
-
-/**
- * Center-aligned page header
- */
-.page-header--center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/**
- * Page header left.
- */
-.page-header__left {
-  /* Flex 1 added so the right content doesn't wrap. */
-  flex: 1;
-  /* Push page header right all the way to the right. */
-  @media all and (min-width: $eds-bp-md) {
-    margin-right: auto;
-  }
-}
-
-/**
- * Page header right
- *
- * On larger viewports, add margin-left to keep space between title and
- * header-right content. If additional margin needs to be added (i.e.
- * margin-top on smaller viewports), add a spacing utility class to the
- * contents of header-right.
- */
-.page-header__right {
-  @media all and (min-width: $eds-bp-md) {
-    margin-left: var(--eds-size-4);
-  }
-}
-
-/**
- * Page header title
- */
-.page-header--center .page-header__title {
-  text-align: center;
-}
-
-/**
- * Page title after
- */
-.page-header__title-after {
-  display: inline-block;
-  margin-left: var(--eds-size-1-and-half);
-  position: relative;
-  top: -1rem;
-}
-
-/**
- * Page description
- */
-.page-header__description {
-  color: var(--eds-theme-color-text-neutral-subtle);
-  margin-top: var(--eds-size-1);
-
-  .page-header--center & {
-    text-align: center;
-  }
-}
diff --git a/src/components/PageHeader/PageHeader.stories.tsx b/src/components/PageHeader/PageHeader.stories.tsx
deleted file mode 100644
index 12720e7aa..000000000
--- a/src/components/PageHeader/PageHeader.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { PageHeader } from './PageHeader';
-import Breadcrumbs from '../Breadcrumbs';
-import Tag from '../Tag';
-import Text from '../Text';
-
-export default {
-  title: 'Components/PageHeader',
-  component: PageHeader,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof PageHeader>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    title: 'Page header title',
-  },
-};
-export const WithDescription: StoryObj<Args> = {
-  args: {
-    title: 'Page header title',
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  },
-};
-export const WithOverline: StoryObj<Args> = {
-  args: {
-    overline: <Text size="overline">Overline above title</Text>,
-    title: 'Page header title',
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-};
-
-export const WithBreadcrumbs: StoryObj<Args> = {
-  args: {
-    overline: (
-      <Breadcrumbs>
-        <Breadcrumbs.Item href="#" text="My Courses" />
-        <Breadcrumbs.Item href="#" text="(2023) Modern World 1" />
-      </Breadcrumbs>
-    ),
-    title: 'Page header title',
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-};
-export const Centered: StoryObj<Args> = {
-  args: {
-    align: 'center',
-    title: 'Page header title',
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-};
-export const TitleAfter: StoryObj<Args> = {
-  args: {
-    title: 'Page header title',
-    titleAfter: <Tag text="Title after content" />,
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-};
-
-export const TwoUp: StoryObj<Args> = {
-  args: {
-    description:
-      'This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    title: 'Page header title',
-    right:
-      'Right content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    orientation: '2up',
-  },
-};
diff --git a/src/components/PageHeader/PageHeader.test.ts b/src/components/PageHeader/PageHeader.test.ts
deleted file mode 100644
index 3cbdcfddc..000000000
--- a/src/components/PageHeader/PageHeader.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './PageHeader.stories';
-
-describe('<PageHeader />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
deleted file mode 100644
index f7137abfb..000000000
--- a/src/components/PageHeader/PageHeader.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { HeadingSize, HeadingElement } from '../Heading';
-import Heading from '../Heading';
-import styles from './PageHeader.module.css';
-
-export interface Props {
-  /**
-   * Align variations:
-   * - **center** yields a PageHeader whose contents are centered
-   */
-  align?: 'center';
-  /**
-   * This prop can be used to specify which size heading should
-   * actually be rendered, in the case that you want to render an element
-   * as one heading but style it as if it were another. If both an `as` prop
-   * and a `size` prop are passed, the `as` will be used to determine the element
-   * and the `size` will be used to determine the styling.
-   */
-  as?: HeadingElement;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Description text that appears directly below the main title
-   */
-  description?: string | ReactNode;
-  /**
-   * overline appears above the title
-   */
-  overline?: ReactNode;
-  /**
-   * Right slot - an area to put right-aligned content in the right column
-   */
-  right?: ReactNode;
-  /**
-   * Size property
-   */
-  headingSize?: HeadingSize;
-  /**
-   * Size property
-   */
-  headingVariant?:
-    | 'inherit'
-    | 'neutral-subtle'
-    | 'neutral-medium'
-    | 'neutral-strong'
-    | 'brand'
-    | 'success'
-    | 'warning'
-    | 'error'
-    | 'white';
-  /**
-   * Controls the layout of the PageHeader, specifically the placement of the left and right slots.
-   */
-  orientation?: '2up';
-  /**
-   * Page heading title text
-   */
-  title?: string;
-  /**
-   * Slot for node to appear to the right of the page title. Typically used to include a Badge, Button, or other component
-   */
-  titleAfter?: ReactNode;
-}
-
-/**
- * `import {PageHeader} from "@chanzuckerberg/eds";`
- *
- * Header to be used at the top of a page.
- * @deprecated
- */
-export const PageHeader = ({
-  align,
-  as = 'h1',
-  className,
-  description,
-  headingSize = 'headline-lg',
-  headingVariant = 'neutral-strong',
-  overline,
-  orientation,
-  right,
-  title,
-  titleAfter,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['page-header'],
-    align === 'center' && styles['page-header--center'],
-    orientation === '2up' && styles['page-header--2up'],
-    className,
-  );
-
-  return (
-    <header className={componentClassName} {...other}>
-      <div className={styles['page-header__left']}>
-        {overline}
-        <Heading
-          as={as}
-          className={styles['page-header__title']}
-          size={headingSize}
-          variant={headingVariant}
-        >
-          {title}
-          {titleAfter && (
-            <div className={styles['page-header__title-after']}>
-              {titleAfter}
-            </div>
-          )}
-        </Heading>
-
-        {description && (
-          <div className={styles['page-header__description']}>
-            {description}
-          </div>
-        )}
-      </div>
-
-      {right && <div className={styles['page-header__right']}>{right}</div>}
-    </header>
-  );
-};
diff --git a/src/components/PageHeader/__snapshots__/PageHeader.test.ts.snap b/src/components/PageHeader/__snapshots__/PageHeader.test.ts.snap
deleted file mode 100644
index dc166e896..000000000
--- a/src/components/PageHeader/__snapshots__/PageHeader.test.ts.snap
+++ /dev/null
@@ -1,236 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<PageHeader /> Centered story renders snapshot 1`] = `
-<header
-  class="page-header page-header--center"
->
-  <div
-    class="page-header__left"
-  >
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> Default story renders snapshot 1`] = `
-<header
-  class="page-header"
->
-  <div
-    class="page-header__left"
-  >
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> TitleAfter story renders snapshot 1`] = `
-<header
-  class="page-header"
->
-  <div
-    class="page-header__left"
-  >
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-      <div
-        class="page-header__title-after"
-      >
-        <span
-          class="text text--sm text--bold-weight tag tag--neutral"
-        >
-          <span
-            class="tag__body"
-          >
-            Title after content
-          </span>
-        </span>
-      </div>
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> TwoUp story renders snapshot 1`] = `
-<header
-  class="page-header page-header--2up"
->
-  <div
-    class="page-header__left"
-  >
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-  <div
-    class="page-header__right"
-  >
-    Right content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> WithBreadcrumbs story renders snapshot 1`] = `
-<header
-  class="page-header"
->
-  <div
-    class="page-header__left"
-  >
-    <nav
-      aria-label="breadcrumbs links"
-      class="breadcrumbs"
-    >
-      <ul
-        class="breadcrumbs__list"
-      >
-        <li
-          class="breadcrumbs__item breadcrumbs__item-back"
-        >
-          <a
-            class="breadcrumbs__link"
-            href="#"
-          >
-            <svg
-              class="icon breadcrumbs__back-icon"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                My Courses
-              </title>
-              <path
-                d="M13.7 21.1004L5.275 12.7004C5.175 12.6004 5.10417 12.4921 5.0625 12.3754C5.02083 12.2587 5 12.1337 5 12.0004C5 11.8671 5.02083 11.7421 5.0625 11.6254C5.10417 11.5087 5.175 11.4004 5.275 11.3004L13.7 2.87539C13.9333 2.64206 14.225 2.52539 14.575 2.52539C14.925 2.52539 15.225 2.65039 15.475 2.90039C15.725 3.15039 15.85 3.44206 15.85 3.77539C15.85 4.10872 15.725 4.40039 15.475 4.65039L8.125 12.0004L15.475 19.3504C15.7083 19.5837 15.825 19.8712 15.825 20.2129C15.825 20.5546 15.7 20.8504 15.45 21.1004C15.2 21.3504 14.9083 21.4754 14.575 21.4754C14.2417 21.4754 13.95 21.3504 13.7 21.1004Z"
-              />
-            </svg>
-          </a>
-          <span
-            aria-hidden="true"
-            class="breadcrumbs__separator"
-          >
-            /
-          </span>
-        </li>
-        <li
-          class="breadcrumbs__item"
-        >
-          <a
-            class="breadcrumbs__link"
-            href="#"
-          >
-            My Courses
-          </a>
-          <span
-            aria-hidden="true"
-            class="breadcrumbs__separator"
-          >
-            /
-          </span>
-        </li>
-        <li
-          class="breadcrumbs__item"
-        >
-          <a
-            class="breadcrumbs__link"
-            href="#"
-          >
-            (2023) Modern World 1
-          </a>
-          <span
-            aria-hidden="true"
-            class="breadcrumbs__separator"
-          >
-            /
-          </span>
-        </li>
-      </ul>
-    </nav>
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> WithDescription story renders snapshot 1`] = `
-<header
-  class="page-header"
->
-  <div
-    class="page-header__left"
-  >
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<PageHeader /> WithOverline story renders snapshot 1`] = `
-<header
-  class="page-header"
->
-  <div
-    class="page-header__left"
-  >
-    <p
-      class="text text--overline"
-    >
-      Overline above title
-    </p>
-    <h1
-      class="heading heading--size-headline-lg heading--neutral-strong page-header__title"
-    >
-      Page header title
-    </h1>
-    <div
-      class="page-header__description"
-    >
-      This is a description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-</header>
-`;
diff --git a/src/components/PageHeader/index.ts b/src/components/PageHeader/index.ts
deleted file mode 100644
index 02108b56a..000000000
--- a/src/components/PageHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { PageHeader as default } from './PageHeader';
diff --git a/src/components/PageLevelBanner/PageLevelBanner.module.css b/src/components/PageLevelBanner/PageLevelBanner.module.css
index f36a19155..66b48b4f2 100644
--- a/src/components/PageLevelBanner/PageLevelBanner.module.css
+++ b/src/components/PageLevelBanner/PageLevelBanner.module.css
@@ -40,6 +40,10 @@
   right: var(--eds-size-half);
 }
 
+.banner__description {
+  color: var(--eds-theme-color-text-neutral-default);
+}
+
 /**
  * Dismissable banner
  *
diff --git a/src/components/PageLevelBanner/PageLevelBanner.tsx b/src/components/PageLevelBanner/PageLevelBanner.tsx
index 842b96a7e..8bf7913c8 100644
--- a/src/components/PageLevelBanner/PageLevelBanner.tsx
+++ b/src/components/PageLevelBanner/PageLevelBanner.tsx
@@ -120,12 +120,16 @@ export const PageLevelBanner = ({
 
       <div>
         {title && (
-          <Heading as={titleAs} size="title-md" variant={variant}>
+          <Heading as={titleAs} preset="title-md">
             {title}
           </Heading>
         )}
         {description && (
-          <Text as={descriptionAs} size="sm" variant="neutral-medium">
+          <Text
+            as={descriptionAs}
+            className={styles['banner__description']}
+            preset="body-sm"
+          >
             {description}
           </Text>
         )}
diff --git a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
index d780d9dd9..b590c0353 100644
--- a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
+++ b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
@@ -20,12 +20,12 @@ exports[`<PageLevelBanner /> Brand story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -60,12 +60,12 @@ exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -119,12 +119,12 @@ exports[`<PageLevelBanner /> Error story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--error"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -159,12 +159,12 @@ exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--error"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -218,7 +218,7 @@ exports[`<PageLevelBanner /> NoDescription story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -246,7 +246,7 @@ exports[`<PageLevelBanner /> NoTitle story renders snapshot 1`] = `
   </svg>
   <div>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -281,12 +281,12 @@ exports[`<PageLevelBanner /> Success story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--success"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -321,12 +321,12 @@ exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--success"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -380,12 +380,12 @@ exports[`<PageLevelBanner /> Warning story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--warning"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
@@ -420,12 +420,12 @@ exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--warning"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
     <p
-      class="text text--sm text--neutral-medium"
+      class="text text--body-sm banner__description"
     >
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
diff --git a/src/components/Panel/Panel.module.css b/src/components/Panel/Panel.module.css
deleted file mode 100755
index dc25eb5e9..000000000
--- a/src/components/Panel/Panel.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/*------------------------------------*\
-    # PANEL
-\*------------------------------------*/
-
-/**
- * A container for content.
- */
-.panel {
-  background: var(--eds-theme-color-background-neutral-default);
-  border-radius: var(--eds-border-radius-xl);
-  padding: var(--eds-size-3);
-}
-
-.panel--squared {
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: 0;
-  border: none;
-  box-shadow: var(--eds-box-shadow-md);
-}
-
-.panel--flush {
-  padding: 0;
-}
-
-.panel--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/src/components/Panel/Panel.stories.ts b/src/components/Panel/Panel.stories.ts
deleted file mode 100644
index d36d64e82..000000000
--- a/src/components/Panel/Panel.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { Panel } from './Panel';
-
-export default {
-  title: 'Components/Panel',
-  component: Panel,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-  args: {
-    children: 'A Panel is a generic bordered container for content.',
-  },
-} as Meta<Args>;
-
-type Args = ComponentProps<typeof Panel>;
-
-export const Default: StoryObj<Args> = {};
-
-export const Flush: StoryObj<Args> = {
-  args: {
-    flush: true,
-  },
-};
-
-export const Squared: StoryObj<Args> = {
-  args: {
-    variant: 'squared',
-  },
-};
-
-export const Centered: StoryObj<Args> = {
-  args: {
-    align: 'center',
-  },
-};
diff --git a/src/components/Panel/Panel.test.ts b/src/components/Panel/Panel.test.ts
deleted file mode 100644
index c349f9784..000000000
--- a/src/components/Panel/Panel.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './Panel.stories';
-
-describe('<Panel />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
deleted file mode 100644
index 4126b37a7..000000000
--- a/src/components/Panel/Panel.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from './Panel.module.css';
-
-export interface Props {
-  /**
-   * Alignment variations for the panel
-   * - **center** horizontally and vertically aligns the content
-   */
-  align?: 'center';
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Style variants
-   * - **flush** removes padding from the panel
-   */
-  flush?: boolean;
-  /**
-   * Style variants
-   * - **squared** squares corners, removes borders, and adds box shadow for headlines
-   */
-  variant?: 'squared';
-}
-
-/**
- * `import {Panel} from "@chanzuckerberg/eds";`
- *
- * Component Panel is the container to show the contents with props passed through for conditional styling of the panel based on variants props.
- * @deprecated
- */
-export const Panel = ({
-  className,
-  children,
-  align,
-  variant,
-  flush,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['panel'],
-    align === 'center' && styles['panel--align-center'],
-    variant === 'squared' && styles['panel--squared'],
-    flush && styles['panel--flush'],
-    className,
-  );
-
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/Panel/__snapshots__/Panel.test.ts.snap b/src/components/Panel/__snapshots__/Panel.test.ts.snap
deleted file mode 100644
index edba1e595..000000000
--- a/src/components/Panel/__snapshots__/Panel.test.ts.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Panel /> Centered story renders snapshot 1`] = `
-<div
-  class="panel panel--align-center"
->
-  A Panel is a generic bordered container for content.
-</div>
-`;
-
-exports[`<Panel /> Default story renders snapshot 1`] = `
-<div
-  class="panel"
->
-  A Panel is a generic bordered container for content.
-</div>
-`;
-
-exports[`<Panel /> Flush story renders snapshot 1`] = `
-<div
-  class="panel panel--flush"
->
-  A Panel is a generic bordered container for content.
-</div>
-`;
-
-exports[`<Panel /> Squared story renders snapshot 1`] = `
-<div
-  class="panel panel--squared"
->
-  A Panel is a generic bordered container for content.
-</div>
-`;
diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts
deleted file mode 100644
index e4a99e52d..000000000
--- a/src/components/Panel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Panel as default } from './Panel';
diff --git a/src/components/PopoverContainer/PopoverContainer.stories.tsx b/src/components/PopoverContainer/PopoverContainer.stories.tsx
new file mode 100644
index 000000000..d2baa7b48
--- /dev/null
+++ b/src/components/PopoverContainer/PopoverContainer.stories.tsx
@@ -0,0 +1,33 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { PopoverContainer } from './PopoverContainer';
+import PopoverListItem from '../PopoverListItem';
+
+export default {
+  title: 'Components/PopoverContainer',
+  component: PopoverContainer,
+  parameters: {
+    badges: ['1.2'],
+  },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof PopoverContainer>;
+
+export const Default: StoryObj<Args> = {
+  args: {
+    children: 'Default container',
+  },
+};
+
+export const WithRows: StoryObj<Args> = {
+  render: () => (
+    <PopoverContainer>
+      <PopoverListItem icon="arrow-downward">test 1</PopoverListItem>
+      <PopoverListItem icon="arrow-narrow-left">test 2</PopoverListItem>
+      <PopoverListItem icon="arrow-upward">test 3</PopoverListItem>
+      <PopoverListItem icon="arrow-narrow-right">test 4</PopoverListItem>
+    </PopoverContainer>
+  ),
+};
diff --git a/src/components/Layout/Layout.test.ts b/src/components/PopoverContainer/PopoverContainer.test.ts
similarity index 64%
rename from src/components/Layout/Layout.test.ts
rename to src/components/PopoverContainer/PopoverContainer.test.ts
index d7a8f5bb1..666ac66f8 100644
--- a/src/components/Layout/Layout.test.ts
+++ b/src/components/PopoverContainer/PopoverContainer.test.ts
@@ -1,7 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
-import * as stories from './Layout.stories';
+import * as stories from './PopoverContainer.stories';
 
-describe('<Layout />', () => {
+describe('<PopoverContainer />', () => {
   generateSnapshots(stories as StoryFile);
 });
diff --git a/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap b/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap
new file mode 100644
index 000000000..f86f3172a
--- /dev/null
+++ b/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PopoverContainer /> Default story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="popover-container"
+  >
+    Default container
+  </div>
+</div>
+`;
+
+exports[`<PopoverContainer /> WithRows story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="popover-container"
+  >
+    <div
+      class="popover-list-item"
+    >
+      <div
+        class="popover-list-item__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z"
+          />
+        </svg>
+      </div>
+      test 1
+    </div>
+    <div
+      class="popover-list-item"
+    >
+      <div
+        class="popover-list-item__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.7,18.3L9.7,18.3c0.39-0.39,0.39-1.02,0-1.41L5.83,13H21c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H5.83l3.88-3.88 c0.39-0.39,0.39-1.02,0-1.41l0,0c-0.39-0.39-1.02-0.39-1.41,0L2.7,11.3c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59 C8.68,18.68,9.32,18.68,9.7,18.3z"
+          />
+        </svg>
+      </div>
+      test 2
+    </div>
+    <div
+      class="popover-list-item"
+    >
+      <div
+        class="popover-list-item__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0 .39-.39.39-1.02 0-1.41l-6.59-6.59c-.39-.39-1.02-.39-1.41 0l-6.6 6.58c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1z"
+          />
+        </svg>
+      </div>
+      test 3
+    </div>
+    <div
+      class="popover-list-item"
+    >
+      <div
+        class="popover-list-item__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.29,5.71L14.29,5.71c-0.39,0.39-0.39,1.02,0,1.41L18.17,11H3c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h15.18l-3.88,3.88 c-0.39,0.39-0.39,1.02,0,1.41l0,0c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59c0.39-0.39,0.39-1.02,0-1.41L15.7,5.71 C15.32,5.32,14.68,5.32,14.29,5.71z"
+          />
+        </svg>
+      </div>
+      test 4
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index bddbd9457..74ac76edb 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -79,7 +79,7 @@ export const ProgressBar = ({
           as="span"
           className={styles['progress-bar__caption']}
           id={captionId}
-          size="caption"
+          preset="caption-md"
         >
           {progressBarCaption}
         </Text>
diff --git a/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap b/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap
index ad8d305d1..9c0eeafe2 100644
--- a/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap
+++ b/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap
@@ -16,7 +16,7 @@ exports[`<ProgressBar /> Complete story renders snapshot 1`] = `
           Progress Bar Label
         </label>
         <span
-          class="text text--caption progress-bar__caption"
+          class="text text--caption-md progress-bar__caption"
           id=":r9:"
         >
           100/100
@@ -51,7 +51,7 @@ exports[`<ProgressBar /> Complete story renders snapshot 1`] = `
           Progress Bar Label
         </label>
         <span
-          class="text text--caption progress-bar__caption"
+          class="text text--caption-md progress-bar__caption"
           id=":rb:"
         >
           100/100
@@ -103,7 +103,7 @@ exports[`<ProgressBar /> Default story renders snapshot 1`] = `
         Progress Bar Label
       </label>
       <span
-        class="text text--caption progress-bar__caption"
+        class="text text--caption-md progress-bar__caption"
         id=":r1:"
       >
         20/100
@@ -145,7 +145,7 @@ exports[`<ProgressBar /> Empty story renders snapshot 1`] = `
         Progress Bar Label
       </label>
       <span
-        class="text text--caption progress-bar__caption"
+        class="text text--caption-md progress-bar__caption"
         id=":r3:"
       >
         0/100
@@ -187,7 +187,7 @@ exports[`<ProgressBar /> TwoSegments story renders snapshot 1`] = `
         Progress Bar Label
       </label>
       <span
-        class="text text--caption progress-bar__caption"
+        class="text text--caption-md progress-bar__caption"
         id=":r7:"
       >
         20/100
@@ -232,7 +232,7 @@ exports[`<ProgressBar /> WithCustomCaption story renders snapshot 1`] = `
         Progress Bar Label
       </label>
       <span
-        class="text text--caption progress-bar__caption"
+        class="text text--caption-md progress-bar__caption"
         id=":r5:"
       >
         20 %
diff --git a/src/components/Score/Score.module.css b/src/components/Score/Score.module.css
deleted file mode 100644
index d916df461..000000000
--- a/src/components/Score/Score.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*------------------------------------*\
-    # SCORE
-\*------------------------------------*/
-
-/**
- * Rounded rectangle container that houses a score.
- */
-.score {
-  --tag-secondary-color: transparent;
-}
-
-/**
- * Color variants
- */
-.score--success {
-  --tag-outline-color: var(--eds-theme-color-border-utility-success-strong);
-}
-.score--error {
-  --tag-outline-color: var(--eds-theme-color-border-utility-error-default);
-}
-.score--table {
-  --tag-outline-color: transparent;
-}
diff --git a/src/components/Score/Score.stories.tsx b/src/components/Score/Score.stories.tsx
deleted file mode 100644
index 2efbd8634..000000000
--- a/src/components/Score/Score.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Score } from './Score';
-
-export default {
-  title: 'Components/Score',
-  component: Score,
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Score>;
-
-export const Success: StoryObj<Args> = {
-  args: {
-    text: '91 / 100',
-    variant: 'success',
-  },
-};
-
-export const Error: StoryObj<Args> = {
-  args: {
-    text: '6 / 10',
-    variant: 'error',
-  },
-};
-
-export const Table: StoryObj<Args> = {
-  args: {
-    text: '6 / 10',
-    variant: 'table',
-  },
-  decorators: [
-    (Story) => (
-      <div>
-        <p className="mb-4">
-          Score has transparent border for use in Table component
-        </p>
-        {Story()}
-      </div>
-    ),
-  ],
-};
diff --git a/src/components/Score/Score.test.ts b/src/components/Score/Score.test.ts
deleted file mode 100644
index a7426b2b9..000000000
--- a/src/components/Score/Score.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import * as stories from './Score.stories';
-
-describe('<Score />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/Score/Score.tsx b/src/components/Score/Score.tsx
deleted file mode 100644
index 79777dd8f..000000000
--- a/src/components/Score/Score.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import Tag from '../Tag';
-import styles from './Score.module.css';
-
-export const VARIANTS = ['table', 'error', 'success'] as const;
-
-export type Variant = (typeof VARIANTS)[number];
-
-export interface Props {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * The color variant of the score.
-   */
-  variant: Variant;
-  /**
-   * The score value text.
-   */
-  text: string;
-}
-
-/**
- * `import {Score} from "@chanzuckerberg/eds";`
- *
- * A (pill shaped badge) wrapper intended for use with scores.
- * @deprecated
- */
-export const Score = ({ className, variant, ...other }: Props) => {
-  const componentClassName = clsx(
-    styles['score'],
-    styles[`score--${variant}`],
-    className,
-  );
-
-  return <Tag className={componentClassName} hasOutline {...other} />;
-};
diff --git a/src/components/Score/__snapshots__/Score.test.ts.snap b/src/components/Score/__snapshots__/Score.test.ts.snap
deleted file mode 100644
index 688752d1b..000000000
--- a/src/components/Score/__snapshots__/Score.test.ts.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Score /> Error story renders snapshot 1`] = `
-<span
-  class="text text--sm text--bold-weight tag tag--neutral tag--outline score score--error"
->
-  <span
-    class="tag__body"
-  >
-    6 / 10
-  </span>
-</span>
-`;
-
-exports[`<Score /> Success story renders snapshot 1`] = `
-<span
-  class="text text--sm text--bold-weight tag tag--neutral tag--outline score score--success"
->
-  <span
-    class="tag__body"
-  >
-    91 / 100
-  </span>
-</span>
-`;
-
-exports[`<Score /> Table story renders snapshot 1`] = `
-<div>
-  <p
-    class="mb-4"
-  >
-    Score has transparent border for use in Table component
-  </p>
-  <span
-    class="text text--sm text--bold-weight tag tag--neutral tag--outline score score--table"
-  >
-    <span
-      class="tag__body"
-    >
-      6 / 10
-    </span>
-  </span>
-</div>
-`;
diff --git a/src/components/Score/index.ts b/src/components/Score/index.ts
deleted file mode 100644
index 953bf8f66..000000000
--- a/src/components/Score/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Score as default } from './Score';
diff --git a/src/components/Section/Section.stories.module.css b/src/components/Section/Section.stories.module.css
deleted file mode 100644
index 54a61fa05..000000000
--- a/src/components/Section/Section.stories.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/**
- *  Body text xs bold
- */
-.section__text {
-  font: var(--eds-theme-typography-body-xs);
-}
diff --git a/src/components/Section/Section.stories.tsx b/src/components/Section/Section.stories.tsx
index 300fc953c..a3ef10666 100644
--- a/src/components/Section/Section.stories.tsx
+++ b/src/components/Section/Section.stories.tsx
@@ -5,7 +5,6 @@ import { Section } from './Section';
 import Button from '../Button';
 import Icon from '../Icon';
 import Text from '../Text';
-import styles from './Section.stories.module.css';
 
 export default {
   title: 'Components/Section',
@@ -34,10 +33,10 @@ export const Default: StoryObj<Args> = {
 export const Center: StoryObj<Args> = {
   args: {
     align: 'center',
-    overline: <Text size="overline">Overline above title</Text>,
+    overline: <Text preset="overline">Overline above title</Text>,
     title: 'Section Title',
     description: (
-      <Text as="p" className={styles['section__text']} size="sm">
+      <Text as="p" preset="body-xs">
         This is a description of what the section is
       </Text>
     ),
@@ -48,7 +47,7 @@ export const WithDescription: StoryObj<Args> = {
   args: {
     title: 'Section Title',
     description: (
-      <Text as="p" className={styles['section__text']} size="sm">
+      <Text as="p" preset="body-xs">
         This is a description of what the section is
       </Text>
     ),
@@ -57,7 +56,7 @@ export const WithDescription: StoryObj<Args> = {
 
 export const WithOverline: StoryObj<Args> = {
   args: {
-    overline: <Text size="overline">Overline above title</Text>,
+    overline: <Text preset="overline">Overline above title</Text>,
     title: 'Section Title',
   },
 };
@@ -84,7 +83,6 @@ export const WithTitleBefore: StoryObj<Args> = {
   args: {
     titleBefore: HelpIcon,
     title: 'Section Title',
-    headingSize: 'h4',
     headingAs: 'h4',
   },
 };
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
index 35f91204e..223cc69da 100644
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { HeadingElement, HeadingSize } from '../Heading';
+import type { HeadingElement } from '../Heading';
 import Heading from '../Heading';
 import styles from './Section.module.css';
 export interface Props {
@@ -28,12 +28,10 @@ export interface Props {
   overline?: ReactNode;
   /**
    * "as" prop, passed to Heading Component
+   *
+   * **Default is `"h2"`.
    */
   headingAs?: HeadingElement;
-  /**
-   * "size" prop, passed to Heading Component
-   */
-  headingSize?: HeadingSize;
   /**
    * Right slot - an area to put right-aligned content after section title
    */
@@ -56,18 +54,13 @@ export interface Props {
  * `import {Section} from "@chanzuckerberg/eds";`
  *
  * Section component contains a section header and body.
- *
- * The Heading component requires a value for "size", so this headingAs prop is provided
- * a default value of "h2" to allow it to remain optional on Section component.
- * @deprecated
  */
 export const Section = ({
   align,
   children,
   className,
   description,
-  headingAs,
-  headingSize = 'h2',
+  headingAs = 'h2',
   overline,
   right,
   title,
@@ -95,11 +88,7 @@ export const Section = ({
               {overline && (
                 <div className={styles['section__overline']}>{overline}</div>
               )}
-              <Heading
-                as={headingAs}
-                className={styles['section__title']}
-                size={headingSize}
-              >
+              <Heading as={headingAs} className={styles['section__title']}>
                 {title}
                 {titleAfter && (
                   <span className={styles['section__title-after']}>
diff --git a/src/components/Section/__snapshots__/Section.test.ts.snap b/src/components/Section/__snapshots__/Section.test.ts.snap
index ec37554f7..17ea52809 100644
--- a/src/components/Section/__snapshots__/Section.test.ts.snap
+++ b/src/components/Section/__snapshots__/Section.test.ts.snap
@@ -26,7 +26,7 @@ exports[`<Section /> Center story renders snapshot 1`] = `
             </p>
           </div>
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -34,7 +34,7 @@ exports[`<Section /> Center story renders snapshot 1`] = `
             class="section__description"
           >
             <p
-              class="text text--sm section__text"
+              class="text text--body-xs"
             >
               This is a description of what the section is
             </p>
@@ -68,7 +68,7 @@ exports[`<Section /> Default story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -101,7 +101,7 @@ exports[`<Section /> WithDescription story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -109,7 +109,7 @@ exports[`<Section /> WithDescription story renders snapshot 1`] = `
             class="section__description"
           >
             <p
-              class="text text--sm section__text"
+              class="text text--body-xs"
             >
               This is a description of what the section is
             </p>
@@ -152,7 +152,7 @@ exports[`<Section /> WithOverline story renders snapshot 1`] = `
             </p>
           </div>
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -185,7 +185,7 @@ exports[`<Section /> WithRight story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -228,7 +228,7 @@ exports[`<Section /> WithTitleAfter story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
             <span
@@ -303,7 +303,7 @@ exports[`<Section /> WithTitleBefore story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h4
-            class="heading heading--size-h4 section__title"
+            class="heading heading--title-md section__title"
           >
             Section Title
           </h4>
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
index 3f348115e..e9ddfae19 100644
--- a/src/components/Select/Select.module.css
+++ b/src/components/Select/Select.module.css
@@ -11,18 +11,6 @@
   position: relative;
 }
 
-/**
- * Compact variant.
- * TODO: remove treatment for compact, as it only adjusts the component width, not its overall padding
- */
-.select--compact {
-  width: min-content;
-}
-
-.select-button--compact {
-  padding: var(--eds-size-half);
-}
-
 /**
  * Label on top of the select trigger button to label the select field.
  */
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index ec84fdb3a..33ca00494 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -17,9 +17,6 @@ import PopoverListItem from '../PopoverListItem';
 import Text from '../Text';
 import styles from './Select.module.css';
 
-export type OptionsAlignType = 'left' | 'right';
-export type VariantType = 'compact' | 'full';
-
 type SelectProps = ExtractProps<typeof Listbox> &
   PopoverOptions & {
     /**
@@ -40,11 +37,6 @@ type SelectProps = ExtractProps<typeof Listbox> &
      * See: https://headlessui.com/react/listbox#using-with-html-forms
      */
     name?: string;
-    /**
-     * Align select's popover to the left (default) or right of the trigger button's bottom edge.
-     * @deprecated
-     */
-    optionsAlign?: OptionsAlignType;
     /**
      * Optional className for additional options menu styling.
      *
@@ -52,15 +44,6 @@ type SelectProps = ExtractProps<typeof Listbox> &
      * include the width property to define the options menu width.
      */
     optionsClassName?: string;
-    /**
-     * The style of the select.
-     *
-     * Compact renders select trigger button that is only as wide as the content.
-     *
-     * This is **deprecated**. Please use utility classes to adjust the component width.
-     * @deprecated
-     */
-    variant?: VariantType;
     /**
      * Visible text label for the component.
      */
@@ -118,8 +101,6 @@ type SelectButtonWrapperProps = {
 };
 
 type SelectContextType = PopoverContext & {
-  compact?: boolean;
-  optionsAlign?: OptionsAlignType;
   optionsClassName?: string;
 };
 
@@ -163,12 +144,10 @@ export function Select(props: SelectProps) {
     modifiers = defaultPopoverModifiers,
     name,
     onFirstUpdate,
-    optionsAlign,
     optionsClassName,
     placement = 'bottom-start',
     required,
     strategy,
-    variant,
     onChange: theirOnChange,
     ...other
   } = props;
@@ -188,20 +167,12 @@ export function Select(props: SelectProps) {
     }
   }
 
-  // Translate old optionsAlign to placement values
-  // TODO: when removing optionsAlign, also remove this
-  const optionsPlacement: SelectProps['placement'] = optionsAlign
-    ? ({ left: 'bottom-start', right: 'bottom-end' }[
-        optionsAlign
-      ] as SelectProps['placement'])
-    : placement;
-
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const { styles: popperStyles, attributes: popperAttributes } = usePopper(
     referenceElement,
     popperElement,
-    { placement: optionsPlacement, modifiers, strategy, onFirstUpdate },
+    { placement, modifiers, strategy, onFirstUpdate },
   );
 
   // Create a new value to track the internal state of Listbox. Added to work around
@@ -211,13 +182,7 @@ export function Select(props: SelectProps) {
     other.value !== undefined ? other.value : other.defaultValue,
   );
 
-  const compact = variant === 'compact';
-
-  const componentClassName = clsx(
-    styles['select'],
-    compact && styles['select--compact'],
-    className,
-  );
+  const componentClassName = clsx(styles['select'], className);
   const sharedProps = {
     className: componentClassName,
     // Provide a wrapping <div> element for the select. This is needed so that any props
@@ -229,8 +194,7 @@ export function Select(props: SelectProps) {
   };
 
   const contextValue = Object.assign(
-    { compact },
-    optionsAlign ? { optionsAlign } : null,
+    {},
     optionsClassName ? { optionsClassName } : null,
     { setReferenceElement },
     { setPopperElement },
@@ -300,12 +264,7 @@ const SelectLabel = (props: SelectLabelProps) => {
     <div className={overlineClassName}>
       <Listbox.Label className={componentClassName}>{label}</Listbox.Label>
       {required && (
-        <Text
-          as="span"
-          className={requiredTextClassName}
-          preset="body-sm"
-          size="sm"
-        >
+        <Text as="span" className={requiredTextClassName} preset="body-sm">
           Required
         </Text>
       )}
@@ -318,12 +277,7 @@ const SelectLabel = (props: SelectLabelProps) => {
  */
 const SelectButton = function (props: SelectButtonProps) {
   const { children, className, onClick: theirOnClick, ...other } = props;
-  const { compact, setReferenceElement } = useContext(SelectContext);
-
-  const componentClassName = clsx(
-    className,
-    compact && styles['select-button--compact'],
-  );
+  const { setReferenceElement } = useContext(SelectContext);
 
   return (
     <Listbox.Button
@@ -339,7 +293,7 @@ const SelectButton = function (props: SelectButtonProps) {
           children(renderProps)
         ) : (
           <SelectButtonWrapper
-            className={componentClassName}
+            className={className}
             isOpen={renderProps.open}
             onClick={(event) => {
               theirOnClick && theirOnClick(event);
diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx
index 80520862d..a8777a58d 100644
--- a/src/components/Skeleton/Skeleton.stories.tsx
+++ b/src/components/Skeleton/Skeleton.stories.tsx
@@ -1,4 +1,3 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -7,11 +6,6 @@ import { Skeleton } from './Skeleton';
 export default {
   title: 'Components/Skeleton',
   component: Skeleton,
-  subcomponents: {
-    'Skeleton.Circle': Skeleton.Circle,
-    'Skeleton.Rect': Skeleton.Rect,
-    'Skeleton.Text': Skeleton.Text,
-  },
   parameters: {
     badges: ['1.2'],
     layout: 'centered',
@@ -23,6 +17,9 @@ export default {
 
 type Args = React.ComponentProps<typeof Skeleton>;
 
+/**
+ * The default shape for a skeleton is a Rounded rectangle with an optional animation.
+ */
 export const Default: StoryObj<Args> = {
   args: {
     width: 100,
@@ -30,19 +27,9 @@ export const Default: StoryObj<Args> = {
   },
 };
 
-export const Rect: StoryObj<Args> = {
-  args: {
-    width: 50,
-    height: 50,
-  },
-  parameters: {
-    badges: [BADGE.DEPRECATED],
-  },
-  render: (args) => {
-    return <Skeleton.Rect {...args} />;
-  },
-};
-
+/**
+ * It's also possible to use a fully-rounded circle for components like `Avatar`. Only `width` is defined for `.Circle`.
+ */
 export const Circle: StoryObj<React.ComponentProps<typeof Skeleton.Circle>> = {
   args: {
     width: 100,
@@ -52,6 +39,10 @@ export const Circle: StoryObj<React.ComponentProps<typeof Skeleton.Circle>> = {
   },
 };
 
+/**
+ * You can also use a specific variant for handling text. It is recommended to use charactor spacing units,
+ * representing the length in a way that mimics expected/maximum character length.
+ */
 export const Text: StoryObj<React.ComponentProps<typeof Skeleton.Text>> = {
   args: {
     width: '30ch',
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
index d9960e75e..0410d1bcb 100644
--- a/src/components/Skeleton/Skeleton.tsx
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -23,14 +23,6 @@ type SkeletonProps = BaseProps & {
  * `import {Skeleton} from "@chanzuckerberg/eds";`
  *
  * Skeleton states inform users about the wait time, reason, and status of ongoing processes, showing the expected layout
- *
- * Examples:
- *
- * For text, Use `Skeleton.Text` and specify the height and the width (for example in 'ch' units).
- *
- * For circular objects, use `Skeleton.Circle` and specify the width (which is the same as the height).
- *
- * For rectangular objects, just use `Skeleton` and specify the width and height.
  */
 export const Skeleton = ({
   className,
@@ -111,6 +103,4 @@ TextSkeleton.displayName = 'Skeleton.Text';
 CircleSkeleton.displayName = 'Skeleton.Circle';
 
 Skeleton.Text = TextSkeleton;
-/** @deprecated Use `Skeleton` instead */
-Skeleton.Rect = Skeleton;
 Skeleton.Circle = CircleSkeleton;
diff --git a/src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap b/src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap
index 5eccc9ed9..ce1429065 100644
--- a/src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap
+++ b/src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap
@@ -16,14 +16,6 @@ exports[`<Skeleton /> Default story renders snapshot 1`] = `
 />
 `;
 
-exports[`<Skeleton /> Rect story renders snapshot 1`] = `
-<div
-  aria-hidden="true"
-  class="skeleton skeleton--is-animating"
-  style="width: 50px; height: 50px;"
-/>
-`;
-
 exports[`<Skeleton /> Text story renders snapshot 1`] = `
 <div
   aria-hidden="true"
diff --git a/src/components/Slider/Slider.module.css b/src/components/Slider/Slider.module.css
index 66f13e615..da9c55835 100644
--- a/src/components/Slider/Slider.module.css
+++ b/src/components/Slider/Slider.module.css
@@ -140,6 +140,8 @@
   display: flex;
   justify-content: space-between;
 
+  color: var(--eds-theme-color-text-neutral-default);
+
   /* Calculates offset of the markers to align with actual values */
   padding-left: calc(var(--eds-theme-size-slider-thumb) / 2);
   padding-right: calc(var(--eds-theme-size-slider-thumb) / 2);
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 30950fbd8..06988d06e 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -295,7 +295,7 @@ export const WithHighlightedContent: Story = {
             onChange={({ target }) => setSliderValue(Number(target.value))}
             value={sliderValue}
           />
-          <div className="text-h1">
+          <Text as="span" preset="body-xl">
             {moodData.map((mood, index) => {
               return (
                 sliderValue === mood.value && (
@@ -303,7 +303,7 @@ export const WithHighlightedContent: Story = {
                 )
               );
             })}
-          </div>
+          </Text>
         </div>
         <Text className="py-3 text-center" id="mood-description">
           Current mood:{' '}
@@ -340,7 +340,7 @@ export const WithVisualLabel: Story = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="w-1/2 py-4 text-center text-h1">
+          <Text as="span" className="w-1/2 py-4 text-center" preset="body-xl">
             {moodData.map((mood) => {
               return (
                 sliderValue === mood.value && (
@@ -348,7 +348,7 @@ export const WithVisualLabel: Story = {
                 )
               );
             })}
-          </div>
+          </Text>
           <Slider
             aria-label="Mood Slider"
             aria-labelledby="slider-label"
@@ -383,7 +383,11 @@ export const WithMultipleVisualLabels: Story = {
             id="slider-label"
             text="Mood Slider"
           />
-          <div className="flex w-1/2 justify-between py-4 text-center text-h1">
+          <Text
+            as="span"
+            className="flex w-1/2 justify-between py-4 text-center"
+            preset="body-xl"
+          >
             {moodData.map((mood, index) => {
               return (
                 <div
@@ -398,7 +402,7 @@ export const WithMultipleVisualLabels: Story = {
                 </div>
               );
             })}
-          </div>
+          </Text>
           <Slider
             aria-label="Mood Slider"
             aria-labelledby="slider-label"
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 5373cbbf8..8a2f4226b 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -158,7 +158,6 @@ export const Slider = ({
       />
       {tooltip && (
         <Tooltip
-          align="top"
           appendTo="parent"
           hideOnClick={false}
           offset={({ reference }) => {
@@ -172,6 +171,7 @@ export const Slider = ({
             // offsets the tooltip relative to the position and size of the thumb
             return [(ratio - 0.5) * (reference.width - thumbSize), 0];
           }}
+          placement="top"
           reference={ref}
           text={tooltip}
           touch="hold"
@@ -193,7 +193,6 @@ export const Slider = ({
                 <Text
                   className={markerClassName}
                   key={'slider-option-' + marker}
-                  variant="neutral-medium"
                 >
                   {marker}
                 </Text>
@@ -204,11 +203,7 @@ export const Slider = ({
       {!fieldNote && Array.isArray(markers) && (
         <div aria-hidden className={styles['slider__markers']}>
           {markers.map((marker) => (
-            <Text
-              className={markerClassName}
-              key={'slider-option-' + marker}
-              variant="neutral-medium"
-            >
+            <Text className={markerClassName} key={'slider-option-' + marker}>
               {marker}
             </Text>
           ))}
diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
index 0fe0d0e09..305efff57 100644
--- a/src/components/Slider/__snapshots__/Slider.test.tsx.snap
+++ b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -61,27 +61,27 @@ exports[`<Slider /> Disabled story renders snapshot 1`] = `
       class="slider__markers"
     >
       <p
-        class="text text--body text--neutral-medium slider__marker slider__marker--disabled"
+        class="text text--body-md slider__marker slider__marker--disabled"
       >
         1
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker slider__marker--disabled"
+        class="text text--body-md slider__marker slider__marker--disabled"
       >
         2
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker slider__marker--disabled"
+        class="text text--body-md slider__marker slider__marker--disabled"
       >
         3
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker slider__marker--disabled"
+        class="text text--body-md slider__marker slider__marker--disabled"
       >
         4
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker slider__marker--disabled"
+        class="text text--body-md slider__marker slider__marker--disabled"
       >
         5
       </p>
@@ -160,27 +160,27 @@ exports[`<Slider /> GeneratedMarkers story renders snapshot 1`] = `
       class="slider__markers"
     >
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         1
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         2
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         3
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         4
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         5
       </p>
@@ -224,27 +224,27 @@ exports[`<Slider /> MarkersLargeValues story renders snapshot 1`] = `
         class="slider__markers"
       >
         <p
-          class="text text--body text--neutral-medium slider__marker"
+          class="text text--body-md slider__marker"
         >
           0
         </p>
         <p
-          class="text text--body text--neutral-medium slider__marker"
+          class="text text--body-md slider__marker"
         >
           2500
         </p>
         <p
-          class="text text--body text--neutral-medium slider__marker"
+          class="text text--body-md slider__marker"
         >
           5000
         </p>
         <p
-          class="text text--body text--neutral-medium slider__marker"
+          class="text text--body-md slider__marker"
         >
           7500
         </p>
         <p
-          class="text text--body text--neutral-medium slider__marker"
+          class="text text--body-md slider__marker"
         >
           10000
         </p>
@@ -286,27 +286,27 @@ exports[`<Slider /> MarkersSmallValues story renders snapshot 1`] = `
       class="slider__markers"
     >
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         1
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         2
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         3
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         4
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         5
       </p>
@@ -347,27 +347,27 @@ exports[`<Slider /> NegativeNonIntegerMarkers story renders snapshot 1`] = `
       class="slider__markers"
     >
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         -1
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         -0.5
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         0
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         0.5
       </p>
       <p
-        class="text text--body text--neutral-medium slider__marker"
+        class="text text--body-md slider__marker"
       >
         1
       </p>
@@ -419,7 +419,7 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
       –
     </button>
     <p
-      class="text text--body"
+      class="text text--body-md"
     >
       0
     </p>
@@ -442,7 +442,7 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
       />
     </div>
     <p
-      class="text text--body"
+      class="text text--body-md"
     >
       100
     </p>
@@ -465,7 +465,7 @@ exports[`<Slider /> UsingInputDisplay story renders snapshot 1`] = `
     class="flex w-full items-center justify-center gap-2"
   >
     <p
-      class="text text--body"
+      class="text text--body-md"
     >
       0
     </p>
@@ -488,7 +488,7 @@ exports[`<Slider /> UsingInputDisplay story renders snapshot 1`] = `
       />
     </div>
     <p
-      class="text text--body"
+      class="text text--body-md"
     >
       100
     </p>
@@ -541,27 +541,27 @@ exports[`<Slider /> WithHighlightedContent story renders snapshot 1`] = `
           class="slider__markers"
         >
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Neutral
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Happy
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Happy
           </p>
@@ -570,16 +570,16 @@ exports[`<Slider /> WithHighlightedContent story renders snapshot 1`] = `
           class="slider__thumb-proxy"
         />
       </div>
-      <div
-        class="text-h1"
+      <span
+        class="text text--body-xl"
       >
         <span>
           😐
         </span>
-      </div>
+      </span>
     </div>
     <p
-      class="text text--body py-3 text-center"
+      class="text text--body-md py-3 text-center"
       id="mood-description"
     >
       Current mood:
@@ -609,8 +609,8 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
         Mood Slider
          
       </label>
-      <div
-        class="flex w-1/2 justify-between py-4 text-center text-h1"
+      <span
+        class="text text--body-xl flex w-1/2 justify-between py-4 text-center"
       >
         <div
           class=""
@@ -637,7 +637,7 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
         >
           😍
         </div>
-      </div>
+      </span>
       <div
         class="slider w-1/2"
       >
@@ -658,27 +658,27 @@ exports[`<Slider /> WithMultipleVisualLabels story renders snapshot 1`] = `
           class="slider__markers"
         >
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Neutral
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Happy
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Happy
           </p>
@@ -707,13 +707,13 @@ exports[`<Slider /> WithVisualLabel story renders snapshot 1`] = `
         Mood Slider
          
       </label>
-      <div
-        class="w-1/2 py-4 text-center text-h1"
+      <span
+        class="text text--body-xl w-1/2 py-4 text-center"
       >
         <span>
           😐
         </span>
-      </div>
+      </span>
       <div
         class="slider w-1/2"
       >
@@ -734,27 +734,27 @@ exports[`<Slider /> WithVisualLabel story renders snapshot 1`] = `
           class="slider__markers"
         >
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Upset
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Neutral
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Happy
           </p>
           <p
-            class="text text--body text--neutral-medium slider__marker"
+            class="text text--body-md slider__marker"
           >
             Very Happy
           </p>
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
deleted file mode 100644
index d1f441196..000000000
--- a/src/components/Tab/Tab.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { ReactNode } from 'react';
-
-import React from 'react';
-import { withoutTypes } from 'react-children-by-type';
-
-import type { RenderProps } from '../../util/utility-types';
-
-import { type TabContextArgs } from '../Tabs/Tabs';
-
-export interface TabProps {
-  /**
-   * aria-labelledby attribute that associates a tab panel with its accompanying tab title
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-  /**
-   * Number passed down from Tabs to show the active index state of Tabs
-   */
-  isActiveIndex?: number;
-  /**
-   * Text used to label the tab in the tab list
-   */
-  title: string;
-}
-
-type TabButtonProps = RenderProps<TabContextArgs>;
-
-/**
- * `import {Tab} from "@chanzuckerberg/eds";`
- *
- * Individual tab within the Tabs component.
- * - Use the `title` prop for text-only tab headers
- * - For more custom tab headers use `<Tab.Button>` which uses a render prop with state information
- */
-export const Tab = ({
-  children,
-  className,
-  id,
-  // Destructure `title` so it is not applied to the rendered element
-  title,
-  'aria-labelledby': ariaLabelledBy,
-  ...other
-}: TabProps) => {
-  return (
-    <div
-      aria-hidden={false}
-      aria-labelledby={ariaLabelledBy}
-      className={className}
-      id={id}
-      role="tabpanel"
-      {...other}
-    >
-      {withoutTypes(children, TabButton)}
-    </div>
-  );
-};
-
-/**
- * This component is a stub, and exists to give a type to the custom Tab button.
- * It cannot be used as a standalone sub-component. See <Tabs> for where we trigger the render prop.
- */
-const TabButton = (props: TabButtonProps) => {
-  return <div />;
-};
-
-Tab.displayName = 'Tab';
-TabButton.displayName = 'Tab.Button';
-
-/**
- * Allows for control of the Tab Title contents, for custom tab handling
- *
- * ```jsx
- * <Tab.Button>
- *     {({active, title}) => (
- *         <SomeCustomComponent isActive={active} title={title} />
- *     )}
- * </Tab.Button>
- * ```
- */
-Tab.Button = TabButton;
diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts
deleted file mode 100644
index 9be1f73ff..000000000
--- a/src/components/Tab/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Tab as default } from './Tab';
-export type { TabProps } from './Tab';
diff --git a/src/components/Table/Filters.tsx b/src/components/Table/Filters.tsx
deleted file mode 100644
index eac2481f8..000000000
--- a/src/components/Table/Filters.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import debounce from 'lodash/debounce';
-import React, { useEffect, useState } from 'react';
-import {
-  Checkbox,
-  FiltersCheckboxField,
-  FiltersDrawer,
-  FiltersPopover,
-  Icon,
-  Table,
-} from '../../../src';
-
-import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
-
-/**
- * Demonstrates usage of both FiltersPopover and FiltersDrawer depending on screensize.
- */
-export const Filters = ({ ...other }) => {
-  const [isLarge, setIsLarge] = useState(false);
-  const popoverBreakpoint = parseInt(breakpoint['eds-bp-md'], 10) * 16;
-
-  const updateScreenSize = debounce(() => {
-    if (window.innerWidth >= popoverBreakpoint && !isLarge) {
-      setIsLarge(true);
-    }
-    if (window.innerWidth < popoverBreakpoint && isLarge) {
-      setIsLarge(false);
-    }
-  }, 200);
-
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-    return () => {
-      window.removeEventListener('resize', updateScreenSize);
-    };
-  }, [updateScreenSize]);
-
-  const [checked, setChecked] = useState({
-    salad: false,
-    sandwich: false,
-    soup: false,
-  });
-
-  const onCheckboxChange = (food: 'salad' | 'sandwich' | 'soup') => {
-    const newChecked = { ...checked };
-    newChecked[food] = !checked[food];
-    setChecked(newChecked);
-  };
-
-  /**
-   * Counts how many filters have been applied.
-   */
-  const filterCount = Object.values(checked).reduce((count: number, status) => {
-    return status ? count + 1 : count;
-  }, 0);
-
-  const hasSelectedFilters = filterCount > 0;
-  const triggerText = hasSelectedFilters
-    ? `Filters (${filterCount})`
-    : 'Filters';
-
-  const checkboxes = (
-    <FiltersCheckboxField legend="Filters Segment 1">
-      <Checkbox
-        checked={checked.soup}
-        label="Soup"
-        onChange={() => onCheckboxChange('soup')}
-      />
-      <Checkbox
-        checked={checked.salad}
-        label="Salad"
-        onChange={() => onCheckboxChange('salad')}
-      />
-      <Checkbox
-        checked={checked.sandwich}
-        label="Sandwich"
-        onChange={() => onCheckboxChange('sandwich')}
-      />
-    </FiltersCheckboxField>
-  );
-
-  const foods = [
-    {
-      name: 'Cereal',
-      isSoup: true,
-      isSalad: true,
-      isSandwich: false,
-    },
-    {
-      name: 'Fried Rice',
-      isSoup: false,
-      isSalad: true,
-      isSandwich: false,
-    },
-    {
-      name: 'Hot Dog',
-      isSoup: false,
-      isSalad: false,
-      isSandwich: true,
-    },
-    {
-      name: 'Mashed Potatoes',
-      isSoup: true,
-      isSalad: true,
-      isSandwich: false,
-    },
-    {
-      name: 'Nigiri',
-      isSoup: false,
-      isSalad: true,
-      isSandwich: true,
-    },
-    {
-      name: 'Oatmeal',
-      isSoup: true,
-      isSalad: false,
-      isSandwich: false,
-    },
-    {
-      name: 'Soup in Bread Bowl',
-      isSoup: true,
-      isSalad: false,
-      isSandwich: true,
-    },
-    {
-      name: 'Sloppy Joe',
-      isSoup: true,
-      isSalad: true,
-      isSandwich: true,
-    },
-    {
-      name: 'Vanilla Soy Latte',
-      isSoup: true,
-      isSalad: false,
-      isSandwich: false,
-    },
-  ];
-
-  /**
-   * Utility function for checking if filter category has been applied.
-   * If filter has not been applied, should not filter for the food.
-   */
-  const whenChecked = (filter: boolean, data: boolean) =>
-    filter ? filter === data : true;
-
-  // Filter for foods that have been checked.
-  const filteredFoods = foods
-    .filter((food) => whenChecked(checked.salad, food.isSalad))
-    .filter((food) => whenChecked(checked.soup, food.isSoup))
-    .filter((food) => whenChecked(checked.sandwich, food.isSandwich));
-
-  const foodTable = (
-    <Table>
-      <Table.Header>
-        <Table.Row variant="header">
-          <Table.HeaderCell className="w-1/4">Food</Table.HeaderCell>
-          <Table.HeaderCell className="w-1/4 text-center">
-            Soup
-          </Table.HeaderCell>
-          <Table.HeaderCell className="w-1/4 text-center">
-            Salad
-          </Table.HeaderCell>
-          <Table.HeaderCell className="w-1/4 text-center">
-            Sandwich
-          </Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {filteredFoods.map((food) => (
-          <Table.Row key={'table-row-' + food.name}>
-            <Table.Cell>{food.name}</Table.Cell>
-            <Table.Cell className="w-1/4 text-center">
-              {(food.isSoup && (
-                <Icon name="star" purpose="informative" title="is soup" />
-              )) ||
-                ''}
-            </Table.Cell>
-            <Table.Cell className="text-center">
-              {(food.isSalad && (
-                <Icon name="star" purpose="informative" title="is salad" />
-              )) ||
-                ''}
-            </Table.Cell>
-            <Table.Cell className="text-center">
-              {(food.isSandwich && (
-                <Icon name="star" purpose="informative" title="is sandwich" />
-              )) ||
-                ''}
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-
-  const sharedProps = {
-    hasSelectedFilters,
-    triggerText,
-    children: checkboxes,
-    ...other,
-  };
-
-  return (
-    <div>
-      {!isLarge && <FiltersDrawer {...sharedProps} />}
-      {isLarge && <FiltersPopover placement="bottom-start" {...sharedProps} />}
-      {foodTable}
-    </div>
-  );
-};
diff --git a/src/components/Table/StackedCardsToTable.tsx b/src/components/Table/StackedCardsToTable.tsx
index e52f1106f..61c7c8785 100644
--- a/src/components/Table/StackedCardsToTable.tsx
+++ b/src/components/Table/StackedCardsToTable.tsx
@@ -117,33 +117,33 @@ export const StackedCardsToTable = () => {
       {!isTable &&
         checkpointProgresses.map((progress) => (
           <Card className="mb-4 py-8" key={`progress-${progress.student}`}>
-            <Card.Header>
-              <Text as="p" size="lg" weight="bold">
+            <Card.Header className="mb-4">
+              <Text as="p" preset="title-md-bold">
                 {progress.student}
               </Text>
             </Card.Header>
             <Card.Body>
               <div className="flex justify-between">
-                <Text as="p" size="sm" weight="bold">
+                <Text as="p" preset="title-xs-bold">
                   Status
                 </Text>
-                <Text as="p" size="sm">
+                <Text as="p" preset="title-xs-bold">
                   {progress.status}
                 </Text>
               </div>
               <div className="flex justify-between">
-                <Text as="p" size="sm" weight="bold">
+                <Text as="p" preset="title-xs-bold">
                   Cog skill
                 </Text>
-                <Text as="p" size="sm">
+                <Text as="p" preset="title-xs-bold">
                   {progress.cogSkill}
                 </Text>
               </div>
               <div className="flex justify-between">
-                <Text as="p" size="sm" weight="bold">
+                <Text as="p" preset="title-xs-bold">
                   Time submitted
                 </Text>
-                <Text as="p" size="sm">
+                <Text as="p" preset="title-xs-bold">
                   {progress.timeSubmitted}
                 </Text>
               </div>
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 647aca5f8..be18385e7 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -1,8 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-// Implementation examples, separated out into separate files
-import { Filters } from './Filters';
 import { StackedCardsToTable } from './StackedCardsToTable';
 
 import { Table, type SortDirectionsType } from './Table';
@@ -248,18 +246,6 @@ export const SortableInteractive: Story = {
   },
 };
 
-/**
- * Filtering can be implemented such that results only show some content of the table.
- *
- * Code: https://github.com/chanzuckerberg/edu-design-system/blob/main/src/components/Table/Filters.tsx
- */
-export const FiltersInteractive: Story = {
-  parameters: {
-    badges: ['1.1', 'implementationExample'],
-  },
-  render: (args) => <Filters {...args} />,
-};
-
 /**
  * Responsive behavior can be built by combining different components and responsive logic
  *
diff --git a/src/components/Table/__snapshots__/Table.test.ts.snap b/src/components/Table/__snapshots__/Table.test.ts.snap
index 93e318cc3..e7cdae52a 100644
--- a/src/components/Table/__snapshots__/Table.test.ts.snap
+++ b/src/components/Table/__snapshots__/Table.test.ts.snap
@@ -156,452 +156,6 @@ exports[`<Table /> Default story renders snapshot 1`] = `
 </table>
 `;
 
-exports[`<Table /> FiltersInteractive story renders snapshot 1`] = `
-<div>
-  <div>
-    <button
-      class="button button--lg button--secondary button--neutral filters-button"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon"
-        fill="currentColor"
-        height="1.5rem"
-        style="--icon-size: 1.5rem;"
-        viewBox="0 0 24 24"
-        width="1.5rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-        />
-      </svg>
-      Filters
-    </button>
-  </div>
-  <table
-    class="table"
-  >
-    <thead>
-      <tr
-        class="table-row table-row--header"
-      >
-        <th
-          class="table-header-cell w-1/4"
-        >
-          Food
-        </th>
-        <th
-          class="table-header-cell w-1/4 text-center"
-        >
-          Soup
-        </th>
-        <th
-          class="table-header-cell w-1/4 text-center"
-        >
-          Salad
-        </th>
-        <th
-          class="table-header-cell w-1/4 text-center"
-        >
-          Sandwich
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Cereal
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is salad
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Fried Rice
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        />
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is salad
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Hot Dog
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        />
-        <td
-          class="table-cell text-center"
-        />
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is sandwich
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Mashed Potatoes
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is salad
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Nigiri
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        />
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is salad
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is sandwich
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Oatmeal
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-        <td
-          class="table-cell text-center"
-        />
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Soup in Bread Bowl
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is sandwich
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Sloppy Joe
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is salad
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is sandwich
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-      </tr>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell"
-        >
-          Vanilla Soy Latte
-        </td>
-        <td
-          class="table-cell w-1/4 text-center"
-        >
-          <svg
-            class="icon"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              is soup
-            </title>
-            <path
-              d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-            />
-          </svg>
-        </td>
-        <td
-          class="table-cell text-center"
-        />
-        <td
-          class="table-cell text-center"
-        />
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
 exports[`<Table /> SortableInteractive story renders snapshot 1`] = `
 <table
   class="table"
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 771a3b6ad..3c433889a 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -6,7 +6,6 @@ import { Tabs } from './Tabs';
 import { chromaticViewports } from '../../util/viewports';
 import Heading from '../Heading';
 import Icon, { type IconName } from '../Icon';
-import Tab from '../Tab';
 import Text from '../Text';
 
 export default {
@@ -15,13 +14,12 @@ export default {
   parameters: {
     badges: ['1.0'],
   },
-  subcomponents: { Tabs },
   args: {
     children: (
       <>
-        <Tab title="Tab Title 1">
+        <Tabs.Tab title="Tab Title 1">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 1
             </Heading>
             <Text>
@@ -31,11 +29,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 2">
+        <Tabs.Tab title="Tab Title 2">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 2
             </Heading>
             <Text>
@@ -45,11 +43,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 3">
+        <Tabs.Tab title="Tab Title 3">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 3
             </Heading>
             <Text>
@@ -59,11 +57,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 4">
+        <Tabs.Tab title="Tab Title 4">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 4
             </Heading>
             <Text>
@@ -73,11 +71,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 5">
+        <Tabs.Tab title="Tab Title 5">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 5
             </Heading>
             <Text>
@@ -87,11 +85,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 6">
+        <Tabs.Tab title="Tab Title 6">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 6
             </Heading>
             <Text>
@@ -101,11 +99,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 7">
+        <Tabs.Tab title="Tab Title 7">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 7
             </Heading>
             <Text>
@@ -115,11 +113,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 8">
+        <Tabs.Tab title="Tab Title 8">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 8
             </Heading>
             <Text>
@@ -129,11 +127,11 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 9">
+        <Tabs.Tab title="Tab Title 9">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 9
             </Heading>
             <Text>
@@ -143,7 +141,7 @@ export default {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
       </>
     ),
   },
@@ -223,7 +221,7 @@ const IconTab = ({
     <div className="p-3 text-center">
       <Icon name={icon} purpose="decorative" size="1rem" />
     </div>
-    <Text size="caption-lg">{`${isActive ? '●' : '◦'} ${title}`}</Text>
+    <Text preset="caption-lg">{`${isActive ? '●' : '◦'} ${title}`}</Text>
   </div>
 );
 
@@ -234,8 +232,8 @@ export const CustomTabs: StoryObj<Args> = {
       source: {
         code: `
 <Tabs>
-  <Tab title="Tab Title 1">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 1">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -243,7 +241,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 1
@@ -255,10 +253,10 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab title="Tab Title 2">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 2">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -266,7 +264,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 2
@@ -278,10 +276,10 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab title="Tab Title 3">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 3">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -289,7 +287,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 3
@@ -301,10 +299,10 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab title="Tab Title 4">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 4">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -312,7 +310,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 4
@@ -324,10 +322,10 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab title="Tab Title 5">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 5">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -335,7 +333,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 5
@@ -347,10 +345,10 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab title="Tab Title 6">
-    <Tab.Button>
+  <Tabs.Tab title="Tab Title 6">
+    <Tabs.Tab.Button>
       {({ active, title }) => (
         <IconTab
           icon={active ? 'person' : 'people'}
@@ -358,7 +356,7 @@ export const CustomTabs: StoryObj<Args> = {
           title={title}
         />
       )}
-    </Tab.Button>
+    </Tabs.Tab.Button>
     <div className="max-w-xl">
       <Heading className="mb-6" size="h3">
         Tab 6
@@ -370,7 +368,7 @@ export const CustomTabs: StoryObj<Args> = {
         nisi ut aliquip ex{' '}
       </Text>
     </div>
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
         `,
       },
@@ -379,8 +377,8 @@ export const CustomTabs: StoryObj<Args> = {
   args: {
     children: (
       <>
-        <Tab title="Tab Title 1">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 1">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -388,9 +386,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 1
             </Heading>
             <Text>
@@ -400,10 +398,10 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 2">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 2">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -411,9 +409,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 2
             </Heading>
             <Text>
@@ -423,10 +421,10 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 3">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 3">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -434,9 +432,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 3
             </Heading>
             <Text>
@@ -446,10 +444,10 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 4">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 4">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -457,9 +455,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 4
             </Heading>
             <Text>
@@ -469,10 +467,10 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 5">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 5">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -480,9 +478,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 5
             </Heading>
             <Text>
@@ -492,10 +490,10 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
 
-        <Tab title="Tab Title 6">
-          <Tab.Button>
+        <Tabs.Tab title="Tab Title 6">
+          <Tabs.Tab.Button>
             {({ active, title }) => (
               <IconTab
                 icon={active ? 'person' : 'people'}
@@ -503,9 +501,9 @@ export const CustomTabs: StoryObj<Args> = {
                 title={title}
               />
             )}
-          </Tab.Button>
+          </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 6
             </Heading>
             <Text>
@@ -515,7 +513,7 @@ export const CustomTabs: StoryObj<Args> = {
               nisi ut aliquip ex{' '}
             </Text>
           </div>
-        </Tab>
+        </Tabs.Tab>
       </>
     ),
   },
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
index edef30c74..093ad712e 100644
--- a/src/components/Tabs/Tabs.test.tsx
+++ b/src/components/Tabs/Tabs.test.tsx
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import * as stories from './Tabs.stories';
-import Tab from '../Tab';
+import Tabs from '../Tabs';
 
 const { Default } = composeStories(stories);
 
@@ -50,9 +50,9 @@ describe('<Tabs />', () => {
   it('does not include invalid characters in tab ids', () => {
     render(
       <Default id="foo">
-        <Tab data-testid="tab-1" title="Tab Title 1">
+        <Tabs.Tab data-testid="tab-1" title="Tab Title 1">
           Tab numero uno
-        </Tab>
+        </Tabs.Tab>
       </Default>,
     );
 
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index ac5055129..24f877f04 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -9,7 +9,8 @@ import React, {
   useState,
   type KeyboardEvent,
 } from 'react';
-import { allByType, oneByType } from 'react-children-by-type';
+import { allByType, oneByType, withoutTypes } from 'react-children-by-type';
+
 import {
   L_ARROW_KEYCODE,
   U_ARROW_KEYCODE,
@@ -17,11 +18,11 @@ import {
   D_ARROW_KEYCODE,
 } from '../../util/keycodes';
 import { useId } from '../../util/useId';
+import type { RenderProps } from '../../util/utility-types';
 import type { Align } from '../../util/variant-types';
-import Tab from '../Tab';
 import styles from './Tabs.module.css';
 
-export interface Props {
+export interface TabsProps {
   align?: Align;
   /**
    * Reference to another element that describes the purpose of the set of tabs.
@@ -49,6 +50,34 @@ export interface Props {
   activeIndex?: number;
 }
 
+export interface TabProps {
+  /**
+   * aria-labelledby attribute that associates a tab panel with its accompanying tab title
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Child node(s) that can be nested inside component
+   */
+  children?: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * HTML id for the component
+   */
+  id?: string;
+  /**
+   * Number passed down from Tabs to show the active index state of Tabs
+   */
+  isActiveIndex?: number;
+  /**
+   * Text used to label the tab in the tab list
+   */
+  title: string;
+}
+
+type TabButtonProps = RenderProps<TabContextArgs>;
 export type TabContextArgs = {
   active: boolean;
   title: string;
@@ -70,7 +99,7 @@ export const Tabs = ({
   className,
   onChange,
   ...other
-}: Props) => {
+}: TabsProps) => {
   const activeTabPanelId = useId();
   const headerRef = useRef<HTMLDivElement>(null);
   const [activeIndexState, setActiveIndexState] = useState(activeIndex);
@@ -276,4 +305,57 @@ function usePrevious<T>(prop: T) {
   return ref.current;
 }
 
+/**
+ * `import {Tab} from "@chanzuckerberg/eds";`
+ *
+ * Individual tab within the Tabs component.
+ * - Use the `title` prop for text-only tab headers
+ * - For more custom tab headers use `<Tab.Button>` which uses a render prop with state information
+ */
+export const Tab = ({
+  children,
+  className,
+  id,
+  // Destructure `title` so it is not applied to the rendered element
+  title,
+  'aria-labelledby': ariaLabelledBy,
+  ...other
+}: TabProps) => {
+  return (
+    <div
+      aria-hidden={false}
+      aria-labelledby={ariaLabelledBy}
+      className={className}
+      id={id}
+      role="tabpanel"
+      {...other}
+    >
+      {withoutTypes(children, TabButton)}
+    </div>
+  );
+};
+
+/**
+ * This component is a stub, and exists to give a type to the custom Tab button.
+ * It cannot be used as a standalone sub-component. See <Tabs> for where we trigger the render prop.
+ *
+ * Allows for control of the Tab Title contents, for custom tab handling
+ *
+ * ```jsx
+ * <Tab.Button>
+ *     {({active, title}) => (
+ *         <SomeCustomComponent isActive={active} title={title} />
+ *     )}
+ * </Tab.Button>
+ * ```
+ */
+const TabButton = (props: TabButtonProps) => {
+  return <div />;
+};
+
+Tab.displayName = 'Tab';
+Tab.Button = TabButton;
+TabButton.displayName = 'Tab.Button';
+
 Tabs.displayName = 'Tabs';
+Tabs.Tab = Tab;
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index b049e2bba..7e5e71a9b 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -168,12 +168,12 @@ exports[`<Tabs /> Centered story renders snapshot 1`] = `
         class="max-w-xl"
       >
         <h3
-          class="heading heading--size-h3 mb-6"
+          class="heading heading--headline-sm mb-6"
         >
           Tab 1
         </h3>
         <p
-          class="text text--body"
+          class="text text--body-md"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            
@@ -463,12 +463,12 @@ exports[`<Tabs /> CustomTabs story renders snapshot 1`] = `
           class="max-w-xl"
         >
           <h3
-            class="heading heading--size-h3 mb-6"
+            class="heading heading--headline-sm mb-6"
           >
             Tab 1
           </h3>
           <p
-            class="text text--body"
+            class="text text--body-md"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              
@@ -648,12 +648,12 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
         class="max-w-xl"
       >
         <h3
-          class="heading heading--size-h3 mb-6"
+          class="heading heading--headline-sm mb-6"
         >
           Tab 1
         </h3>
         <p
-          class="text text--body"
+          class="text text--body-md"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            
diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css
index 1cc07989b..7b8def48f 100644
--- a/src/components/Tag/Tag.module.css
+++ b/src/components/Tag/Tag.module.css
@@ -41,8 +41,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
-  font: var(--eds-theme-typography-tag);
 }
 
 /**
@@ -72,12 +70,6 @@
   --tag-outline-color: var(--eds-theme-color-border-utility-warning-default);
 }
 
-:where(.tag--yield) {
-  --tag-primary-color: var(--eds-theme-color-text-grade-revise);
-  --tag-secondary-color: var(--eds-theme-color-background-grade-revise-subtle);
-  --tag-outline-color: var(--eds-theme-color-border-grade-revise-default);
-}
-
 :where(.tag--brand) {
   --tag-primary-color: var(--eds-theme-color-text-brand-default);
   --tag-secondary-color: var(--eds-theme-color-background-brand-primary-default);
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index e6ad63d05..9c7f31db9 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -1,11 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Tag, VARIANTS } from './Tag';
-import Icon from '../Icon';
 import styles from './Tag.stories.module.css';
 
-const supportedVariants = VARIANTS.filter((variant) => variant !== 'yield');
-
 export default {
   title: 'Components/Tag',
   component: Tag,
@@ -37,7 +34,7 @@ export const Default: Story = {};
 export const Variants: Story = {
   render: (args) => (
     <div className={styles.tagList}>
-      {supportedVariants.map((variant) => {
+      {VARIANTS.map((variant) => {
         return (
           <Tag
             data-testid="test"
@@ -58,7 +55,7 @@ export const Variants: Story = {
 export const OutlineVariants: Story = {
   render: (args) => (
     <div className={styles.tagList}>
-      {supportedVariants.map((variant) => {
+      {VARIANTS.map((variant) => {
         return (
           <Tag
             key={variant}
@@ -79,11 +76,11 @@ export const OutlineVariants: Story = {
 export const WithIcon: Story = {
   ...Default,
   args: {
-    icon: <Icon name="favorite" purpose="decorative" />,
+    icon: 'favorite',
   },
   render: (args) => (
     <div className={styles.tagList}>
-      {supportedVariants.map((variant) => {
+      {VARIANTS.map((variant) => {
         return (
           <Tag
             key={variant}
@@ -105,11 +102,11 @@ export const WithLongTextAndIcon: Story = {
   ...Default,
   args: {
     text: 'This tag has a really long text message',
-    icon: <Icon name="star" purpose="decorative" />,
+    icon: 'star',
   },
   render: (args) => (
     <div className={styles.tagList}>
-      {supportedVariants.map((variant) => {
+      {VARIANTS.map((variant) => {
         return <Tag key={variant} {...args} hasOutline variant={variant} />;
       })}
     </div>
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 7edee16da..17b5fae01 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,6 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
+import type { IconName } from '../Icon';
+import Icon from '../Icon';
 import Text from '../Text';
+
 import styles from './Tag.module.css';
 
 export const VARIANTS = [
@@ -8,8 +11,6 @@ export const VARIANTS = [
   'error',
   'success',
   'warning',
-  /** @deprecated */
-  'yield',
   'brand',
 ] as const;
 
@@ -19,8 +20,6 @@ type Props = {
   /**
    * The color variant of the tag. It will update the content colors, background color, and border (when `hasOutline` is set to `true`).
    *
-   * **NOTE**: `yield` variant is deprecated and will be removed in a future release.
-   *
    * **Default is `"neutral"`**.
    */
   variant?: Variant;
@@ -29,9 +28,9 @@ type Props = {
    */
   className?: string;
   /**
-   * The tag icon
+   * Icon name from the defined set of EDS icons
    */
-  icon?: React.ReactNode;
+  icon?: IconName;
   /**
    * The text contents of the tag, nested inside the component, in addition to the icon.
    */
@@ -55,7 +54,6 @@ export const Tag = ({
   icon,
   text,
   hasOutline = false,
-  ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['tag'],
@@ -64,17 +62,9 @@ export const Tag = ({
     className,
   );
 
-  // TODO: Text component is receiving the tag styles directly, instead of using a wrapper. De-couple
-  // and remove deprecated usages
   return (
-    <Text
-      as="span"
-      className={componentClassName}
-      size="sm"
-      weight="bold"
-      {...other}
-    >
-      {icon}
+    <Text as="span" className={componentClassName} preset="tag">
+      {icon && <Icon name={icon} purpose="decorative" />}
       {text && <span className={styles['tag__body']}>{text}</span>}
     </Text>
   );
diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/src/components/Tag/__snapshots__/Tag.test.ts.snap
index cd8010d5d..cd16ca3c6 100644
--- a/src/components/Tag/__snapshots__/Tag.test.ts.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`<Tag /> Default story renders snapshot 1`] = `
 <span
-  class="text text--sm text--bold-weight tag tag--neutral"
+  class="text text--tag tag tag--neutral"
 >
   <span
     class="tag__body"
@@ -17,7 +17,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
   class="tagList"
 >
   <span
-    class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+    class="text text--tag tag tag--neutral tag--outline"
   >
     <span
       class="tag__body"
@@ -26,7 +26,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--error tag--outline"
+    class="text text--tag tag tag--error tag--outline"
   >
     <span
       class="tag__body"
@@ -35,7 +35,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--success tag--outline"
+    class="text text--tag tag tag--success tag--outline"
   >
     <span
       class="tag__body"
@@ -44,7 +44,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--warning tag--outline"
+    class="text text--tag tag tag--warning tag--outline"
   >
     <span
       class="tag__body"
@@ -53,7 +53,7 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--brand tag--outline"
+    class="text text--tag tag tag--brand tag--outline"
   >
     <span
       class="tag__body"
@@ -69,8 +69,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
   class="tagList"
 >
   <span
-    class="text text--sm text--bold-weight tag tag--neutral"
-    data-testid="test"
+    class="text text--tag tag tag--neutral"
   >
     <span
       class="tag__body"
@@ -79,8 +78,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--error"
-    data-testid="test"
+    class="text text--tag tag tag--error"
   >
     <span
       class="tag__body"
@@ -89,8 +87,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--success"
-    data-testid="test"
+    class="text text--tag tag tag--success"
   >
     <span
       class="tag__body"
@@ -99,8 +96,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--warning"
-    data-testid="test"
+    class="text text--tag tag tag--warning"
   >
     <span
       class="tag__body"
@@ -109,8 +105,7 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--brand"
-    data-testid="test"
+    class="text text--tag tag tag--brand"
   >
     <span
       class="tag__body"
@@ -126,7 +121,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
   class="tagList"
 >
   <span
-    class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+    class="text text--tag tag tag--neutral tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -146,7 +141,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--error tag--outline"
+    class="text text--tag tag tag--error tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -166,7 +161,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--success tag--outline"
+    class="text text--tag tag tag--success tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -186,7 +181,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--warning tag--outline"
+    class="text text--tag tag tag--warning tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -206,7 +201,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--brand tag--outline"
+    class="text text--tag tag tag--brand tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -233,7 +228,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
   class="tagList"
 >
   <span
-    class="text text--sm text--bold-weight tag tag--neutral tag--outline"
+    class="text text--tag tag tag--neutral tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -253,7 +248,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--error tag--outline"
+    class="text text--tag tag tag--error tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -273,7 +268,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--success tag--outline"
+    class="text text--tag tag tag--success tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -293,7 +288,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--warning tag--outline"
+    class="text text--tag tag tag--warning tag--outline"
   >
     <svg
       aria-hidden="true"
@@ -313,7 +308,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
     </span>
   </span>
   <span
-    class="text text--sm text--bold-weight tag tag--brand tag--outline"
+    class="text text--tag tag tag--brand tag--outline"
   >
     <svg
       aria-hidden="true"
diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
index ec6d58573..16a142fdd 100644
--- a/src/components/Text/Text.module.css
+++ b/src/components/Text/Text.module.css
@@ -2,72 +2,6 @@
     # TEXT
 \*------------------------------------*/
 
-/**
- * Sizes - deprecated in favor of using the full set of typography tokens
- */
-.text--body,
-.text--md {
-  font: var(--eds-theme-typography-body-md);
-}
-.text--lg {
-  font: var(--eds-theme-typography-body-lg);
-}
-.text--sm {
-  font: var(--eds-theme-typography-body-sm);
-}
-.text--xs {
-  font: var(--eds-theme-typography-body-xs);
-}
-.text--caption,
-.text--caption-md {
-  font: var(--eds-theme-typography-caption-md);
-}
-
-/**
- * Variant - deprecated in favor of using the tokens/utility classes for color
- */
-.text--error {
-  color: var(--eds-theme-color-text-utility-error);
-}
-.text--neutral-subtle {
-  color: var(--eds-theme-color-text-neutral-subtle);
-}
-.text--neutral-medium {
-  color: var(--eds-theme-color-text-neutral-default);
-}
-.text--neutral-strong {
-  color: var(--eds-theme-color-text-neutral-strong);
-}
-.text--brand {
-  color: var(--eds-theme-color-text-brand-default);
-}
-/* stylelint-disable-next-line eds/no-tier-1-color-variable */
-.text--info {
-  color: var(--eds-color-info-700);
-}
-.text--inherit {
-  color: inherit;
-}
-.text--success {
-  color: var(--eds-theme-color-text-utility-success);
-}
-.text--warning {
-  color: var(--eds-theme-color-text-utility-warning);
-}
-.text--white {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-}
-
-/**
- * Weights - deprecated in favor of using the full set of typography tokens
- */
-.text--normal-weight {
-  font-weight: var(--eds-font-weight-light);
-}
-.text--bold-weight {
-  font-weight: var(--eds-font-weight-bold);
-}
-
 /**
  * Map the component preset names to the defined typography tokens
  *
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index afd314887..cbbdf8049 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -102,26 +102,15 @@ export const UsingColorTokens: Story = {
       <Text {...args} className="text-utility-warning" preset="body-xl">
         using <code>text-utility-warning</code> utility class
       </Text>
-      <Text
-        {...args}
-        className="text-utility-success"
-        preset="body-lg"
-        weight="bold"
-      >
+      <Text {...args} className="text-utility-success" preset="body-lg">
         using <code>text-utility-success</code> utility class
       </Text>
-      <Text
-        {...args}
-        className="text-utility-error"
-        preset="body-md"
-        variant="white"
-      >
+      <Text {...args} className="text-utility-error" preset="body-md">
         using <code>text-utility-error</code> utility class
       </Text>
       <Text
+        className="text-[var(--eds-theme-color-text-utility-success)]"
         preset="body-sm"
-        size="callout"
-        style={{ color: 'var(--eds-theme-color-text-utility-success)' }}
       >
         using inline color
       </Text>
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
index 6574db68e..3c8647418 100644
--- a/src/components/Text/Text.test.tsx
+++ b/src/components/Text/Text.test.tsx
@@ -11,11 +11,7 @@ describe('<Text />', () => {
   generateSnapshots(stories as StoryFile);
 
   it('should add the passthrough className', () => {
-    render(
-      <Text className="passthrough" size="body">
-        Some Text
-      </Text>,
-    );
+    render(<Text className="passthrough">Some Text</Text>);
     expect(screen.getByText('Some Text').classList).toContain('passthrough');
   });
 
@@ -45,16 +41,4 @@ describe('<Text />', () => {
     expect(screen.getByText('Ref container parent test span')).toBeTruthy();
     await user.click(screen.getByRole('button'));
   });
-
-  it('should console warn if attempting to use "info" variant', () => {
-    const consoleWarnMock = jest
-      .spyOn(global.console, 'warn')
-      .mockImplementation();
-    render(<Text variant="info">Some Text 2</Text>);
-    expect(consoleWarnMock).toHaveBeenCalledTimes(1);
-    expect(consoleWarnMock).toHaveBeenCalledWith(
-      'Info variant is deprecated, please consider another variant.',
-    );
-    consoleWarnMock.mockRestore();
-  });
 });
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index b8c9b2365..dccb90b99 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -6,43 +6,11 @@ import type { Preset } from '../../util/variant-types';
 
 import styles from './Text.module.css';
 
-/** @deprecated */
-export type Size =
-  | 'body'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xs'
-  | 'caption-md'
-  | 'caption-lg'
-  | 'overline'
-  | 'callout';
-
-/**
- * @deprecated  Please use `caption-md` instead
- */
-export type DeprecatedSize = 'caption';
-
-/** @deprecated */
-export type Variant =
-  | 'inherit'
-  | 'neutral-subtle'
-  | 'neutral-medium'
-  | 'neutral-strong'
-  | 'brand'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'white';
-
-/**
- * @deprecated Info variant is deprecated.
- */
-export type DeprecatedVariant = 'info';
-
 export type TextProps = {
   /**
-   * Controls which component to use when rendering copy: `p` or `span` (defaults to `"p"`).
+   * Controls which component to use when rendering copy: `p` or `span`.
+   *
+   * **Default is `"p"`**.
    */
   as?: 'p' | 'span';
   children: React.ReactNode;
@@ -53,27 +21,12 @@ export type TextProps = {
    * match those used across the design system.
    */
   preset?: Preset;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  variant?: Variant | DeprecatedVariant;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  size?: Size | DeprecatedSize;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  weight?: 'bold' | 'normal' | null;
 } & React.HTMLAttributes<HTMLElement>;
 
 /**
  * `import {Text} from "@chanzuckerberg/eds";`
  *
- * The Text component decorates `<p>` and `<span>` with thematic variants. Use
+ * The Text component decorates `<p>` and `<span>` with typographic variants. Use
  * typography presets to style the text via `preset`.
  *
  * For headers, please use `Heading`.
@@ -84,29 +37,13 @@ export const Text = forwardRef(
       as: TagName = 'p',
       children,
       className,
-      preset,
-      size = 'body',
-      variant,
-      weight,
-      /**
-       * Components that wrap typography sometimes requires props such as event handlers
-       * to be passed down into the element. One example is the tooltip component.  It
-       * attaches a onHover and onFocus event to the element to determine when to
-       * trigger the overlay.
-       */ ...other
+      preset = 'body-md',
+      ...other
     }: TextProps,
     ref: ForwardedRef<HTMLParagraphElement>, // Setting as HTMLParagraphElement to satisfy TS, but unit test covers both span and p cases for sanity
   ) => {
-    if (variant === 'info' && process.env.NODE_ENV !== 'production') {
-      console.warn(
-        'Info variant is deprecated, please consider another variant.',
-      );
-    }
     const componentClassName = clsx(
       styles['text'],
-      !preset && size && styles[`text--${size}`],
-      !preset && variant && styles[`text--${variant}`],
-      !preset && weight && styles[`text--${weight}-weight`],
       preset && styles[`text--${preset}`],
       className,
     );
diff --git a/src/components/Text/__snapshots__/Text.test.tsx.snap b/src/components/Text/__snapshots__/Text.test.tsx.snap
index 92770e7b8..8e095e4c4 100644
--- a/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`<Text /> Default story renders snapshot 1`] = `
   class="m-1"
 >
   <p
-    class="text text--body"
+    class="text text--body-md"
   >
     Default &lt;Text /&gt; rendering
   </p>
@@ -153,7 +153,7 @@ exports[`<Text /> UsingColorTokens story renders snapshot 1`] = `
        utility class
     </p>
     <p
-      class="text text--body-sm"
+      class="text text--body-sm text-[var(--eds-theme-color-text-utility-success)]"
     >
       using inline color
     </p>
diff --git a/src/components/TextareaField/TextareaField.tsx b/src/components/TextareaField/TextareaField.tsx
index 21d7f9d12..2bc3592eb 100644
--- a/src/components/TextareaField/TextareaField.tsx
+++ b/src/components/TextareaField/TextareaField.tsx
@@ -201,7 +201,7 @@ export const TextareaField: TextareaFieldType = forwardRef(
               </InputLabel>
             )}
             {required && (
-              <Text as="p" className={requiredTextClassName} size="sm">
+              <Text as="p" className={requiredTextClassName} preset="body-sm">
                 Required
               </Text>
             )}
diff --git a/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap b/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
index b9f984d47..8331ecdd3 100644
--- a/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
+++ b/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
@@ -175,7 +175,7 @@ exports[`<TextareaField /> WhenRequired story renders snapshot 1`] = `
       Textarea Field
     </label>
     <p
-      class="text text--sm textarea-field__required-text"
+      class="text text--body-sm textarea-field__required-text"
     >
       Required
     </p>
@@ -298,7 +298,7 @@ exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
       Textarea Field
     </label>
     <p
-      class="text text--sm textarea-field__required-text"
+      class="text text--body-sm textarea-field__required-text"
     >
       Required
     </p>
@@ -373,7 +373,7 @@ exports[`<TextareaField /> WithARecommendedLength story renders snapshot 1`] = `
       Textarea Field
     </label>
     <p
-      class="text text--sm textarea-field__required-text"
+      class="text text--body-sm textarea-field__required-text"
     >
       Required
     </p>
@@ -447,7 +447,7 @@ exports[`<TextareaField /> WithBothRecommendedAndMaxLengths story renders snapsh
       Textarea Field
     </label>
     <p
-      class="text text--sm textarea-field__required-text"
+      class="text text--body-sm textarea-field__required-text"
     >
       Required
     </p>
diff --git a/src/components/TimelineNav/TimelineNav.module.css b/src/components/TimelineNav/TimelineNav.module.css
deleted file mode 100644
index 295060b96..000000000
--- a/src/components/TimelineNav/TimelineNav.module.css
+++ /dev/null
@@ -1,362 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
- # TIMELINE NAV
-\*------------------------------------*/
-
-/**
- * List of of links where each link toggles open associated information
- */
-.timeline-nav {
-  display: flex;
-  gap: var(--eds-size-2);
-  width: 100%;
-  overflow: hidden;
-  transition: transform var(--eds-anim-fade-long) var(--eds-anim-ease);
-
-  @media all and (min-width: $eds-bp-lg) {
-    background: var(--eds-theme-color-background-neutral-default);
-    border-bottom-left-radius: var(--eds-border-radius-xl);
-    border-top-left-radius: var(--eds-border-radius-xl);
-    transition: none;
-    overflow: visible;
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-/**
- * Active timeline nav
- *  1) Calc accounts for left and right padding of layout container (gutters on small screens)
- */
-.timeline-nav.eds-is-active {
-  transform: translateX(calc(-100% - 1rem));
-  overflow: visible;
-
-  @media all and (min-width: $eds-bp-lg) {
-    transform: unset;
-  }
-}
-
-/**
- * Timeline nav
- *
- * Contains the tab list.
- * 
- * Tab overflow behavior.
- */
-.timeline-nav__nav {
-  display: block;
-  width: 100%;
-  flex-shrink: 0;
-  padding: var(--eds-size-4) 0;
-
-  @media all and (min-width: $eds-bp-lg) {
-    position: relative;
-    padding: var(--eds-size-5);
-    width: 33.33%;
-    min-width: 20rem;
-    flex-shrink: initial;
-  }
-}
-
-/**
- * Timeline nav body 
- */
-.timeline-nav__body {
-  display: block;
-  visibility: hidden;
-  z-index: var(--eds-z-index-bottom);
-  position: absolute;
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  flex-shrink: 0;
-  padding: var(--eds-size-2) 0;
-
-  @media all and (min-width: $eds-bp-lg) {
-    display: block;
-    position: static;
-    z-index: 0;
-    flex: 1;
-    width: 100%;
-    height: auto;
-    overflow: visible;
-    visibility: visible;
-    transform: translateX(0);
-    padding: var(--eds-size-5) var(--eds-size-8);
-    box-shadow: 0px 2px 8px var(--eds-theme-color-border-neutral-subtle);
-  }
-}
-
-.timeline-nav__body.eds-is-active {
-  position: static;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  visibility: visible;
-
-  @media all and (min-width: $eds-bp-lg) {
-    transform: unset;
-    height: auto;
-  }
-}
-
-/**
-* Timeline nav back button
-* 
-* On smaller viewports, a back button is placed at the top of the 
-* body to allow navigation back to the list of links.
-*/
-.timeline-nav__back {
-  text-decoration: none;
-
-  @media all and (min-width: $eds-bp-lg) {
-    display: none;
-  }
-}
-
-/**
- * Timeline nav list
- *
- * Actual unordered list of timeline-nav.
- */
-.timeline-nav__list {
-  font: var(--eds-typography-preset-005);
-
-  @media all and (min-width: $eds-bp-lg) {
-    position: sticky;
-    top: var(--eds-size-5);
-  }
-}
-
-/**
- * Timeline nav item
- */
-.timeline-nav__item {
-  position: relative;
-  /* Flex shrink 0 keeps timeline-nav from expanding to fill up the space of the container. */
-  flex-shrink: 0;
-  padding-bottom: var(--eds-size-5);
-
-  @media all and (min-width: $eds-bp-lg) {
-    padding-bottom: var(--eds-size-10);
-  }
-}
-
-/**
-  * Timeline nav item after
-  *
-  * When list variant is 'ordered', add a line between items that shouldn't link out unlike the bullet.
-  */
-.timeline-nav__list--ordered .timeline-nav__item {
-  &:after {
-    --line-spacing: var(--eds-size-4);
-    content: '';
-    position: absolute;
-    top: var(--line-spacing);
-    /**
-     * This sets the size of the gap above the vertical line by determining the top of the line relative to the top of the current 
-     * list item; a value of 0 would position the line at the top of the current list item; 100% would position it at the bottom of
-     * the current list item. We want a small visual gap between the bullet/icon and the top of the line 
-     */
-    left: 0.75rem;
-    /**
-     * This sets the height of the vertical line relative to the height of the current list item.
-     * We want a small visual gap between the bottom of the line and the next bullet/icon.
-     */
-    height: calc(100% - var(--line-spacing));
-    width: 0.0625rem;
-    /**
-     * Using a border color here because this is a vertical line, similar to a border
-     */
-    background: var(--eds-theme-color-border-neutral-subtle);
-    border-radius: var(--eds-border-radius-md);
-  }
-
-  /**
-   * Last Timeline nav item
-   */
-  &:last-child {
-    padding-bottom: 0;
-
-    /**
-     * List Timeline nav item after
-     *
-     * Don't add a line after the last list item.
-     */
-    &:after {
-      content: none;
-    }
-  }
-}
-
-/**
- * Timeline nav link
- * 
- * Base style for each link in the list.
- *
- * Using disabled text color here because all links are "inactive" until selected and this color is overridden.
- */
-.timeline-nav__link {
-  position: relative;
-  padding: var(--eds-size-half) 0;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--eds-size-1);
-  text-decoration: none;
-  color: var(--eds-theme-color-text-neutral-subtle);
-  cursor: pointer;
-  transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease),
-    background-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-  &:hover,
-  &:focus-visible {
-    color: var(--eds-theme-color-text-neutral-default);
-  }
-
-  &:focus-visible {
-    @mixin focus;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:hover,
-    &:focus {
-      color: var(--eds-theme-color-text-neutral-default);
-    }
-
-    &:focus {
-      @mixin focus;
-    }
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  /**
-   * Timeline nav link within active timeline-nav item uses darker color
-   */
-  .timeline-nav__item.eds-is-active & {
-    color: var(--eds-theme-color-text-neutral-default);
-  }
-}
-
-/**
- * Timeline nav number
- */
-.timeline-nav__number {
-  position: relative;
-  /* Using flex to keep the number centered */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  left: -4px;
-  /* Since this will display as a cirlce, keep height and width equal; should be wide enough to fit a two-digit number */
-  width: 1.5rem;
-  height: 1.5rem;
-  /* Using a percentage here instead of --eds-border-radius-md because this must always render as a circle */
-  border-radius: 50%;
-  /* Used on list items using number variant; provides a cosmetic cicular border */
-  border: 1px solid var(--eds-theme-color-border-neutral-subtle);
-  margin-right: 9px;
-  font-size: 0.75rem;
-  margin-left: -4px;
-  background: var(--eds-theme-color-background-neutral-default);
-  /* Make the border dark when li is active */
-  .timeline-nav__item.eds-is-active & {
-    border: 1px solid var(--eds-theme-color-text-neutral-default);
-  }
-}
-/**
- * Timeline nav link-left 
- */
-.timeline-nav__link-left {
-  position: relative;
-  z-index: 100;
-}
-
-/**
-  * Timeline- nav link title
-  *
-  * Wrapped in a div so that it doesn't affect the position of the arrow if the
-  * title is long and breaks onto multiple lines.
-  *
-  * In the case of a long text string with no breaking spaces and/or a browser
-  * with text-only-zoom, we don't want the text to overflow; truncate with an ellipsis instead.
-  */
-.timeline-nav__link-title {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/**Timeline nav title after
-  *
-  * Optional content that will be positioned to the right of title
-  */
-.timeline-nav__link-title-after {
-  display: inline-block;
-  margin-left: var(--eds-size-half);
-}
-
-/**
-  * Timeline nav link arrow
-  *
-  * (Only used on smaller screens) - an arrow icon at the right 
-  * end of each item.
-  *
-  * Must be used to prevent icon from shrinking to fit space.
-  */
-.timeline-nav__link-arrow {
-  margin-left: auto;
-  align-self: center;
-  flex-shrink: 0;
-
-  @media all and (min-width: $eds-bp-lg) {
-    display: none;
-  }
-}
-
-/**
-  * Timeline nav icon
-  *
-  * Used so the transparent icon doesn't show the line behind. 
-  */
-.timeline-nav__icon {
-  --icon-size: var(--eds-size-3);
-  color: var(--eds-theme-color-text-neutral-subtle);
-  border-color: var(--eds-theme-color-border-neutral-default);
-  position: relative;
-  margin-right: var(--eds-size-half);
-  border-radius: 100%;
-
-  .timeline-nav__item.eds-is-active & {
-    color: var(--eds-theme-color-text-neutral-default);
-    border-color: 1px solid var(--eds-theme-color-text-neutral-strong);
-  }
-}
-
-.timeline-nav__icon--success {
-  margin-top: calc(-1 * var(--eds-size-half));
-  color: var(--eds-theme-color-background-grade-complete-default);
-}
-
-.timeline-nav__icon--warning {
-  margin-top: calc(-1 * var(--eds-size-half));
-  color: var(--eds-theme-color-background-grade-revise-default);
-}
-
-.timeline-nav__icon--error {
-  margin-top: calc(-1 * var(--eds-size-half));
-  color: var(--eds-theme-color-background-grade-stop-default);
-}
-
-.timeline-nav__icon--incomplete {
-  margin-top: calc(-1 * var(--eds-size-half));
-  color: var(--eds-theme-color-border-neutral-subtle);
-}
diff --git a/src/components/TimelineNav/TimelineNav.stories.tsx b/src/components/TimelineNav/TimelineNav.stories.tsx
deleted file mode 100644
index 802edb760..000000000
--- a/src/components/TimelineNav/TimelineNav.stories.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { TimelineNav } from './TimelineNav';
-import {
-  EdsThemeColorIconBrandPrimary,
-  EdsThemeColorIconUtilitySuccess,
-} from '../../tokens-dist/ts/colors';
-import { chromaticViewports } from '../../util/viewports';
-import Heading from '../Heading';
-import Icon from '../Icon';
-import Text from '../Text';
-
-export default {
-  title: 'Components/TimelineNav',
-  component: TimelineNav,
-  subcomponents: { 'TimlineNav.Panel': TimelineNav.Panel },
-  parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
-    backgrounds: {
-      default: 'eds-color-neutral-white',
-    },
-  },
-  args: {
-    variant: 'ordered',
-    children: (
-      <>
-        <TimelineNav.Panel className="max-w-xl" title="Overview">
-          <Heading className="mb-6" size="h3">
-            Overview
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="TimelineNavPanel 1"
-          titleAfter={
-            <Icon
-              color={EdsThemeColorIconUtilitySuccess}
-              name="circle-small"
-              purpose="informative"
-              size="1.5em"
-              title="29 students have completed"
-            />
-          }
-          variant="number"
-        >
-          <Heading className="mb-6" size="h3">
-            TimelineNavPanel 1
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="TimelineNavPanel 2"
-          variant="error"
-        >
-          <Heading className="mb-6" size="h3">
-            TimelineNavPanel 2
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="
-              Panel with a long name that breaks into multiple lines on smaller
-              viewports"
-          titleAfter={
-            <Icon
-              color={EdsThemeColorIconBrandPrimary}
-              name="circle-small"
-              purpose="informative"
-              size="1.5em"
-              title="2 students need feedback"
-            />
-          }
-          variant="warning"
-        >
-          <Heading className="mb-6" size="h3">
-            Panel with a long name that breaks into multiple lines on smaller
-            viewports
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="TimelineNavPanel 4"
-          variant="success"
-        >
-          <Heading className="mb-6" size="h3">
-            TimelineNavPanel 4
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel className="max-w-xl" title="TimelineNavPanel 5">
-          <Heading className="mb-6" size="h3">
-            TimelineNavPanel 5
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="TimelineNavPanel 6"
-          variant="number"
-        >
-          <Heading className="mb-6" size="h3">
-            TimelineNavPanel 6
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel
-          className="max-w-xl"
-          title="Final Item - complete"
-          variant="complete"
-        >
-          <Heading className="mb-6" size="h3">
-            Final Item - complete
-          </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex{' '}
-          </Text>
-        </TimelineNav.Panel>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta;
-
-type Args = React.ComponentProps<typeof TimelineNav.Panel>;
-
-export const Default: StoryObj<Args> = {
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
diff --git a/src/components/TimelineNav/TimelineNav.test.ts b/src/components/TimelineNav/TimelineNav.test.ts
deleted file mode 100644
index 6f92c961a..000000000
--- a/src/components/TimelineNav/TimelineNav.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './TimelineNav.stories';
-
-describe('<TimelineNav />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/TimelineNav/TimelineNav.tsx b/src/components/TimelineNav/TimelineNav.tsx
deleted file mode 100644
index e40a7b5a9..000000000
--- a/src/components/TimelineNav/TimelineNav.tsx
+++ /dev/null
@@ -1,530 +0,0 @@
-import clsx from 'clsx';
-import type { KeyboardEventHandler, ReactNode } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { allByType } from 'react-children-by-type';
-import {
-  L_ARROW_KEYCODE,
-  U_ARROW_KEYCODE,
-  R_ARROW_KEYCODE,
-  D_ARROW_KEYCODE,
-  ENTER_KEYCODE,
-  SPACEBAR_KEYCODE,
-} from '../../util/keycodes';
-import { useId } from '../../util/useId';
-import Button from '../Button';
-import Icon from '../Icon';
-import NumberIcon from '../NumberIcon';
-import styles from './TimelineNav.module.css';
-
-type Props = {
-  /**
-   * The aria-labelledby attribute creates a relationship between the tab list and the tab panels
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Passed down to initially set the activeIndex state
-   */
-  activeIndex?: number;
-  /**
-   * Calls back with the active index
-   */
-  onChange?: (index: number) => void;
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-  /**
-   * Timeline nav item tab name
-   */
-  title?: string;
-  /**
-   * Slot for node to appear to the right of the title. Typically used to include a Badge, Button, or other component
-   */
-  titleAfter?: ReactNode;
-};
-
-type TimelineNavPanelVariant =
-  | 'bullet'
-  | 'complete'
-  | 'error'
-  | 'incomplete'
-  | 'number'
-  | 'success'
-  | 'warning';
-
-type TimelineNavPanelProps = {
-  /**
-   * Accessible label for a given panel
-   */
-  'aria-label'?: string;
-  /**
-   * aria-labelledby attribute that associates a tab panel with its accompanying tab title text
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Mark list as completed
-   */
-  completed?: boolean;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-  /**
-   * The tab variant
-   */
-  variant?: TimelineNavPanelVariant;
-  /**
-   * The tab title
-   */
-  title?: string;
-  /**
-   * Slot for node to appear to the right of the title. Typically used to include a Badge, Button, or other component
-   */
-  titleAfter?: ReactNode;
-};
-
-const TimelineNavPanel = ({
-  children,
-  className,
-  completed,
-  id,
-  title,
-  titleAfter,
-  variant,
-  ...other
-}: TimelineNavPanelProps) => {
-  return (
-    <div
-      aria-hidden={false}
-      className={className}
-      id={id}
-      role="tabpanel"
-      {...other}
-    >
-      {children}
-    </div>
-  );
-};
-
-/**
- * `import {TimelineNav} from "@chanzuckerberg/eds";`
- *
- * Provides a list-view pane for item labels/titles, and a details pane for each item's content.
- * When an item in the list is selected, the details pane is updated.
- * @deprecated
- */
-export const TimelineNav = ({
-  activeIndex = 0,
-  children,
-  className,
-  id,
-  onChange,
-  title,
-  titleAfter,
-  ...other
-}: Props) => {
-  /**
-   * Initialize states, constants, and refs
-   */
-  const ref = useRef<number | undefined>();
-  const backRef = useRef<HTMLButtonElement>(null);
-  const [isActive, setIsActive] = useState(false);
-  const [activeIndexState, setActiveIndexState] = useState(
-    activeIndex ? activeIndex : 0,
-  );
-  /**
-   * Set the only children components allowed within <TimelineNav> to be TimelineNavPanel
-   */
-  const timelineNavItems = useCallback(() => {
-    return allByType(children, TimelineNavPanel);
-  }, [children]);
-
-  const timelineNavItemRefs = timelineNavItems().map(() =>
-    // This usage of React.createRef is intentional.
-    // eslint-disable-next-line @chanzuckerberg/edu-react/no-create-ref-in-function-component
-    React.createRef<HTMLAnchorElement>(),
-  );
-
-  // we can't use the hook in an iterator like this, so generate the base and increment if needed
-  const [idVar, setId] = useState<string[]>([]);
-  const [ariaLabelledByVar, setAriaLabelledBy] = useState<string[]>([]);
-
-  /**
-   * Get previous prop
-   *
-   * This is used to compare the previous prop to the current prop.
-   */
-  function usePrevious(activeIndex: number) {
-    // eslint-disable-next-line @chanzuckerberg/edu-react/use-effect-deps-presence
-    useEffect(() => {
-      ref.current = activeIndex;
-    });
-    return ref.current;
-  }
-
-  /**
-   * Use effect
-   *
-   * Set prevActiveIndex to previous value prop.
-   *
-   * If prevActiveIndex is defined and previous value prop is not equal
-   * to current value prop, toggle state.
-   */
-  const prevActiveIndex = usePrevious(activeIndex);
-  useEffect(() => {
-    if (
-      (prevActiveIndex !== undefined || null) &&
-      prevActiveIndex !== activeIndex
-    ) {
-      setActiveIndexState(activeIndex);
-      timelineNavItemRefs[activeIndex].current?.focus();
-    }
-  }, [prevActiveIndex, activeIndex, timelineNavItemRefs]);
-
-  const generatedId = useId();
-  const idPrefix = id || generatedId;
-  const generatedAriaLabelledBy = useId();
-  const ariaLabelledByPrefix =
-    other['aria-labelledby'] || generatedAriaLabelledBy;
-
-  /**
-   * Autogenerate ids on tabs if not defined.
-   */
-  useEffect(() => {
-    setId(
-      timelineNavItems().map((item, index) =>
-        item.props.id ? item.props.id : `${idPrefix}-${index}`,
-      ),
-    );
-    setAriaLabelledBy(
-      timelineNavItems().map((item, index) =>
-        item.props['aria-labelledby']
-          ? item.props['aria-labelledby']
-          : `${ariaLabelledByPrefix}-${index}`,
-      ),
-    );
-  }, [timelineNavItems, idPrefix, ariaLabelledByPrefix]);
-
-  /**
-   * On open
-   */
-  function onOpen(index: number) {
-    // On click of a tab, set activeIndexState to index of tab being clicked.
-    setActiveIndexState(index);
-    setIsActive(true);
-
-    if (onChange) {
-      // If function is passed into onChange prop, run that on click.
-      onChange(index);
-    }
-  }
-
-  /**
-   * On KeyDown
-   *
-   * Find active tab. If there isn't one, do nothing on Keydown.
-   */
-  const onKeyDown: KeyboardEventHandler = function (e) {
-    let activeTimelineNavPanel = null;
-    timelineNavItemRefs.map((item) => {
-      if (item.current === document.activeElement) {
-        activeTimelineNavPanel = item;
-      }
-      return item;
-    });
-
-    if (!activeTimelineNavPanel) return;
-
-    // Set active tab, next tab, and previous tab.
-    const index = timelineNavItemRefs.indexOf(activeTimelineNavPanel);
-    const next = index === timelineNavItemRefs.length - 1 ? 0 : index + 1;
-    const prev = index === 0 ? timelineNavItemRefs.length - 1 : index - 1;
-
-    if ([R_ARROW_KEYCODE, D_ARROW_KEYCODE].includes(e.key)) {
-      // If right or down arrow key keyed, focus on next tab.
-      timelineNavItemRefs[next].current?.focus();
-    } else if ([L_ARROW_KEYCODE, U_ARROW_KEYCODE].includes(e.key)) {
-      // If left or up arrow key keyed, focus on the previous tab.
-      timelineNavItemRefs[prev].current?.focus();
-    } else if (e.key === ENTER_KEYCODE || e.key === SPACEBAR_KEYCODE) {
-      setTimeout(() => {
-        /**
-         * If enter or spacebar keyed, set focus to the 'Back' button. This
-         * is wrapped in a setTimeout() method to ensure that document.activeElement
-         * gets set properly.
-         *
-         * Note: this may be improved by identifying what has a delayed rendering
-         */
-        backRef.current?.focus();
-      }, 500);
-    }
-  };
-
-  const childrenWithProps = React.Children.map(
-    timelineNavItems(),
-    (child, i) => {
-      // Checking isValidElement is the safe way and avoids a typescript error too.
-      if (React.isValidElement(child)) {
-        return React.cloneElement<Props>(child, {
-          id: idVar[i],
-          ['aria-labelledby']: ariaLabelledByVar[i],
-        });
-      }
-      return child;
-    },
-  );
-  const componentClassName = clsx(
-    styles['timeline-nav'],
-    isActive && styles['eds-is-active'],
-    className,
-  );
-
-  const iconVariant = (
-    itemVariant: TimelineNavPanelProps['variant'],
-    i: number,
-  ) => {
-    switch (itemVariant) {
-      case 'success':
-        return (
-          <Icon
-            className={clsx(
-              styles['timeline-nav__icon'],
-              styles['timeline-nav__icon--success'],
-            )}
-            name="check-circle"
-            purpose="decorative"
-          />
-        );
-      case 'warning':
-        return (
-          <Icon
-            className={clsx(
-              styles['timeline-nav__icon'],
-              styles['timeline-nav__icon--warning'],
-            )}
-            name="error"
-            purpose="decorative"
-          />
-        );
-      case 'error':
-        return (
-          <Icon
-            className={clsx(
-              styles['timeline-nav__icon'],
-              styles['timeline-nav__icon--error'],
-            )}
-            name="cancel"
-            purpose="decorative"
-          />
-        );
-      case 'number':
-        return (
-          <NumberIcon
-            aria-label={`step ${i}`}
-            className={styles['timeline-nav__icon']}
-            number={i}
-            numberIconTitle="incomplete step"
-          />
-        );
-      case 'incomplete':
-        return (
-          <Icon
-            className={clsx(
-              styles['timeline-nav__icon'],
-              styles['timeline-nav__icon--incomplete'],
-            )}
-            name="star-outline"
-            purpose="decorative"
-          />
-        );
-      case 'complete':
-        return (
-          <Icon
-            className={clsx(
-              styles['timeline-nav__icon'],
-              styles['timeline-nav__icon--success'],
-            )}
-            name="star"
-            purpose="decorative"
-          />
-        );
-      default:
-        return (
-          <NumberIcon
-            aria-label="incomplete step"
-            className={styles['timeline-nav__icon']}
-            incomplete
-            number={i}
-            numberIconTitle="incomplete step"
-          />
-        );
-    }
-  };
-
-  /**
-   * onBack (used by 'Back' button on < lg viewports)
-   *
-   * Return focus to the button that was clicked to open the current panel;
-   * activeIndexState holds the index of the last nav item selected in the
-   * timelinNavItemRefs array.
-   */
-  const onBack = () => {
-    const element = timelineNavItemRefs[activeIndexState].current;
-
-    if (element) {
-      /**
-       * Return focus to the button that was clicked to open the current panel;
-       * activeIndexState holds the index of the last nav item selected in the
-       * timelinNavItemRefs array.
-       */
-      element.focus();
-      /**
-       * Because the 'Back' button's onFocus listener removes the selected nav
-       * item from the tab order, we need to manually insert it back into the tab
-       * order by setting its tabIndex back to "0".
-       */
-      element.tabIndex = 0;
-    }
-
-    /**
-     * Body panel is visible/hidden depending on true/false value of isActive;
-     * hide it by setting isActive to false.
-     */
-    setIsActive(false);
-  };
-
-  /**
-   * resetTabIndex (used by 'Back' button on <lg viewports)
-   *
-   * This fixes an issue where a keyboard user who has focus on the
-   * 'Back' button could use shift-tab to put keyboard focus back
-   * on the menu, which is currently off-canvas. To prevent this
-   * unwanted behavior, we set the currently active menu item's
-   * tabIndex to "-1" so that it can't be focusable in sequential
-   * keyboard navigation. The 'Back' button should be the only way
-   * users are able to return to the nav list, both visually and
-   * via keyboard navigation.
-   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#sect1
-   */
-  const resetTabIndex = () => {
-    const element = timelineNavItemRefs[activeIndexState].current;
-
-    if (element) {
-      element.tabIndex = -1;
-    }
-  };
-
-  return (
-    <div className={componentClassName} {...other}>
-      <div className={styles['timeline-nav__nav']}>
-        <ol
-          className={clsx(
-            styles['timeline-nav__list'],
-            styles['timeline-nav__list--ordered'],
-            isActive && styles['eds-is-active'],
-          )}
-          role="tablist"
-        >
-          {timelineNavItems().map((tab, i) => {
-            const isActive = activeIndexState === i;
-            const itemVariant = tab.props.variant;
-            return (
-              <li
-                className={clsx(
-                  styles['timeline-nav__item'],
-                  isActive && styles['eds-is-active'],
-                )}
-                // FIXME
-                // eslint-disable-next-line react/no-array-index-key
-                key={'timeline-nav-item-' + i}
-                role="presentation"
-              >
-                <a
-                  aria-controls={idVar[i]}
-                  aria-label={tab.props['aria-label']}
-                  aria-selected={isActive}
-                  className={styles['timeline-nav__link']}
-                  href={`#${idVar[i]}`}
-                  id={ariaLabelledByVar[i]}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onOpen(i);
-                  }}
-                  onKeyDown={onKeyDown}
-                  ref={timelineNavItemRefs[i]}
-                  role="tab"
-                  tabIndex={isActive ? 0 : -1}
-                >
-                  <div
-                    className={clsx(
-                      styles['timeline-nav__link-left'],
-                      itemVariant && styles['timeline-nav__link-hidden'],
-                    )}
-                  >
-                    {iconVariant(itemVariant, i)}
-                  </div>
-                  <div className={clsx(styles['timeline-nav__link-title'])}>
-                    {tab.props.title}
-                    {tab.props.titleAfter && (
-                      <div
-                        className={clsx(
-                          styles['timeline-nav__link-title-after'],
-                        )}
-                      >
-                        {tab.props.titleAfter}
-                      </div>
-                    )}
-                  </div>
-                  <Icon
-                    className={clsx(styles['timeline-nav__link-arrow'])}
-                    name="arrow-forward"
-                    purpose="informative"
-                    size="var(--eds-size-2-and-half)"
-                    title="forward"
-                  />
-                </a>
-              </li>
-            );
-          })}
-        </ol>
-      </div>
-      <div
-        className={clsx(
-          styles['timeline-nav__body'],
-          isActive && styles['eds-is-active'],
-        )}
-      >
-        <Button
-          className={clsx(styles['timeline-nav__back'])}
-          onClick={onBack}
-          onFocus={resetTabIndex}
-          ref={backRef}
-          status="neutral"
-          variant="link"
-        >
-          <Icon name="arrow-back" purpose="informative" title="back" />
-          Back
-        </Button>
-        {childrenWithProps[activeIndexState]}
-      </div>
-    </div>
-  );
-};
-
-TimelineNav.Panel = TimelineNavPanel;
diff --git a/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap b/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
deleted file mode 100644
index eeba6f167..000000000
--- a/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
+++ /dev/null
@@ -1,537 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TimelineNav /> Default story renders snapshot 1`] = `
-<div
-  class="timeline-nav"
-  variant="ordered"
->
-  <div
-    class="timeline-nav__nav"
-  >
-    <ol
-      class="timeline-nav__list timeline-nav__list--ordered"
-      role="tablist"
-    >
-      <li
-        class="timeline-nav__item eds-is-active"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-0"
-          aria-selected="true"
-          class="timeline-nav__link"
-          href="#:r0:-0"
-          id=":r1:-0"
-          role="tab"
-          tabindex="0"
-        >
-          <div
-            class="timeline-nav__link-left"
-          >
-            <span
-              aria-label="incomplete step"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete timeline-nav__icon"
-              role="img"
-            >
-              <svg
-                class="icon number-icon__icon"
-                fill="inherit"
-                height="0.5rem"
-                role="img"
-                style="--icon-size: 0.5rem;"
-                viewBox="0 0 24 24"
-                width="0.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  incomplete step
-                </title>
-                <path
-                  d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22Z"
-                />
-              </svg>
-            </span>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            Overview
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-1"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-1"
-          id=":r1:-1"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <span
-              aria-label="step 1"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg timeline-nav__icon"
-              role="img"
-            >
-              1
-            </span>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            TimelineNavPanel 1
-            <div
-              class="timeline-nav__link-title-after"
-            >
-              <svg
-                class="icon"
-                fill="#00A56A"
-                height="1.5em"
-                role="img"
-                style="--icon-size: 1.5em;"
-                viewBox="0 0 24 24"
-                width="1.5em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  29 students have completed
-                </title>
-                <path
-                  d="M12 16C11.4467 16 10.9267 15.8949 10.44 15.6848C9.95333 15.4749 9.53 15.19 9.17 14.83C8.81 14.47 8.52507 14.0467 8.3152 13.56C8.10507 13.0733 8 12.5533 8 12C8 11.4467 8.10507 10.9267 8.3152 10.44C8.52507 9.95333 8.81 9.53 9.17 9.17C9.53 8.81 9.95333 8.52493 10.44 8.3148C10.9267 8.10493 11.4467 8 12 8C12.5533 8 13.0733 8.10493 13.56 8.3148C14.0467 8.52493 14.47 8.81 14.83 9.17C15.19 9.53 15.4749 9.95333 15.6848 10.44C15.8949 10.9267 16 11.4467 16 12C16 12.5533 15.8949 13.0733 15.6848 13.56C15.4749 14.0467 15.19 14.47 14.83 14.83C14.47 15.19 14.0467 15.4749 13.56 15.6848C13.0733 15.8949 12.5533 16 12 16Z"
-                />
-              </svg>
-            </div>
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-2"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-2"
-          id=":r1:-2"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon timeline-nav__icon timeline-nav__icon--error"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 13.4L14.9 16.3C15.0833 16.4833 15.3167 16.575 15.6 16.575C15.8833 16.575 16.1167 16.4833 16.3 16.3C16.4833 16.1167 16.575 15.8833 16.575 15.6C16.575 15.3167 16.4833 15.0833 16.3 14.9L13.4 12L16.3 9.1C16.4833 8.91667 16.575 8.68333 16.575 8.4C16.575 8.11667 16.4833 7.88333 16.3 7.7C16.1167 7.51667 15.8833 7.425 15.6 7.425C15.3167 7.425 15.0833 7.51667 14.9 7.7L12 10.6L9.1 7.7C8.91667 7.51667 8.68333 7.425 8.4 7.425C8.11667 7.425 7.88333 7.51667 7.7 7.7C7.51667 7.88333 7.425 8.11667 7.425 8.4C7.425 8.68333 7.51667 8.91667 7.7 9.1L10.6 12L7.7 14.9C7.51667 15.0833 7.425 15.3167 7.425 15.6C7.425 15.8833 7.51667 16.1167 7.7 16.3C7.88333 16.4833 8.11667 16.575 8.4 16.575C8.68333 16.575 8.91667 16.4833 9.1 16.3L12 13.4ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
-              />
-            </svg>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            TimelineNavPanel 2
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-3"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-3"
-          id=":r1:-3"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon timeline-nav__icon timeline-nav__icon--warning"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM11 13H13V7H11V13ZM12 17C12.2833 17 12.521 16.904 12.713 16.712C12.9043 16.5207 13 16.2833 13 16C13 15.7167 12.9043 15.479 12.713 15.287C12.521 15.0957 12.2833 15 12 15C11.7167 15 11.4793 15.0957 11.288 15.287C11.096 15.479 11 15.7167 11 16C11 16.2833 11.096 16.5207 11.288 16.712C11.4793 16.904 11.7167 17 12 17Z"
-              />
-            </svg>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            
-              Panel with a long name that breaks into multiple lines on smaller
-              viewports
-            <div
-              class="timeline-nav__link-title-after"
-            >
-              <svg
-                class="icon"
-                fill="#8984E8"
-                height="1.5em"
-                role="img"
-                style="--icon-size: 1.5em;"
-                viewBox="0 0 24 24"
-                width="1.5em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  2 students need feedback
-                </title>
-                <path
-                  d="M12 16C11.4467 16 10.9267 15.8949 10.44 15.6848C9.95333 15.4749 9.53 15.19 9.17 14.83C8.81 14.47 8.52507 14.0467 8.3152 13.56C8.10507 13.0733 8 12.5533 8 12C8 11.4467 8.10507 10.9267 8.3152 10.44C8.52507 9.95333 8.81 9.53 9.17 9.17C9.53 8.81 9.95333 8.52493 10.44 8.3148C10.9267 8.10493 11.4467 8 12 8C12.5533 8 13.0733 8.10493 13.56 8.3148C14.0467 8.52493 14.47 8.81 14.83 9.17C15.19 9.53 15.4749 9.95333 15.6848 10.44C15.8949 10.9267 16 11.4467 16 12C16 12.5533 15.8949 13.0733 15.6848 13.56C15.4749 14.0467 15.19 14.47 14.83 14.83C14.47 15.19 14.0467 15.4749 13.56 15.6848C13.0733 15.8949 12.5533 16 12 16Z"
-                />
-              </svg>
-            </div>
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-4"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-4"
-          id=":r1:-4"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon timeline-nav__icon timeline-nav__icon--success"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-              />
-            </svg>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            TimelineNavPanel 4
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-5"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-5"
-          id=":r1:-5"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left"
-          >
-            <span
-              aria-label="incomplete step"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete timeline-nav__icon"
-              role="img"
-            >
-              <svg
-                class="icon number-icon__icon"
-                fill="inherit"
-                height="0.5rem"
-                role="img"
-                style="--icon-size: 0.5rem;"
-                viewBox="0 0 24 24"
-                width="0.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  incomplete step
-                </title>
-                <path
-                  d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22Z"
-                />
-              </svg>
-            </span>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            TimelineNavPanel 5
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-6"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-6"
-          id=":r1:-6"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <span
-              aria-label="step 6"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg timeline-nav__icon"
-              role="img"
-            >
-              6
-            </span>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            TimelineNavPanel 6
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li
-        class="timeline-nav__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:-7"
-          aria-selected="false"
-          class="timeline-nav__link"
-          href="#:r0:-7"
-          id=":r1:-7"
-          role="tab"
-          tabindex="-1"
-        >
-          <div
-            class="timeline-nav__link-left timeline-nav__link-hidden"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon timeline-nav__icon timeline-nav__icon--success"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-              />
-            </svg>
-          </div>
-          <div
-            class="timeline-nav__link-title"
-          >
-            Final Item - complete
-          </div>
-          <svg
-            class="icon timeline-nav__link-arrow"
-            fill="currentColor"
-            height="var(--eds-size-2-and-half)"
-            role="img"
-            style="--icon-size: var(--eds-size-2-and-half);"
-            viewBox="0 0 24 24"
-            width="var(--eds-size-2-and-half)"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>
-              forward
-            </title>
-            <path
-              d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-            />
-          </svg>
-        </a>
-      </li>
-    </ol>
-  </div>
-  <div
-    class="timeline-nav__body"
-  >
-    <button
-      class="button button--link button--neutral timeline-nav__back"
-      type="button"
-    >
-      <svg
-        class="icon"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          back
-        </title>
-        <path
-          d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-        />
-      </svg>
-      Back
-    </button>
-    <div
-      aria-hidden="false"
-      aria-labelledby=":r1:-0"
-      class="max-w-xl"
-      id=":r0:-0"
-      role="tabpanel"
-    >
-      <h3
-        class="heading heading--size-h3 mb-6"
-      >
-        Overview
-      </h3>
-      <p
-        class="text text--body"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-         
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/TimelineNav/index.ts b/src/components/TimelineNav/index.ts
deleted file mode 100644
index e0dce7024..000000000
--- a/src/components/TimelineNav/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TimelineNav as default } from './TimelineNav';
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 05022cc72..25db8ada3 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -32,8 +32,6 @@ export type Props = {
  * A toast used to provide information on the state of the page, usually in response to a
  * user action. Ex: The user updates their profile, and a toast pop-up informs them that the
  * data was successfully saved.
- *
- * @deprecated
  */
 export const Toast = ({
   children,
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index 31a0aa90c..85a8b9894 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -2,6 +2,7 @@ import { Switch } from '@headlessui/react';
 import clsx from 'clsx';
 import React from 'react';
 import type { EitherInclusive, ExtractProps } from '../../util/utility-types';
+
 import styles from './Toggle.module.css';
 
 type ToggleLabelProps = {
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
index 525f279a9..f6c77297f 100644
--- a/src/components/Tooltip/Tooltip.module.css
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -17,6 +17,11 @@
   @media (prefers-reduced-motion) {
     transition: none;
   }
+
+  border-color: var(--eds-theme-color-border-neutral-default);
+  color: var(--eds-theme-color-text-neutral-default);
+  background-color: var(--eds-theme-color-background-neutral-subtle);
+  --arrow-color: var(--eds-theme-color-border-neutral-default);
 }
 
 /**
@@ -33,23 +38,6 @@
   padding-top: var(--eds-size-1);
 }
 
-/**
- * Color Variants
- */
-.tooltip--light {
-  border-color: var(--eds-theme-color-border-neutral-default);
-  color: var(--eds-theme-color-text-neutral-default);
-  background-color: var(--eds-theme-color-background-neutral-subtle);
-  --arrow-color: var(--eds-theme-color-border-neutral-default);
-}
-
-.tooltip--dark {
-  border-color: var(--eds-theme-color-body-background-inverted);
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  background-color: var(--eds-theme-color-body-background-inverted);
-  --arrow-color: var(--eds-theme-color-body-background-inverted);
-}
-
 /**
  * Add arrows
  */
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index ede500c89..834694ab1 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -27,12 +27,6 @@ export default {
   component: Tooltip,
   args: defaultArgs,
   argTypes: {
-    align: {
-      table: {
-        // Marking deprecated props / controls as disabled
-        disable: true,
-      },
-    },
     text: {
       control: {
         type: 'text',
@@ -48,12 +42,6 @@ export default {
         defaultValue: { summary: 'top' },
       },
     },
-    variant: {
-      table: {
-        // Marking deprecated props / controls as disabled
-        disable: true,
-      },
-    },
   },
   parameters: {
     layout: 'centered',
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index cdb673f59..00f7e1b43 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -4,13 +4,10 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import * as TooltipStoryFile from './Tooltip.stories';
-import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock';
 
 const { Interactive, InteractiveDisabled } = composeStories(TooltipStoryFile);
 
 describe('<Tooltip />', () => {
-  const warnMock = consoleWarnMockHelper();
-
   generateSnapshots(TooltipStoryFile, {
     // Tippy renders tooltip as a child of <body> and hence is why baseElement needs to be targetted
     getElement: (wrapper) => {
@@ -41,12 +38,4 @@ describe('<Tooltip />', () => {
     await user.keyboard('{Escape}');
     expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
   });
-
-  it('should display warning message when attempting to use dark variant', () => {
-    render(<Interactive variant="dark" />);
-    expect(warnMock).toHaveBeenCalledTimes(1);
-    expect(warnMock).toHaveBeenCalledWith(
-      'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
-    );
-  });
 });
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 2d11443b9..b34764354 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -7,17 +7,6 @@ import styles from './Tooltip.module.css';
 
 // Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
 type TooltipProps = {
-  /**
-   * Where the tooltip should be placed in relation to the element it's attached to.
-   *
-   * Tippy also supports 'top-start', 'top-end', 'right-start', 'right-end', etc,
-   * but our CSS currently only supports the 4 main sides.
-   *
-   * This is deprecated. Please use `placement` instead.
-   *
-   * @deprecated
-   */
-  align?: 'top' | 'right' | 'bottom' | 'left';
   /**
    * The element or ref to append the tooltip to.
    * Defaults to the body element.
@@ -79,11 +68,6 @@ type TooltipProps = {
    * The content of the tooltip bubble.
    */
   text?: React.ReactNode;
-  /**
-   * Whether the tooltip has a light or dark background.
-   * @deprecated
-   */
-  variant?: 'light' | 'dark';
   /**
    * Whether the tooltip is always visible or always invisible.
    *
@@ -108,24 +92,13 @@ type Plugin = Plugins[number];
  *
  */
 export const Tooltip = ({
-  variant = 'light',
-  align = 'top',
   childNotInteractive,
   className,
   duration = 200,
-  placement,
+  placement = 'top',
   text,
   ...rest
 }: TooltipProps) => {
-  if (variant === 'dark' && process.env.NODE_ENV !== 'production') {
-    console.warn(
-      'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
-    );
-  }
-
-  // TODO: when removing `align`, remove this line and set `placement={placement}` below
-  const intendedPlacement = placement ?? align;
-
   // Hides tooltip when escape key is pressed, following:
   // https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc
   const hideOnEsc: Plugin = {
@@ -164,7 +137,7 @@ export const Tooltip = ({
   }
 
   const textContent = (
-    <Text as="span" data-testid="tooltip-content" size="caption-lg">
+    <Text as="span" data-testid="tooltip-content" preset="caption-lg">
       {text}
     </Text>
   );
@@ -172,15 +145,10 @@ export const Tooltip = ({
   return (
     <Tippy
       {...rest}
-      className={clsx(
-        styles['tooltip'],
-        variant === 'light' && styles['tooltip--light'],
-        variant === 'dark' && styles['tooltip--dark'],
-        className,
-      )}
+      className={clsx(styles['tooltip'], className)}
       content={textContent}
       duration={duration}
-      placement={intendedPlacement}
+      placement={placement}
       plugins={[hideOnEsc]}
     >
       {children}
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 747d800ab..2efe9bb2a 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 10px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="bottom"
@@ -118,7 +118,7 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="left"
@@ -179,7 +179,7 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -239,7 +239,7 @@ exports[`<Tooltip /> LongTriggerText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -300,7 +300,7 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -10px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="top"
diff --git a/src/index.ts b/src/index.ts
index 2e0fa2220..ea100a993 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,16 +10,8 @@ export { default as ButtonGroup } from './components/ButtonGroup';
 export { default as Card } from './components/Card';
 export { default as Checkbox } from './components/Checkbox';
 export { default as ClickableStyle } from './components/ClickableStyle';
-export { default as DataBar } from './components/DataBar';
-export { default as DragDrop } from './components/DragDrop';
-export { default as Drawer } from './components/Drawer';
 export { default as FieldNote } from './components/FieldNote';
 export { default as Fieldset } from './components/Fieldset';
-export { default as FiltersButton } from './components/FiltersButton';
-export { default as FiltersCheckboxField } from './components/FiltersCheckboxField';
-export { default as FiltersDrawer } from './components/FiltersDrawer';
-export { default as FiltersPopover } from './components/FiltersPopover';
-export { default as Grid } from './components/Grid';
 export { default as Heading } from './components/Heading';
 export { default as HorizontalStepper } from './components/HorizontalStepper';
 export { default as Hr } from './components/Hr';
@@ -27,35 +19,25 @@ export { default as Icon } from './components/Icon';
 export { default as InlineNotification } from './components/InlineNotification';
 export { default as InputField } from './components/InputField';
 export { default as Label } from './components/Label';
-export { default as Layout } from './components/Layout';
-export { default as LayoutContainer } from './components/LayoutContainer';
-export { default as LayoutLinelengthContainer } from './components/LayoutLinelengthContainer';
-export { default as LayoutSection } from './components/LayoutSection';
 export { default as Link } from './components/Link';
 export { default as LoadingIndicator } from './components/LoadingIndicator';
 export { default as Menu } from './components/Menu';
 export { default as Modal } from './components/Modal';
 export { default as NumberIcon } from './components/NumberIcon';
-export { default as PageHeader } from './components/PageHeader';
 export { default as PageLevelBanner } from './components/PageLevelBanner';
-export { default as Panel } from './components/Panel';
 export { default as Popover } from './components/Popover';
 export { default as PopoverListItem } from './components/PopoverListItem';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as Radio } from './components/Radio';
-export { default as Score } from './components/Score';
 export { default as SearchBar } from './components/SearchBar';
-export { default as Section } from './components/Section';
 export { default as Select } from './components/Select';
 export { default as Skeleton } from './components/Skeleton';
 export { default as Slider } from './components/Slider';
-export { default as Tab } from './components/Tab';
 export { default as Table } from './components/Table';
 export { default as Tabs } from './components/Tabs';
 export { default as Tag } from './components/Tag';
 export { default as Text } from './components/Text';
 export { default as TextareaField } from './components/TextareaField';
-export { default as TimelineNav } from './components/TimelineNav';
 export { default as Toast } from './components/Toast';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a8024d1a8..2362619e1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -34,20 +34,6 @@ export default {
         ...textColorTokens,
       },
     },
-    fontSize: {
-      // provide values for both font-size and line-height
-      body: [edsTokens['font-size']['16'], '1.5'],
-      h1: [edsTokens['font-size']['40'], '1.2'],
-      h2: [edsTokens['font-size']['32'], '1.25'],
-      h3: [edsTokens['font-size']['24'], '1.333'],
-      h4: [edsTokens['font-size']['18'], '1.333'],
-      h5: [edsTokens['font-size']['16'], '1.5'],
-      h6: [edsTokens['font-size']['14'], '1.57'],
-      h7: [edsTokens['font-size']['12'], '1.666'],
-      sm: [edsTokens['font-size']['14'], '1.57'],
-      xs: [edsTokens['font-size']['12'], '1.666'],
-      caption: [edsTokens['font-size']['12'], '1.666'],
-    },
     fontWeight: {
       normal: edsTokens['font-weight'].light,
       medium: edsTokens['font-weight'].medium,