diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
index a3f17f8cc..dd283e373 100755
--- a/.storybook/components/DesignTokens/Tier1/Borders.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -6,6 +6,7 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Borders extends Component {
   render() {
+    // TODO: what are the width tokens to document?
     return (
       <div>
         <Section title="Border Width">
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
index 551e4f0b9..eaed870e2 100755
--- a/.storybook/components/DesignTokens/Tier1/Colors.tsx
+++ b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -12,31 +12,59 @@ export const Tier1Colors = () => {
       figmaToken:
         figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
     }));
+
+  // filter down to the neutral tokens which were introduced or redefined in the new brand
+  const nonLegacyNeutralItems = getListItems(
+    'eds-color-neutral',
+    'neutral',
+  ).filter((item) => {
+    // TODO: remove this filter once the deprecated neutral tokens are deleted
+    return [
+      '025',
+      '050',
+      '100',
+      '150',
+      '200',
+      '250',
+      '350',
+      '450',
+      '550',
+      '650',
+      '750',
+      '800',
+      '850',
+      '900',
+      '950',
+    ].includes(item.figmaToken.split('/')[1]);
+  });
   return (
     <div>
-      <Section title="Brand Colors 2.0">
+      <Section
+        description="These base colors are used in higher tier tokens and not linked for use via Tailwind"
+        title="Brand Red Colors"
+      >
         <ColorList listItems={getListItems('eds-color-red', 'red')} />
+      </Section>
+      <Section title="Brand Orange Colors">
         <ColorList listItems={getListItems('eds-color-orange', 'orange')} />
+      </Section>
+      <Section title="Brand Yellow Colors">
         <ColorList listItems={getListItems('eds-color-yellow', 'yellow')} />
+      </Section>
+      <Section title="Brand Green Colors">
         <ColorList listItems={getListItems('eds-color-green', 'green')} />
+      </Section>
+      <Section title="Brand Blue Colors">
         <ColorList listItems={getListItems('eds-color-blue', 'blue')} />
+      </Section>
+      <Section title="Brand Purple Colors">
+        <ColorList listItems={getListItems('eds-color-purple', 'purple')} />
+      </Section>
+      <Section title="Brand Pink Colors">
         <ColorList listItems={getListItems('eds-color-pink', 'pink')} />
       </Section>
-      <Section title="Neutral Colors">
-        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
-      </Section>
-      <Section title="Legacy Brand Colors">
-        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
-      </Section>
-      <Section className="flex flex-col gap-3" title="Legacy Other Colors">
-        <ColorList
-          listItems={getListItems('eds-color-other-orange', 'orange')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-yellow', 'yellow')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
+      <Section title="Brand Neutral Colors">
+        <ColorList listItems={nonLegacyNeutralItems} />
       </Section>
     </div>
   );
diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
deleted file mode 100755
index f9aeb8377..000000000
--- a/.storybook/components/DesignTokens/Tier1/Layout.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
-import filterTokens from '../../../util/filterTokens';
-import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
-
-export class Tier1Layout extends Component {
-  render() {
-    return (
-      <div>
-        <Section title="Layout">
-          <Grid>
-            {filterTokens(`eds-l-`).map(function (listItem) {
-              return (
-                <Grid.Item key={listItem.name}>
-                  <TokenSpecimen
-                    inlineStyles={{
-                      maxWidth: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                    }}
-                    name={listItem.name}
-                    value={
-                      listItem.value + 'px' + ` (${listItem.value / 16} rem)`
-                    }
-                  />
-                </Grid.Item>
-              );
-            })}
-          </Grid>
-        </Section>
-      </div>
-    );
-  }
-}
diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
index 00779da65..e4a2c58f7 100755
--- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -7,49 +7,35 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 export class Tier1Sizes extends Component {
   render() {
     return (
-      <div>
-        <Section title="Base Grid Size">
-          <Grid>
-            {filterTokens('eds-size-base').map((listItem) => (
-              <Grid.Item key={listItem.name}>
-                <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size"
-                  inlineStyles={{
-                    width: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                    height: `calc(var(${listItem.name}) /16 * 1rem)`,
-                    minHeight: '0',
-                  }}
-                  name={listItem.name}
-                  value={listItem.value + 'px' + ` (${listItem.value / 16}rem)`}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-        </Section>
-        <Section title="Grid Size">
-          <Grid>
-            {filterTokens(`eds-size`)
-              .filter((listItem) => !listItem.name.endsWith('base-unit'))
-              .map(function (listItem) {
-                return (
-                  <Grid.Item key={listItem.name}>
-                    <TokenSpecimen
-                      inlineStyles={{
-                        width: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                        height: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                        minHeight: '0',
-                      }}
-                      name={listItem.name}
-                      value={
-                        listItem.value + 'px' + ` (${listItem.value / 16}rem)`
-                      }
-                    />
-                  </Grid.Item>
-                );
-              })}
-          </Grid>
-        </Section>
-      </div>
+      <Section
+        description="When using tailwind config, these sizes can be applied to any tailwind size utility class"
+        title="Grid Sizes"
+      >
+        <Grid>
+          {filterTokens(`eds-size`)
+            .filter((listItem) => !listItem.name.endsWith('base-unit'))
+            .map(function (listItem) {
+              return (
+                <Grid.Item key={listItem.name}>
+                  <TokenSpecimen
+                    comment={`Tailwind class: *-${
+                      listItem.name.split('--eds-')[1]
+                    }`}
+                    inlineStyles={{
+                      width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      height: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      minHeight: '0',
+                    }}
+                    name={listItem.name}
+                    value={
+                      listItem.value + 'px' + ` (${listItem.value / 16}rem)`
+                    }
+                  />
+                </Grid.Item>
+              );
+            })}
+        </Grid>
+      </Section>
     );
   }
 }
diff --git a/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx b/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx
index b62c75efe..c61ee8454 100755
--- a/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx
+++ b/.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Tier1Animation } from './Animation';
 import { Tier1Borders } from './Borders';
 import { Tier1Colors } from './Colors';
-import { Tier1Layout } from './Layout';
 import { Tier1Shadows } from './Shadows';
 import { Tier1Sizes } from './Sizes';
 
@@ -22,6 +21,8 @@ export default {
   },
 };
 
+// TODO: Tokens to document: eds-color-opacity
+
 export const Colors = {
   render: () => <Tier1Colors />,
 };
@@ -38,10 +39,6 @@ export const Sizes = {
   render: () => <Tier1Sizes />,
 };
 
-export const Layout = {
-  render: () => <Tier1Layout />,
-};
-
 export const Shadows = {
   render: () => <Tier1Shadows />,
 };
diff --git a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
index 4d888b0e4..4a1e0fb3a 100755
--- a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx
@@ -15,20 +15,21 @@ export default {
   },
 };
 
-export const Borders: StoryObj = {
+export const BorderRadii: StoryObj = {
   render: () => (
     <div>
-      <Section title="Border Width">
+      <Section title="Border Radii">
         <Grid>
-          {filterTokens(`eds-theme-border-width`).map(function (listItem) {
+          {filterTokens(`eds-theme-border-radius`).map(function (listItem) {
             return (
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
                   inlineStyles={{
                     backgroundColor: 'transparent',
-                    borderWidth: `calc(var(${listItem.name}) * 1px)`,
                     borderStyle: 'solid',
+                    borderWidth: '1px',
                     borderColor: 'black',
+                    borderRadius: `calc(var(${listItem.name}) * 1px)`,
                   }}
                   name={listItem.name}
                   value={listItem.value + 'px'}
diff --git a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
index 013603b6f..f5acfdd80 100755
--- a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
+++ b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
@@ -14,6 +14,9 @@ export default {
   },
 };
 
+const camelCaseWarning =
+  'NOTE: emphasis tokens have a camelCase suffix for the emphasis (e.g., lowEmphasis)';
+
 const getListItems = ({
   filterTerm,
   figmaTokenHeader,
@@ -35,15 +38,15 @@ const getListItems = ({
     };
   });
 
-export const Text: StoryObj = {
+export const TextUtility: StoryObj = {
   render: () => (
     <div>
-      <Section title="Text Colors">
+      <Section title="Text Colors (utility)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-text',
+            filterTerm: 'eds-theme-color-text-utility',
             figmaTokenHeader: 'text',
-            tailwindClassHeader: 'text',
+            tailwindClassHeader: 'text-utility',
           })}
         />
       </Section>
@@ -51,15 +54,34 @@ export const Text: StoryObj = {
   ),
 };
 
-export const Icon: StoryObj = {
+export const IconUtility: StoryObj = {
   render: () => (
     <div>
-      <Section title="Icon Colors">
+      <Section title="Icon Colors (utility)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-icon',
+            filterTerm: 'eds-theme-color-icon-utility',
             figmaTokenHeader: 'icon',
-            tailwindClassHeader: 'text-icon',
+            tailwindClassHeader: 'text-icon-utility',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const BackgroundUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section
+        description={camelCaseWarning}
+        title="Background Colors (utility)"
+      >
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-background-utility',
+            figmaTokenHeader: 'background',
+            tailwindClassHeader: 'bg-utility',
           })}
         />
       </Section>
@@ -67,15 +89,34 @@ export const Icon: StoryObj = {
   ),
 };
 
-export const Background: StoryObj = {
+export const BackgroundBrand: StoryObj = {
   render: () => (
     <div>
-      <Section title="Background Colors">
+      <Section description={camelCaseWarning} title="Background Colors (brand)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-background',
+            filterTerm: 'eds-theme-color-background-brand',
             figmaTokenHeader: 'background',
-            tailwindClassHeader: 'bg',
+            tailwindClassHeader: 'bg-brand',
+          }).filter((item) => {
+            // remove legacy primary tokens
+            return item.name.indexOf('primary') === -1;
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const BorderUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section description={camelCaseWarning} title="Border Colors (utility)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-border-utility',
+            figmaTokenHeader: 'border',
+            tailwindClassHeader: 'border-utility',
           })}
         />
       </Section>
@@ -83,15 +124,18 @@ export const Background: StoryObj = {
   ),
 };
 
-export const Border: StoryObj = {
+export const BorderBrand: StoryObj = {
   render: () => (
     <div>
-      <Section title="Border Colors">
+      <Section description={camelCaseWarning} title="Border Colors (brand)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-border',
+            filterTerm: 'eds-theme-color-border-brand',
             figmaTokenHeader: 'border',
-            tailwindClassHeader: 'border',
+            tailwindClassHeader: 'border-brand',
+          }).filter((item) => {
+            // remove legacy primary tokens
+            return item.name.indexOf('primary') === -1;
           })}
         />
       </Section>
diff --git a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
deleted file mode 100755
index 186ef24fa..000000000
--- a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import React from 'react';
-import Section from '../../../../src/components/Section';
-import filterTokens from '../../../util/filterTokens';
-import { ColorList } from '../../ColorList/ColorList';
-
-export default {
-  title: 'Design Tokens/Tier 3: Component/Colors',
-  parameters: {
-    axe: {
-      // For documentation purposes only
-      skip: true,
-    },
-  },
-};
-
-const getListItems = ({
-  filterTerm,
-  figmaTokenHeader,
-  tailwindClassHeader,
-  getTailwindClassPrefix = (stringMatch: string) => {
-    if (stringMatch.includes('background')) {
-      return 'bg';
-    } else if (stringMatch.includes('border')) {
-      return 'border';
-    } else {
-      return 'text';
-    }
-  },
-}: {
-  filterTerm: string;
-  figmaTokenHeader: string;
-  tailwindClassHeader: string;
-  getTailwindClassPrefix?: (stringMatch: string) => string;
-}) =>
-  filterTokens(filterTerm).map(({ name, value }) => {
-    const specifier = name.slice(
-      name.indexOf(filterTerm) + filterTerm.length + 1,
-    );
-    return {
-      name,
-      value,
-      figmaToken: figmaTokenHeader + '/' + specifier,
-      tailwindClass:
-        getTailwindClassPrefix(specifier) +
-        '-' +
-        tailwindClassHeader +
-        '-' +
-        specifier,
-    };
-  });
-
-export const Button: StoryObj = {
-  // story is too large to be snapped
-  // TODO: when button colors are more in sync with mocks, should be less colors so might fit then
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-  render: () => (
-    <div>
-      <Section title="Button Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-button',
-            figmaTokenHeader: 'button',
-            tailwindClassHeader: 'button',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const Checkbox: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Checkbox Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-checkbox',
-            figmaTokenHeader: 'checkbox',
-            tailwindClassHeader: 'checkbox',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const DataBar: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Data Bar Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-data-bar',
-            figmaTokenHeader: 'data bar',
-            tailwindClassHeader: 'data-bar',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const Form: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Form Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-form',
-            figmaTokenHeader: 'form',
-            tailwindClassHeader: 'form',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const Link: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Link Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-link',
-            figmaTokenHeader: 'link',
-            tailwindClassHeader: 'link',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const Modal: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Modal Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-modal',
-            figmaTokenHeader: 'modal',
-            tailwindClassHeader: 'modal',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const ProgressBar: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Progress Bar Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-progress-bar',
-            figmaTokenHeader: 'progress bar',
-            tailwindClassHeader: 'progress-bar',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const Toggle: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Toggle Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-toggle',
-            figmaTokenHeader: 'toggle',
-            tailwindClassHeader: 'toggle',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
-export const FocusRing: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Focus Ring Colors">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-focus',
-            figmaTokenHeader: 'focus',
-            tailwindClassHeader: 'focus',
-            getTailwindClassPrefix: () => '(outline/border)',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
diff --git a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
deleted file mode 100755
index 42daeee6d..000000000
--- a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { at, capitalize, forEach, merge } from 'lodash';
-
-import React from 'react';
-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';
-import link from '../../../../src/design-tokens/tier-3-component/link-typography.json';
-import tab from '../../../../src/design-tokens/tier-3-component/tab-typography.json';
-import tag from '../../../../src/design-tokens/tier-3-component/tag-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
-import flatten from '../../../util/flattenToken';
-import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
-
-export default {
-  title: 'Design Tokens/Tier 3: Component',
-  parameters: {
-    axe: {
-      // For documentation purposes only
-      skip: true,
-    },
-  },
-};
-
-export const Typography: StoryObj = {
-  render: () => {
-    const values: {
-      [key: string]: {
-        [key: string]: string;
-      };
-    } = {};
-    const componentTypography = merge(breadcrumb, button, form, link, tab, tag);
-    forEach(at(componentTypography, 'eds.theme.typography')[0], (_, key) => {
-      values[key] = flatten(
-        at(componentTypography, `eds.theme.typography.${key}`)[0],
-        `eds-theme-typography-${key}-`,
-      );
-    });
-
-    // Flatten all the tier 3 tokens, group them by component, and print specimens for the results
-    return (
-      <div>
-        {Object.keys(values).map((section) => {
-          return (
-            <Section key={section} title={capitalize(section)}>
-              <Grid>
-                {Object.keys(values[section]).map((usage) => {
-                  return (
-                    <TokenSpecimen
-                      inlineStyles={{ font: values[section][usage] }}
-                      key={usage}
-                      name={usage}
-                      value={values[section][usage]}
-                      variant="typography-body"
-                    />
-                  );
-                })}
-              </Grid>
-            </Section>
-          );
-        })}
-      </div>
-    );
-  },
-};
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index b17c491aa..0d9e84a52 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -799,7 +799,10 @@
   "eds-size-10": "80",
   "eds-size-11": "88",
   "eds-size-12": "96",
-  "eds-size-20": "320",
+  "eds-size-20": "160",
+  "eds-size-24": "192",
+  "eds-size-32": "256",
+  "eds-size-40": "320",
   "eds-size-base-unit": "8",
   "eds-size-half": "4",
   "eds-size-quarter": "2",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index eef5e0473..d237fd96d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -11,14 +11,14 @@ import '../src/design-tokens/tier-1-definitions/fonts.css';
 // Import storybook-specific CSS
 import './css/styleguide-only.css';
 
-import type { Preview, Story } from '@storybook/react';
+import type { Preview, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import Theme from './Theme';
 import { storybookViewports } from '../src/util/viewports';
 
 export const decorators = [
-  (Story: Story) => (
+  (Story: StoryFn) => (
     <div dir="ltr">
       <Story />
     </div>
@@ -68,19 +68,6 @@ export const parameters: Preview['parameters'] = {
   },
   backgrounds: {
     values: [
-      // TODO: remove the following three when the last 1.0 components have been migrated
-      {
-        name: 'eds-color-neutral-white',
-        value: '#ffffff',
-      },
-      {
-        name: 'eds-color-neutral-100',
-        value: '#f4f6f8',
-      },
-      {
-        name: 'eds-color-neutral-700',
-        value: '#21272D',
-      },
       {
         name: 'background-utility-default-high-emphasis',
         value: '#0F2163',
diff --git a/src/components/Accordion/Accordion-v2.module.css b/src/components/Accordion/Accordion-v2.module.css
deleted file mode 100644
index 09d38152e..000000000
--- a/src/components/Accordion/Accordion-v2.module.css
+++ /dev/null
@@ -1,137 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # ACCORDION
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
- 
-/**
- * Accordion Panel that expands and collapses.
- * Reveals itself below the associated Accordion Button.
- */
- .accordion-panel {
-  padding: 0 3.5rem 1rem 1rem;
-
-  font: var(--eds-theme-typography-body-sm);
-
-  &.accordion-panel--leading-icon {
-    padding-left: 3.5rem;
-  }
-
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-/**
- * Accordion Button, wraps the heading and open indicator icon.
- */
-.accordion-button {
-  display: flex;
-  justify-content: flex-start;
-  gap: 1rem;
-  width: 100%;
-
-  border: 0;
-  text-align: left;
-
-  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-
-  &:hover {
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-  }
-
-  &:active {
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
-  }
-}
-
-.accordion-button--empty {
-  pointer-events: none;
-}
-
-/**
- * Size variants
- */
-.accordion-button--sm,
-.accordion-button--md {
-  padding: 0.5rem 1rem;
-}
-
-/**
- * Expand more (chevron) icon indicates open or closed status.
- *
- * This non-rotated icon points down and represents closed status.
- */
- .accordion-button__trailing-icon {
-  flex: 0 0 content;
-  transform: rotate(0);
-}
-
-/**
- * This rotated icon points up and represents open status.
- */
- .accordion-button__trailing-icon--open {
-  transform: rotate(-180deg);
-}
-
-/**
- * Animates the icon rotation when opening and closing.
- */
- .accordion-button > .accordion-button__trailing-icon {
-  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.accordion-panel--hidden {
-  padding: 0;
-}
-
-.accordion-button__heading {
-  flex-grow: 2;
-
-  & > * + * {
-    display: block;
-  }
-}
-
-.accordion-button:focus-visible {
-  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus)
-}
-
-.accordion-button__leading-icon {
-  color: var(--eds-theme-color-icon-utility-default-secondary);
-
-  /* Targeting NumberIcons and other images used in this specific context */
-  & [role='img'] {
-    display: inline-flex;
-  }
-}
-
-.accordion-button__title {
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-.accordion-button__subtitle {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-
-.accordion-panel--md {
-  font: var(--eds-theme-typography-body-md);
-}
-
-.accordion-panel--sm {
-  font: var(--eds-theme-typography-body-sm);
-}
-
-/**
- * Accordion Row houses one Accordion Button subcomponent and its relevant Accordion Panel subcomponent.
- */
-.accordion-row {
-  border-bottom: calc(var(--eds-border-width-sm) * 1px) solid
-    var(--eds-theme-color-border-utility-default-low-emphasis);
-}
diff --git a/src/components/Accordion/Accordion-v2.stories.tsx b/src/components/Accordion/Accordion-v2.stories.tsx
deleted file mode 100644
index e43e0ca5d..000000000
--- a/src/components/Accordion/Accordion-v2.stories.tsx
+++ /dev/null
@@ -1,412 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Accordion } from './Accordion-v2';
-import { chromaticViewports } from '../../util/viewports';
-import Icon from '../Icon';
-import { NumberIconV2 as NumberIcon } from '../NumberIcon';
-import Text from '../Text';
-
-type Args = React.ComponentProps<typeof Accordion>;
-
-export default {
-  title: 'Components/V2/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.2', 'current-2.0'],
-  },
-  args: {
-    headingAs: 'h2',
-    className: 'w-96',
-    children: (
-      <Accordion.Row>
-        <Accordion.Button
-          data-testid="accordion-button"
-          title="Massa quam egestas massa."
-        ></Accordion.Button>
-        <Accordion.Panel data-testid="accordion-panel">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-        </Accordion.Panel>
-      </Accordion.Row>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Story = StoryObj<Args>;
-
-export const Default: Story = {};
-
-export const TitleAndSubtitle: Story = {
-  args: {
-    ...Default.args,
-    children: (
-      <Accordion.Row>
-        <Accordion.Button
-          data-testid="accordion-button"
-          subtitle={<span>"Quam lacus maecenas nibh malesuada."</span>}
-          title="Massa quam egestas massa."
-        ></Accordion.Button>
-        <Accordion.Panel data-testid="accordion-panel">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-        </Accordion.Panel>
-      </Accordion.Row>
-    ),
-  },
-};
-
-export const HasLeadingIcon: Story = {
-  args: {
-    ...Default.args,
-    children: (
-      <Accordion.Row hasLeadingIcon>
-        <Accordion.Button
-          data-testid="accordion-button"
-          leadingIcon={
-            <Icon name="account-circle" purpose="decorative" size="1.5rem" />
-          }
-          subtitle="Quam lacus maecenas nibh malesuada."
-          title="Massa quam egestas massa."
-        ></Accordion.Button>
-        <Accordion.Panel data-testid="accordion-panel">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-        </Accordion.Panel>
-      </Accordion.Row>
-    ),
-  },
-};
-
-/**
- * You can add in `NumberIcon` or any other icon in the button for the accordion row.
- */
-export const HasLeadingNumberIcon: Story = {
-  args: {
-    ...Default.args,
-    children: (
-      <Accordion.Row hasLeadingIcon>
-        <Accordion.Button
-          data-testid="accordion-button"
-          leadingIcon={
-            <NumberIcon
-              aria-label="Numero uno"
-              number={1}
-              size="md"
-              status="default"
-            />
-          }
-          subtitle="Quam lacus maecenas nibh malesuada."
-          title="Massa quam egestas massa."
-        ></Accordion.Button>
-        <Accordion.Panel data-testid="accordion-panel">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-        </Accordion.Panel>
-      </Accordion.Row>
-    ),
-  },
-};
-
-/**
- * Default `Accordion` using the `small` size.
- */
-export const Small: Story = {
-  args: {
-    size: 'sm',
-  },
-};
-
-/**
- * This demonstrates how one can combine multiple `Accordion` rows, where any of the rows can
- * be defaulted to open (using `defaultOpen`).
- */
-export const Stacked: Story = {
-  args: {
-    children: (
-      <>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button
-            data-testid="accordion-button-1"
-            title="Massa quam egestas massa."
-          ></Accordion.Button>
-          <Accordion.Panel data-testid="accordion-panel-1">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row>
-          <Accordion.Button
-            data-testid="accordion-button-2"
-            title="Massa quam egestas massa."
-          ></Accordion.Button>
-          <Accordion.Panel data-testid="accordion-panel-2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row>
-          <Accordion.Button
-            data-testid="accordion-button-3"
-            title="Massa quam egestas massa."
-          ></Accordion.Button>
-          <Accordion.Panel data-testid="accordion-panel-3">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row>
-          <Accordion.Button
-            data-testid="accordion-button-4"
-            title="Massa quam egestas massa."
-          ></Accordion.Button>
-          <Accordion.Panel data-testid="accordion-panel-4">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-      </>
-    ),
-  },
-};
-
-export const StackedSmall: Story = {
-  args: {
-    ...Stacked.args,
-    size: 'sm',
-  },
-};
-
-/**
- * This demonstrates how to specify that a section is not currently expandable using `isExpandable`.
- */
-export const EmptyStackedOpen: Story = {
-  args: {
-    children: (
-      <>
-        <Accordion.Row defaultOpen isExpandable={false}>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-      </>
-    ),
-  },
-};
-
-export const StackedOpen: Story = {
-  args: {
-    children: (
-      <>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row defaultOpen>
-          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-      </>
-    ),
-  },
-};
-
-export const StackedSmallOpen: Story = {
-  args: {
-    ...StackedOpen.args,
-    size: 'sm',
-  },
-};
-
-/**
- *
- * This shows how to use a render prop for the row, to allow controlling render based on component state.
- *
- * **NOTE**: Visual regression testing unhelpful since story value is in interaction and as a code example.
- */
-export const UsingRenderProp: Story = {
-  render: () => (
-    <Accordion headingAs="h2">
-      <Accordion.Row>
-        {({ open }) => (
-          <>
-            <Accordion.Button data-testid="accordion-button">
-              Accordion Button {(open && 'open') || 'closed'}
-            </Accordion.Button>
-            <Accordion.Panel>Accordion Panel</Accordion.Panel>
-          </>
-        )}
-      </Accordion.Row>
-    </Accordion>
-  ),
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-/**
- * Although headings should provide limited text, we allow for text to span multiple lines, preserving
- * the size of the state caret.
- */
-export const WithLargeHeader: Story = {
-  parameters: {
-    chromatic: {
-      viewports: [chromaticViewports.ipadMini],
-    },
-  },
-  args: {
-    children: (
-      <Accordion.Row>
-        <Accordion.Button>
-          Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas
-          massa. Massa quam egestas massa. Massa quam egestas massa.
-        </Accordion.Button>
-        <Accordion.Panel>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-        </Accordion.Panel>
-      </Accordion.Row>
-    ),
-  },
-};
-
-/**
- * You can use other EDS components within the `Accordion.Button` to allow for custom, non-text headers.
- *
- * **Example**: using `Text` and `Icon` in the `Accordion.Button`.
- */
-export const UsingComplexHeaders: Story = {
-  parameters: {
-    badges: ['intro-1.2', 'implementationExample', 'current-2.0'],
-  },
-  args: {
-    children: (
-      <>
-        <Accordion.Row>
-          <Accordion.Button>
-            <Text preset="body-lg">
-              <Icon
-                className="m-2"
-                name="check-circle"
-                purpose="decorative"
-                size="1rem"
-              />
-              Step 1
-            </Text>
-          </Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row>
-          <Accordion.Button>
-            <Text preset="body-lg">
-              <Icon
-                className="m-2"
-                name="check-circle"
-                purpose="decorative"
-                size="1rem"
-              />
-              Step 2
-            </Text>
-          </Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-      </>
-    ),
-  },
-};
diff --git a/src/components/Accordion/Accordion-v2.test.tsx b/src/components/Accordion/Accordion-v2.test.tsx
deleted file mode 100644
index 4bc9444a2..000000000
--- a/src/components/Accordion/Accordion-v2.test.tsx
+++ /dev/null
@@ -1,115 +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 { Accordion } from './Accordion-v2';
-import * as stories from './Accordion-v2.stories';
-
-const { Default } = composeStories(stories);
-
-describe('<Accordion />', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('should open and close Accordion panel clicking Accordion button', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-    const accordionButton = screen.getByTestId('accordion-button');
-
-    await user.click(accordionButton);
-    expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-
-    await user.click(accordionButton);
-    expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-  });
-
-  it('should open and close Accordion panel with space and enter keys on the Accordion button', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const accordionButton = screen.getByTestId('accordion-button');
-    accordionButton.focus();
-
-    await user.keyboard(' ');
-    expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-
-    await user.keyboard(' ');
-    expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-
-    await user.keyboard('{enter}');
-    expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-
-    await user.keyboard('{enter}');
-    expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-  });
-
-  it('should call onClose callback when accordion closes', async () => {
-    const user = userEvent.setup();
-    const onClose = jest.fn();
-    render(
-      <Accordion headingAs="h2">
-        <Accordion.Row defaultOpen>
-          <Accordion.Button data-testid="accordion-button" onClose={onClose}>
-            Accordion Button
-          </Accordion.Button>
-          <Accordion.Panel>Accordion Panel</Accordion.Panel>
-        </Accordion.Row>
-      </Accordion>,
-    );
-    const accordionButton = screen.getByTestId('accordion-button');
-
-    await user.click(accordionButton);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call onOpen callback when accordion opens', async () => {
-    const user = userEvent.setup();
-    const onClose = jest.fn();
-    const onOpen = jest.fn();
-    render(
-      <Accordion headingAs="h2">
-        <Accordion.Row>
-          <Accordion.Button
-            data-testid="accordion-button"
-            onClose={onClose}
-            onOpen={onOpen}
-          >
-            Accordion Button
-          </Accordion.Button>
-          <Accordion.Panel>Accordion Panel</Accordion.Panel>
-        </Accordion.Row>
-      </Accordion>,
-    );
-    const accordionButton = screen.getByRole('button');
-
-    await user.click(accordionButton);
-    expect(onOpen).toHaveBeenCalledTimes(1);
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('should not call onOpen callback when accordion opens on an empty row', async () => {
-    const user = userEvent.setup();
-    const onClose = jest.fn();
-    const onOpen = jest.fn();
-    render(
-      <Accordion headingAs="h2">
-        <Accordion.Row isExpandable={false}>
-          <Accordion.Button
-            data-testid="accordion-button"
-            onClose={onClose}
-            onOpen={onOpen}
-          >
-            Accordion Button
-          </Accordion.Button>
-          <Accordion.Panel>Accordion Panel</Accordion.Panel>
-        </Accordion.Row>
-      </Accordion>,
-    );
-    const accordionButton = screen.getByRole('button');
-
-    await user.click(accordionButton);
-    expect(onOpen).not.toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Accordion/Accordion-v2.tsx b/src/components/Accordion/Accordion-v2.tsx
deleted file mode 100644
index 54e82dde0..000000000
--- a/src/components/Accordion/Accordion-v2.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-import { Disclosure } from '@headlessui/react';
-import clsx from 'clsx';
-import React, { createContext, useContext } from 'react';
-import type { ReactNode } from 'react';
-import { ENTER_KEYCODE, SPACEBAR_KEYCODE } from '../../util/keycodes';
-import type { Size } from '../../util/variant-types';
-
-import Heading, { type HeadingElement } from '../Heading';
-import { type IconNameV2 as IconName, IconV2 as Icon } from '../Icon';
-import Text from '../Text';
-
-import styles from './Accordion-v2.module.css';
-
-type AccordionProps = {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component.
-   */
-  children: ReactNode;
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Used to specify which heading element should be rendered for each `Accordion.Title` child.
-   *
-   * **Default is `"h2"`**.
-   */
-  headingAs: HeadingElement;
-  /**
-   * Various sizes supported by the `Accordion`.
-   *
-   * **Default is `"md"`**.
-   */
-  size?: Extract<Size, 'sm' | 'md'>;
-};
-
-type AccordionButtonProps = {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component.
-   */
-  children?: ReactNode;
-  /**
-   * Additional classnames passed in for styling
-   */
-  className?: string;
-  /**
-   * Callback for when accordion is closed.
-   */
-  onClose?: () => void;
-  /**
-   * Callback for when according is opened.
-   */
-  onOpen?: () => void;
-  // Design API
-  /**
-   * Used to specify which heading element should be rendered for the title.
-   * If provided, overrides parent <Accordion> headingAs prop.
-   */
-  headingAs?: HeadingElement;
-  /**
-   * Icon to preceed the text in an accordion header
-   */
-  leadingIcon?: ReactNode;
-  /**
-   * Secondary text used to describe the content in more detail
-   */
-  subtitle?: ReactNode;
-  /**
-   * The title/heading of the component
-   */
-  title?: string;
-  /**
-   * Icon override for component's expand/collapse indicator.
-   *
-   * **Default is `"expand-more"`**.
-   */
-  trailingIcon?: Extract<IconName, 'chevron-down'>;
-};
-
-type AccordionPanelProps = {
-  /**
-   * Child node(s) that can be nested inside component.
-   */
-  children: ReactNode;
-  /**
-   * Additional class names passed in for styling
-   */
-  className?: string;
-};
-
-type AccordionRowProps = {
-  /**
-   * Child node(s) that can be nested inside component.
-   */
-  children: ReactNode | (({ open }: { open: boolean }) => ReactNode);
-  /**
-   * Additional class names passed in for styling.
-   */
-  className?: string;
-  /**
-   * Whether panel is expanded by default.
-   */
-  defaultOpen?: boolean;
-  /**
-   * Whether the row can show expandable content
-   */
-  isExpandable?: boolean;
-  /**
-   * Whether the row has a leading icon on the row's trigger
-   */
-  hasLeadingIcon?: boolean;
-};
-
-const AccordionContext = createContext<{
-  headingAs: HeadingElement;
-  size?: AccordionProps['size'];
-}>({
-  headingAs: 'h2',
-});
-
-const AccordionRowContext = createContext<
-  Pick<AccordionRowProps, 'isExpandable' | 'hasLeadingIcon'>
->({
-  isExpandable: true,
-  hasLeadingIcon: false,
-});
-
-/**
- * `import {Accordion} from "@chanzuckerberg/eds;`
- *
- * Displays one or more headers stacked on top of one another that can reveal or hide associated content.
- * This component is based on the [Disclosure](https://headlessui.com/react/disclosure) component, provided by HeadlessUI.
- *
- * @see https://headlessui.com/react/disclosure
- *
- */
-export const Accordion = ({
-  children,
-  className,
-  headingAs,
-  size = 'md',
-  ...other
-}: AccordionProps) => {
-  return (
-    <AccordionContext.Provider value={{ headingAs, size }}>
-      <div className={className} {...other}>
-        {children}
-      </div>
-    </AccordionContext.Provider>
-  );
-};
-
-const AccordionButton = ({
-  children,
-  className,
-  headingAs,
-  leadingIcon,
-  title,
-  trailingIcon = 'chevron-down',
-  subtitle,
-  onClose,
-  onOpen,
-  ...other
-}: AccordionButtonProps) => {
-  const { headingAs: contextHeadingAs, size } = useContext(AccordionContext);
-
-  const { isExpandable } = useContext(AccordionRowContext);
-
-  const componentClassName = clsx(
-    styles['accordion-button'],
-    size && styles[`accordion-button--${size}`],
-    !isExpandable && styles['accordion-button--empty'],
-    className,
-  );
-
-  return (
-    <Disclosure.Button as={React.Fragment}>
-      {({ open }) => (
-        <button
-          className={componentClassName}
-          onClick={() => {
-            if (open && isExpandable && onClose) {
-              onClose();
-            }
-            if (!open && isExpandable && onOpen) {
-              onOpen();
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === SPACEBAR_KEYCODE || e.key === ENTER_KEYCODE) {
-              if (open && isExpandable && onClose) {
-                onClose();
-              }
-              if (!open && isExpandable && onOpen) {
-                onOpen();
-              }
-            }
-          }}
-          {...other}
-        >
-          {leadingIcon && (
-            <span className={styles['accordion-button__leading-icon']}>
-              {leadingIcon}
-            </span>
-          )}
-          <Heading
-            as={headingAs || contextHeadingAs}
-            className={styles['accordion-button__heading']}
-            preset={size === 'md' ? 'body-lg' : 'body-md'}
-          >
-            {(title || children) && (
-              <Text
-                as="span"
-                className={styles['accordion-button__title']}
-                preset={size === 'md' ? 'body-lg' : 'body-md'}
-              >
-                {title}
-                {/* TODO: Add check preventing use of title, subtitle, AND children at the same time */}
-                {children}
-              </Text>
-            )}
-            {subtitle && (
-              <Text
-                as="span"
-                className={styles['accordion-button__subtitle']}
-                preset={size === 'md' ? 'body-md' : 'body-sm'}
-              >
-                {subtitle}
-              </Text>
-            )}
-          </Heading>
-          {isExpandable && (
-            <Icon
-              className={clsx(
-                styles['accordion-button__trailing-icon'],
-                open && styles['accordion-button__trailing-icon--open'],
-              )}
-              name={trailingIcon}
-              purpose="informative"
-              size="1.5rem"
-              title={open ? 'hide content' : 'show content'}
-            />
-          )}
-        </button>
-      )}
-    </Disclosure.Button>
-  );
-};
-
-const AccordionPanel = ({
-  className,
-  children,
-  ...other
-}: AccordionPanelProps) => {
-  const { size } = useContext(AccordionContext);
-  const { isExpandable, hasLeadingIcon } = useContext(AccordionRowContext);
-
-  const componentClassName = clsx(
-    styles['accordion-panel'],
-    size === 'sm' && styles['accordion-panel--sm'],
-    !isExpandable && styles['accordion-panel--hidden'],
-    hasLeadingIcon && styles['accordion-panel--leading-icon'],
-    className,
-  );
-
-  return (
-    <Disclosure.Panel className={componentClassName} {...other}>
-      {isExpandable && children}
-    </Disclosure.Panel>
-  );
-};
-
-const AccordionRow = ({
-  className,
-  defaultOpen,
-  children,
-  isExpandable = true,
-  hasLeadingIcon,
-  ...other
-}: AccordionRowProps) => {
-  const componentClassName = clsx(styles['accordion-row'], className);
-  return (
-    <AccordionRowContext.Provider value={{ isExpandable, hasLeadingIcon }}>
-      <Disclosure defaultOpen={defaultOpen}>
-        {({ open }) => (
-          <div className={componentClassName} {...other}>
-            {typeof children === 'function' ? children({ open }) : children}
-          </div>
-        )}
-      </Disclosure>
-    </AccordionRowContext.Provider>
-  );
-};
-
-Accordion.displayName = 'Accordion';
-AccordionButton.displayName = 'Accordion.Button';
-AccordionPanel.displayName = 'Accordion.Panel';
-AccordionRow.displayName = 'Accordion.Row';
-
-Accordion.Button = AccordionButton;
-Accordion.Panel = AccordionPanel;
-Accordion.Row = AccordionRow;
diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
index a4a532e2e..571720ea1 100644
--- a/src/components/Accordion/Accordion.module.css
+++ b/src/components/Accordion/Accordion.module.css
@@ -3,16 +3,24 @@
 /*------------------------------------*\
     # ACCORDION
 \*------------------------------------*/
-
 /**
- * Accordion is one or multiple interactive headings that reveal or hide associated content.
- *
- * Outline variant.
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
  */
-.accordion--outline {
-  border: var(--eds-theme-color-border-neutral-subtle) solid
-    calc(var(--eds-border-width-sm) * 1px);
-  border-radius: calc(var(--eds-border-radius-md) * 1px);
+ 
+/**
+ * Accordion Panel that expands and collapses.
+ * Reveals itself below the associated Accordion Button.
+ */
+ .accordion-panel {
+  padding: 0 calc(var(--eds-size-7) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
+
+  font: var(--eds-theme-typography-body-sm);
+
+  &.accordion-panel--leading-icon {
+    padding-left: calc(var(--eds-size-7) / 16 * 1rem);
+  }
+
+  color: var(--eds-theme-color-text-utility-default-primary);
 }
 
 /**
@@ -20,57 +28,34 @@
  */
 .accordion-button {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: calc(var(--eds-size-2) / 16 * 1rem);
+  width: 100%;
 
   border: 0;
-  border-radius: 0;
-
-  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
-  height: unset;
-  min-height: 3.375rem;
-
   text-align: left;
-}
-
-.accordion-button--empty {
-  pointer-events: none;
-}
 
-/**
- * Small variant.
- */
-.accordion-button--sm {
-  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
-  min-height: 2.25rem;
-}
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
-/**
- * Outline variant.
- */
-.accordion-button--outline {
-  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem) calc(var(--eds-size-3) / 16 * 1rem);
-}
+  &:hover {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
 
-/**
- * Small outline variant.
- */
-.accordion-button--sm.accordion-button--outline {
-  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
+  &:active {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
 }
 
-/**
- * The heading text.
- */
-.accordion-button__heading {
-  font: var(--eds-theme-typography-body-sm);
-  color: var(--eds-theme-color-text-neutral-strong);
+.accordion-button--empty {
+  pointer-events: none;
 }
 
 /**
- * Small variant of the heading text.
+ * Size variants
  */
-.accordion-button__heading--sm {
-  font: var(--eds-theme-typography-body-xs);
+.accordion-button--sm,
+.accordion-button--md {
+  padding: calc(var(--eds-size-1) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
 }
 
 /**
@@ -78,21 +63,22 @@
  *
  * This non-rotated icon points down and represents closed status.
  */
-.accordion-button__icon {
+ .accordion-button__trailing-icon {
   flex: 0 0 content;
   transform: rotate(0);
 }
+
 /**
  * This rotated icon points up and represents open status.
  */
-.accordion-button__icon--open {
-  transform: rotate(180deg);
+ .accordion-button__trailing-icon--open {
+  transform: rotate(-180deg);
 }
 
 /**
  * Animates the icon rotation when opening and closing.
  */
-.accordion-button > .accordion-button__icon {
+ .accordion-button > .accordion-button__trailing-icon {
   transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
 
   @media screen and (prefers-reduced-motion) {
@@ -100,44 +86,46 @@
   }
 }
 
-/**
- * Accordion Panel that expands and collapses.
- * Reveals itself below the associated Accordion Button.
- */
-.accordion-panel {
-  padding-left: calc(var(--eds-size-1) / 16 * 1rem);
-  padding-right: calc(var(--eds-size-3) / 16 * 1rem);
-  padding-bottom: 1.625rem;
+.accordion-panel--hidden {
+  padding: 0;
+}
 
-  font: var(--eds-theme-typography-body-sm);
-  color: var(--eds-theme-color-text-neutral-strong);
+.accordion-button__heading {
+  flex-grow: 2;
+
+  & > * + * {
+    display: block;
+  }
 }
 
-.accordion-panel--hidden {
-  padding: 0;
+.accordion-button:focus-visible {
+  outline: calc(var(--eds-size-quarter) / 16 * 1rem)) solid var(--eds-theme-color-border-utility-focus);
 }
 
-/**
- * Small variant.
- */
-.accordion-panel--sm {
-  font: var(--eds-theme-typography-body-xs);
+.accordion-button__leading-icon {
+  color: var(--eds-theme-color-icon-utility-default-secondary);
+
+  /* Targeting NumberIcons and other images used in this specific context */
+  & [role='img'] {
+    display: inline-flex;
+  }
 }
 
-/**
- * Outline variant.
- */
-.accordion-panel--outline {
-  padding-left: calc(var(--eds-size-3) / 16 * 1rem);
-  padding-right: calc(var(--eds-size-5) / 16 * 1rem);
+.accordion-button__title {
+  color: var(--eds-theme-color-text-utility-default-primary);
 }
 
-/**
- * Small outline variant.
- */
-.accordion-panel--sm.accordion-panel--outline {
-  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
-  padding-right: calc(var(--eds-size-4) / 16 * 1rem);
+.accordion-button__subtitle {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+
+.accordion-panel--md {
+  font: var(--eds-theme-typography-body-md);
+}
+
+.accordion-panel--sm {
+  font: var(--eds-theme-typography-body-sm);
 }
 
 /**
@@ -145,13 +133,5 @@
  */
 .accordion-row {
   border-bottom: calc(var(--eds-border-width-sm) * 1px) solid
-    var(--eds-theme-color-border-neutral-subtle);
-}
-
-/**
- * Variant with outline.
- * Removes bottom border on the last Accordion Row so there aren't two borders at the bottom of the Accordion.
- */
-.accordion-row--outline:last-of-type {
-  border-bottom: 0;
+    var(--eds-theme-color-border-utility-default-low-emphasis);
 }
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 9aa97c1c1..b84ff3c26 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -14,15 +14,17 @@ export default {
   component: Accordion,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
   },
   args: {
     headingAs: 'h2',
+    className: 'w-96',
     children: (
       <Accordion.Row>
-        <Accordion.Button data-testid="accordion-button">
-          Massa quam egestas massa.
-        </Accordion.Button>
+        <Accordion.Button
+          data-testid="accordion-button"
+          title="Massa quam egestas massa."
+        ></Accordion.Button>
         <Accordion.Panel data-testid="accordion-panel">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
           massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -39,13 +41,90 @@ export default {
       },
     },
   },
-  decorators: [(Story) => <div className="m-2">{Story()}</div>],
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<Args>;
 
 type Story = StoryObj<Args>;
 
 export const Default: Story = {};
 
+export const TitleAndSubtitle: Story = {
+  args: {
+    ...Default.args,
+    children: (
+      <Accordion.Row>
+        <Accordion.Button
+          data-testid="accordion-button"
+          subtitle={<span>"Quam lacus maecenas nibh malesuada."</span>}
+          title="Massa quam egestas massa."
+        ></Accordion.Button>
+        <Accordion.Panel data-testid="accordion-panel">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+        </Accordion.Panel>
+      </Accordion.Row>
+    ),
+  },
+};
+
+export const HasLeadingIcon: Story = {
+  args: {
+    ...Default.args,
+    children: (
+      <Accordion.Row hasLeadingIcon>
+        <Accordion.Button
+          data-testid="accordion-button"
+          leadingIcon={
+            <Icon name="person-encircled" purpose="decorative" size="1.5rem" />
+          }
+          subtitle="Quam lacus maecenas nibh malesuada."
+          title="Massa quam egestas massa."
+        ></Accordion.Button>
+        <Accordion.Panel data-testid="accordion-panel">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+        </Accordion.Panel>
+      </Accordion.Row>
+    ),
+  },
+};
+
+/**
+ * You can add in `NumberIcon` or any other icon in the button for the accordion row.
+ */
+export const HasLeadingNumberIcon: Story = {
+  args: {
+    ...Default.args,
+    children: (
+      <Accordion.Row hasLeadingIcon>
+        <Accordion.Button
+          data-testid="accordion-button"
+          leadingIcon={
+            <NumberIcon
+              aria-label="Numero uno"
+              number={1}
+              size="md"
+              status="default"
+            />
+          }
+          subtitle="Quam lacus maecenas nibh malesuada."
+          title="Massa quam egestas massa."
+        ></Accordion.Button>
+        <Accordion.Panel data-testid="accordion-panel">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+        </Accordion.Panel>
+      </Accordion.Row>
+    ),
+  },
+};
+
 /**
  * Default `Accordion` using the `small` size.
  */
@@ -64,9 +143,10 @@ export const Stacked: Story = {
     children: (
       <>
         <Accordion.Row defaultOpen>
-          <Accordion.Button data-testid="accordion-button-1">
-            Massa quam egestas massa.
-          </Accordion.Button>
+          <Accordion.Button
+            data-testid="accordion-button-1"
+            title="Massa quam egestas massa."
+          ></Accordion.Button>
           <Accordion.Panel data-testid="accordion-panel-1">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -75,9 +155,10 @@ export const Stacked: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row>
-          <Accordion.Button data-testid="accordion-button-2">
-            Massa quam egestas massa.
-          </Accordion.Button>
+          <Accordion.Button
+            data-testid="accordion-button-2"
+            title="Massa quam egestas massa."
+          ></Accordion.Button>
           <Accordion.Panel data-testid="accordion-panel-2">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -86,9 +167,10 @@ export const Stacked: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row>
-          <Accordion.Button data-testid="accordion-button-3">
-            Massa quam egestas massa.
-          </Accordion.Button>
+          <Accordion.Button
+            data-testid="accordion-button-3"
+            title="Massa quam egestas massa."
+          ></Accordion.Button>
           <Accordion.Panel data-testid="accordion-panel-3">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -97,9 +179,10 @@ export const Stacked: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row>
-          <Accordion.Button data-testid="accordion-button-4">
-            Massa quam egestas massa.
-          </Accordion.Button>
+          <Accordion.Button
+            data-testid="accordion-button-4"
+            title="Massa quam egestas massa."
+          ></Accordion.Button>
           <Accordion.Panel data-testid="accordion-panel-4">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -119,21 +202,6 @@ export const StackedSmall: Story = {
   },
 };
 
-export const StackedOutline: Story = {
-  args: {
-    ...Stacked.args,
-    hasOutline: true,
-  },
-};
-
-export const StackedSmallOutline: Story = {
-  args: {
-    ...Stacked.args,
-    size: 'sm',
-    hasOutline: true,
-  },
-};
-
 /**
  * This demonstrates how to specify that a section is not currently expandable using `isExpandable`.
  */
@@ -142,7 +210,7 @@ export const EmptyStackedOpen: Story = {
     children: (
       <>
         <Accordion.Row defaultOpen isExpandable={false}>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -151,7 +219,7 @@ export const EmptyStackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -160,7 +228,7 @@ export const EmptyStackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -169,7 +237,7 @@ export const EmptyStackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -187,7 +255,7 @@ export const StackedOpen: Story = {
     children: (
       <>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -196,7 +264,7 @@ export const StackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -205,7 +273,7 @@ export const StackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -214,7 +282,7 @@ export const StackedOpen: Story = {
           </Accordion.Panel>
         </Accordion.Row>
         <Accordion.Row defaultOpen>
-          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Button title="Massa quam egestas massa."></Accordion.Button>
           <Accordion.Panel>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
             massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
@@ -234,21 +302,6 @@ export const StackedSmallOpen: Story = {
   },
 };
 
-export const StackedOutlineOpen: Story = {
-  args: {
-    ...StackedOpen.args,
-    hasOutline: true,
-  },
-};
-
-export const StackedSmallOutlineOpen: Story = {
-  args: {
-    ...StackedOpen.args,
-    size: 'sm',
-    hasOutline: true,
-  },
-};
-
 /**
  *
  * This shows how to use a render prop for the row, to allow controlling render based on component state.
@@ -310,7 +363,7 @@ export const WithLargeHeader: Story = {
  */
 export const UsingComplexHeaders: Story = {
   parameters: {
-    badges: ['intro-1.2', 'implementationExample'],
+    badges: ['intro-1.2', 'implementationExample', 'current-2.0'],
   },
   args: {
     children: (
@@ -320,7 +373,7 @@ export const UsingComplexHeaders: Story = {
             <Text preset="body-lg">
               <Icon
                 className="m-2"
-                name="check-circle"
+                name="checkmark-encircled-filled"
                 purpose="decorative"
                 size="1rem"
               />
@@ -339,7 +392,7 @@ export const UsingComplexHeaders: Story = {
             <Text preset="body-lg">
               <Icon
                 className="m-2"
-                name="check-circle"
+                name="checkmark-encircled-filled"
                 purpose="decorative"
                 size="1rem"
               />
@@ -357,48 +410,3 @@ export const UsingComplexHeaders: Story = {
     ),
   },
 };
-
-/**
- * You can use other EDS components within the `Accordion.Button` to allow for custom, non-text headers.
- *
- * **Example**: using `Text` and `NumberIcon` in the `Accordion.Button`.
- */
-export const UsingNumberIconInHeaders: Story = {
-  parameters: {
-    badges: ['intro-1.2', 'implementationExample'],
-  },
-  args: {
-    children: (
-      <>
-        <Accordion.Row>
-          <Accordion.Button>
-            <div className="flex flex-wrap items-center gap-2">
-              <NumberIcon aria-label="Step 1" number={1} />
-              <Text preset="body-lg">Step 1</Text>
-            </div>
-          </Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-        <Accordion.Row>
-          <Accordion.Button>
-            <div className="items flex flex-wrap items-center gap-2">
-              <NumberIcon aria-label="Step 2" number={2} />
-              <Text preset="body-lg">Step 2</Text>
-            </div>
-          </Accordion.Button>
-          <Accordion.Panel>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
-            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
-            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
-            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-          </Accordion.Panel>
-        </Accordion.Row>
-      </>
-    ),
-  },
-};
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index c2f5d0900..9c7f10f57 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -4,12 +4,15 @@ import React, { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 import { ENTER_KEYCODE, SPACEBAR_KEYCODE } from '../../util/keycodes';
 import type { Size } from '../../util/variant-types';
-import Button from '../Button';
+
 import Heading, { type HeadingElement } from '../Heading';
 import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
 import styles from './Accordion.module.css';
 
 type AccordionProps = {
+  // Component API
   /**
    * Child node(s) that can be nested inside component.
    */
@@ -18,12 +21,7 @@ type AccordionProps = {
    * Additional classnames passed in for styling.
    */
   className?: string;
-  /**
-   * Outline variant adds adjusts the `Accordion` style by defining a containing border and other layout adjustments.
-   *
-   * **Default is `false`**.
-   */
-  hasOutline?: boolean;
+  // Design API
   /**
    * Used to specify which heading element should be rendered for each `Accordion.Title` child.
    *
@@ -39,33 +37,47 @@ type AccordionProps = {
 };
 
 type AccordionButtonProps = {
+  // Component API
   /**
    * Child node(s) that can be nested inside component.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
    * Additional classnames passed in for styling
    */
   className?: string;
   /**
-   * Icon override for component.
-   *
-   * **Default is `"expand-more"`**.
+   * Callback for when accordion is closed.
    */
-  icon?: Extract<IconName, 'expand-more'>;
+  onClose?: () => void;
+  /**
+   * Callback for when according is opened.
+   */
+  onOpen?: () => void;
+  // Design API
   /**
    * Used to specify which heading element should be rendered for the title.
    * If provided, overrides parent <Accordion> headingAs prop.
    */
   headingAs?: HeadingElement;
   /**
-   * Callback for when accordion is closed.
+   * Icon to preceed the text in an accordion header
    */
-  onClose?: () => void;
+  leadingIcon?: ReactNode;
   /**
-   * Callback for when according is opened.
+   * Secondary text used to describe the content in more detail
    */
-  onOpen?: () => void;
+  subtitle?: ReactNode;
+  /**
+   * The title/heading of the component
+   */
+  title?: string;
+  /**
+   * Icon override for component's expand/collapse indicator.
+   *
+   * **Default is `"expand-more"`**.
+   */
+  trailingIcon?: Extract<IconName, 'chevron-down'>;
 };
 
 type AccordionPanelProps = {
@@ -74,7 +86,7 @@ type AccordionPanelProps = {
    */
   children: ReactNode;
   /**
-   * Additional classnames passed in for styling
+   * Additional class names passed in for styling
    */
   className?: string;
 };
@@ -85,7 +97,7 @@ type AccordionRowProps = {
    */
   children: ReactNode | (({ open }: { open: boolean }) => ReactNode);
   /**
-   * Additional classnames passed in for styling.
+   * Additional class names passed in for styling.
    */
   className?: string;
   /**
@@ -96,18 +108,24 @@ type AccordionRowProps = {
    * Whether the row can show expandable content
    */
   isExpandable?: boolean;
+  /**
+   * Whether the row has a leading icon on the row's trigger
+   */
+  hasLeadingIcon?: boolean;
 };
 
 const AccordionContext = createContext<{
   headingAs: HeadingElement;
-  hasOutline?: AccordionProps['hasOutline'];
   size?: AccordionProps['size'];
 }>({
   headingAs: 'h2',
 });
 
-const AccordionRowContext = createContext<{ isExpandable?: boolean }>({
+const AccordionRowContext = createContext<
+  Pick<AccordionRowProps, 'isExpandable' | 'hasLeadingIcon'>
+>({
   isExpandable: true,
+  hasLeadingIcon: false,
 });
 
 /**
@@ -122,18 +140,13 @@ const AccordionRowContext = createContext<{ isExpandable?: boolean }>({
 export const Accordion = ({
   children,
   className,
-  hasOutline,
   headingAs,
   size = 'md',
   ...other
 }: AccordionProps) => {
-  const componentClassName = clsx(
-    hasOutline && styles['accordion--outline'],
-    className,
-  );
   return (
-    <AccordionContext.Provider value={{ headingAs, hasOutline, size }}>
-      <div className={componentClassName} {...other}>
+    <AccordionContext.Provider value={{ headingAs, size }}>
+      <div className={className} {...other}>
         {children}
       </div>
     </AccordionContext.Provider>
@@ -144,38 +157,30 @@ const AccordionButton = ({
   children,
   className,
   headingAs,
-  icon = 'expand-more',
+  leadingIcon,
+  title,
+  trailingIcon = 'chevron-down',
+  subtitle,
   onClose,
   onOpen,
   ...other
 }: AccordionButtonProps) => {
-  const {
-    hasOutline,
-    headingAs: contextHeadingAs,
-    size,
-  } = useContext(AccordionContext);
+  const { headingAs: contextHeadingAs, size } = useContext(AccordionContext);
 
   const { isExpandable } = useContext(AccordionRowContext);
 
   const componentClassName = clsx(
     styles['accordion-button'],
-    size === 'sm' && styles['accordion-button--sm'],
-    hasOutline && styles['accordion-button--outline'],
+    size && styles[`accordion-button--${size}`],
     !isExpandable && styles['accordion-button--empty'],
     className,
   );
 
-  const headingClassName = clsx(
-    styles['accordion-button__heading'],
-    size === 'sm' && styles['accordion-button__heading--sm'],
-  );
-
   return (
     <Disclosure.Button as={React.Fragment}>
       {({ open }) => (
-        <Button
+        <button
           className={componentClassName}
-          fullWidth
           onClick={() => {
             if (open && isExpandable && onClose) {
               onClose();
@@ -194,29 +199,52 @@ const AccordionButton = ({
               }
             }
           }}
-          status="neutral"
-          variant="icon"
           {...other}
         >
+          {leadingIcon && (
+            <span className={styles['accordion-button__leading-icon']}>
+              {leadingIcon}
+            </span>
+          )}
           <Heading
             as={headingAs || contextHeadingAs}
-            className={headingClassName}
+            className={styles['accordion-button__heading']}
+            preset={size === 'md' ? 'body-lg' : 'body-md'}
           >
-            {children}
+            {(title || children) && (
+              <Text
+                as="span"
+                className={styles['accordion-button__title']}
+                preset={size === 'md' ? 'body-lg' : 'body-md'}
+              >
+                {title}
+                {/* TODO: Add check preventing use of title, subtitle, AND children at the same time */}
+                {children}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                as="span"
+                className={styles['accordion-button__subtitle']}
+                preset={size === 'md' ? 'body-md' : 'body-sm'}
+              >
+                {subtitle}
+              </Text>
+            )}
           </Heading>
           {isExpandable && (
             <Icon
               className={clsx(
-                styles['accordion-button__icon'],
-                open && styles['accordion-button__icon--open'],
+                styles['accordion-button__trailing-icon'],
+                open && styles['accordion-button__trailing-icon--open'],
               )}
-              name="expand-more"
+              name={trailingIcon}
               purpose="informative"
-              size="1.625rem"
+              size="1.5rem"
               title={open ? 'hide content' : 'show content'}
             />
           )}
-        </Button>
+        </button>
       )}
     </Disclosure.Button>
   );
@@ -227,14 +255,14 @@ const AccordionPanel = ({
   children,
   ...other
 }: AccordionPanelProps) => {
-  const { hasOutline, size } = useContext(AccordionContext);
-  const { isExpandable } = useContext(AccordionRowContext);
+  const { size } = useContext(AccordionContext);
+  const { isExpandable, hasLeadingIcon } = useContext(AccordionRowContext);
 
   const componentClassName = clsx(
     styles['accordion-panel'],
     size === 'sm' && styles['accordion-panel--sm'],
-    hasOutline && styles['accordion-panel--outline'],
     !isExpandable && styles['accordion-panel--hidden'],
+    hasLeadingIcon && styles['accordion-panel--leading-icon'],
     className,
   );
 
@@ -250,16 +278,12 @@ const AccordionRow = ({
   defaultOpen,
   children,
   isExpandable = true,
+  hasLeadingIcon,
   ...other
 }: AccordionRowProps) => {
-  const { hasOutline } = useContext(AccordionContext);
-  const componentClassName = clsx(
-    styles['accordion-row'],
-    hasOutline && styles['accordion-row--outline'],
-    className,
-  );
+  const componentClassName = clsx(styles['accordion-row'], className);
   return (
-    <AccordionRowContext.Provider value={{ isExpandable }}>
+    <AccordionRowContext.Provider value={{ isExpandable, hasLeadingIcon }}>
       <Disclosure defaultOpen={defaultOpen}>
         {({ open }) => (
           <div className={componentClassName} {...other}>
diff --git a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
deleted file mode 100644
index fe16b5aa8..000000000
--- a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
+++ /dev/null
@@ -1,1437 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Accordion /> Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r0:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rr:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md accordion-button--empty"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:rq:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--hidden"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:rr:"
-      />
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rt:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:rs:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:rt:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rv:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:ru:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:rv:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r11:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r10:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r11:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> HasLeadingIcon story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r4:"
-        type="button"
-      >
-        <span
-          class="accordion-button__leading-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="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
-            />
-          </svg>
-        </span>
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-          <span
-            class="text text--body-md accordion-button__subtitle"
-          >
-            Quam lacus maecenas nibh malesuada.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> HasLeadingNumberIcon story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r6:"
-        type="button"
-      >
-        <span
-          class="accordion-button__leading-icon"
-        >
-          <span
-            aria-label="Numero uno"
-            class="text text--label-md-subtle number-icon number-icon--size-md number-icon--status-default"
-            role="img"
-            tabindex="-1"
-          >
-            1
-          </span>
-        </span>
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-          <span
-            class="text text--body-md accordion-button__subtitle"
-          >
-            Quam lacus maecenas nibh malesuada.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> Small story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r8:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> Stacked story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rb:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:ra:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:rb:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:rc:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:re:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:rg:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r13:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r12:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r13:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r15:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r14:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r15:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r17:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r16:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r17:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r19:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r18:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r19:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rj:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:ri:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:rj:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state=""
-        data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:rk:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state=""
-        data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:rm:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state=""
-        data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:ro:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1b:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1a:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1b:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1d:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1c:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1d:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1f:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1e:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1f:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1h:"
-        aria-expanded="true"
-        class="accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1g:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-md accordion-button__heading"
-        >
-          <span
-            class="text text--body-md accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
-          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>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1h:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> TitleAndSubtitle story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r2:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa.
-          </span>
-          <span
-            class="text text--body-md accordion-button__subtitle"
-          >
-            <span>
-              "Quam lacus maecenas nibh malesuada."
-            </span>
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r1m:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            <p
-              class="text text--body-lg"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon m-2"
-                fill="currentColor"
-                height="1rem"
-                style="--icon-size: 1rem;"
-                viewBox="0 0 24 24"
-                width="1rem"
-                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>
-              Step 1
-            </p>
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r1o:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            <p
-              class="text text--body-lg"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon m-2"
-                fill="currentColor"
-                height="1rem"
-                style="--icon-size: 1rem;"
-                viewBox="0 0 24 24"
-                width="1rem"
-                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>
-              Step 2
-            </p>
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r1i:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Accordion Button 
-            closed
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="accordion-button accordion-button--md"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r1k:"
-        type="button"
-      >
-        <h2
-          class="heading heading--body-lg accordion-button__heading"
-        >
-          <span
-            class="text text--body-lg accordion-button__title"
-          >
-            Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
-          </span>
-        </h2>
-        <svg
-          class="icon accordion-button__trailing-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>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 8fd60bd3c..fe16b5aa8 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -2,35 +2,39 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
         data-testid="accordion-button"
         id="headlessui-disclosure-button-:r0:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -48,58 +52,66 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
 
 exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r15:"
+        aria-controls="headlessui-disclosure-panel-:rr:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--empty"
+        class="accordion-button accordion-button--md accordion-button--empty"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r14:"
+        id="headlessui-disclosure-button-:rq:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
       </button>
       <div
         class="accordion-panel accordion-panel--hidden"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r15:"
+        id="headlessui-disclosure-panel-:rr:"
       />
     </div>
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r17:"
+        aria-controls="headlessui-disclosure-panel-:rt:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r16:"
+        id="headlessui-disclosure-button-:rs:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -113,7 +125,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r17:"
+        id="headlessui-disclosure-panel-:rt:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -122,26 +134,30 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r19:"
+        aria-controls="headlessui-disclosure-panel-:rv:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r18:"
+        id="headlessui-disclosure-button-:ru:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -155,7 +171,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r19:"
+        id="headlessui-disclosure-panel-:rv:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -164,26 +180,30 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1b:"
+        aria-controls="headlessui-disclosure-panel-:r11:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1a:"
+        id="headlessui-disclosure-button-:r10:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -197,7 +217,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1b:"
+        id="headlessui-disclosure-panel-:r11:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -206,37 +226,181 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Accordion /> HasLeadingIcon story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-expanded="false"
+        class="accordion-button accordion-button--md"
+        data-headlessui-state=""
+        data-testid="accordion-button"
+        id="headlessui-disclosure-button-:r4:"
+        type="button"
+      >
+        <span
+          class="accordion-button__leading-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="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
+            />
+          </svg>
+        </span>
+        <h2
+          class="heading heading--body-lg accordion-button__heading"
+        >
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
+          <span
+            class="text text--body-md accordion-button__subtitle"
+          >
+            Quam lacus maecenas nibh malesuada.
+          </span>
+        </h2>
+        <svg
+          class="icon accordion-button__trailing-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>
+            show content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Accordion /> HasLeadingNumberIcon story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-expanded="false"
+        class="accordion-button accordion-button--md"
+        data-headlessui-state=""
+        data-testid="accordion-button"
+        id="headlessui-disclosure-button-:r6:"
+        type="button"
+      >
+        <span
+          class="accordion-button__leading-icon"
+        >
+          <span
+            aria-label="Numero uno"
+            class="text text--label-md-subtle number-icon number-icon--size-md number-icon--status-default"
+            role="img"
+            tabindex="-1"
+          >
+            1
+          </span>
+        </span>
+        <h2
+          class="heading heading--body-lg accordion-button__heading"
+        >
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
+          <span
+            class="text text--body-md accordion-button__subtitle"
+          >
+            Quam lacus maecenas nibh malesuada.
+          </span>
+        </h2>
+        <svg
+          class="icon accordion-button__trailing-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>
+            show content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Accordion /> Small story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r2:"
+        id="headlessui-disclosure-button-:r8:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -254,36 +418,40 @@ exports[`<Accordion /> Small story renders snapshot 1`] = `
 
 exports[`<Accordion /> Stacked story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r5:"
+        aria-controls="headlessui-disclosure-panel-:rb:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:r4:"
+        id="headlessui-disclosure-button-:ra:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -298,7 +466,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         class="accordion-panel"
         data-headlessui-state="open"
         data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:r5:"
+        id="headlessui-disclosure-panel-:rb:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -308,25 +476,29 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
         data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:r6:"
+        id="headlessui-disclosure-button-:rc:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -343,25 +515,29 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
         data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:r8:"
+        id="headlessui-disclosure-button-:re:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -378,25 +554,29 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
         data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:ra:"
+        id="headlessui-disclosure-button-:rg:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -414,35 +594,39 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
 
 exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1d:"
+        aria-controls="headlessui-disclosure-panel-:r13:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1c:"
+        id="headlessui-disclosure-button-:r12:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -456,7 +640,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1d:"
+        id="headlessui-disclosure-panel-:r13:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -465,26 +649,30 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1f:"
+        aria-controls="headlessui-disclosure-panel-:r15:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1e:"
+        id="headlessui-disclosure-button-:r14:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -498,7 +686,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1f:"
+        id="headlessui-disclosure-panel-:r15:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -507,26 +695,30 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1h:"
+        aria-controls="headlessui-disclosure-panel-:r17:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1g:"
+        id="headlessui-disclosure-button-:r16:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -540,7 +732,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1h:"
+        id="headlessui-disclosure-panel-:r17:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -549,26 +741,30 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1j:"
+        aria-controls="headlessui-disclosure-panel-:r19:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
+        class="accordion-button accordion-button--md"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1i:"
+        id="headlessui-disclosure-button-:r18:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -582,7 +778,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1j:"
+        id="headlessui-disclosure-panel-:r19:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -591,38 +787,42 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
+exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class="accordion--outline"
+    class="w-96"
   >
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:rl:"
+        aria-controls="headlessui-disclosure-panel-:rj:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:rk:"
+        id="headlessui-disclosure-button-:ri:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -634,38 +834,42 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         </svg>
       </button>
       <div
-        class="accordion-panel accordion-panel--outline"
+        class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
         data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:rl:"
+        id="headlessui-disclosure-panel-:rj:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:rm:"
+        id="headlessui-disclosure-button-:rk:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -678,29 +882,33 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
       </button>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:ro:"
+        id="headlessui-disclosure-button-:rm:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -713,29 +921,33 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
       </button>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:rq:"
+        id="headlessui-disclosure-button-:ro:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -751,37 +963,41 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
+exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class="accordion--outline"
+    class="w-96"
   >
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1t:"
+        aria-controls="headlessui-disclosure-panel-:r1b:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1s:"
+        id="headlessui-disclosure-button-:r1a:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -793,37 +1009,41 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         </svg>
       </button>
       <div
-        class="accordion-panel accordion-panel--outline"
+        class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1t:"
+        id="headlessui-disclosure-panel-:r1b:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1v:"
+        aria-controls="headlessui-disclosure-panel-:r1d:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1u:"
+        id="headlessui-disclosure-button-:r1c:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -835,37 +1055,41 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         </svg>
       </button>
       <div
-        class="accordion-panel accordion-panel--outline"
+        class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1v:"
+        id="headlessui-disclosure-panel-:r1d:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r21:"
+        aria-controls="headlessui-disclosure-panel-:r1f:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r20:"
+        id="headlessui-disclosure-button-:r1e:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -877,37 +1101,41 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         </svg>
       </button>
       <div
-        class="accordion-panel accordion-panel--outline"
+        class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r21:"
+        id="headlessui-disclosure-panel-:r1f:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
     </div>
     <div
-      class="accordion-row accordion-row--outline"
+      class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r23:"
+        aria-controls="headlessui-disclosure-panel-:r1h:"
         aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
+        class="accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r22:"
+        id="headlessui-disclosure-button-:r1g:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading"
+          class="heading heading--body-md accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-md accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon accordion-button__trailing-icon--open"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -919,9 +1147,9 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         </svg>
       </button>
       <div
-        class="accordion-panel accordion-panel--outline"
+        class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r23:"
+        id="headlessui-disclosure-panel-:r1h:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -930,81 +1158,115 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
+exports[`<Accordion /> TitleAndSubtitle story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:rd:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:rc:"
+        aria-expanded="false"
+        class="accordion-button accordion-button--md"
+        data-headlessui-state=""
+        data-testid="accordion-button"
+        id="headlessui-disclosure-button-:r2:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Massa quam egestas massa.
+          </span>
+          <span
+            class="text text--body-md accordion-button__subtitle"
+          >
+            <span>
+              "Quam lacus maecenas nibh malesuada."
+            </span>
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
-            hide content
+            show content
           </title>
           <path
             d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
           />
         </svg>
       </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:rd:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
     <div
       class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
-        data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:re:"
+        id="headlessui-disclosure-button-:r1m:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            <p
+              class="text text--body-lg"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon m-2"
+                fill="currentColor"
+                height="1rem"
+                style="--icon-size: 1rem;"
+                viewBox="0 0 24 24"
+                width="1rem"
+                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>
+              Step 1
+            </p>
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -1021,25 +1283,46 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
-        data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:rg:"
+        id="headlessui-disclosure-button-:r1o:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            <p
+              class="text text--body-lg"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon m-2"
+                fill="currentColor"
+                height="1rem"
+                style="--icon-size: 1rem;"
+                viewBox="0 0 24 24"
+                width="1rem"
+                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>
+              Step 2
+            </p>
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -1051,30 +1334,44 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         </svg>
       </button>
     </div>
+  </div>
+</div>
+`;
+
+exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div>
     <div
       class="accordion-row"
     >
       <button
         aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
+        class="accordion-button accordion-button--md"
         data-headlessui-state=""
-        data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:ri:"
+        data-testid="accordion-button"
+        id="headlessui-disclosure-button-:r1i:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
+          <span
+            class="text text--body-lg accordion-button__title"
+          >
+            Accordion Button 
+            closed
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
@@ -1090,825 +1387,40 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
+exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
 <div
-  class="m-2"
+  class="p-8"
 >
   <div
-    class=""
+    class="w-96"
   >
     <div
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1l:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
-        data-headlessui-state="open"
+        aria-expanded="false"
+        class="accordion-button accordion-button--md"
+        data-headlessui-state=""
         id="headlessui-disclosure-button-:r1k:"
         type="button"
       >
         <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--body-lg accordion-button__heading"
         >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1l:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1n:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1m:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1n:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1p:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1o:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1p:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r1r:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1q:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1r:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class="accordion--outline"
-  >
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:rt:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state="open"
-        data-testid="accordion-button-1"
-        id="headlessui-disclosure-button-:rs:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm accordion-panel--outline"
-        data-headlessui-state="open"
-        data-testid="accordion-panel-1"
-        id="headlessui-disclosure-panel-:rt:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state=""
-        data-testid="accordion-button-2"
-        id="headlessui-disclosure-button-:ru:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state=""
-        data-testid="accordion-button-3"
-        id="headlessui-disclosure-button-:r10:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state=""
-        data-testid="accordion-button-4"
-        id="headlessui-disclosure-button-:r12:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class="accordion--outline"
-  >
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r25:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r24:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm accordion-panel--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r25:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r27:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r26:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm accordion-panel--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r27:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r29:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r28:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm accordion-panel--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r29:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-    <div
-      class="accordion-row accordion-row--outline"
-    >
-      <button
-        aria-controls="headlessui-disclosure-panel-:r2b:"
-        aria-expanded="true"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r2a:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
-        >
-          Massa quam egestas massa.
-        </h2>
-        <svg
-          class="icon accordion-button__icon accordion-button__icon--open"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            hide content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-      <div
-        class="accordion-panel accordion-panel--sm accordion-panel--outline"
-        data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r2b:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class=""
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2g:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading"
-        >
-          <p
-            class="text text--body-lg"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon m-2"
-              fill="currentColor"
-              height="1rem"
-              style="--icon-size: 1rem;"
-              viewBox="0 0 24 24"
-              width="1rem"
-              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>
-            Step 1
-          </p>
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2i:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading"
-        >
-          <p
-            class="text text--body-lg"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon m-2"
-              fill="currentColor"
-              height="1rem"
-              style="--icon-size: 1rem;"
-              viewBox="0 0 24 24"
-              width="1rem"
-              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>
-            Step 2
-          </p>
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class=""
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2k:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading"
-        >
-          <div
-            class="flex flex-wrap items-center gap-2"
-          >
-            <span
-              aria-label="Step 1"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg"
-              role="img"
-            >
-              1
-            </span>
-            <p
-              class="text text--body-lg"
-            >
-              Step 1
-            </p>
-          </div>
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2m:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading"
-        >
-          <div
-            class="items flex flex-wrap items-center gap-2"
+          <span
+            class="text text--body-lg accordion-button__title"
           >
-            <span
-              aria-label="Step 2"
-              class="text text--body-sm number-icon number-icon--base number-icon--lg"
-              role="img"
-            >
-              2
-            </span>
-            <p
-              class="text text--body-lg"
-            >
-              Step 2
-            </p>
-          </div>
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class=""
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r2c:"
-        type="button"
-      >
-        <h2
-          class="heading heading--headline-md accordion-button__heading"
-        >
-          Accordion Button 
-          closed
-        </h2>
-        <svg
-          class="icon accordion-button__icon"
-          fill="currentColor"
-          height="1.625rem"
-          role="img"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            show content
-          </title>
-          <path
-            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
-<div
-  class="m-2"
->
-  <div
-    class=""
-  >
-    <div
-      class="accordion-row"
-    >
-      <button
-        aria-expanded="false"
-        class="button button--lg button--icon button--neutral button--full-width accordion-button"
-        data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2e:"
-        type="button"
-      >
-        <h2
-          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.
+            Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
+          </span>
         </h2>
         <svg
-          class="icon accordion-button__icon"
+          class="icon accordion-button__trailing-icon"
           fill="currentColor"
-          height="1.625rem"
+          height="1.5rem"
           role="img"
-          style="--icon-size: 1.625rem;"
+          style="--icon-size: 1.5rem;"
           viewBox="0 0 24 24"
-          width="1.625rem"
+          width="1.5rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>
diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
index 764793ddf..8fdc19deb 100644
--- a/src/components/Accordion/index.ts
+++ b/src/components/Accordion/index.ts
@@ -1,2 +1 @@
 export { Accordion as default } from './Accordion';
-export { Accordion as AccordionV2 } from './Accordion-v2';
diff --git a/src/components/AppNotification/AppNotification.module.css b/src/components/AppNotification/AppNotification.module.css
index cff916e50..c791c4826 100644
--- a/src/components/AppNotification/AppNotification.module.css
+++ b/src/components/AppNotification/AppNotification.module.css
@@ -42,7 +42,7 @@
 }
 
 .app-notification__content {
-    /* TODO-AH: how to define this magic number */
+    /* TODO: should this magic number exist as some token? */
     max-width: 1320px;
     display: flex;
     gap: 0.5rem;
diff --git a/src/components/AppNotification/AppNotification.stories.tsx b/src/components/AppNotification/AppNotification.stories.tsx
index 5ff5f2a8f..e8e765763 100644
--- a/src/components/AppNotification/AppNotification.stories.tsx
+++ b/src/components/AppNotification/AppNotification.stories.tsx
@@ -4,13 +4,13 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
 import { AppNotification } from './AppNotification';
-import { ButtonV2 as Button } from '../Button';
-import { ButtonGroupV2 as ButtonGroup } from '../ButtonGroup';
-import { LinkV2 as Link } from '../Link';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Link from '../Link';
 import Text from '../Text';
 
 export default {
-  title: 'Components/V2/AppNotification',
+  title: 'Components/AppNotification',
   component: AppNotification,
   parameters: {
     layout: 'centered',
@@ -98,5 +98,3 @@ export const LightWithDismissAndControls: StoryObj<Args> = {
     },
   },
 };
-
-// TODO-AH: add in responsive tests for each breakpoint to cover layout and spacing
diff --git a/src/components/AppNotification/AppNotification.tsx b/src/components/AppNotification/AppNotification.tsx
index c65c9f8ea..6633881a3 100644
--- a/src/components/AppNotification/AppNotification.tsx
+++ b/src/components/AppNotification/AppNotification.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { ButtonV2 as Button } from '../Button';
+import Button from '../Button';
 import Text from '../Text';
 import styles from './AppNotification.module.css';
 
diff --git a/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__snapshots__/Badge.test.tsx.snap
index 0e0889d92..e09853e84 100644
--- a/src/components/Badge/__snapshots__/Badge.test.tsx.snap
+++ b/src/components/Badge/__snapshots__/Badge.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`<Badge /> IconBadge story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.87 15.25l-3.37-2V8.72c0-.4-.32-.72-.72-.72h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l3.65 2.19c.34.2.78.1.98-.24.21-.35.1-.8-.25-1zm5.31-10.24L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
+        d="M12.9999 12.6004V9.00039C12.9999 8.71706 12.9041 8.47956 12.7124 8.28789C12.5207 8.09622 12.2832 8.00039 11.9999 8.00039C11.7166 8.00039 11.4791 8.09622 11.2874 8.28789C11.0957 8.47956 10.9999 8.71706 10.9999 9.00039V12.9754C10.9999 13.1087 11.0249 13.2379 11.0749 13.3629C11.1249 13.4879 11.1999 13.6004 11.2999 13.7004L14.0999 16.5004C14.2832 16.6837 14.5166 16.7754 14.7999 16.7754C15.0832 16.7754 15.3166 16.6837 15.4999 16.5004C15.6832 16.3171 15.7749 16.0837 15.7749 15.8004C15.7749 15.5171 15.6832 15.2837 15.4999 15.1004L12.9999 12.6004ZM11.9999 22.0004C10.7499 22.0004 9.57907 21.7629 8.4874 21.2879C7.39574 20.8129 6.44574 20.1712 5.6374 19.3629C4.82907 18.5546 4.1874 17.6046 3.7124 16.5129C3.2374 15.4212 2.9999 14.2504 2.9999 13.0004C2.9999 11.7504 3.2374 10.5796 3.7124 9.48789C4.1874 8.39622 4.82907 7.44622 5.6374 6.63789C6.44574 5.82956 7.39574 5.18789 8.4874 4.71289C9.57907 4.23789 10.7499 4.00039 11.9999 4.00039C13.2499 4.00039 14.4207 4.23789 15.5124 4.71289C16.6041 5.18789 17.5541 5.82956 18.3624 6.63789C19.1707 7.44622 19.8124 8.39622 20.2874 9.48789C20.7624 10.5796 20.9999 11.7504 20.9999 13.0004C20.9999 14.2504 20.7624 15.4212 20.2874 16.5129C19.8124 17.6046 19.1707 18.5546 18.3624 19.3629C17.5541 20.1712 16.6041 20.8129 15.5124 21.2879C14.4207 21.7629 13.2499 22.0004 11.9999 22.0004ZM2.0499 7.30039C1.86657 7.11706 1.7749 6.88372 1.7749 6.60039C1.7749 6.31706 1.86657 6.08372 2.0499 5.90039L4.8999 3.05039C5.08324 2.86706 5.31657 2.77539 5.5999 2.77539C5.88324 2.77539 6.11657 2.86706 6.2999 3.05039C6.48324 3.23372 6.5749 3.46706 6.5749 3.75039C6.5749 4.03372 6.48324 4.26706 6.2999 4.45039L3.4499 7.30039C3.26657 7.48372 3.03324 7.57539 2.7499 7.57539C2.46657 7.57539 2.23324 7.48372 2.0499 7.30039ZM21.9499 7.30039C21.7666 7.48372 21.5332 7.57539 21.2499 7.57539C20.9666 7.57539 20.7332 7.48372 20.5499 7.30039L17.6999 4.45039C17.5166 4.26706 17.4249 4.03372 17.4249 3.75039C17.4249 3.46706 17.5166 3.23372 17.6999 3.05039C17.8832 2.86706 18.1166 2.77539 18.3999 2.77539C18.6832 2.77539 18.9166 2.86706 19.0999 3.05039L21.9499 5.90039C22.1332 6.08372 22.2249 6.31706 22.2249 6.60039C22.2249 6.88372 22.1332 7.11706 21.9499 7.30039ZM11.9999 20.0004C13.9499 20.0004 15.6041 19.3212 16.9624 17.9629C18.3207 16.6046 18.9999 14.9504 18.9999 13.0004C18.9999 11.0504 18.3207 9.39622 16.9624 8.03789C15.6041 6.67956 13.9499 6.00039 11.9999 6.00039C10.0499 6.00039 8.39574 6.67956 7.0374 8.03789C5.67907 9.39622 4.9999 11.0504 4.9999 13.0004C4.9999 14.9504 5.67907 16.6046 7.0374 17.9629C8.39574 19.3212 10.0499 20.0004 11.9999 20.0004Z"
       />
     </svg>
   </div>
@@ -74,7 +74,7 @@ exports[`<Badge /> IconBadgeUsingIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.87 15.25l-3.37-2V8.72c0-.4-.32-.72-.72-.72h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l3.65 2.19c.34.2.78.1.98-.24.21-.35.1-.8-.25-1zm5.31-10.24L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
+        d="M12.9999 12.6004V9.00039C12.9999 8.71706 12.9041 8.47956 12.7124 8.28789C12.5207 8.09622 12.2832 8.00039 11.9999 8.00039C11.7166 8.00039 11.4791 8.09622 11.2874 8.28789C11.0957 8.47956 10.9999 8.71706 10.9999 9.00039V12.9754C10.9999 13.1087 11.0249 13.2379 11.0749 13.3629C11.1249 13.4879 11.1999 13.6004 11.2999 13.7004L14.0999 16.5004C14.2832 16.6837 14.5166 16.7754 14.7999 16.7754C15.0832 16.7754 15.3166 16.6837 15.4999 16.5004C15.6832 16.3171 15.7749 16.0837 15.7749 15.8004C15.7749 15.5171 15.6832 15.2837 15.4999 15.1004L12.9999 12.6004ZM11.9999 22.0004C10.7499 22.0004 9.57907 21.7629 8.4874 21.2879C7.39574 20.8129 6.44574 20.1712 5.6374 19.3629C4.82907 18.5546 4.1874 17.6046 3.7124 16.5129C3.2374 15.4212 2.9999 14.2504 2.9999 13.0004C2.9999 11.7504 3.2374 10.5796 3.7124 9.48789C4.1874 8.39622 4.82907 7.44622 5.6374 6.63789C6.44574 5.82956 7.39574 5.18789 8.4874 4.71289C9.57907 4.23789 10.7499 4.00039 11.9999 4.00039C13.2499 4.00039 14.4207 4.23789 15.5124 4.71289C16.6041 5.18789 17.5541 5.82956 18.3624 6.63789C19.1707 7.44622 19.8124 8.39622 20.2874 9.48789C20.7624 10.5796 20.9999 11.7504 20.9999 13.0004C20.9999 14.2504 20.7624 15.4212 20.2874 16.5129C19.8124 17.6046 19.1707 18.5546 18.3624 19.3629C17.5541 20.1712 16.6041 20.8129 15.5124 21.2879C14.4207 21.7629 13.2499 22.0004 11.9999 22.0004ZM2.0499 7.30039C1.86657 7.11706 1.7749 6.88372 1.7749 6.60039C1.7749 6.31706 1.86657 6.08372 2.0499 5.90039L4.8999 3.05039C5.08324 2.86706 5.31657 2.77539 5.5999 2.77539C5.88324 2.77539 6.11657 2.86706 6.2999 3.05039C6.48324 3.23372 6.5749 3.46706 6.5749 3.75039C6.5749 4.03372 6.48324 4.26706 6.2999 4.45039L3.4499 7.30039C3.26657 7.48372 3.03324 7.57539 2.7499 7.57539C2.46657 7.57539 2.23324 7.48372 2.0499 7.30039ZM21.9499 7.30039C21.7666 7.48372 21.5332 7.57539 21.2499 7.57539C20.9666 7.57539 20.7332 7.48372 20.5499 7.30039L17.6999 4.45039C17.5166 4.26706 17.4249 4.03372 17.4249 3.75039C17.4249 3.46706 17.5166 3.23372 17.6999 3.05039C17.8832 2.86706 18.1166 2.77539 18.3999 2.77539C18.6832 2.77539 18.9166 2.86706 19.0999 3.05039L21.9499 5.90039C22.1332 6.08372 22.2249 6.31706 22.2249 6.60039C22.2249 6.88372 22.1332 7.11706 21.9499 7.30039ZM11.9999 20.0004C13.9499 20.0004 15.6041 19.3212 16.9624 17.9629C18.3207 16.6046 18.9999 14.9504 18.9999 13.0004C18.9999 11.0504 18.3207 9.39622 16.9624 8.03789C15.6041 6.67956 13.9499 6.00039 11.9999 6.00039C10.0499 6.00039 8.39574 6.67956 7.0374 8.03789C5.67907 9.39622 4.9999 11.0504 4.9999 13.0004C4.9999 14.9504 5.67907 16.6046 7.0374 17.9629C8.39574 19.3212 10.0499 20.0004 11.9999 20.0004Z"
       />
     </svg>
   </div>
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
deleted file mode 100644
index e0e2c0cfb..000000000
--- a/src/components/Button/Button-v2.module.css
+++ /dev/null
@@ -1,422 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # BUTTON
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
- 
-.button {
-  position: relative;
-  border-radius: calc(var(--eds-border-radius-full) * 1px);
-  border: calc(var(--eds-border-width-sm) * 1px) solid;
-  overflow: hidden;
-  display: flex;
-}
-
-.button__text {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  justify-content: center;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  width: 100%;
-
-  .button--sm & {
-    /* Offset to better align text in small button */
-    transform: translateY(-1px);
-    gap: 0.25rem;
-  }
-
-  .button--md &,
-  .button--lg & {
-    gap: 0.5rem;
-  }
-
-  & svg {
-    flex-shrink: 0;
-  }
-}
-
-.button__text.button--is-loading {
-  visibility: hidden;
-}
-
-.button__loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/**
- * Sizes and Widths
- */
-.button--lg {
-  align-items: center;
-
-  padding: 0.5rem 1.25rem;
-  font: var(--eds-theme-typography-button-lg);
-
-  min-width: 4.5rem;
-  max-width: 20rem;
-  max-height: 2.5rem;
-}
-
-.button--md {
-  align-items: center;
-
-  padding: 0.25rem 1rem;
-  font: var(--eds-theme-typography-button-md);
-
-  min-width: 3.75rem;
-  max-width: 16rem;
-  max-height: 2rem;
-}
-
-.button--sm {
-  padding: 0.25rem 1.33333333rem;
-  /* TODO: need eds-theme-typography-button-sm => preset-009 */
-  font: var(--eds-typography-preset-009);
-
-  min-width: 3rem;
-  max-width: 12rem;
-  max-height: 1.5rem;
-}
-
-.button--full-width {
-  width: 100%;
-}
-
-/**
- * Anatomy and iconLayout (w/ size)
- * lg=40, md=32, sm=24 when layout is icon-only
- */
-.button--layout-icon-only {
-  min-width: unset;
-}
-
-.button--lg.button--layout-left {
-  padding-left: 1rem;
-}
-
-.button--lg.button--layout-right {
-  padding-right: 1rem;
-}
-
-.button--lg.button--layout-icon-only {
-  padding: 0.5rem;
-  width: 2.5rem;
-}
-
-.button--md.button--layout-icon-only {
-  padding: 0.5rem;
-  width: 2rem;
-}
-
-.button--sm.button--layout-icon-only {
-  padding: 0.25rem;
-  width: 1.5rem;
-}
-
-.button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem var(--eds-theme-color-background-utility-base-2), 0 0 0 0.25rem var(--eds-theme-color-border-utility-focus);
-}
-
-/* stylelint-disable-next-line eds/no-tier-1-color-variable */
-.button.button--variant-inverse:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem rgb(var(--eds-color-black) / 1), 0 0 0 0.25rem var(--eds-theme-color-background-utility-base-2);
-}
-
-/**
- * Rank & Emphasis
- * TODO-AH: nest the states under the relevant variants/ranks
- */
-.button--primary.button--variant-default {
-  color: var(--eds-theme-color-text-utility-inverse);
-  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-  border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-}
-
-.button--secondary.button--variant-default {
-  color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-  border-color: currentColor;
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
-}
-
-.button--tertiary.button--variant-default {
-  color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-  border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
-}
-
-.button--tertiary.button--context-standalone {
-  color: var(--eds-theme-color-text-utility-interactive-secondary);
-}
-
-/**
- * Button status variants
- */
-.button--primary.button--variant-critical {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis);
-}
-
-.button--secondary.button--variant-critical {
-  color: var(--eds-theme-color-background-utility-critical-high-emphasis);
-  border-color: currentColor;
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
-}
-
-.button--tertiary.button--variant-critical {
-  color: var(--eds-theme-color-background-utility-critical-high-emphasis);
-  border-color:  var(--eds-theme-color-background-utility-inverse-high-emphasis);
-}
-
-.button--primary.button--variant-neutral {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
-  background-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
-
-  &:hover {
-    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
-  }
-}
-
-.button--secondary.button--variant-neutral {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-  border-color: currentColor;
-  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-  &:hover {
-    color: var(--eds-theme-color-text-utility-default-secondary-hover);
-    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-  }
-
-  &:active {
-    color: var(--eds-theme-color-text-utility-default-secondary-active);
-    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
-  }
-}
-
-.button--tertiary.button--variant-neutral {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-  border-color: transparent;
-  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-  &:hover {
-    color: var(--eds-theme-color-text-utility-default-secondary-hover);
-    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-  }
-
-  &:active {
-    color: var(--eds-theme-color-text-utility-default-secondary-active);
-    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
-  }
-}
-
-/**
- * Inverse
- */
-
-.button--primary.button--variant-inverse {
-  color: var(--eds-theme-color-text-utility-default-primary);
-  border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
-}
-
-.button--secondary.button--variant-inverse {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: currentColor;
-  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-}
-
-.button--tertiary.button--variant-inverse {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
-}
-
-/**
- * Disabled
- */
-.button--disabled {
-  &.button--primary.button--variant-default,
-  &.button--primary.button--variant-critical,
-  &.button--primary.button--variant-neutral {
-    color: var(--eds-theme-color-text-utility-disabled-primary);
-    border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-    background-color:  var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-
-    pointer-events: none;
-  }
-
-  &.button--primary.button--variant-inverse {
-    color: var(--eds-theme-color-text-utility-inverse-disabled);
-    /* Using transparent for border color to avoid blending opacity of border and background */
-    border-color: transparent;
-    background-color: var(--eds-theme-color-background-utility-inverse-disabled);
-
-    pointer-events: none;
-  }
-
-  &.button--secondary.button--variant-default,
-  &.button--secondary.button--variant-critical,
-  &.button--secondary.button--variant-neutral {
-    color: var(--eds-theme-color-text-utility-disabled-primary);
-    border-color: var(--eds-theme-color-border-disabled);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
-  }
-
-  &.button--secondary.button--variant-inverse {
-    color: var(--eds-theme-color-text-utility-inverse-disabled);
-    border-color: var(--eds-theme-color-border-utility-inverse-disabled);
-
-    pointer-events: none;
-  }
-
-  &.button--tertiary.button--variant-default,
-  &.button--tertiary.button--variant-critical,
-  &.button--tertiary.button--variant-neutral {
-    color: var(--eds-theme-color-text-utility-disabled-primary);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
-  }
-
-  &.button--tertiary.button--variant-inverse {
-    color: var(--eds-theme-color-text-utility-disabled-primary);
-    border-color: transparent;
-
-    pointer-events: none;
-  }
-}
-
-/**
- * Flag usages of just :disabled as erroneous
- */
-.button:disabled:not(.button--disabled) {
-  outline: 2px dashed var(--eds-theme-color-border-utility-critical);
-}
-
-/**
- * States
- */
-
- /* Hover */
-.button--variant-default:hover {
-  background-color: var(--eds-theme-color-border-utility-interactive-hover);
-  border-color: var(--eds-theme-color-border-utility-interactive-hover);
-}
-
-.button--secondary.button--variant-default:hover,
-.button--tertiary.button--variant-default:hover {
-  color: var(--eds-theme-color-text-utility-interactive-primary-hover);
-
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-  border-color: var(--eds-theme-color-border-utility-interactive-hover);
-}
-
-.button--tertiary.button--variant-default:hover {
-  border-color: var(--eds-theme-color-border-utility-interactive-hover);
-}
-
-.button--variant-critical:hover {
-  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover);
-  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover);
-}
-
-.button--secondary.button--variant-critical:hover,
-.button--tertiary.button--variant-critical:hover {
-  color: var(--eds-theme-color-text-utility-critical-hover);
-
-  background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
-  border-color: var(--eds-theme-color-border-utility-critical-hover);
-}
-
-.button--tertiary.button--variant-critical:hover {
-  border-color: var(--eds-theme-color-border-utility-critical-hover);
-}
-
-.button--primary.button--variant-inverse:hover {
-  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis-hover)
-}
-
-.button--secondary.button--variant-inverse:hover,
-.button--tertiary.button--variant-inverse:hover {
-  background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
-}
-
-.button--tertiary.button--variant-inverse:hover {
-  border-color: var(--eds-theme-color-border-utility-inverse);
-}
-
-.button--tertiary.button--context-standalone:hover {
-  color: var(--eds-theme-color-text-utility-interactive-secondary-hover);
-}
-
-/* Active */
-.button--variant-default:active {
-  background-color: var(--eds-theme-color-border-utility-interactive-active);
-  border-color: var(--eds-theme-color-border-utility-interactive-active);
-}
-
-.button--secondary.button--variant-default:active,
-.button--tertiary.button--variant-default:active {
-  color: var(--eds-theme-color-text-utility-default-primary-active);
-
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
-  border-color: var(--eds-theme-color-border-utility-interactive-active);
-}
-
-.button--tertiary.button--variant-default:active {
-  border-color: var(--eds-theme-color-border-utility-interactive-active);
-}
-
-.button--variant-critical:active {
-  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active);
-  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active);
-}
-
-.button--secondary.button--variant-critical:active,
-.button--tertiary.button--variant-critical:active {
-  color: var(--eds-theme-color-text-utility-critical-active);
-
-  background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
-  border-color: var(--eds-theme-color-border-utility-critical-active);
-}
-
-.button--secondary.button--variant-inverse:active,
-.button--tertiary.button--variant-inverse:active {
-  background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active);
-}
-
-.button--tertiary.button--context-standalone:active {
-  color: var(--eds-theme-color-text-utility-interactive-secondary-active);
-}
\ No newline at end of file
diff --git a/src/components/Button/Button-v2.stories.tsx b/src/components/Button/Button-v2.stories.tsx
deleted file mode 100644
index 0e7f3b2c1..000000000
--- a/src/components/Button/Button-v2.stories.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-import { Button, type ButtonV2Props } from './Button-v2';
-import { SIZES } from '../ClickableStyle';
-
-export default {
-  title: 'Components/V2/Button',
-  component: Button,
-  args: {
-    children: 'Button',
-    isFullWidth: false,
-    size: 'lg',
-    isLoading: false,
-  },
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: SIZES,
-    },
-    isFullWidth: {
-      control: 'boolean',
-    },
-    isLoading: {
-      control: 'boolean',
-    },
-  },
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Button>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    children: 'Button',
-  },
-};
-
-/**
- * Each button can come in a set of ranks, denoting the importance of the button to the surrounding user interface.
- */
-export const DefaultRanks: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-  },
-  render: (args) => {
-    return (
-      <div className="flex gap-1">
-        <Button {...args} rank="primary">
-          Primary
-        </Button>
-        <Button {...args} rank="secondary">
-          Secondary
-        </Button>
-        <Button {...args} rank="tertiary">
-          Tertiary
-        </Button>
-      </div>
-    );
-  },
-};
-
-/**
- * Buttons can be disabled for each rank using `isDisabled`
- */
-export const Disabled: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    isDisabled: true,
-  },
-  render: DefaultRanks.render,
-};
-
-/**
- * Since `isDisabled` will set the form's proper disabled state, don't use just `disabled`. This will show a visual error.
- */
-export const JustDisabledProp: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    disabled: true,
-  },
-  render: DefaultRanks.render,
-  decorators: [(Story) => <div className="p-1">{Story()}</div>],
-};
-
-/**
- * Tertiary buttons can have an additional level of emphasis when stood by themselves. Use this case sparingly.
- */
-export const TertiaryStandalone: StoryObj<Args> = {
-  args: {
-    rank: 'tertiary',
-    context: 'standalone',
-  },
-};
-
-/**
- * Each button has variants denoting criticality, like for changes that are permanent, deletions, etc.
- */
-export const CriticalRanks: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    variant: 'critical',
-  },
-  render: DefaultRanks.render,
-};
-
-/**
- * There is also a neutral variant, to combine into other components, or provide a muted appearance.
- */
-export const NeutralRanks: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    variant: 'neutral',
-  },
-  render: DefaultRanks.render,
-};
-
-/**
- * Each rank also includes an inverse variant, for use on dark backgrounds.
- */
-export const InverseRanks: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    variant: 'inverse',
-  },
-  parameters: {
-    backgrounds: { default: 'background-utility-default-high-emphasis' },
-  },
-  render: DefaultRanks.render,
-  decorators: [(Story) => <div className="p-1">{Story()}</div>],
-};
-
-/**
- * Inverse buttons can be disabled as well
- */
-export const InverseDisabledRanks: StoryObj<Args> = {
-  args: {
-    ...DefaultRanks.args,
-    variant: 'inverse',
-    isDisabled: true,
-  },
-  parameters: {
-    backgrounds: { default: 'background-utility-default-high-emphasis' },
-  },
-  render: DefaultRanks.render,
-  decorators: [(Story) => <div className="p-1">{Story()}</div>],
-};
-
-/**
- * Buttons come in three sizes
- */
-export const Sizes: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-  },
-  render: (args) => {
-    return (
-      <div className="flex items-center gap-1">
-        <Button {...args} size="lg">
-          Large
-        </Button>
-        <Button {...args} size="md">
-          Medium
-        </Button>
-        <Button {...args} size="sm">
-          Small
-        </Button>
-      </div>
-    );
-  },
-};
-
-/**
- * Buttons can come with full width set, which will expand the button to its maximum width (diferent for each size)
- */
-export const FullWidths: StoryObj<Args> = {
-  args: {
-    ...Sizes.args,
-    isFullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-  render: Sizes.render,
-};
-
-/**
- * When in the loading state, a button will show a loading indicator in place of the normal button text, maintaining the initial size.
- */
-export const LoadingStates: StoryObj<Args> = {
-  args: {
-    ...Sizes.args,
-    isLoading: true,
-  },
-  render: Sizes.render,
-};
-
-/**
- * `iconLayout` lets you place the icons adjacent to button text, or as the only visible element.
- * When using `"icon-only"`, you **must** include a label (e.g., via `aria-label`).
- */
-export const IconLayouts: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-    icon: 'open-in-new',
-  },
-  render: (args) => {
-    return (
-      <div className="flex items-center gap-1">
-        <Button {...args} iconLayout="left">
-          Left
-        </Button>
-        <Button {...args} iconLayout="right">
-          Right
-        </Button>
-        <Button
-          {...args}
-          aria-label="Label must be applied with icon-only layout"
-          iconLayout="icon-only"
-        >
-          Icon Only (text not visible)
-        </Button>
-      </div>
-    );
-  },
-};
-
-// Here, we introduce a special type extension to LinkProps, then use it in a
-// composed component, to demonstrate the ability to offer custom props to a component
-type ExtendArgs = ButtonV2Props<{ to: string }>;
-function ExtendedButton(args: ExtendArgs) {
-  return (
-    // eslint-disable-next-line no-alert
-    <Button {...args} onClick={() => alert(`handle to value: ${args.to}`)} />
-  );
-}
-
-/**
- * You can extend a component's props for use with libraries that aid navigation, e.g., react-dom-router, et al.
- *
- * Steps to use:
- *
- * * import `ButtonProps`
- * * use the type param. to augment the types for `Button` with the libraries type, e.g., `type ExtendedProps = ButtonProps<CustomButtonProps>;`
- * * Now export a new function component that uses the new prop type and returns a composed function
- *
- * When using this pattern, you likely want to also specify the library's Button component using `as`
- *
- * ```tsx
- * type ExtendedProps = ButtonProps<CustomButtonType>;
- *
- * export default function Button({children, ...other}: ExtendedProps) {
- *   return (
- *    <Button as={CustomButton} {...other}>
- *      {children}
- *    </Button>
- *   );
- * }
- * ```
- */
-export const UsingExtendedLink: StoryObj<ExtendArgs> = {
-  render: (args) => (
-    <div>
-      Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam
-      scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id
-      tellus ante.{' '}
-      <ExtendedButton {...args} to="test">
-        consectetur adipiscing elit
-      </ExtendedButton>
-    </div>
-  ),
-};
diff --git a/src/components/Button/Button-v2.test.tsx b/src/components/Button/Button-v2.test.tsx
deleted file mode 100644
index 0736bb2e3..000000000
--- a/src/components/Button/Button-v2.test.tsx
+++ /dev/null
@@ -1,50 +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 { Button } from './Button-v2';
-import * as stories from './Button-v2.stories';
-
-describe('<Button /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('renders the text in the button', () => {
-    render(<Button>Click</Button>);
-
-    expect(screen.getByRole('button')).toHaveTextContent('Click');
-  });
-
-  it('fires callback on click', async () => {
-    const user = userEvent.setup();
-    const onClick = jest.fn();
-    render(<Button onClick={onClick}>Click</Button>);
-
-    await user.click(screen.getByRole('button'));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('passes test ids down properly', () => {
-    render(<Button data-testid="example-test-id">Click</Button>);
-    expect(screen.getByTestId('example-test-id')).toMatchSnapshot();
-  });
-
-  it('passes class names down properly', () => {
-    render(
-      <Button className="exampleClassName" data-testid="example-class-name">
-        Click
-      </Button>,
-    );
-    expect(screen.getByTestId('example-class-name')).toMatchSnapshot();
-  });
-
-  it('forwards refs', () => {
-    const ref = React.createRef<HTMLButtonElement>();
-    render(<Button ref={ref}>Click</Button>);
-
-    ref.current!.focus();
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveFocus();
-  });
-});
diff --git a/src/components/Button/Button-v2.tsx b/src/components/Button/Button-v2.tsx
deleted file mode 100644
index 26c267564..000000000
--- a/src/components/Button/Button-v2.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import type { Size } from '../../util/variant-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import { LoadingIndicatorV2 as LoadingIndicator } from '../LoadingIndicator';
-
-import styles from './Button-v2.module.css';
-
-type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type ButtonV2Props<ExtendedElement = unknown> =
-  ButtonHTMLElementProps & {
-    // Component API
-    /**
-     * `Button` contents or label.
-     */
-    children: string;
-    /**
-     * Determine the behavior of the button upon click:
-     * - **button** `Button` is a clickable button with no default behavior
-     * - **submit** `Button` is a clickable button that submits form data
-     * - **reset** `Button` is a clickable button that resets the form-data to its initial values
-     */
-    type?: 'button' | 'reset' | 'submit';
-
-    // Design API
-    /**
-     * Sets the hierarchy rank of the button
-     *
-     * **Default is `"primary"`**.
-     */
-    rank?: 'primary' | 'secondary' | 'tertiary';
-
-    /**
-     * The size of the button on screen
-     */
-    size?: Extract<Size, 'sm' | 'md' | 'lg'>;
-
-    /**
-     * The variant of the default tertiary button.
-     */
-    context?: 'default' | 'standalone';
-
-    /**
-     * Icon from the set of defined EDS icon set, when `iconLayout` is used.
-     */
-    icon?: IconName;
-
-    /**
-     * Allows configuation of the icon's positioning within `Button`.
-     *
-     * - When set to a value besides `"none"`, an icon must be specified.
-     * - When `"icon-only"`, `aria-label` must be given a value.
-     */
-    iconLayout?: 'none' | 'left' | 'right' | 'icon-only';
-
-    /**
-     * Status (color) variant for `Button`.
-     *
-     * **Default is `"default"`**.
-     */
-    variant?: 'default' | 'neutral' | 'critical' | 'inverse';
-
-    /**
-     * Whether the width of the button is set to the full layout.
-     */
-    isFullWidth?: boolean;
-
-    /**
-     * Whether `Button` is set to disabled state (disables interaction and updates appearance).
-     *
-     * Note: this will set the internal field to `disabled` as well. Prefer this to just setting `disabled`.
-     */
-    isDisabled?: boolean;
-
-    /**
-     * Loading state passed down from higher level used to trigger loader and text change.
-     */
-    isLoading?: boolean;
-  } & ExtendedElement;
-
-/**
- * `import {Button} from "@chanzuckerberg/eds";`
- *
- * Component for making buttons that do not navigate the user to another page. Use button to trigger actions, menus,
- * or other in-page activity.
- *
- * - If you need to style a navigation anchor, please use the `Link` component.
- * - If you need to style a different element or component to
- *   look like a button or link, you can use the `ClickableStyle` component.
- */
-export const Button = forwardRef<HTMLButtonElement, ButtonV2Props>(
-  (
-    {
-      children,
-      className,
-      context,
-      icon = 'circle',
-      iconLayout = 'none',
-      isDisabled,
-      isFullWidth,
-      isLoading,
-      type = 'button',
-      rank = 'primary',
-      size = 'lg',
-      variant = 'default',
-      ...other
-    },
-    ref,
-  ) => {
-    const componentClassName = clsx(
-      styles['button'],
-      context && clsx(styles[`button--context-${context}`]),
-      iconLayout && clsx(styles[`button--layout-${iconLayout}`]),
-      isDisabled && clsx(styles['button--disabled']),
-      isFullWidth && clsx(styles['button--full-width']),
-      isLoading && clsx(styles['button--loading']),
-      rank && clsx(styles[`button--${rank}`]),
-      size && clsx(styles[`button--${size}`]),
-      variant && clsx(styles[`button--variant-${variant}`]),
-      className,
-    );
-
-    const buttonContentClassName = clsx(
-      styles['button__text'],
-      isLoading && styles['button--is-loading'],
-    );
-
-    return (
-      <button
-        className={componentClassName}
-        disabled={isDisabled}
-        ref={ref}
-        type={type}
-        {...other}
-      >
-        <span className={buttonContentClassName}>
-          {iconLayout === 'icon-only' && (
-            <Icon
-              name={icon}
-              purpose="decorative"
-              size={size === 'lg' ? '1.5rem' : '1rem'}
-            />
-          )}
-          {iconLayout === 'left' && (
-            <Icon
-              name={icon}
-              purpose="decorative"
-              size={size === 'lg' ? '1.5rem' : '1rem'}
-            />
-          )}
-          {iconLayout !== 'icon-only' && children}
-          {iconLayout === 'right' && (
-            <Icon
-              name={icon}
-              purpose="decorative"
-              size={size === 'lg' ? '1.5rem' : '1rem'}
-            />
-          )}
-        </span>
-        {isLoading && (
-          <LoadingIndicator className={styles['button__loader']} size="xs" />
-        )}
-      </button>
-    );
-  },
-);
-
-Button.displayName = 'Button';
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index e042881b2..2b3c2a3b6 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -3,591 +3,419 @@
 /*------------------------------------*\
     # BUTTON
 \*------------------------------------*/
-
 /**
-* Styled clickable element that is based on the native <button> element.
-*/
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 .button {
- font: var(--eds-theme-typography-button-label);
- display: inline-flex;
- justify-content: center;
- align-items: center;
- /* Adds a gap between children to automatically handle spacing between icons and text. */
- gap: 0.75rem;
- border-width: calc(var(--eds-theme-border-width) * 1px);
- border-style: solid;
- border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
- cursor: pointer;
- transition-property: color, background-color, border-color;
- transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
- transition-timing-function: var(--eds-anim-ease);
-
- :where(svg) {
-   /* Adds default size for icons passed in for consistency. */
-   --icon-size-default: 2em;
-   transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
-
-   @media screen and (prefers-reduced-motion) {
-     transition: none;
-   }
- }
-
- &:focus-visible {
-   @mixin focus;
- }
-
- @supports not selector(:focus-visible) {
-   &:focus {
-     @mixin focus;
-   }
- }
-
- @media screen and (prefers-reduced-motion) {
-   transition: none;
- }
-
- &:disabled,
- &:disabled:hover {
-   cursor: not-allowed;
- }
+  position: relative;
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
+  overflow: hidden;
+  display: flex;
 }
 
-/**
-* Margin 0 added becuase Safari has margin on buttons.
-* Needs `:where` pseudoclass to reduce specificity so class overrides
-*    for margin can happen where used.
-*/
-:where(.button) {
- margin: 0;
+.button__text {
+  display: flex;
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
+  align-items: center;
+  justify-content: center;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  width: 100%;
+
+  .button--sm & {
+    /* Offset to better align text in small button */
+    transform: translateY(-1px);
+    gap: calc(var(--eds-size-half) / 16 * 1rem);
+  }
+
+  .button--md &,
+  .button--lg & {
+    gap: calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  & svg {
+    flex-shrink: 0;
+  }
 }
 
-/**
-* Primary brand clickable style
-*/
-:where(.button--primary).button--brand {
- border-color: var(--eds-theme-color-button-primary-brand-border);
- background-color: var(--eds-theme-color-button-primary-brand-background);
- color: var(--eds-theme-color-button-primary-brand-text);
-
- &:hover {
-   border-color: var(--eds-theme-color-button-primary-brand-border-hover);
-   background-color: var(--eds-theme-color-button-primary-brand-background-hover);
-   color: var(--eds-theme-color-button-primary-brand-text-hover);
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-primary-brand-border-active);
-   background-color: var(--eds-theme-color-button-primary-brand-background-active);
-   color: var(--eds-theme-color-button-primary-brand-text-active);
- }
+.button__text.button--is-loading {
+  visibility: hidden;
 }
 
-/**
-* Primary error clickable style
-*/
-:where(.button--primary).button--error {
- border-color: var(--eds-theme-color-button-primary-error-border);
- background-color: var(--eds-theme-color-button-primary-error-background);
- color: var(--eds-theme-color-button-primary-error-text);
-
- &:hover {
-   border-color: var(--eds-theme-color-button-primary-error-border-hover);
-   background-color: var(--eds-theme-color-button-primary-error-background-hover);
-   color: var(--eds-theme-color-button-primary-error-text-hover);
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-primary-error-border-active);
-   background-color: var(--eds-theme-color-button-primary-error-background-active);
-   color: var(--eds-theme-color-button-primary-error-text-active);
- }
+.button__loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /**
-* Secondary brand clickable style
-*/
-:where(.button--secondary).button--brand {
- border-color: var(--eds-theme-color-button-secondary-brand-border);
- background-color: var(--eds-theme-color-button-secondary-brand-background);
- color: var(--eds-theme-color-button-secondary-brand-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-brand-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
-   color: var(--eds-theme-color-button-secondary-brand-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-brand-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-brand-border-active);
-   background-color: var(--eds-theme-color-button-secondary-brand-background-active);
-   color: var(--eds-theme-color-button-secondary-brand-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-brand-icon-focus);
-   }
- }
+ * Sizes and Widths
+ */
+.button--lg {
+  align-items: center;
+
+  padding: calc(var(--eds-size-1) / 16 * 1rem) 1.25rem;
+  font: var(--eds-theme-typography-button-lg);
+
+  min-width:calc(var(--eds-size-9) / 16 * 1rem);
+  max-width:calc(var(--eds-size-40) / 16 * 1rem);
+  max-height: calc(var(--eds-size-5) / 16 * 1rem);
 }
 
-/**
-* Secondary neutral clickable style
-*/
-:where(.button--secondary).button--neutral {
- border-color: var(--eds-theme-color-button-secondary-neutral-border);
- background-color: var(--eds-theme-color-button-secondary-neutral-background);
- color: var(--eds-theme-color-button-secondary-neutral-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-neutral-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
-   color: var(--eds-theme-color-button-secondary-neutral-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
-   background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
-   color: var(--eds-theme-color-button-secondary-neutral-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-neutral-icon-active);
-   }
- }
+.button--md {
+  align-items: center;
+
+  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
+  font: var(--eds-theme-typography-button-md);
+
+  min-width: 3.75rem; /* TODO: missing size token */
+  max-width: calc(var(--eds-size-32) / 16 * 1rem);
+  max-height: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
-/**
-* Secondary success clickable style
-*/
-:where(.button--secondary).button--success {
- border-color: var(--eds-theme-color-button-secondary-success-border);
- background-color: var(--eds-theme-color-button-secondary-success-background);
- color: var(--eds-theme-color-button-secondary-success-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-success-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-success-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-success-background-hover);
-   color: var(--eds-theme-color-button-secondary-success-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-success-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-success-border-active);
-   background-color: var(--eds-theme-color-button-secondary-success-background-active);
-   color: var(--eds-theme-color-button-secondary-success-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-success-icon-active);
-   }
- }
+.button--sm {
+  padding: calc(var(--eds-size-half) / 16 * 1rem) 1.33333333rem;
+  /* TODO: need eds-theme-typography-button-sm => preset-009 */
+  font: var(--eds-typography-preset-009);
+
+  min-width: calc(var(--eds-size-6) / 16 * 1rem);
+  max-width: calc(var(--eds-size-24) / 16 * 1rem);;
+  max-height: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
-/**
-* Secondary warning clickable style
-*/
-:where(.button--secondary).button--warning {
- border-color: var(--eds-theme-color-button-secondary-warning-border);
- background-color: var(--eds-theme-color-button-secondary-warning-background);
- color: var(--eds-theme-color-button-secondary-warning-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-warning-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
-   color: var(--eds-theme-color-button-secondary-warning-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-warning-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-warning-border-active);
-   background-color: var(--eds-theme-color-button-secondary-warning-background-active);
-   color: var(--eds-theme-color-button-secondary-warning-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-warning-icon-active);
-   }
- }
+.button--full-width {
+  width: 100%;
 }
 
 /**
-* Secondary error clickable style
-*/
-:where(.button--secondary).button--error {
- border-color: var(--eds-theme-color-button-secondary-error-border);
- background-color: var(--eds-theme-color-button-secondary-error-background);
- color: var(--eds-theme-color-button-secondary-error-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-error-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-error-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-error-background-hover);
-   color: var(--eds-theme-color-button-secondary-error-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-error-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-error-border-active);
-   background-color: var(--eds-theme-color-button-secondary-error-background-active);
-   color: var(--eds-theme-color-button-secondary-error-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-error-icon-active);
-   }
- }
+ * Anatomy and iconLayout (w/ size)
+ * lg=40, md=32, sm=24 when layout is icon-only
+ */
+.button--layout-icon-only {
+  min-width: unset;
 }
 
-/**
-* Icon brand clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--brand {
- border-color: var(--eds-theme-color-button-icon-brand-border);
- background-color: var(--eds-theme-color-button-icon-brand-background);
- color: var(--eds-theme-color-button-icon-brand-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-brand);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-brand-border-hover);
-   background-color: var(--eds-theme-color-button-icon-brand-background-hover);
-   color: var(--eds-theme-color-button-icon-brand-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-brand-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-brand-border-active);
-   background-color: var(--eds-theme-color-button-icon-brand-background-active);
-   color: var(--eds-theme-color-button-icon-brand-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-brand-active);
-   }
- }
+.button--lg.button--layout-left {
+  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
-/**
-* Icon neutral clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--neutral {
- border-color: var(--eds-theme-color-button-icon-neutral-border);
- background-color: var(--eds-theme-color-button-icon-neutral-background);
- color: var(--eds-theme-color-button-icon-neutral-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-neutral);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
-   background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
-   color: var(--eds-theme-color-button-icon-neutral-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-neutral-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-neutral-border-active);
-   background-color: var(--eds-theme-color-button-icon-neutral-background-active);
-   color: var(--eds-theme-color-button-icon-neutral-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-neutral-active);
-   }
- }
+.button--lg.button--layout-right {
+  padding-right: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
-/**
-* Icon success clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--success {
- border-color: var(--eds-theme-color-button-icon-success-border);
- background-color: var(--eds-theme-color-button-icon-success-background);
- color: var(--eds-theme-color-button-icon-success-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-success);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-success-border-hover);
-   background-color: var(--eds-theme-color-button-icon-success-background-hover);
-   color: var(--eds-theme-color-button-icon-success-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-success-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-success-border-active);
-   background-color: var(--eds-theme-color-button-icon-success-background-active);
-   color: var(--eds-theme-color-button-icon-success-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-success-active);
-   }
- }
+.button--lg.button--layout-icon-only {
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
+  width: calc(var(--eds-size-5) / 16 * 1rem);
 }
 
-/**
-* Icon warning clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--warning {
- border-color: var(--eds-theme-color-button-icon-warning-border);
- background-color: var(--eds-theme-color-button-icon-warning-background);
- color: var(--eds-theme-color-button-icon-warning-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-warning);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-warning-border-hover);
-   background-color: var(--eds-theme-color-button-icon-warning-background-hover);
-   color: var(--eds-theme-color-button-icon-warning-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-warning-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-warning-border-active);
-   background-color: var(--eds-theme-color-button-icon-warning-background-active);
-   color: var(--eds-theme-color-button-icon-warning-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-warning-active);
-   }
- }
+.button--md.button--layout-icon-only {
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
+  width: calc(var(--eds-size-4) / 16 * 1rem);
 }
 
-/**
-* Icon error clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--error {
- border-color: var(--eds-theme-color-button-icon-error-border);
- background-color: var(--eds-theme-color-button-icon-error-background);
- color: var(--eds-theme-color-button-icon-error-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-error);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-error-border-hover);
-   background-color: var(--eds-theme-color-button-icon-error-background-hover);
-   color: var(--eds-theme-color-button-icon-error-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-error-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-error-border-active);
-   background-color: var(--eds-theme-color-button-icon-error-background-active);
-   color: var(--eds-theme-color-button-icon-error-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-error-active);
-   }
- }
+.button--sm.button--layout-icon-only {
+  padding: calc(var(--eds-size-half) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
-/**
-* Small clickable style
-*/
-.button--sm {
- font: var(--eds-theme-typography-button-label-sm);
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: calc(var(--eds-size-3) / 16 * 1rem);
- padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
+.button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 calc(var(--eds-size-quarter) / 16 * 1rem) var(--eds-theme-color-background-utility-base-2), 0 0 0 calc(var(--eds-size-half) / 16 * 1rem) var(--eds-theme-color-border-utility-focus);
 }
 
-/**
-* Medium clickable style
-*/
-.button--md {
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: calc(var(--eds-size-4) / 16 * 1rem);
- padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
+/* stylelint-disable-next-line eds/no-tier-1-color-variable */
+.button.button--variant-inverse:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 calc(var(--eds-size-quarter) / 16 * 1rem) rgb(var(--eds-color-black) / 1), 0 0 0 calc(var(--eds-size-half) / 16 * 1rem) var(--eds-theme-color-background-utility-base-2);
 }
 
 /**
-* Large clickable style
-*/
-.button--lg {
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: calc(var(--eds-size-5) / 16 * 1rem);
- padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
+ * Rank & Emphasis
+ */
+.button--primary.button--variant-default {
+  color: var(--eds-theme-color-text-utility-inverse);
+  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+  border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
 }
 
-/**
-* Full-width clickable style
-* A block clickable style that fills 100% of the width of its container
-*/
-.button--full-width {
- width: 100%;
+.button--secondary.button--variant-default {
+  color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+  border-color: currentColor;
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
+}
+
+.button--tertiary.button--variant-default {
+  color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+  border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
 }
 
+.button--tertiary.button--context-standalone {
+  color: var(--eds-theme-color-text-utility-interactive-secondary);
+}
 
 /**
- * Primary disabled button styles
+ * Button status variants
  */
-.button--primary {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-border-disabled);
-    background-color: var(--eds-theme-color-background-disabled);
-    color: var(--eds-theme-color-button-primary-brand-text);
+.button--primary.button--variant-critical {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis);
+}
+
+.button--secondary.button--variant-critical {
+  color: var(--eds-theme-color-background-utility-critical-high-emphasis);
+  border-color: currentColor;
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
+}
+
+.button--tertiary.button--variant-critical {
+  color: var(--eds-theme-color-background-utility-critical-high-emphasis);
+  border-color:  var(--eds-theme-color-background-utility-inverse-high-emphasis);
+}
+
+.button--primary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
+  background-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
+
+  &:hover {
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
   }
 }
 
-/**
- * Secondary disabled button styles
- */
-.button--secondary {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-border-disabled);
-    background-color: transparent;
-    color: var(--eds-theme-color-text-disabled);
+.button--secondary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+  border-color: currentColor;
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  &:hover {
+    color: var(--eds-theme-color-text-utility-default-secondary-hover);
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
 
-    svg {
-      color: var(--eds-theme-color-text-disabled);
-    }
+  &:active {
+    color: var(--eds-theme-color-text-utility-default-secondary-active);
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
   }
 }
 
-/**
- * Icon disabled button styles
- */
-.button--icon {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-button-icon-brand-border);
-    background-color: var(--eds-theme-color-button-icon-background);
-    color: var(--eds-theme-color-text-disabled);
-
-    svg {
-      color: var(--eds-theme-color-text-disabled);
-    }
+.button--tertiary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+  border-color: transparent;
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  &:hover {
+    color: var(--eds-theme-color-text-utility-default-secondary-hover);
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:active {
+    color: var(--eds-theme-color-text-utility-default-secondary-active);
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
   }
 }
 
 /**
- * Loading icon rotation style
+ * Inverse
  */
-.button.eds-is-loading svg path {
-  stroke: var(--eds-theme-color-text-disabled);
+
+.button--primary.button--variant-inverse {
+  color: var(--eds-theme-color-text-utility-default-primary);
+  border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
 }
 
-/** TODO: Remove ability for buttons to look like the link component in the next major version */
+.button--secondary.button--variant-inverse {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: currentColor;
+  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+}
+
+.button--tertiary.button--variant-inverse {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis);
+}
 
 /**
- * Link button styles
+ * Disabled
  */
- .button--link {
-  @mixin textLink;
- 
-  /**
-   * Override default Clickable styles
-   */
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  /**
-   * Smaller gap between text and icon in link button style
-   */
-  gap: 0.25em;
- 
-  &:disabled,
-  &:disabled:hover {
-    color: var(--eds-theme-color-text-disabled);
-    text-decoration-color: var(--eds-theme-color-text-disabled);
+.button--disabled {
+  &.button--primary.button--variant-default,
+  &.button--primary.button--variant-critical,
+  &.button--primary.button--variant-neutral {
+    color: var(--eds-theme-color-text-utility-disabled-primary);
+    border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
+    background-color:  var(--eds-theme-color-background-utility-disabled-medium-emphasis);
+
+    pointer-events: none;
   }
- }
- 
- /**
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- * for margin can happen where used, but needs to be specific enough to override preflight.
- */
- a:where(.button--link),
- button:where(.button--link) {
-  /* 2px padding gives the text breathing room in the focus state */
-  padding: 2px;
-  /**
-   * -2px margin compensates for the padding so the link doesn't have too much space between it
-   *  and surrounding text
-   */
-  margin: -2px;
- }
- 
- /**
- * Link neutral clickable style
- */
- :where(.button--link).button--neutral {
-  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
- 
-  &:hover {
-    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
+
+  &.button--primary.button--variant-inverse {
+    color: var(--eds-theme-color-text-utility-inverse-disabled);
+    /* Using transparent for border color to avoid blending opacity of border and background */
+    border-color: transparent;
+    background-color: var(--eds-theme-color-background-utility-inverse-disabled);
+
+    pointer-events: none;
   }
- 
-  &:focus-visible {
-    background-color: var(--eds-theme-color-link-neutral-background-focus);
+
+  &.button--secondary.button--variant-default,
+  &.button--secondary.button--variant-critical,
+  &.button--secondary.button--variant-neutral {
+    color: var(--eds-theme-color-text-utility-disabled-primary);
+    border-color: var(--eds-theme-color-border-disabled);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+    pointer-events: none;
   }
- 
-  @supports not selector(:focus-visible) {
-    &:focus {
-      background-color: var(--eds-theme-color-link-neutral-background-focus);
-    }
+
+  &.button--secondary.button--variant-inverse {
+    color: var(--eds-theme-color-text-utility-inverse-disabled);
+    border-color: var(--eds-theme-color-border-utility-inverse-disabled);
+
+    pointer-events: none;
   }
- }
\ No newline at end of file
+
+  &.button--tertiary.button--variant-default,
+  &.button--tertiary.button--variant-critical,
+  &.button--tertiary.button--variant-neutral {
+    color: var(--eds-theme-color-text-utility-disabled-primary);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+    pointer-events: none;
+  }
+
+  &.button--tertiary.button--variant-inverse {
+    color: var(--eds-theme-color-text-utility-disabled-primary);
+    border-color: transparent;
+
+    pointer-events: none;
+  }
+}
+
+/**
+ * Flag usages of just :disabled as erroneous
+ */
+.button:disabled:not(.button--disabled) {
+  outline: 2px dashed var(--eds-theme-color-border-utility-critical);
+}
+
+/**
+ * States
+ */
+
+ /* Hover */
+.button--variant-default:hover {
+  background-color: var(--eds-theme-color-border-utility-interactive-hover);
+  border-color: var(--eds-theme-color-border-utility-interactive-hover);
+}
+
+.button--secondary.button--variant-default:hover,
+.button--tertiary.button--variant-default:hover {
+  color: var(--eds-theme-color-text-utility-interactive-primary-hover);
+
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+  border-color: var(--eds-theme-color-border-utility-interactive-hover);
+}
+
+.button--tertiary.button--variant-default:hover {
+  border-color: var(--eds-theme-color-border-utility-interactive-hover);
+}
+
+.button--variant-critical:hover {
+  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover);
+  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover);
+}
+
+.button--secondary.button--variant-critical:hover,
+.button--tertiary.button--variant-critical:hover {
+  color: var(--eds-theme-color-text-utility-critical-hover);
+
+  background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
+  border-color: var(--eds-theme-color-border-utility-critical-hover);
+}
+
+.button--tertiary.button--variant-critical:hover {
+  border-color: var(--eds-theme-color-border-utility-critical-hover);
+}
+
+.button--primary.button--variant-inverse:hover {
+  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis-hover)
+}
+
+.button--secondary.button--variant-inverse:hover,
+.button--tertiary.button--variant-inverse:hover {
+  background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
+}
+
+.button--tertiary.button--variant-inverse:hover {
+  border-color: var(--eds-theme-color-border-utility-inverse);
+}
+
+.button--tertiary.button--context-standalone:hover {
+  color: var(--eds-theme-color-text-utility-interactive-secondary-hover);
+}
+
+/* Active */
+.button--variant-default:active {
+  background-color: var(--eds-theme-color-border-utility-interactive-active);
+  border-color: var(--eds-theme-color-border-utility-interactive-active);
+}
+
+.button--secondary.button--variant-default:active,
+.button--tertiary.button--variant-default:active {
+  color: var(--eds-theme-color-text-utility-default-primary-active);
+
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+  border-color: var(--eds-theme-color-border-utility-interactive-active);
+}
+
+.button--tertiary.button--variant-default:active {
+  border-color: var(--eds-theme-color-border-utility-interactive-active);
+}
+
+.button--variant-critical:active {
+  background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active);
+  border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active);
+}
+
+.button--secondary.button--variant-critical:active,
+.button--tertiary.button--variant-critical:active {
+  color: var(--eds-theme-color-text-utility-critical-active);
+
+  background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
+  border-color: var(--eds-theme-color-border-utility-critical-active);
+}
+
+.button--secondary.button--variant-inverse:active,
+.button--tertiary.button--variant-inverse:active {
+  background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active);
+}
+
+.button--tertiary.button--context-standalone:active {
+  color: var(--eds-theme-color-text-utility-interactive-secondary-active);
+}
\ No newline at end of file
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 68205566a..80de70a9b 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,50 +1,33 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
-import { Button } from './Button';
-import { SIZES, STATUSES } from '../ClickableStyle';
-
-import Icon from '../Icon';
+import { Button, type ButtonProps } from './Button';
 
 export default {
   title: 'Components/Button',
   component: Button,
   args: {
     children: 'Button',
-    variant: 'secondary',
-    status: 'brand',
-    fullWidth: false,
+    isFullWidth: false,
     size: 'lg',
-    loading: false,
+    isLoading: false,
   },
   argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['primary', 'secondary', 'icon'],
-    },
-    status: {
-      control: {
-        type: 'select',
-      },
-      options: STATUSES,
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: SIZES,
-    },
-    fullWidth: {
+    // size: {
+    //   control: {
+    //     type: 'select',
+    //   },
+    //   options: SIZES,
+    // },
+    isFullWidth: {
       control: 'boolean',
     },
-    loading: {
+    isLoading: {
       control: 'boolean',
     },
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
 } as Meta<Args>;
 
@@ -52,326 +35,242 @@ type Args = React.ComponentProps<typeof Button>;
 
 export const Default: StoryObj<Args> = {
   args: {
-    variant: 'secondary',
-  },
-};
-
-export const Primary: StoryObj<Args> = {
-  args: {
-    variant: 'primary',
-  },
-};
-
-export const PrimaryDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-    variant: 'primary',
-  },
-};
-
-export const PrimaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryMedium: StoryObj<Args> = {
-  args: {
-    size: 'md',
-    variant: 'primary',
-  },
-};
-
-export const PrimarySmall: StoryObj<Args> = {
-  args: {
-    size: 'sm',
-    variant: 'primary',
-  },
-};
-
-export const SecondaryDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const SecondaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-  },
-};
-
-export const SecondaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-  },
-};
-
-export const SecondaryMedium: StoryObj<Args> = {
-  args: {
-    variant: 'secondary',
-    size: 'md',
-  },
-};
-
-export const SecondarySmall: StoryObj<Args> = {
-  args: { variant: 'secondary', size: 'sm' },
-};
-
-export const Tertiary: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-  },
-};
-
-export const TertiaryDisabled: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    disabled: true,
-  },
-};
-
-export const TertiaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    status: 'neutral',
-  },
-};
-
-export const TertiaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'neutral',
+    children: 'Button',
   },
 };
 
-export const TertiaryMedium: StoryObj<Args> = {
+/**
+ * Each button can come in a set of ranks, denoting the importance of the button to the surrounding user interface.
+ */
+export const DefaultRanks: StoryObj<Args> = {
   args: {
-    status: 'neutral',
-    size: 'md',
+    ...Default.args,
   },
-};
-
-export const TertiarySmall: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    size: 'sm',
+  render: (args) => {
+    return (
+      <div className="flex gap-1">
+        <Button {...args} rank="primary">
+          Primary
+        </Button>
+        <Button {...args} rank="secondary">
+          Secondary
+        </Button>
+        <Button {...args} rank="tertiary">
+          Tertiary
+        </Button>
+      </div>
+    );
   },
 };
 
-export const IconButtonLeftIcon: StoryObj<Args> = {
+/**
+ * Buttons can be disabled for each rank using `isDisabled`
+ */
+export const Disabled: StoryObj<Args> = {
   args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'icon',
+    ...DefaultRanks.args,
+    isDisabled: true,
   },
+  render: DefaultRanks.render,
 };
 
-export const IconButtonDisabled: StoryObj<Args> = {
+/**
+ * Since `isDisabled` will set the form's proper disabled state, don't use just `disabled`. This will show a visual error.
+ */
+export const JustDisabledProp: StoryObj<Args> = {
   args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'icon',
+    ...DefaultRanks.args,
     disabled: true,
   },
+  render: DefaultRanks.render,
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
 };
 
-export const IconButtonRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'icon',
-  },
-};
-
-export const IconButtonIconOnly: StoryObj<Args> = {
-  args: {
-    children: <Icon name="arrow-back" purpose="informative" title="go back" />,
-    variant: 'icon',
-  },
-};
-
-export const IconButtonLeftIconSmall: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'icon',
-    size: 'sm',
-  },
-};
-
-export const IconButtonRightIconSmall: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'icon',
-    size: 'sm',
-  },
-};
-
-export const IconButtonIconOnlySmall: StoryObj<Args> = {
+/**
+ * Tertiary buttons can have an additional level of emphasis when stood by themselves. Use this case sparingly.
+ */
+export const TertiaryStandalone: StoryObj<Args> = {
   args: {
-    children: <Icon name="arrow-back" purpose="informative" title="go back" />,
-    variant: 'icon',
-    size: 'sm',
+    rank: 'tertiary',
+    context: 'standalone',
   },
 };
 
-export const Destructive: StoryObj<Args> = {
+/**
+ * Each button has variants denoting criticality, like for changes that are permanent, deletions, etc.
+ */
+export const CriticalRanks: StoryObj<Args> = {
   args: {
-    status: 'error',
-    variant: 'primary',
+    ...DefaultRanks.args,
+    variant: 'critical',
   },
+  render: DefaultRanks.render,
 };
 
-export const DestructiveLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    status: 'error',
-    variant: 'primary',
-  },
-};
-
-export const FullWidth: StoryObj<Args> = {
-  args: { fullWidth: true },
-};
-
-export const Loading: StoryObj<Args> = {
+/**
+ * There is also a neutral variant, to combine into other components, or provide a muted appearance.
+ */
+export const NeutralRanks: StoryObj<Args> = {
   args: {
-    loading: true,
-    disabled: true,
+    ...DefaultRanks.args,
+    variant: 'neutral',
   },
+  render: DefaultRanks.render,
 };
 
-export const SecondarySuccess: StoryObj<Args> = {
+/**
+ * Each rank also includes an inverse variant, for use on dark backgrounds.
+ */
+export const InverseRanks: StoryObj<Args> = {
   args: {
-    status: 'success',
+    ...DefaultRanks.args,
+    variant: 'inverse',
   },
-};
-
-export const SecondaryWarning: StoryObj<Args> = {
-  args: {
-    status: 'warning',
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
   },
+  render: DefaultRanks.render,
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
 };
 
-export const SecondaryError: StoryObj<Args> = {
+/**
+ * Inverse buttons can be disabled as well
+ */
+export const InverseDisabledRanks: StoryObj<Args> = {
   args: {
-    status: 'error',
+    ...DefaultRanks.args,
+    variant: 'inverse',
+    isDisabled: true,
   },
-};
-
-export const IconNeutral: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'neutral',
-    variant: 'icon',
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
   },
+  render: DefaultRanks.render,
+  decorators: [(Story) => <div className="p-1">{Story()}</div>],
 };
 
-export const IconSuccess: StoryObj<Args> = {
+/**
+ * Buttons come in three sizes
+ */
+export const Sizes: StoryObj<Args> = {
   args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'success',
-    variant: 'icon',
+    ...Default.args,
   },
-};
-
-export const IconWarning: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'warning',
-    variant: 'icon',
+  render: (args) => {
+    return (
+      <div className="flex items-center gap-1">
+        <Button {...args} size="lg">
+          Large
+        </Button>
+        <Button {...args} size="md">
+          Medium
+        </Button>
+        <Button {...args} size="sm">
+          Small
+        </Button>
+      </div>
+    );
   },
 };
 
-export const IconError: StoryObj<Args> = {
+/**
+ * Buttons can come with full width set, which will expand the button to its maximum width (diferent for each size)
+ */
+export const FullWidths: StoryObj<Args> = {
   args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'error',
-    variant: 'icon',
+    ...Sizes.args,
+    isFullWidth: true,
   },
+  parameters: {
+    layout: 'padded',
+  },
+  render: Sizes.render,
+};
+
+/**
+ * When in the loading state, a button will show a loading indicator in place of the normal button text, maintaining the initial size.
+ */
+export const LoadingStates: StoryObj<Args> = {
+  args: {
+    ...Sizes.args,
+    isLoading: true,
+  },
+  render: Sizes.render,
+};
+
+/**
+ * `iconLayout` lets you place the icons adjacent to button text, or as the only visible element.
+ * When using `"icon-only"`, you **must** include a label (e.g., via `aria-label`).
+ */
+export const IconLayouts: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    icon: 'open-in-new',
+  },
+  render: (args) => {
+    return (
+      <div className="flex items-center gap-1">
+        <Button {...args} iconLayout="left">
+          Left
+        </Button>
+        <Button {...args} iconLayout="right">
+          Right
+        </Button>
+        <Button
+          {...args}
+          aria-label="Label must be applied with icon-only layout"
+          iconLayout="icon-only"
+        >
+          Icon Only (text not visible)
+        </Button>
+      </div>
+    );
+  },
+};
+
+// Here, we introduce a special type extension to LinkProps, then use it in a
+// composed component, to demonstrate the ability to offer custom props to a component
+type ExtendArgs = ButtonProps<{ to: string }>;
+function ExtendedButton(args: ExtendArgs) {
+  return (
+    // eslint-disable-next-line no-alert
+    <Button {...args} onClick={() => alert(`handle to value: ${args.to}`)} />
+  );
+}
+
+/**
+ * You can extend a component's props for use with libraries that aid navigation, e.g., react-dom-router, et al.
+ *
+ * Steps to use:
+ *
+ * * import `ButtonProps`
+ * * use the type param. to augment the types for `Button` with the library's type
+ * * Now export a new function component that uses the new prop type and returns a composed function
+ *
+ * When using this pattern, you likely want to also specify the library's Button component using `as`
+ *
+ * ```tsx
+ * type CustomLinkProps = React.ComponentProps<typeof CustomLink>;
+ * type ExtendedProps = LinkProps<CustomLinkProps>;
+ *
+ * export default function Button({children, ...other}: ExtendedProps) {
+ *   return (
+ *    <Button as={CustomButton} {...other}>
+ *      {children}
+ *    </Button>
+ *   );
+ * }
+ * ```
+ */
+export const UsingExtendedLink: StoryObj<ExtendArgs> = {
+  render: (args) => (
+    <div>
+      Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam
+      scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id
+      tellus ante.{' '}
+      <ExtendedButton {...args} to="test">
+        consectetur adipiscing elit
+      </ExtendedButton>
+    </div>
+  ),
 };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b5ca2299d..faadd0d6e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,51 +1,82 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import type { Size } from '../../util/variant-types';
-import type {
-  PrimaryStatus,
-  SecondaryStatus,
-  IconStatus,
-  LinkStatus,
-} from '../ClickableStyle/ClickableStyle';
+import Icon, { type IconName } from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
 
 import styles from './Button.module.css';
 
 type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-type ButtonVariants = IconStatus | PrimaryStatus | SecondaryStatus | LinkStatus;
-
-export type ButtonProps = ButtonHTMLElementProps & {
+export type ButtonProps<ExtendedElement = unknown> = ButtonHTMLElementProps & {
+  // Component API
+  /**
+   * `Button` contents or label.
+   */
+  children?: string;
   /**
-   * The button contents or label.
+   * Determine the behavior of the button upon click:
+   * - **button** `Button` is a clickable button with no default behavior
+   * - **submit** `Button` is a clickable button that submits form data
+   * - **reset** `Button` is a clickable button that resets the form-data to its initial values
    */
-  children: ReactNode;
+  type?: 'button' | 'reset' | 'submit';
+
+  // Design API
   /**
-   * Toggles clickable that fills the full width of its container
+   * Sets the hierarchy rank of the button
+   *
+   * **Default is `"primary"`**.
    */
-  fullWidth?: boolean;
+  rank?: 'primary' | 'secondary' | 'tertiary';
+
   /**
    * The size of the button on screen
    */
   size?: Extract<Size, 'sm' | 'md' | 'lg'>;
+
   /**
-   * Disables the field and prevents editing the contents
+   * The variant of the default tertiary button.
    */
-  disabled?: boolean;
+  context?: 'default' | 'standalone';
+
   /**
-   * Loading state passed down from higher level used to trigger loader and text change
+   * Icon from the set of defined EDS icon set, when `iconLayout` is used.
    */
-  loading?: boolean;
+  icon?: IconName;
+
   /**
-   * Determines type of clickable:
-   * - **button** The clickable is a clickable button.
-   * - **submit** The clickable is a submit clickable (submits form data).
-   * - **reset** The clickable is a reset clickable (resets the form-data to its initial values)
+   * Allows configuation of the icon's positioning within `Button`.
+   *
+   * - When set to a value besides `"none"`, an icon must be specified.
+   * - When `"icon-only"`, `aria-label` must be given a value.
    */
-  type?: 'button' | 'reset' | 'submit';
-  'data-testid'?: string;
-} & ButtonVariants;
+  iconLayout?: 'none' | 'left' | 'right' | 'icon-only';
+
+  /**
+   * Status (color) variant for `Button`.
+   *
+   * **Default is `"default"`**.
+   */
+  variant?: 'default' | 'neutral' | 'critical' | 'inverse';
+
+  /**
+   * Whether the width of the button is set to the full layout.
+   */
+  isFullWidth?: boolean;
+
+  /**
+   * Whether `Button` is set to disabled state (disables interaction and updates appearance).
+   *
+   * Note: this will set the internal field to `disabled` as well. Prefer this to just setting `disabled`.
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Loading state passed down from higher level used to trigger loader and text change.
+   */
+  isLoading?: boolean;
+} & ExtendedElement;
 
 /**
  * `import {Button} from "@chanzuckerberg/eds";`
@@ -62,55 +93,73 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       children,
       className,
-      fullWidth,
-      loading,
-      variant = 'secondary',
-      status = 'brand',
-      disabled = false,
+      context,
+      icon = 'circle',
+      iconLayout = 'none',
+      isDisabled,
+      isFullWidth,
+      isLoading,
       type = 'button',
+      rank = 'primary',
       size = 'lg',
+      variant = 'default',
       ...other
     },
     ref,
   ) => {
     const componentClassName = clsx(
-      // Base styles
       styles['button'],
-      // Sizes
-      variant !== 'link' && [
-        size === 'sm' && styles['button--sm'],
-        size === 'md' && styles['button--md'],
-        size === 'lg' && styles['button--lg'],
-      ],
-      // Variants
-      variant === 'primary' && styles['button--primary'],
-      variant === 'secondary' && styles['button--secondary'],
-      variant === 'icon' && styles['button--icon'],
-      variant === 'link' && styles['button--link'],
-      // Colors
-      status === 'brand' && styles['button--brand'],
-      status === 'neutral' && styles['button--neutral'],
-      status === 'success' && styles['button--success'],
-      status === 'warning' && styles['button--warning'],
-      status === 'error' && styles['button--error'],
-      // Other options
-      fullWidth && styles['button--full-width'],
-      disabled && styles['button--disabled'],
-      loading && styles['eds-is-loading'],
+      context && clsx(styles[`button--context-${context}`]),
+      iconLayout && clsx(styles[`button--layout-${iconLayout}`]),
+      isDisabled && clsx(styles['button--disabled']),
+      isFullWidth && clsx(styles['button--full-width']),
+      isLoading && clsx(styles['button--loading']),
+      rank && clsx(styles[`button--${rank}`]),
+      size && clsx(styles[`button--${size}`]),
+      variant && clsx(styles[`button--variant-${variant}`]),
       className,
     );
 
+    const buttonContentClassName = clsx(
+      styles['button__text'],
+      isLoading && styles['button--is-loading'],
+    );
+
     return (
       <button
         className={componentClassName}
-        disabled={disabled}
+        disabled={isDisabled}
         ref={ref}
-        tabIndex={disabled ? -1 : undefined}
         type={type}
         {...other}
       >
-        {loading && <LoadingIndicator className="eds-is-loading" size="sm" />}
-        {children}
+        <span className={buttonContentClassName}>
+          {iconLayout === 'icon-only' && (
+            <Icon
+              name={icon}
+              purpose="decorative"
+              size={size === 'lg' ? '1.5rem' : '1rem'}
+            />
+          )}
+          {iconLayout === 'left' && (
+            <Icon
+              name={icon}
+              purpose="decorative"
+              size={size === 'lg' ? '1.5rem' : '1rem'}
+            />
+          )}
+          {iconLayout !== 'icon-only' && children}
+          {iconLayout === 'right' && (
+            <Icon
+              name={icon}
+              purpose="decorative"
+              size={size === 'lg' ? '1.5rem' : '1rem'}
+            />
+          )}
+        </span>
+        {isLoading && (
+          <LoadingIndicator className={styles['button__loader']} size="xs" />
+        )}
       </button>
     );
   },
diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
deleted file mode 100644
index b8f02e71c..000000000
--- a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
+++ /dev/null
@@ -1,687 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button /> (v2) CriticalRanks story renders snapshot 1`] = `
-<div
-  class="flex gap-1"
->
-  <button
-    class="button button--layout-none button--primary button--lg button--variant-critical"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Primary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--secondary button--lg button--variant-critical"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Secondary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--tertiary button--lg button--variant-critical"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Tertiary
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) Default story renders snapshot 1`] = `
-<button
-  class="button button--layout-none button--primary button--lg button--variant-default"
-  type="button"
->
-  <span
-    class="button__text"
-  >
-    Button
-  </span>
-</button>
-`;
-
-exports[`<Button /> (v2) DefaultRanks story renders snapshot 1`] = `
-<div
-  class="flex gap-1"
->
-  <button
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Primary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--secondary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Secondary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--tertiary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Tertiary
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) Disabled story renders snapshot 1`] = `
-<div
-  class="flex gap-1"
->
-  <button
-    class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
-    disabled=""
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Primary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
-    disabled=""
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Secondary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
-    disabled=""
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Tertiary
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) FullWidths story renders snapshot 1`] = `
-<div
-  class="flex items-center gap-1"
->
-  <button
-    class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Large
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--full-width button--primary button--md button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Medium
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--full-width button--primary button--sm button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Small
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
-<div
-  class="flex items-center gap-1"
->
-  <button
-    class="button button--layout-left button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-        />
-      </svg>
-      Left
-    </span>
-  </button>
-  <button
-    class="button button--layout-right button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Right
-      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-        />
-      </svg>
-    </span>
-  </button>
-  <button
-    aria-label="Label must be applied with icon-only layout"
-    class="button button--layout-icon-only button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) InverseDisabledRanks story renders snapshot 1`] = `
-<div
-  class="p-1"
->
-  <div
-    class="flex gap-1"
-  >
-    <button
-      class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Primary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Secondary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Tertiary
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
-<div
-  class="p-1"
->
-  <div
-    class="flex gap-1"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-inverse"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Primary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--secondary button--lg button--variant-inverse"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Secondary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--tertiary button--lg button--variant-inverse"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Tertiary
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<Button /> (v2) JustDisabledProp story renders snapshot 1`] = `
-<div
-  class="p-1"
->
-  <div
-    class="flex gap-1"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Primary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Secondary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--tertiary button--lg button--variant-default"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Tertiary
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
-<div
-  class="flex items-center gap-1"
->
-  <button
-    class="button button--layout-none button--loading button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text button--is-loading"
-    >
-      Large
-    </span>
-    <div
-      aria-busy="true"
-      aria-label="loading"
-      class="loading-indicator button__loader"
-      data-testid="oval-loading"
-      role="status"
-    >
-      <svg
-        data-testid="oval-svg"
-        height="16"
-        stroke="transparent"
-        viewBox="-22 -22 46 46"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            data-testid="oval-secondary-group"
-            stroke-width="4"
-            transform="translate(1 1)"
-          >
-            <circle
-              cx="0"
-              cy="0"
-              r="20"
-              stroke="transparent"
-              stroke-opacity=".5"
-              stroke-width="4"
-            />
-            <path
-              d="M20 0c0-9.94-8.06-20-20-20"
-            >
-              <animatetransform
-                attributeName="transform"
-                dur="1s"
-                from="0 0 0"
-                repeatCount="indefinite"
-                to="360 0 0"
-                type="rotate"
-              />
-            </path>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </button>
-  <button
-    class="button button--layout-none button--loading button--primary button--md button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text button--is-loading"
-    >
-      Medium
-    </span>
-    <div
-      aria-busy="true"
-      aria-label="loading"
-      class="loading-indicator button__loader"
-      data-testid="oval-loading"
-      role="status"
-    >
-      <svg
-        data-testid="oval-svg"
-        height="16"
-        stroke="transparent"
-        viewBox="-22 -22 46 46"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            data-testid="oval-secondary-group"
-            stroke-width="4"
-            transform="translate(1 1)"
-          >
-            <circle
-              cx="0"
-              cy="0"
-              r="20"
-              stroke="transparent"
-              stroke-opacity=".5"
-              stroke-width="4"
-            />
-            <path
-              d="M20 0c0-9.94-8.06-20-20-20"
-            >
-              <animatetransform
-                attributeName="transform"
-                dur="1s"
-                from="0 0 0"
-                repeatCount="indefinite"
-                to="360 0 0"
-                type="rotate"
-              />
-            </path>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </button>
-  <button
-    class="button button--layout-none button--loading button--primary button--sm button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text button--is-loading"
-    >
-      Small
-    </span>
-    <div
-      aria-busy="true"
-      aria-label="loading"
-      class="loading-indicator button__loader"
-      data-testid="oval-loading"
-      role="status"
-    >
-      <svg
-        data-testid="oval-svg"
-        height="16"
-        stroke="transparent"
-        viewBox="-22 -22 46 46"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            data-testid="oval-secondary-group"
-            stroke-width="4"
-            transform="translate(1 1)"
-          >
-            <circle
-              cx="0"
-              cy="0"
-              r="20"
-              stroke="transparent"
-              stroke-opacity=".5"
-              stroke-width="4"
-            />
-            <path
-              d="M20 0c0-9.94-8.06-20-20-20"
-            >
-              <animatetransform
-                attributeName="transform"
-                dur="1s"
-                from="0 0 0"
-                repeatCount="indefinite"
-                to="360 0 0"
-                type="rotate"
-              />
-            </path>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) NeutralRanks story renders snapshot 1`] = `
-<div
-  class="flex gap-1"
->
-  <button
-    class="button button--layout-none button--primary button--lg button--variant-neutral"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Primary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--secondary button--lg button--variant-neutral"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Secondary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--tertiary button--lg button--variant-neutral"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Tertiary
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) Sizes story renders snapshot 1`] = `
-<div
-  class="flex items-center gap-1"
->
-  <button
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Large
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--primary button--md button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Medium
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--primary button--sm button--variant-default"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Small
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) TertiaryStandalone story renders snapshot 1`] = `
-<button
-  class="button button--context-standalone button--layout-none button--tertiary button--lg button--variant-default"
-  type="button"
->
-  <span
-    class="button__text"
-  >
-    Button
-  </span>
-</button>
-`;
-
-exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
-<div>
-  Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-   
-  <button
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    to="test"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      consectetur adipiscing elit
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Button /> (v2) passes class names down properly 1`] = `
-<button
-  class="button button--layout-none button--primary button--lg button--variant-default exampleClassName"
-  data-testid="example-class-name"
-  type="button"
->
-  <span
-    class="button__text"
-  >
-    Click
-  </span>
-</button>
-`;
-
-exports[`<Button /> (v2) passes test ids down properly 1`] = `
-<button
-  class="button button--layout-none button--primary button--lg button--variant-default"
-  data-testid="example-test-id"
-  type="button"
->
-  <span
-    class="button__text"
-  >
-    Click
-  </span>
-</button>
-`;
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index fd20c00fa..f32fc092f 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,605 +1,687 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> Default story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> Destructive story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary button--error"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> DestructiveLeftIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary button--error"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</button>
-`;
-
-exports[`<Button /> FullWidth story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--brand button--full-width"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> IconButtonDisabled story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--brand button--disabled"
-  disabled=""
-  tabindex="-1"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</button>
-`;
-
-exports[`<Button /> IconButtonIconOnly story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--brand"
-  type="button"
->
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      go 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>
-</button>
-`;
-
-exports[`<Button /> IconButtonIconOnlySmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--icon button--brand"
-  type="button"
+exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
+<div
+  class="flex gap-1"
 >
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      go 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>
-</button>
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-critical"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Primary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--secondary button--lg button--variant-critical"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--tertiary button--lg button--variant-critical"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Tertiary
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> IconButtonLeftIcon story renders snapshot 1`] = `
+exports[`<Button /> Default story renders snapshot 1`] = `
 <button
-  class="button button--lg button--icon button--brand"
+  class="button button--layout-none button--primary button--lg button--variant-default"
   type="button"
 >
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
+  <span
+    class="button__text"
+  >
+    Button
+  </span>
 </button>
 `;
 
-exports[`<Button /> IconButtonLeftIconSmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--icon button--brand"
-  type="button"
+exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
+<div
+  class="flex gap-1"
 >
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</button>
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Primary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--secondary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--tertiary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Tertiary
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> IconButtonRightIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--brand"
-  type="button"
+exports[`<Button /> Disabled story renders snapshot 1`] = `
+<div
+  class="flex gap-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <button
+    class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
+    disabled=""
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Primary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
+    disabled=""
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
+    disabled=""
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Tertiary
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> IconButtonRightIconSmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--icon button--brand"
-  type="button"
+exports[`<Button /> FullWidths story renders snapshot 1`] = `
+<div
+  class="flex items-center gap-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <button
+    class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Large
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--full-width button--primary button--md button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Medium
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--full-width button--primary button--sm button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Small
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> IconError story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--error"
-  type="button"
+exports[`<Button /> IconLayouts story renders snapshot 1`] = `
+<div
+  class="flex items-center gap-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <button
+    class="button button--layout-left button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+        />
+      </svg>
+      Left
+    </span>
+  </button>
+  <button
+    class="button button--layout-right button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Right
+      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+        />
+      </svg>
+    </span>
+  </button>
+  <button
+    aria-label="Label must be applied with icon-only layout"
+    class="button button--layout-icon-only button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> IconNeutral story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--neutral"
-  type="button"
+exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
+<div
+  class="p-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <div
+    class="flex gap-1"
+  >
+    <button
+      class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Primary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Secondary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Tertiary
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`<Button /> IconSuccess story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--success"
-  type="button"
+exports[`<Button /> InverseRanks story renders snapshot 1`] = `
+<div
+  class="p-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <div
+    class="flex gap-1"
+  >
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-inverse"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Primary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--secondary button--lg button--variant-inverse"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Secondary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--tertiary button--lg button--variant-inverse"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Tertiary
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`<Button /> IconWarning story renders snapshot 1`] = `
-<button
-  class="button button--lg button--icon button--warning"
-  type="button"
+exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
+<div
+  class="p-1"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
+  <div
+    class="flex gap-1"
+  >
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-default"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Primary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--secondary button--lg button--variant-default"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Secondary
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--tertiary button--lg button--variant-default"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Tertiary
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`<Button /> Loading story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--brand button--disabled eds-is-loading"
-  disabled=""
-  tabindex="-1"
-  type="button"
+exports[`<Button /> LoadingStates story renders snapshot 1`] = `
+<div
+  class="flex items-center gap-1"
 >
-  <div
-    aria-busy="true"
-    aria-label="loading"
-    class="loading-indicator eds-is-loading"
-    data-testid="oval-loading"
-    role="status"
-  >
-    <svg
-      data-testid="oval-svg"
-      height="24"
-      stroke="transparent"
-      viewBox="-20 -20 42 42"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        fill="none"
-        fill-rule="evenodd"
+  <button
+    class="button button--layout-none button--loading button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text button--is-loading"
+    >
+      Large
+    </span>
+    <div
+      aria-busy="true"
+      aria-label="loading"
+      class="loading-indicator button__loader"
+      data-testid="oval-loading"
+      role="status"
+    >
+      <svg
+        data-testid="oval-svg"
+        height="16"
+        stroke="transparent"
+        viewBox="-22 -22 46 46"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <g
-          data-testid="oval-secondary-group"
-          stroke-width="2"
-          transform="translate(1 1)"
+          fill="none"
+          fill-rule="evenodd"
         >
-          <circle
-            cx="0"
-            cy="0"
-            r="20"
-            stroke="transparent"
-            stroke-opacity=".5"
-            stroke-width="2"
-          />
-          <path
-            d="M20 0c0-9.94-8.06-20-20-20"
+          <g
+            data-testid="oval-secondary-group"
+            stroke-width="4"
+            transform="translate(1 1)"
           >
-            <animatetransform
-              attributeName="transform"
-              dur="1s"
-              from="0 0 0"
-              repeatCount="indefinite"
-              to="360 0 0"
-              type="rotate"
+            <circle
+              cx="0"
+              cy="0"
+              r="20"
+              stroke="transparent"
+              stroke-opacity=".5"
+              stroke-width="4"
             />
-          </path>
+            <path
+              d="M20 0c0-9.94-8.06-20-20-20"
+            >
+              <animatetransform
+                attributeName="transform"
+                dur="1s"
+                from="0 0 0"
+                repeatCount="indefinite"
+                to="360 0 0"
+                type="rotate"
+              />
+            </path>
+          </g>
         </g>
-      </g>
-    </svg>
-  </div>
-  Button
-</button>
-`;
-
-exports[`<Button /> Primary story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> PrimaryDisabled story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary button--brand button--disabled"
-  disabled=""
-  tabindex="-1"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> PrimaryLeftIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary 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="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>
-  Button
-</button>
-`;
-
-exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
-<button
-  class="button button--md button--primary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> PrimaryRightIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--primary button--brand"
-  type="button"
->
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
-`;
-
-exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--primary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryDisabled story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--brand button--disabled"
-  disabled=""
-  tabindex="-1"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryError story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--error"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryLeftIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary 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="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>
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryMedium story renders snapshot 1`] = `
-<button
-  class="button button--md button--secondary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryRightIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--brand"
-  type="button"
->
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-</button>
-`;
-
-exports[`<Button /> SecondarySmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--secondary button--brand"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondarySuccess story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--success"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> SecondaryWarning story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--warning"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> Tertiary story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--neutral"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> TertiaryDisabled story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--neutral button--disabled"
-  disabled=""
-  tabindex="-1"
-  type="button"
->
-  Button
-</button>
+      </svg>
+    </div>
+  </button>
+  <button
+    class="button button--layout-none button--loading button--primary button--md button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text button--is-loading"
+    >
+      Medium
+    </span>
+    <div
+      aria-busy="true"
+      aria-label="loading"
+      class="loading-indicator button__loader"
+      data-testid="oval-loading"
+      role="status"
+    >
+      <svg
+        data-testid="oval-svg"
+        height="16"
+        stroke="transparent"
+        viewBox="-22 -22 46 46"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fill-rule="evenodd"
+        >
+          <g
+            data-testid="oval-secondary-group"
+            stroke-width="4"
+            transform="translate(1 1)"
+          >
+            <circle
+              cx="0"
+              cy="0"
+              r="20"
+              stroke="transparent"
+              stroke-opacity=".5"
+              stroke-width="4"
+            />
+            <path
+              d="M20 0c0-9.94-8.06-20-20-20"
+            >
+              <animatetransform
+                attributeName="transform"
+                dur="1s"
+                from="0 0 0"
+                repeatCount="indefinite"
+                to="360 0 0"
+                type="rotate"
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </button>
+  <button
+    class="button button--layout-none button--loading button--primary button--sm button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text button--is-loading"
+    >
+      Small
+    </span>
+    <div
+      aria-busy="true"
+      aria-label="loading"
+      class="loading-indicator button__loader"
+      data-testid="oval-loading"
+      role="status"
+    >
+      <svg
+        data-testid="oval-svg"
+        height="16"
+        stroke="transparent"
+        viewBox="-22 -22 46 46"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fill-rule="evenodd"
+        >
+          <g
+            data-testid="oval-secondary-group"
+            stroke-width="4"
+            transform="translate(1 1)"
+          >
+            <circle
+              cx="0"
+              cy="0"
+              r="20"
+              stroke="transparent"
+              stroke-opacity=".5"
+              stroke-width="4"
+            />
+            <path
+              d="M20 0c0-9.94-8.06-20-20-20"
+            >
+              <animatetransform
+                attributeName="transform"
+                dur="1s"
+                from="0 0 0"
+                repeatCount="indefinite"
+                to="360 0 0"
+                type="rotate"
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </button>
+</div>
 `;
 
-exports[`<Button /> TertiaryLeftIcon story renders snapshot 1`] = `
-<button
-  class="button button--lg button--secondary button--neutral"
-  type="button"
+exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
+<div
+  class="flex gap-1"
 >
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</button>
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Primary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--secondary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--tertiary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Tertiary
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> TertiaryMedium story renders snapshot 1`] = `
-<button
-  class="button button--md button--secondary button--neutral"
-  type="button"
+exports[`<Button /> Sizes story renders snapshot 1`] = `
+<div
+  class="flex items-center gap-1"
 >
-  Button
-</button>
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Large
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--primary button--md button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Medium
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--primary button--sm button--variant-default"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Small
+    </span>
+  </button>
+</div>
 `;
 
-exports[`<Button /> TertiaryRightIcon story renders snapshot 1`] = `
+exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
 <button
-  class="button button--lg button--secondary button--neutral"
+  class="button button--context-standalone button--layout-none button--tertiary button--lg button--variant-default"
   type="button"
 >
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
+  <span
+    class="button__text"
+  >
+    Button
+  </span>
 </button>
 `;
 
-exports[`<Button /> TertiarySmall story renders snapshot 1`] = `
-<button
-  class="button button--sm button--secondary button--neutral"
-  type="button"
->
-  Button
-</button>
+exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
+<div>
+  Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
+   
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-default"
+    to="test"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      consectetur adipiscing elit
+    </span>
+  </button>
+</div>
 `;
 
 exports[`<Button /> passes class names down properly 1`] = `
 <button
-  class="button button--lg button--secondary button--brand exampleClassName"
+  class="button button--layout-none button--primary button--lg button--variant-default exampleClassName"
   data-testid="example-class-name"
   type="button"
 >
-  Click
+  <span
+    class="button__text"
+  >
+    Click
+  </span>
 </button>
 `;
 
 exports[`<Button /> passes test ids down properly 1`] = `
 <button
-  class="button button--lg button--secondary button--brand"
+  class="button button--layout-none button--primary button--lg button--variant-default"
   data-testid="example-test-id"
   type="button"
 >
-  Click
+  <span
+    class="button__text"
+  >
+    Click
+  </span>
 </button>
 `;
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 6e8fc97c7..ed4d2cad6 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,4 +1,2 @@
 export { Button as default } from './Button';
 export type { ButtonProps } from './Button';
-export { Button as ButtonV2 } from './Button-v2';
-export type { ButtonV2Props } from './Button-v2';
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.module.css b/src/components/ButtonGroup/ButtonGroup-v2.module.css
deleted file mode 100644
index 905f4c040..000000000
--- a/src/components/ButtonGroup/ButtonGroup-v2.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*------------------------------------*\
-    # BUTTON GROUP
-\*------------------------------------*/
-
-/**
- * A group of buttons displayed in an organized fashion.
- */
-.button-group {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  gap: 1rem;
-}
-
-.button-group--horizontal {
-  flex-direction: row-reverse;
-}
-
-.button-group--vertical {
-  flex-direction: column;
-  align-content: center;
-}
-
-.button-group--horizontal-progressive {
-  flex-direction: row-reverse;
-  justify-content: space-between;
-}
-
-.button-group--horizontal-align-left {
-  flex-direction: row;
-}
\ No newline at end of file
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx b/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx
deleted file mode 100644
index 29353fc98..000000000
--- a/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { ButtonGroup } from './ButtonGroup-v2';
-import { ButtonV2 as Button } from '../Button';
-
-export default {
-  title: 'Components/V2/ButtonGroup',
-  component: ButtonGroup,
-  args: {
-    orientation: 'horizontal',
-    children: (
-      <>
-        <Button rank="primary">Button 1</Button>
-        <Button rank="secondary">Button 2</Button>
-      </>
-    ),
-  },
-  argTypes: {
-    buttonLayout: {
-      options: ['horizontal', 'vertical', 'horizontal-progressive'],
-    },
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  parameters: {
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof ButtonGroup>;
-
-export const Default: StoryObj<Args> = {};
-
-/**
- * Buttons can have a vertical layout.
- */
-export const Vertical: StoryObj<Args> = {
-  args: {
-    buttonLayout: 'vertical',
-  },
-};
-
-/**
- * Primary and secondary buttons can be put along the edges of the tertiary `Button`.
- */
-export const HorizontalProgressive: StoryObj<Args> = {
-  args: {
-    buttonLayout: 'horizontal-progressive',
-  },
-};
-
-/**
- * When using a tertiary button, you may adjust the layout to nudge the button's alignment to better flow
- * with adjacent content. Use `-ml-X` to set a negative margin within the `ButtonGroup`.
- */
-export const HorizontalProgressiveTertiary: StoryObj<Args> = {
-  args: {
-    buttonLayout: 'horizontal-progressive',
-    children: (
-      <>
-        <Button rank="primary">Primary Button</Button>
-        <Button className="-ml-size-2" rank="tertiary">
-          Tertiary Button
-        </Button>
-      </>
-    ),
-  },
-};
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.test.ts b/src/components/ButtonGroup/ButtonGroup-v2.test.ts
deleted file mode 100644
index 8f5dccffe..000000000
--- a/src/components/ButtonGroup/ButtonGroup-v2.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 './ButtonGroup-v2.stories';
-
-describe('<ButtonGroup /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.tsx b/src/components/ButtonGroup/ButtonGroup-v2.tsx
deleted file mode 100644
index b3e63a8f0..000000000
--- a/src/components/ButtonGroup/ButtonGroup-v2.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-
-import styles from './ButtonGroup-v2.module.css';
-
-type ButtonGroupProps = {
-  // Component API
-  /**
-   * The buttons. Should not be wrapped in another element – we just want the buttons.
-   */
-  children: ReactNode;
-  /**
-   * Additional classnames passed in for styling.
-   *
-   * This will be applied to the container we're placing around the buttons.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Whether the buttons should be laid out horizontally or stacked vertically (along with relative button position).
-   *
-   * (**Note**: `horizontal-align-left` should ONLY be used in combination with `AppNotification`)
-   */
-  buttonLayout?:
-    | 'horizontal'
-    | 'vertical'
-    | 'horizontal-progressive'
-    | 'horizontal-align-left';
-};
-
-/**
- * `import {ButtonGroup} from "@chanzuckerberg/eds";`
- *
- * A container for buttons grouped together horizontally or vertically.
- */
-export function ButtonGroup({
-  children,
-  className,
-  buttonLayout = 'horizontal',
-}: ButtonGroupProps) {
-  const componentClassName = clsx(
-    styles['button-group'],
-    buttonLayout && styles[`button-group--${buttonLayout}`],
-    className,
-  );
-
-  return <div className={componentClassName}>{children}</div>;
-}
diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
index fefcc6125..ff21ae5d9 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.css
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -6,36 +6,27 @@
  * A group of buttons displayed in an organized fashion.
  */
 .button-group {
-  display: inline-flex;
-  /* Wrap buttons if overflow, usually for smaller screen sizes. */
-  flex-wrap: wrap; 
-}
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 
-/**
- * Spacing variants.
- */
-.button-group--spacing-1x {
-  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  gap: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
-.button-group--spacing-max {
-  width: 100%;
-  justify-content: space-between;
+.button-group--horizontal {
+  flex-direction: row-reverse;
 }
 
-/**
- * Vertical orientation variant.
- */
 .button-group--vertical {
   flex-direction: column;
+  align-content: center;
 }
 
-/**
- * Vertical spacing max variant.
- * Hopefully no one actually ever uses this... 
- */
-.button-group--spacing-max.button-group--vertical {
-  width: 100%;
-  height: 100%;
+.button-group--horizontal-progressive {
+  flex-direction: row-reverse;
   justify-content: space-between;
 }
+
+.button-group--horizontal-align-left {
+  flex-direction: row;
+}
\ No newline at end of file
diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
index 5d013ac4e..e83c21729 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,22 +1,25 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
+
+import { ButtonGroup } from './ButtonGroup';
 import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
 
 export default {
   title: 'Components/ButtonGroup',
   component: ButtonGroup,
   args: {
-    spacing: '1x' as const,
-    orientation: 'horizontal' as const,
+    orientation: 'horizontal',
     children: (
       <>
-        <Button status="neutral">Button 1</Button>
-        <Button variant="primary">Button 2</Button>
+        <Button rank="primary">Button 1</Button>
+        <Button rank="secondary">Button 2</Button>
       </>
     ),
   },
   argTypes: {
+    buttonLayout: {
+      options: ['horizontal', 'vertical', 'horizontal-progressive'],
+    },
     children: {
       control: {
         type: null,
@@ -24,41 +27,46 @@ export default {
     },
   },
   parameters: {
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof ButtonGroup>;
 
 export const Default: StoryObj<Args> = {};
 
-export const SpacingNone: StoryObj<Args> = {
-  args: {
-    spacing: 'none',
-  },
-};
-
-export const SpacingMax: StoryObj<Args> = {
+/**
+ * Buttons can have a vertical layout.
+ */
+export const Vertical: StoryObj<Args> = {
   args: {
-    spacing: 'max',
+    buttonLayout: 'vertical',
   },
 };
 
-export const Vertical: StoryObj<Args> = {
+/**
+ * Primary and secondary buttons can be put along the edges of the tertiary `Button`.
+ */
+export const HorizontalProgressive: StoryObj<Args> = {
   args: {
-    orientation: 'vertical',
+    buttonLayout: 'horizontal-progressive',
   },
 };
 
-export const WithFiveButtons: StoryObj<Args> = {
+/**
+ * When using a tertiary button, you may adjust the layout to nudge the button's alignment to better flow
+ * with adjacent content. Use `-ml-X` to set a negative margin within the `ButtonGroup`.
+ */
+export const HorizontalProgressiveTertiary: StoryObj<Args> = {
   args: {
+    buttonLayout: 'horizontal-progressive',
     children: (
       <>
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-        <Button>Button 4</Button>
-        <Button variant="primary">Button 5</Button>
+        <Button rank="primary">Primary Button</Button>
+        <Button className="-ml-size-2" rank="tertiary">
+          Tertiary Button
+        </Button>
       </>
     ),
   },
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 4a4d1f227..8855120b6 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,9 +1,11 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
+
 import styles from './ButtonGroup.module.css';
 
-type Props = {
+type ButtonGroupProps = {
+  // Component API
   /**
    * The buttons. Should not be wrapped in another element – we just want the buttons.
    */
@@ -14,57 +16,34 @@ type Props = {
    * This will be applied to the container we're placing around the buttons.
    */
   className?: string;
+  // Design API
   /**
-   * How much space there should be between the buttons.
-   * 'max' does not work with 'vertical' orientation.
-   */
-  spacing?: 'none' | '1x' | 'max';
-  /**
-   * Whether the buttons should be laid out horizontally or stacked vertically.
-   * 'vertical' does not work with 'max' spacing.
+   * Whether the buttons should be laid out horizontally or stacked vertically (along with relative button position).
+   *
+   * (**Note**: `horizontal-align-left` should ONLY be used in combination with `AppNotification`)
    */
-  orientation?: 'horizontal' | 'vertical';
+  buttonLayout?:
+    | 'horizontal'
+    | 'vertical'
+    | 'horizontal-progressive'
+    | 'horizontal-align-left';
 };
 
 /**
  * `import {ButtonGroup} from "@chanzuckerberg/eds";`
  *
  * A container for buttons grouped together horizontally or vertically.
- *
- * Example usage:
- *
- * ```tsx
- * <ButtonGroup
- *   className={componentClassName}
- *   spacing='1x'
- *   orientation='vertical'
- * >
- *   <Button>Left button</Button>
- *   <Button>Right button</Button>
- * </ButtonGroup>
- * ```
  */
 export function ButtonGroup({
   children,
   className,
-  spacing = '1x',
-  orientation = 'horizontal',
-}: Props) {
-  if (
-    spacing === 'max' &&
-    orientation === 'vertical' &&
-    process.env.NODE_ENV !== 'production'
-  ) {
-    console.warn(
-      "*** Weird prop combo warning ***: Are you sure you want max spacing *and* vertical orientation? It's a valid combination, but it's extremely unlikely to ever be used intentionally.",
-    );
-  }
+  buttonLayout = 'horizontal',
+}: ButtonGroupProps) {
   const componentClassName = clsx(
     styles['button-group'],
-    spacing === '1x' && styles['button-group--spacing-1x'],
-    spacing === 'max' && styles['button-group--spacing-max'],
-    orientation === 'vertical' && styles['button-group--vertical'],
+    buttonLayout && styles[`button-group--${buttonLayout}`],
     className,
   );
+
   return <div className={componentClassName}>{children}</div>;
 }
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup-v2.test.ts.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup-v2.test.ts.snap
deleted file mode 100644
index 0851e7a52..000000000
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup-v2.test.ts.snap
+++ /dev/null
@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ButtonGroup /> (v2) Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="button-group button-group--horizontal"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 1
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 2
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<ButtonGroup /> (v2) HorizontalProgressive story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="button-group button-group--horizontal-progressive"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 1
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 2
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<ButtonGroup /> (v2) HorizontalProgressiveTertiary story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="button-group button-group--horizontal-progressive"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Primary Button
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--tertiary button--lg button--variant-default -ml-size-2"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Tertiary Button
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`<ButtonGroup /> (v2) Vertical story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="button-group button-group--vertical"
-  >
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 1
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 2
-      </span>
-    </button>
-  </div>
-</div>
-`;
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
index 38c708bda..33ccaea4d 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
@@ -2,113 +2,124 @@
 
 exports[`<ButtonGroup /> Default story renders snapshot 1`] = `
 <div
-  class="button-group button-group--spacing-1x"
+  class="p-8"
 >
-  <button
-    class="button button--lg button--secondary button--neutral"
-    type="button"
+  <div
+    class="button-group button-group--horizontal"
   >
-    Button 1
-  </button>
-  <button
-    class="button button--lg button--primary button--brand"
-    type="button"
-  >
-    Button 2
-  </button>
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 1
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--secondary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 2
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
-exports[`<ButtonGroup /> SpacingMax story renders snapshot 1`] = `
+exports[`<ButtonGroup /> HorizontalProgressive story renders snapshot 1`] = `
 <div
-  class="button-group button-group--spacing-max"
+  class="p-8"
 >
-  <button
-    class="button button--lg button--secondary button--neutral"
-    type="button"
-  >
-    Button 1
-  </button>
-  <button
-    class="button button--lg button--primary button--brand"
-    type="button"
+  <div
+    class="button-group button-group--horizontal-progressive"
   >
-    Button 2
-  </button>
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 1
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--secondary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 2
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
-exports[`<ButtonGroup /> SpacingNone story renders snapshot 1`] = `
+exports[`<ButtonGroup /> HorizontalProgressiveTertiary story renders snapshot 1`] = `
 <div
-  class="button-group"
+  class="p-8"
 >
-  <button
-    class="button button--lg button--secondary button--neutral"
-    type="button"
+  <div
+    class="button-group button-group--horizontal-progressive"
   >
-    Button 1
-  </button>
-  <button
-    class="button button--lg button--primary button--brand"
-    type="button"
-  >
-    Button 2
-  </button>
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Primary Button
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--tertiary button--lg button--variant-default -ml-size-2"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Tertiary Button
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`<ButtonGroup /> Vertical story renders snapshot 1`] = `
 <div
-  class="button-group button-group--spacing-1x button-group--vertical"
->
-  <button
-    class="button button--lg button--secondary button--neutral"
-    type="button"
-  >
-    Button 1
-  </button>
-  <button
-    class="button button--lg button--primary button--brand"
-    type="button"
-  >
-    Button 2
-  </button>
-</div>
-`;
-
-exports[`<ButtonGroup /> WithFiveButtons story renders snapshot 1`] = `
-<div
-  class="button-group button-group--spacing-1x"
+  class="p-8"
 >
-  <button
-    class="button button--lg button--secondary button--brand"
-    type="button"
-  >
-    Button 1
-  </button>
-  <button
-    class="button button--lg button--secondary button--brand"
-    type="button"
-  >
-    Button 2
-  </button>
-  <button
-    class="button button--lg button--secondary button--brand"
-    type="button"
-  >
-    Button 3
-  </button>
-  <button
-    class="button button--lg button--secondary button--brand"
-    type="button"
-  >
-    Button 4
-  </button>
-  <button
-    class="button button--lg button--primary button--brand"
-    type="button"
+  <div
+    class="button-group button-group--vertical"
   >
-    Button 5
-  </button>
+    <button
+      class="button button--layout-none button--primary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 1
+      </span>
+    </button>
+    <button
+      class="button button--layout-none button--secondary button--lg button--variant-default"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        Button 2
+      </span>
+    </button>
+  </div>
 </div>
 `;
diff --git a/src/components/ButtonGroup/index.ts b/src/components/ButtonGroup/index.ts
index 02bd9b97a..6c6477b12 100644
--- a/src/components/ButtonGroup/index.ts
+++ b/src/components/ButtonGroup/index.ts
@@ -1,2 +1 @@
 export { ButtonGroup as default } from './ButtonGroup';
-export { ButtonGroup as ButtonGroupV2 } from './ButtonGroup-v2';
diff --git a/src/components/Card/Card-v2.module.css b/src/components/Card/Card-v2.module.css
deleted file mode 100755
index 4b4dde4c3..000000000
--- a/src/components/Card/Card-v2.module.css
+++ /dev/null
@@ -1,142 +0,0 @@
-/*------------------------------------*\
-    # CARD
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * A card is a block that typically contains a title, image, text, and/or calls to action.
- * The `:where` pseudo class function allows easy overriding via className.
- */
-:where(.card) {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  padding: 1.5rem;
-  height: 100%;
-  border: calc(var(--eds-theme-border-width) * 1px) solid;
-
-  &:focus-visible {
-    outline-offset: 1px;
-    outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-  }
-
-  &.card--is-interactive {
-    cursor: pointer;
-  }
-}
-
-:where(.child-card) {
-  margin-top: 1rem;
-  border-radius: calc(var(--eds-border-radius-md) / 16 * 1rem);
-}
-
-/**
- * Container styles are reduced to be overridden by any containerColor settings
- */
-:where(.card--container-style-low) {
-  border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
-}
-
-:where(.card--container-style-high) {
-  border-color: var(--eds-theme-color-border-utility-default-high-emphasis);
-}
-
-:where(.card--container-style-none) {
-  border-color: transparent;
-}
-
-.card--container-color-default {
-  background-color: var(--eds-theme-color-background-utility-container);
-
-  &.card--is-interactive {
-    &:hover {
-      background-color: var(--eds-theme-color-background-utility-container-hover);
-    }
-
-    &:active {
-      background-color: var(--eds-theme-color-background-utility-container-active);
-    }
-  }
-}
-
-.card--container-color-call-out {
-  background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
-  border-color: var(--eds-theme-color-border-utility-informational);
-
-  &.card--is-interactive {
-    &:hover {
-      background-color: var(--eds-theme-color-background-utility-information-low-emphasis-hover);
-    }
-
-    &:active {
-      background-color: var(--eds-theme-color-background-utility-information-low-emphasis-active);
-    }
-  }
-}
-
-.card--is-dragging-true {
-  box-shadow: var(--eds-box-shadow-lg);
-}
-
-.card__header {
-  display: flex;
-  
-  &.header--size-sm {
-    gap: 0.5rem
-  }
-
-  &.header--size-md {
-    gap: 1rem;
-  }
-}
-
-.card__top-stripe {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-}
-
-:where(.card__top-stripe) {
-  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-}
-
-.top-stripe--medium {
-  height: 0.5rem;
-}
-
-.top-stripe--high {
-  height: 1rem;
-}
-
-.header__icon,
-.header__action {
-  flex-grow: 0;
-}
-
-.header__text,
-.header__custom {
-  flex-grow: 2;
-}
-
-.card__body {
-  flex-grow: 1;
-
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-.header__eyebrow {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.header__title {
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-.header__sub-title {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
\ No newline at end of file
diff --git a/src/components/Card/Card-v2.stories.tsx b/src/components/Card/Card-v2.stories.tsx
deleted file mode 100644
index 76aa09394..000000000
--- a/src/components/Card/Card-v2.stories.tsx
+++ /dev/null
@@ -1,410 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-// import { userEvent, within } from '@storybook/testing-library';
-import React from 'react';
-
-import { Card } from './Card-v2';
-
-import { ButtonV2 as Button } from '../Button';
-import { ButtonGroupV2 as ButtonGroup } from '../ButtonGroup';
-import Icon from '../Icon';
-import { MenuV2 as Menu } from '../Menu';
-import { Text } from '../Text/Text';
-
-export default {
-  title: 'Components/V2/Card',
-  component: Card,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-  args: {
-    className: 'w-96',
-    children: (
-      <>
-        <Card.Header>
-          <div className="fpo w-full">Card Header</div>
-        </Card.Header>
-        <Card.Body>
-          <div className="fpo">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <div className="fpo">Card Footer</div>
-        </Card.Footer>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-    topStripeColor: {
-      options: [
-        'bg-brand-blue-lowEmphasis',
-        'bg-brand-green-lowEmphasis',
-        'bg-brand-orange-lowEmphasis',
-        'bg-brand-pink-lowEmphasis',
-        'bg-brand-purple-lowEmphasis',
-        'bg-brand-red-lowEmphasis',
-        'bg-brand-yellow-lowEmphasis',
-      ],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Card>;
-
-/**
- * Cards come with structural containers for semantic grouping.
- */
-export const Default: StoryObj<Args> = {};
-
-/**
- * Cards can be made interactive by using `isInteractive`. With this, it will require being linked to `Link` or some control that performs an action or is being dragged.
- */
-export const IsInteractive: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-    isInteractive: true,
-  },
-};
-
-/**
- * This demonstrates all that's possible with the header component
- */
-export const WithFullHeader: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Card.Header
-          eyebrow="Recommended for you"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <div className="fpo">Card Footer</div>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * When using an icon in the header, we should not use `eyebrow` as it causes a noisy appearance. This is, however, technically possible.
- */
-export const WithFullHeaderAndIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Card.Header
-          icon="person-encircled"
-          subTitle={<span>Get to know your colleagues</span>}
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <div className="fpo">Card Footer</div>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * Example implementation of a menu with a clickable icon button, to demonstrate adding a menu to a card
- * @returns ReactNode
- */
-function CardMenu() {
-  return (
-    <Menu>
-      <Menu.PlainButton>
-        <Icon
-          name="dots-horizontal"
-          purpose="informative"
-          size="2rem"
-          title="show more"
-        />
-      </Menu.PlainButton>
-      <Menu.Items data-testid="menu-content">
-        <Menu.Item
-          href="https://headlessui.com/react/menu#menu-button"
-          icon="link"
-        >
-          Headless UI Docs
-        </Menu.Item>
-        <Menu.Item
-          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-          icon="link"
-        >
-          MDN: Menu
-        </Menu.Item>
-        <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
-          Trigger Action
-        </Menu.Item>
-        <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-          Not Possible (disabled)
-        </Menu.Item>
-      </Menu.Items>
-    </Menu>
-  );
-}
-
-/**
- * You can combine a small header with a menu icon in the top-right.
- */
-export const WithSmallFullHeaderAndIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Card.Header
-          action={<CardMenu />}
-          icon="person-encircled"
-          size="sm"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <div className="fpo">Card Footer</div>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * It's possible to customize the card header with formatted text and content, which replaces the pre-defined slots
- */
-export const WithCustomizedHeader: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Card.Header className="mb-size-2">
-          Displaying <strong>some text</strong> with <em>mixed formatting</em>.
-        </Card.Header>
-        <Card.Body>
-          <div className="fpo">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <div className="fpo">Card Footer</div>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-export const WithHorizontalPrimaryButton: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Card.Header
-          action={<CardMenu />}
-          eyebrow="Recommended for you"
-          size="md"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo my-4">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </ButtonGroup>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-export const CustomBrandCard: StoryObj<Args> = {
-  args: {
-    containerColor: 'custom-brand',
-    className: 'border-brand-red bg-brand-red w-96',
-  },
-};
-
-/**
- * You can add a stripe along the top of a card to enhance and emphasis its appearance
- */
-export const TopStripe: StoryObj<Args> = {
-  args: {
-    topStripe: 'medium',
-    children: (
-      <>
-        <Card.Header
-          action={<CardMenu />}
-          eyebrow="Recommended for you"
-          size="md"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo my-4">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </ButtonGroup>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * Cards also allow for using custom top stripe colors. Use one of the low-emphasis brand colors (see the control above to test)
- */
-export const CustomTopStripe: StoryObj<Args> = {
-  args: {
-    topStripe: 'high',
-    topStripeColor: 'bg-brand-purple-lowEmphasis',
-    children: (
-      <>
-        <Card.Header
-          action={<CardMenu />}
-          eyebrow="Recommended for you"
-          size="md"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo my-4">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </ButtonGroup>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * Another visual change to cards allow for adjusting the background color, to change how the card looks, using `containerColor`
- */
-export const BackgroundCallout: StoryObj<Args> = {
-  args: {
-    containerColor: 'call-out',
-    children: (
-      <>
-        <Card.Header
-          action={<CardMenu />}
-          eyebrow="Recommended for you"
-          size="md"
-          subTitle="Get to know your colleagues"
-          title="Question of the day"
-        />
-        <Card.Body>
-          <div className="fpo my-4">Card Body</div>
-        </Card.Body>
-        <Card.Footer>
-          <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </ButtonGroup>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
-
-/**
- * Cards have hierarchy, and can contain other cards with one level. When using a nested card, you can use `.ChildCard`,
- * which comes preconfigured with some settings and defaults applied. All the sub-components of card work within `.Childcard`.
- */
-export const ChildCards: StoryObj<Args> = {
-  args: {
-    containerColor: 'call-out',
-    topStripe: 'high',
-    containerStyle: 'high',
-    children: (
-      <>
-        <Card.Header size="md" title="Card Group"></Card.Header>
-        <Card.Body>
-          <Card.ChildCard draggable="true" isInteractive>
-            <Card.Header
-              action={<CardMenu />}
-              eyebrow="Eyebrow Text"
-              subTitle="Sub-title text"
-              title="Title text"
-            />
-          </Card.ChildCard>
-        </Card.Body>
-      </>
-    ),
-  },
-};
-
-/**
- * Cards can be marked as currently being dragged. This can be used in combination with the `draggable` attribute from HTML,
- * or to work with a drag-n-drop library.
- */
-export const WhileDragging: StoryObj<Args> = {
-  args: {
-    isDragging: true,
-  },
-};
-
-/**
- * Implementation Example: Cancelling a card membership
- */
-export const CancelMembership: StoryObj<Args> = {
-  parameters: {
-    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
-  },
-  args: {
-    children: (
-      <>
-        <Card.Header
-          size="sm"
-          subTitle="We're sad to see you go"
-          title="Cancel membership?"
-        />
-        <Card.Body>
-          <Text className="py-4" preset="body-sm">
-            Lorem ipsum dolor sit amet consectetur. Id pretium consequat
-            consequat aliquam arcu
-          </Text>
-        </Card.Body>
-        <Card.Footer>
-          <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Button
-              onClick={() => {}}
-              rank="primary"
-              size="md"
-              variant="critical"
-            >
-              Confirm cancellation
-            </Button>
-          </ButtonGroup>
-        </Card.Footer>
-      </>
-    ),
-  },
-};
diff --git a/src/components/Card/Card-v2.test.ts b/src/components/Card/Card-v2.test.ts
deleted file mode 100644
index 5ff7a1619..000000000
--- a/src/components/Card/Card-v2.test.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-
-import * as stories from './Card-v2.stories';
-
-describe('<Card /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/Card/Card-v2.tsx b/src/components/Card/Card-v2.tsx
deleted file mode 100644
index 7beee1656..000000000
--- a/src/components/Card/Card-v2.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import clsx from 'clsx';
-import type { HTMLAttributes, ReactNode } from 'react';
-import React from 'react';
-
-import type { Size } from '../../util/variant-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-
-import Text from '../Text';
-
-import styles from './Card-v2.module.css';
-
-export interface CardProps extends HTMLAttributes<HTMLElement> {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Treatment for the card's container element. When using `"custom-brand"`, set the
-   * container background and border color using the brand border/bg utility classes.
-   *
-   * **Default is `"default"`**.
-   */
-  containerColor?: 'default' | 'call-out' | 'custom-brand';
-  /**
-   * The bounding box and other container emphasis details
-   *
-   * **Default is `"low"`**.
-   */
-  containerStyle?: 'none' | 'low' | 'high';
-  /**
-   * State to trigger when the card is being dragged. Can be combined with the HTML `draggable` property,
-   * or used programmatically with drag and drop libraries
-   */
-  isDragging?: boolean;
-  /**
-   * Whether `Card` itself is directly interactive (clicking will perform some navigation or action)
-   *
-   * **Default is `false`**.
-   */
-  isInteractive?: boolean;
-  /**
-   * Decorative top bar used to cause a highlight on a given card. When present, this
-   * corresponds to a specified emphasis level.
-   *
-   * **Default is `"none"`**.
-   */
-  topStripe?: 'none' | 'medium' | 'high';
-  /**
-   * Class to adjust top stripe background color. Choose from brand-background tokens utility classes.
-   */
-  topStripeColor?: string;
-}
-export interface CardSubComponentProps {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-}
-
-export interface CardHeaderProps {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component. Used in place of any of the above named slots.
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Component slot to add in an action-focused area to a card. Typically a button with hidden options.
-   */
-  action?: ReactNode;
-  /**
-   * Text above the main title of the card, to add category text/information.
-   */
-  eyebrow?: string;
-  /**
-   * Card slot for an icon sitting in front of the card header text
-   */
-  icon?: IconName;
-  /**
-   * Overall size treatment of the Card header
-   */
-  size?: Extract<Size, 'sm' | 'md'>;
-  /**
-   * Secondary text used to describe the content in more detail
-   */
-  subTitle?: ReactNode;
-  /**
-   * The title/heading of the component
-   */
-  title?: string;
-}
-
-/**
- * `import {Card} from "@chanzuckerberg/eds";`
- *
- * Card component is the outer wrapper for the block that typically contains a title, image,
- * text, and/or calls to action.
- */
-export const Card = ({
-  containerColor = 'default',
-  className,
-  children,
-  containerStyle = 'low',
-  isDragging,
-  isInteractive = false,
-  topStripe = 'none',
-  topStripeColor = '',
-  ...other
-}: CardProps) => {
-  const componentClassName = clsx(
-    styles['card'],
-    styles[`card--container-style-${containerStyle}`],
-    styles[`card--container-color-${containerColor}`],
-    typeof isDragging !== 'undefined' &&
-      styles[`card--is-dragging-${isDragging}`],
-    isInteractive && styles['card--is-interactive'],
-    className,
-  );
-  return (
-    <article className={componentClassName} {...other}>
-      {children}
-      {topStripe && (
-        <div
-          className={clsx(
-            styles['card__top-stripe'],
-            styles[`top-stripe--${topStripe}`],
-            topStripeColor,
-          )}
-        ></div>
-      )}
-    </article>
-  );
-};
-
-/**
- * Body of the Card component.
- */
-const CardBody = ({ children, className, ...other }: CardSubComponentProps) => {
-  const componentClassName = clsx(styles['card__body'], className);
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
-
-/**
- * Footer of the Card component.
- */
-const CardFooter = ({
-  children,
-  className,
-  ...other
-}: CardSubComponentProps) => {
-  const componentClassName = clsx(styles['card__footer'], className);
-  return (
-    <footer className={componentClassName} {...other}>
-      {children}
-    </footer>
-  );
-};
-
-/**
- * Header of the Card component.
- */
-const CardHeader = ({
-  action,
-  children,
-  className,
-  eyebrow,
-  icon,
-  size = 'md',
-  subTitle,
-  title,
-  ...other
-}: CardHeaderProps) => {
-  const componentClassName = clsx(
-    styles['card__header'],
-    size && styles[`header--size-${size}`],
-    className,
-  );
-  const headerEyebrowClassName = clsx(
-    styles['header__eyebrow'],
-    size && styles[`header--size-${size}`],
-  );
-  const headerTitleClassName = clsx(
-    styles['header__title'],
-    size && styles[`header--size-${size}`],
-  );
-  const headerSubTitleClassName = clsx(
-    styles['header__sub-title'],
-    size && styles[`header--size-${size}`],
-  );
-
-  return children ? (
-    <header className={componentClassName} {...other}>
-      <div className={styles['header__custom']}>{children}</div>
-    </header>
-  ) : (
-    <header className={componentClassName} {...other}>
-      {icon && (
-        <div className={styles['header__icon']}>
-          <Icon
-            name={icon}
-            purpose="decorative"
-            size={size === 'sm' ? '1rem' : '1.5rem'}
-          />
-        </div>
-      )}
-      <div className={styles['header__text']}>
-        {eyebrow && (
-          <Text
-            as="div"
-            className={headerEyebrowClassName}
-            preset={size === 'sm' ? 'overline-sm' : 'overline-md'}
-          >
-            {eyebrow}
-          </Text>
-        )}
-        {title && (
-          <Text
-            as="div"
-            className={headerTitleClassName}
-            preset={size === 'sm' ? 'title-sm' : 'headline-sm'}
-          >
-            {title}
-          </Text>
-        )}
-        {subTitle && (
-          <Text
-            as="div"
-            className={headerSubTitleClassName}
-            preset={size === 'sm' ? 'body-sm' : 'body-lg'}
-          >
-            {subTitle}
-          </Text>
-        )}
-      </div>
-      {action && <div className={styles['header__action']}>{action}</div>}
-    </header>
-  );
-};
-
-const ChildCard = ({ className, ...other }: CardProps) => {
-  const childClassName = clsx(className, styles['child-card']);
-  return <Card {...other} className={childClassName} containerStyle="high" />;
-};
-
-Card.displayName = 'Card';
-CardBody.displayName = 'Card.Body';
-CardFooter.displayName = 'Card.Footer';
-CardHeader.displayName = 'Card.Header';
-ChildCard.displayName = 'Card.ChildCard';
-
-Card.Body = CardBody;
-Card.Footer = CardFooter;
-Card.Header = CardHeader;
-Card.ChildCard = ChildCard;
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index 7f1f3a93a..424e090e0 100755
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -1,41 +1,142 @@
 /*------------------------------------*\
     # CARD
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * A card is a block that typically contains a title, image, text, and/or calls to action.
  * The `:where` pseudo class function allows easy overriding via className.
  */
 :where(.card) {
+  position: relative;
   display: flex;
   flex-direction: column;
-  padding: calc(var(--eds-size-2) / 16 * 1rem);
+
+  padding: calc(var(--eds-size-3) / 16 * 1rem);
   height: 100%;
-  border-radius: calc(var(--eds-border-radius-lg) * 1px);
-  border-width: calc(var(--eds-theme-border-width) * 1px);
-  border-style: solid;
-  border-color: var(--eds-theme-color-border-neutral-subtle);
-  background-color: var(--eds-theme-color-background-neutral-default);
+  border: calc(var(--eds-theme-border-width) * 1px) solid;
+
+  &:focus-visible {
+    outline-offset: 1px;
+    outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+  }
+
+  &.card--is-interactive {
+    cursor: pointer;
+  }
 }
 
-/**
- * Card that appears raised to show interactivity/emphasis.
- */
-.card--raised {
-  box-shadow: var(--eds-box-shadow-md);
-  border-color: var(--eds-theme-color-background-neutral-default);
+:where(.child-card) {
+  margin-top: calc(var(--eds-size-2) / 16 * 1rem);
+  border-radius: calc(var(--eds-border-radius-md) / 16 * 1rem);
 }
 
 /**
- * Card that is being dragged in drag and drop.
+ * Container styles are reduced to be overridden by any containerColor settings
  */
-.card--dragging {
-  box-shadow: var(--eds-box-shadow-xl);
+:where(.card--container-style-low) {
+  border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
+}
+
+:where(.card--container-style-high) {
+  border-color: var(--eds-theme-color-border-utility-default-high-emphasis);
+}
+
+:where(.card--container-style-none) {
+  border-color: transparent;
+}
+
+.card--container-color-default {
+  background-color: var(--eds-theme-color-background-utility-container);
+
+  &.card--is-interactive {
+    &:hover {
+      background-color: var(--eds-theme-color-background-utility-container-hover);
+    }
+
+    &:active {
+      background-color: var(--eds-theme-color-background-utility-container-active);
+    }
+  }
+}
+
+.card--container-color-call-out {
+  background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+  border-color: var(--eds-theme-color-border-utility-informational);
+
+  &.card--is-interactive {
+    &:hover {
+      background-color: var(--eds-theme-color-background-utility-information-low-emphasis-hover);
+    }
+
+    &:active {
+      background-color: var(--eds-theme-color-background-utility-information-low-emphasis-active);
+    }
+  }
+}
+
+.card--is-dragging-true {
+  box-shadow: var(--eds-box-shadow-lg);
+}
+
+.card__header {
+  display: flex;
+  
+  &.header--size-sm {
+    gap: calc(var(--eds-size-1) / 16 * 1rem)
+  }
+
+  &.header--size-md {
+    gap: calc(var(--eds-size-2) / 16 * 1rem);
+  }
+}
+
+.card__top-stripe {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+}
+
+:where(.card__top-stripe) {
+  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+}
+
+.top-stripe--medium {
+  height: calc(var(--eds-size-1) / 16 * 1rem);
+}
+
+.top-stripe--high {
+  height: calc(var(--eds-size-2) / 16 * 1rem);
+}
+
+.header__icon,
+.header__action {
+  flex-grow: 0;
+}
+
+.header__text,
+.header__custom {
+  flex-grow: 2;
 }
 
-/**
- * Card body.
- */
 .card__body {
-  flex: 1;
+  flex-grow: 1;
+
+  color: var(--eds-theme-color-text-utility-default-primary);
 }
+
+.header__eyebrow {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.header__title {
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.header__sub-title {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
\ No newline at end of file
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
index 4dd37a801..fa382a870 100644
--- a/src/components/Card/Card.stories.tsx
+++ b/src/components/Card/Card.stories.tsx
@@ -1,24 +1,20 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { Card } from './Card';
-import { Avatar } from '../Avatar/Avatar';
-import { Hr } from '../Hr/Hr';
-import { Skeleton } from '../Skeleton/Skeleton';
+
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Icon from '../Icon';
+import { Menu } from '../Menu/Menu';
 import { Text } from '../Text/Text';
 
 export default {
   title: 'Components/Card',
   component: Card,
-  subcomponents: {
-    CardHeader: Card.Header,
-    CardBody: Card.Body,
-    CardFooter: Card.Footer,
-  },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
   args: {
@@ -26,7 +22,7 @@ export default {
     children: (
       <>
         <Card.Header>
-          <div className="fpo">Card Header</div>
+          <div className="fpo w-full">Card Header</div>
         </Card.Header>
         <Card.Body>
           <div className="fpo">Card Body</div>
@@ -43,13 +39,24 @@ export default {
         type: null,
       },
     },
+    topStripeColor: {
+      options: [
+        'bg-brand-blue-lowEmphasis',
+        'bg-brand-green-lowEmphasis',
+        'bg-brand-orange-lowEmphasis',
+        'bg-brand-pink-lowEmphasis',
+        'bg-brand-purple-lowEmphasis',
+        'bg-brand-red-lowEmphasis',
+        'bg-brand-yellow-lowEmphasis',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
   },
 } as Meta<Args>;
 
-type Args = React.ComponentProps<typeof Card> & {
-  // Added to support implementation example below
-  isLoading: boolean;
-};
+type Args = React.ComponentProps<typeof Card>;
 
 /**
  * Cards come with structural containers for semantic grouping.
@@ -57,140 +64,346 @@ type Args = React.ComponentProps<typeof Card> & {
 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.
+ * Cards can be made interactive by using `isInteractive`. With this, it will require being linked to `Link` or some control that performs an action or is being dragged.
  */
-export const Horizontal: StoryObj<Args> = {
+export const IsInteractive: StoryObj<Args> = {
   args: {
-    className: 'flex-row',
+    ...Default.args,
+    isInteractive: true,
   },
 };
 
 /**
- * Shows `Card` with `elevation` set to `"raised"`
+ * This demonstrates all that's possible with the header component
  */
-export const Raised: StoryObj<Args> = {
+export const WithFullHeader: StoryObj<Args> = {
   args: {
-    elevation: 'raised',
+    children: (
+      <>
+        <Card.Header
+          eyebrow="Recommended for you"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <div className="fpo">Card Footer</div>
+        </Card.Footer>
+      </>
+    ),
   },
 };
 
 /**
- * Shows `Card` with `elevation` set to `"dragging"`
+ * When using an icon in the header, we should not use `eyebrow` as it causes a noisy appearance. This is, however, technically possible.
  */
-export const Dragging: StoryObj<Args> = {
+export const WithFullHeaderAndIcon: StoryObj<Args> = {
   args: {
-    elevation: 'dragging',
+    children: (
+      <>
+        <Card.Header
+          icon="person-encircled"
+          subTitle={<span>Get to know your colleagues</span>}
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <div className="fpo">Card Footer</div>
+        </Card.Footer>
+      </>
+    ),
   },
 };
 
 /**
- * This implementation example shows how you might use `Skeleton` to implement a loading state
- * for a recipe-like Profile card. Initially, the component would use the `Skeleton` instances,
- * and once the data is fetched, replace those with the actual contents.
+ * Example implementation of a menu with a clickable icon button, to demonstrate adding a menu to a card
+ * @returns ReactNode
+ */
+function CardMenu() {
+  return (
+    <Menu>
+      <Menu.PlainButton>
+        <Icon
+          name="dots-horizontal"
+          purpose="informative"
+          size="2rem"
+          title="show more"
+        />
+      </Menu.PlainButton>
+      <Menu.Items data-testid="menu-content">
+        <Menu.Item
+          href="https://headlessui.com/react/menu#menu-button"
+          icon="link"
+        >
+          Headless UI Docs
+        </Menu.Item>
+        <Menu.Item
+          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
+          icon="link"
+        >
+          MDN: Menu
+        </Menu.Item>
+        <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
+          Trigger Action
+        </Menu.Item>
+        <Menu.Item disabled href="https://example.org/" icon="warning-filled">
+          Not Possible (disabled)
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
+  );
+}
+
+/**
+ * You can combine a small header with a menu icon in the top-right.
  */
-export const LoadingProfileCard: StoryObj<Args> = {
+export const WithSmallFullHeaderAndIcon: StoryObj<Args> = {
   args: {
-    isLoading: true,
+    children: (
+      <>
+        <Card.Header
+          action={<CardMenu />}
+          icon="person-encircled"
+          size="sm"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <div className="fpo">Card Footer</div>
+        </Card.Footer>
+      </>
+    ),
   },
-  parameters: {
-    badges: ['intro-1.3', 'implementationExample'],
-  },
-  render: ({ isLoading, ...cardProps }) => {
-    return (
-      <div aria-label="Loading example profile card" role="status">
-        <Card {...cardProps}>
-          <Card.Body>
-            {isLoading && (
-              <>
-                <Skeleton.Circle className="mb-3" isAnimating width="48px" />
-                <Skeleton.Text
-                  className="mb-2 mt-2"
-                  height="4rem"
-                  isAnimating
-                  width="15ch"
-                />
-                <Hr />
-                <Skeleton.Text
-                  className="mb-2 mt-2"
-                  height="1.5rem"
-                  isAnimating
-                  width="30ch"
-                />
-                <Skeleton.Text
-                  className="mb-2 mt-2"
-                  height="1.5rem"
-                  isAnimating
-                  width="25ch"
-                />
-                <Skeleton.Text
-                  className="mb-2 mt-2"
-                  height="1.5rem"
-                  isAnimating
-                  width="10ch"
-                />
-              </>
-            )}
-            {!isLoading && (
-              <>
-                <Avatar size="lg" user={{ fullName: 'Josephine Smith' }} />
-                <Text className="mb-2 mt-2 text-neutral-strong">
-                  Example Job Title
-                </Text>
-                <Text className="mb-2 mt-2 text-neutral-strong">
-                  Example Company Name
-                </Text>
-                <Hr />
-                <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 text-neutral-default">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                </Text>
-                <Text className="mb-2 mt-2 text-neutral-default">
-                  Lorem ipsum dolor sit amet.
-                </Text>
-              </>
-            )}
-          </Card.Body>
-        </Card>
-      </div>
-    );
+};
+
+/**
+ * It's possible to customize the card header with formatted text and content, which replaces the pre-defined slots
+ */
+export const WithCustomizedHeader: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Card.Header className="mb-size-2">
+          Displaying <strong>some text</strong> with <em>mixed formatting</em>.
+        </Card.Header>
+        <Card.Body>
+          <div className="fpo">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <div className="fpo">Card Footer</div>
+        </Card.Footer>
+      </>
+    ),
   },
 };
 
-const InteractiveCard = () => {
-  const [isGrabbing, setIsGrabbing] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
+export const WithHorizontalPrimaryButton: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Card.Header
+          action={<CardMenu />}
+          eyebrow="Recommended for you"
+          size="md"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo my-4">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </ButtonGroup>
+        </Card.Footer>
+      </>
+    ),
+  },
+};
 
-  return (
-    <Card
-      elevation={isHovering ? 'raised' : 'none'}
-      isDragging={isGrabbing}
-      onMouseDown={() => setIsGrabbing(true)}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-      onMouseUp={() => setIsGrabbing(false)}
-    >
-      <Card.Body>
-        <div className="fpo p-6">Card Contents</div>
-      </Card.Body>
-    </Card>
-  );
+export const CustomBrandCard: StoryObj<Args> = {
+  args: {
+    containerColor: 'custom-brand',
+    className: 'border-brand-red bg-brand-red w-96',
+  },
+};
+
+/**
+ * You can add a stripe along the top of a card to enhance and emphasis its appearance
+ */
+export const TopStripe: StoryObj<Args> = {
+  args: {
+    topStripe: 'medium',
+    children: (
+      <>
+        <Card.Header
+          action={<CardMenu />}
+          eyebrow="Recommended for you"
+          size="md"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo my-4">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </ButtonGroup>
+        </Card.Footer>
+      </>
+    ),
+  },
 };
 
 /**
- * You can implement appearance changes using `elevation`. In this implementation example,
- * we show how to build the basics of a drag/hover behavior using react state, `isDragging`, and `elevation`.
- *
- * To `Card`, we add handlers on `onMouseDown`, `onMouseEnter`, `onMouseLeave`, and `onMouseUp`.
+ * Cards also allow for using custom top stripe colors. Use one of the low-emphasis brand colors (see the control above to test)
  */
-export const InteractiveOnHover: StoryObj<Args> = {
-  render: (args) => <InteractiveCard {...args} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const cardContents = await canvas.findByText('Card Contents');
+export const CustomTopStripe: StoryObj<Args> = {
+  args: {
+    topStripe: 'high',
+    topStripeColor: 'bg-brand-purple-lowEmphasis',
+    children: (
+      <>
+        <Card.Header
+          action={<CardMenu />}
+          eyebrow="Recommended for you"
+          size="md"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo my-4">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </ButtonGroup>
+        </Card.Footer>
+      </>
+    ),
+  },
+};
 
-    await userEvent.hover(cardContents);
+/**
+ * Another visual change to cards allow for adjusting the background color, to change how the card looks, using `containerColor`
+ */
+export const BackgroundCallout: StoryObj<Args> = {
+  args: {
+    containerColor: 'call-out',
+    children: (
+      <>
+        <Card.Header
+          action={<CardMenu />}
+          eyebrow="Recommended for you"
+          size="md"
+          subTitle="Get to know your colleagues"
+          title="Question of the day"
+        />
+        <Card.Body>
+          <div className="fpo my-4">Card Body</div>
+        </Card.Body>
+        <Card.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </ButtonGroup>
+        </Card.Footer>
+      </>
+    ),
+  },
+};
+
+/**
+ * Cards have hierarchy, and can contain other cards with one level. When using a nested card, you can use `.ChildCard`,
+ * which comes preconfigured with some settings and defaults applied. All the sub-components of card work within `.Childcard`.
+ */
+export const ChildCards: StoryObj<Args> = {
+  args: {
+    containerColor: 'call-out',
+    topStripe: 'high',
+    containerStyle: 'high',
+    children: (
+      <>
+        <Card.Header size="md" title="Card Group"></Card.Header>
+        <Card.Body>
+          <Card.ChildCard draggable="true" isInteractive>
+            <Card.Header
+              action={<CardMenu />}
+              eyebrow="Eyebrow Text"
+              subTitle="Sub-title text"
+              title="Title text"
+            />
+          </Card.ChildCard>
+        </Card.Body>
+      </>
+    ),
+  },
+};
+
+/**
+ * Cards can be marked as currently being dragged. This can be used in combination with the `draggable` attribute from HTML,
+ * or to work with a drag-n-drop library.
+ */
+export const WhileDragging: StoryObj<Args> = {
+  args: {
+    isDragging: true,
+  },
+};
+
+/**
+ * Implementation Example: Cancelling a card membership
+ */
+export const CancelMembership: StoryObj<Args> = {
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
+  },
+  args: {
+    children: (
+      <>
+        <Card.Header
+          size="sm"
+          subTitle="We're sad to see you go"
+          title="Cancel membership?"
+        />
+        <Card.Body>
+          <Text className="py-4" preset="body-sm">
+            Lorem ipsum dolor sit amet consectetur. Id pretium consequat
+            consequat aliquam arcu
+          </Text>
+        </Card.Body>
+        <Card.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Button
+              onClick={() => {}}
+              rank="primary"
+              size="md"
+              variant="critical"
+            >
+              Confirm cancellation
+            </Button>
+          </ButtonGroup>
+        </Card.Footer>
+      </>
+    ),
   },
 };
diff --git a/src/components/Card/Card.test.ts b/src/components/Card/Card.test.ts
index 7fa6238b8..3dfa80258 100644
--- a/src/components/Card/Card.test.ts
+++ b/src/components/Card/Card.test.ts
@@ -1,5 +1,6 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
+
 import * as stories from './Card.stories';
 
 describe('<Card />', () => {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 0058df565..1ac1c3549 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,9 +1,16 @@
 import clsx from 'clsx';
 import type { HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
+
+import type { Size } from '../../util/variant-types';
+import Icon, { type IconName } from '../Icon';
+
+import Text from '../Text';
+
 import styles from './Card.module.css';
 
 export interface CardProps extends HTMLAttributes<HTMLElement> {
+  // Component API
   /**
    * Child node(s) that can be nested inside component
    */
@@ -12,24 +19,45 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
   /**
-   * Elevation variants
-   * - **none** renders the card with no elevation (no box-shadow applied)
-   * - **raised** renders the card that is raised off of the canvas (box-shadow applied)
-   * - **dragging** renders the card that is raised even further off the canvas (during drag)
+   * Treatment for the card's container element. When using `"custom-brand"`, set the
+   * container background and border color using the brand border/bg utility classes.
    *
-   * **Default is `'none'`**.
+   * **Default is `"default"`**.
    */
-  elevation?: 'none' | 'raised' | 'dragging';
+  containerColor?: 'default' | 'call-out' | 'custom-brand';
   /**
-   * Property to apply a "dragging" elevation. Can be use while card is in a moving state.
+   * The bounding box and other container emphasis details
    *
-   * **Default is `false`**.
+   * **Default is `"low"`**.
+   */
+  containerStyle?: 'none' | 'low' | 'high';
+  /**
+   * State to trigger when the card is being dragged. Can be combined with the HTML `draggable` property,
+   * or used programmatically with drag and drop libraries
    */
   isDragging?: boolean;
+  /**
+   * Whether `Card` itself is directly interactive (clicking will perform some navigation or action)
+   *
+   * **Default is `false`**.
+   */
+  isInteractive?: boolean;
+  /**
+   * Decorative top bar used to cause a highlight on a given card. When present, this
+   * corresponds to a specified emphasis level.
+   *
+   * **Default is `"none"`**.
+   */
+  topStripe?: 'none' | 'medium' | 'high';
+  /**
+   * Class to adjust top stripe background color. Choose from brand-background tokens utility classes.
+   */
+  topStripeColor?: string;
 }
-
 export interface CardSubComponentProps {
+  // Component API
   /**
    * Child node(s) that can be nested inside component
    */
@@ -40,6 +68,43 @@ export interface CardSubComponentProps {
   className?: string;
 }
 
+export interface CardHeaderProps {
+  // Component API
+  /**
+   * Child node(s) that can be nested inside component. Used in place of any of the above named slots.
+   */
+  children?: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  // Design API
+  /**
+   * Component slot to add in an action-focused area to a card. Typically a button with hidden options.
+   */
+  action?: ReactNode;
+  /**
+   * Text above the main title of the card, to add category text/information.
+   */
+  eyebrow?: string;
+  /**
+   * Card slot for an icon sitting in front of the card header text
+   */
+  icon?: IconName;
+  /**
+   * Overall size treatment of the Card header
+   */
+  size?: Extract<Size, 'sm' | 'md'>;
+  /**
+   * Secondary text used to describe the content in more detail
+   */
+  subTitle?: ReactNode;
+  /**
+   * The title/heading of the component
+   */
+  title?: string;
+}
+
 /**
  * `import {Card} from "@chanzuckerberg/eds";`
  *
@@ -47,22 +112,37 @@ export interface CardSubComponentProps {
  * text, and/or calls to action.
  */
 export const Card = ({
+  containerColor = 'default',
   className,
   children,
-  elevation = 'none',
-  isDragging = false,
+  containerStyle = 'low',
+  isDragging,
+  isInteractive = false,
+  topStripe = 'none',
+  topStripeColor = '',
   ...other
 }: CardProps) => {
   const componentClassName = clsx(
     styles['card'],
-    elevation === 'raised' && styles['card--raised'],
-    elevation === 'dragging' && styles['card--dragging'],
-    isDragging && styles['card--dragging'],
+    styles[`card--container-style-${containerStyle}`],
+    styles[`card--container-color-${containerColor}`],
+    typeof isDragging !== 'undefined' &&
+      styles[`card--is-dragging-${isDragging}`],
+    isInteractive && styles['card--is-interactive'],
     className,
   );
   return (
     <article className={componentClassName} {...other}>
       {children}
+      {topStripe && (
+        <div
+          className={clsx(
+            styles['card__top-stripe'],
+            styles[`top-stripe--${topStripe}`],
+            topStripeColor,
+          )}
+        ></div>
+      )}
     </article>
   );
 };
@@ -99,23 +179,95 @@ const CardFooter = ({
  * Header of the Card component.
  */
 const CardHeader = ({
+  action,
   children,
   className,
+  eyebrow,
+  icon,
+  size = 'md',
+  subTitle,
+  title,
   ...other
-}: CardSubComponentProps) => {
-  const componentClassName = clsx(styles['card__header'], className);
-  return (
+}: CardHeaderProps) => {
+  const componentClassName = clsx(
+    styles['card__header'],
+    size && styles[`header--size-${size}`],
+    className,
+  );
+  const headerEyebrowClassName = clsx(
+    styles['header__eyebrow'],
+    size && styles[`header--size-${size}`],
+  );
+  const headerTitleClassName = clsx(
+    styles['header__title'],
+    size && styles[`header--size-${size}`],
+  );
+  const headerSubTitleClassName = clsx(
+    styles['header__sub-title'],
+    size && styles[`header--size-${size}`],
+  );
+
+  return children ? (
     <header className={componentClassName} {...other}>
-      {children}
+      <div className={styles['header__custom']}>{children}</div>
+    </header>
+  ) : (
+    <header className={componentClassName} {...other}>
+      {icon && (
+        <div className={styles['header__icon']}>
+          <Icon
+            name={icon}
+            purpose="decorative"
+            size={size === 'sm' ? '1rem' : '1.5rem'}
+          />
+        </div>
+      )}
+      <div className={styles['header__text']}>
+        {eyebrow && (
+          <Text
+            as="div"
+            className={headerEyebrowClassName}
+            preset={size === 'sm' ? 'overline-sm' : 'overline-md'}
+          >
+            {eyebrow}
+          </Text>
+        )}
+        {title && (
+          <Text
+            as="div"
+            className={headerTitleClassName}
+            preset={size === 'sm' ? 'title-sm' : 'headline-sm'}
+          >
+            {title}
+          </Text>
+        )}
+        {subTitle && (
+          <Text
+            as="div"
+            className={headerSubTitleClassName}
+            preset={size === 'sm' ? 'body-sm' : 'body-lg'}
+          >
+            {subTitle}
+          </Text>
+        )}
+      </div>
+      {action && <div className={styles['header__action']}>{action}</div>}
     </header>
   );
 };
 
+const ChildCard = ({ className, ...other }: CardProps) => {
+  const childClassName = clsx(className, styles['child-card']);
+  return <Card {...other} className={childClassName} containerStyle="high" />;
+};
+
 Card.displayName = 'Card';
 CardBody.displayName = 'Card.Body';
 CardFooter.displayName = 'Card.Footer';
 CardHeader.displayName = 'Card.Header';
+ChildCard.displayName = 'Card.ChildCard';
 
 Card.Body = CardBody;
 Card.Footer = CardFooter;
 Card.Header = CardHeader;
+Card.ChildCard = ChildCard;
diff --git a/src/components/Card/__snapshots__/Card-v2.test.ts.snap b/src/components/Card/__snapshots__/Card-v2.test.ts.snap
deleted file mode 100644
index d3bb48b2b..000000000
--- a/src/components/Card/__snapshots__/Card-v2.test.ts.snap
+++ /dev/null
@@ -1,1010 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Card /> (v2) BackgroundCallout story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-call-out w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--overline-md header__eyebrow header--size-md"
-        >
-          Recommended for you
-        </div>
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-      <div
-        class="header__action"
-      >
-        <div
-          class="menu"
-          data-headlessui-state=""
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            class=""
-            data-headlessui-state=""
-            id="headlessui-menu-button-:r8:"
-            type="button"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              height="2rem"
-              role="img"
-              style="--icon-size: 2rem;"
-              viewBox="0 0 24 24"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                show more
-              </title>
-              <path
-                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo my-4"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) CancelMembership story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-sm"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--title-sm header__title header--size-sm"
-        >
-          Cancel membership?
-        </div>
-        <div
-          class="text text--body-sm header__sub-title header--size-sm"
-        >
-          We're sad to see you go
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <p
-        class="text text--body-sm py-4"
-      >
-        Lorem ipsum dolor sit amet consectetur. Id pretium consequat consequat aliquam arcu
-      </p>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--md button--variant-critical"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Confirm cancellation
-          </span>
-        </button>
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) ChildCards story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-high card--container-color-call-out w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Card Group
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <article
-        class="card card--container-style-high card--container-color-default card--is-interactive child-card"
-        draggable="true"
-      >
-        <header
-          class="card__header header--size-md"
-        >
-          <div
-            class="header__text"
-          >
-            <div
-              class="text text--overline-md header__eyebrow header--size-md"
-            >
-              Eyebrow Text
-            </div>
-            <div
-              class="text text--headline-sm header__title header--size-md"
-            >
-              Title text
-            </div>
-            <div
-              class="text text--body-lg header__sub-title header--size-md"
-            >
-              Sub-title text
-            </div>
-          </div>
-          <div
-            class="header__action"
-          >
-            <div
-              class="menu"
-              data-headlessui-state=""
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="menu"
-                class=""
-                data-headlessui-state=""
-                id="headlessui-menu-button-:ra:"
-                type="button"
-              >
-                <svg
-                  class="icon"
-                  fill="currentColor"
-                  height="2rem"
-                  role="img"
-                  style="--icon-size: 2rem;"
-                  viewBox="0 0 24 24"
-                  width="2rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>
-                    show more
-                  </title>
-                  <path
-                    d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </header>
-        <div
-          class="card__top-stripe top-stripe--none"
-        />
-      </article>
-    </div>
-    <div
-      class="card__top-stripe top-stripe--high"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) CustomBrandCard story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-custom-brand border-brand-red bg-brand-red w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__custom"
-      >
-        <div
-          class="fpo w-full"
-        >
-          Card Header
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) CustomTopStripe story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--overline-md header__eyebrow header--size-md"
-        >
-          Recommended for you
-        </div>
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-      <div
-        class="header__action"
-      >
-        <div
-          class="menu"
-          data-headlessui-state=""
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            class=""
-            data-headlessui-state=""
-            id="headlessui-menu-button-:r6:"
-            type="button"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              height="2rem"
-              role="img"
-              style="--icon-size: 2rem;"
-              viewBox="0 0 24 24"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                show more
-              </title>
-              <path
-                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo my-4"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--high bg-brand-purple-lowEmphasis"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__custom"
-      >
-        <div
-          class="fpo w-full"
-        >
-          Card Header
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) IsInteractive story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default card--is-interactive w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__custom"
-      >
-        <div
-          class="fpo w-full"
-        >
-          Card Header
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) TopStripe story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--overline-md header__eyebrow header--size-md"
-        >
-          Recommended for you
-        </div>
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-      <div
-        class="header__action"
-      >
-        <div
-          class="menu"
-          data-headlessui-state=""
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            class=""
-            data-headlessui-state=""
-            id="headlessui-menu-button-:r4:"
-            type="button"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              height="2rem"
-              role="img"
-              style="--icon-size: 2rem;"
-              viewBox="0 0 24 24"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                show more
-              </title>
-              <path
-                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo my-4"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--medium"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WhileDragging story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default card--is-dragging-true w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__custom"
-      >
-        <div
-          class="fpo w-full"
-        >
-          Card Header
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WithCustomizedHeader story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md mb-size-2"
-    >
-      <div
-        class="header__custom"
-      >
-        Displaying 
-        <strong>
-          some text
-        </strong>
-         with 
-        <em>
-          mixed formatting
-        </em>
-        .
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WithFullHeader story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--overline-md header__eyebrow header--size-md"
-        >
-          Recommended for you
-        </div>
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WithFullHeaderAndIcon story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__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="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
-          />
-        </svg>
-      </div>
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          <span>
-            Get to know your colleagues
-          </span>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WithHorizontalPrimaryButton story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-md"
-    >
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--overline-md header__eyebrow header--size-md"
-        >
-          Recommended for you
-        </div>
-        <div
-          class="text text--headline-sm header__title header--size-md"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-lg header__sub-title header--size-md"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-      <div
-        class="header__action"
-      >
-        <div
-          class="menu"
-          data-headlessui-state=""
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            class=""
-            data-headlessui-state=""
-            id="headlessui-menu-button-:r2:"
-            type="button"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              height="2rem"
-              role="img"
-              style="--icon-size: 2rem;"
-              viewBox="0 0 24 24"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                show more
-              </title>
-              <path
-                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo my-4"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
-
-exports[`<Card /> (v2) WithSmallFullHeaderAndIcon story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <article
-    class="card card--container-style-low card--container-color-default w-96"
-  >
-    <header
-      class="card__header header--size-sm"
-    >
-      <div
-        class="header__icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon"
-          fill="currentColor"
-          height="1rem"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
-          />
-        </svg>
-      </div>
-      <div
-        class="header__text"
-      >
-        <div
-          class="text text--title-sm header__title header--size-sm"
-        >
-          Question of the day
-        </div>
-        <div
-          class="text text--body-sm header__sub-title header--size-sm"
-        >
-          Get to know your colleagues
-        </div>
-      </div>
-      <div
-        class="header__action"
-      >
-        <div
-          class="menu"
-          data-headlessui-state=""
-        >
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            class=""
-            data-headlessui-state=""
-            id="headlessui-menu-button-:r0:"
-            type="button"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              height="2rem"
-              role="img"
-              style="--icon-size: 2rem;"
-              viewBox="0 0 24 24"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                show more
-              </title>
-              <path
-                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </header>
-    <div
-      class="card__body"
-    >
-      <div
-        class="fpo"
-      >
-        Card Body
-      </div>
-    </div>
-    <footer
-      class="card__footer"
-    >
-      <div
-        class="fpo"
-      >
-        Card Footer
-      </div>
-    </footer>
-    <div
-      class="card__top-stripe top-stripe--none"
-    />
-  </article>
-</div>
-`;
diff --git a/src/components/Card/__snapshots__/Card.test.ts.snap b/src/components/Card/__snapshots__/Card.test.ts.snap
index 4b66cc891..3944a27a1 100644
--- a/src/components/Card/__snapshots__/Card.test.ts.snap
+++ b/src/components/Card/__snapshots__/Card.test.ts.snap
@@ -1,19 +1,278 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Card /> Default story renders snapshot 1`] = `
+exports[`<Card /> BackgroundCallout story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <article
-    class="card w-96"
+    class="card card--container-style-low card--container-color-call-out w-96"
   >
     <header
-      class="card__header"
+      class="card__header header--size-md"
     >
       <div
-        class="fpo"
+        class="header__text"
+      >
+        <div
+          class="text text--overline-md header__eyebrow header--size-md"
+        >
+          Recommended for you
+        </div>
+        <div
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
+        <div
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+      <div
+        class="header__action"
+      >
+        <div
+          class="menu"
+          data-headlessui-state=""
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            class=""
+            data-headlessui-state=""
+            id="headlessui-menu-button-:r8:"
+            type="button"
+          >
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="2rem"
+              role="img"
+              style="--icon-size: 2rem;"
+              viewBox="0 0 24 24"
+              width="2rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                show more
+              </title>
+              <path
+                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo my-4"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> CancelMembership story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
+  >
+    <header
+      class="card__header header--size-sm"
+    >
+      <div
+        class="header__text"
+      >
+        <div
+          class="text text--title-sm header__title header--size-sm"
+        >
+          Cancel membership?
+        </div>
+        <div
+          class="text text--body-sm header__sub-title header--size-sm"
+        >
+          We're sad to see you go
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <p
+        class="text text--body-sm py-4"
+      >
+        Lorem ipsum dolor sit amet consectetur. Id pretium consequat consequat aliquam arcu
+      </p>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--md button--variant-critical"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Confirm cancellation
+          </span>
+        </button>
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> ChildCards story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-high card--container-color-call-out w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__text"
       >
-        Card Header
+        <div
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Card Group
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <article
+        class="card card--container-style-high card--container-color-default card--is-interactive child-card"
+        draggable="true"
+      >
+        <header
+          class="card__header header--size-md"
+        >
+          <div
+            class="header__text"
+          >
+            <div
+              class="text text--overline-md header__eyebrow header--size-md"
+            >
+              Eyebrow Text
+            </div>
+            <div
+              class="text text--headline-sm header__title header--size-md"
+            >
+              Title text
+            </div>
+            <div
+              class="text text--body-lg header__sub-title header--size-md"
+            >
+              Sub-title text
+            </div>
+          </div>
+          <div
+            class="header__action"
+          >
+            <div
+              class="menu"
+              data-headlessui-state=""
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class=""
+                data-headlessui-state=""
+                id="headlessui-menu-button-:ra:"
+                type="button"
+              >
+                <svg
+                  class="icon"
+                  fill="currentColor"
+                  height="2rem"
+                  role="img"
+                  style="--icon-size: 2rem;"
+                  viewBox="0 0 24 24"
+                  width="2rem"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    show more
+                  </title>
+                  <path
+                    d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </header>
+        <div
+          class="card__top-stripe top-stripe--none"
+        />
+      </article>
+    </div>
+    <div
+      class="card__top-stripe top-stripe--high"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> CustomBrandCard story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-custom-brand border-brand-red bg-brand-red w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__custom"
+      >
+        <div
+          class="fpo w-full"
+        >
+          Card Header
+        </div>
       </div>
     </header>
     <div
@@ -34,24 +293,130 @@ exports[`<Card /> Default story renders snapshot 1`] = `
         Card Footer
       </div>
     </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
   </article>
 </div>
 `;
 
-exports[`<Card /> Dragging story renders snapshot 1`] = `
+exports[`<Card /> CustomTopStripe story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <article
-    class="card card--dragging w-96"
+    class="card card--container-style-low card--container-color-default w-96"
   >
     <header
-      class="card__header"
+      class="card__header header--size-md"
     >
       <div
-        class="fpo"
+        class="header__text"
+      >
+        <div
+          class="text text--overline-md header__eyebrow header--size-md"
+        >
+          Recommended for you
+        </div>
+        <div
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
+        <div
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+      <div
+        class="header__action"
       >
-        Card Header
+        <div
+          class="menu"
+          data-headlessui-state=""
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            class=""
+            data-headlessui-state=""
+            id="headlessui-menu-button-:r6:"
+            type="button"
+          >
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="2rem"
+              role="img"
+              style="--icon-size: 2rem;"
+              viewBox="0 0 24 24"
+              width="2rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                show more
+              </title>
+              <path
+                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo my-4"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--high bg-brand-purple-lowEmphasis"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> Default story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__custom"
+      >
+        <div
+          class="fpo w-full"
+        >
+          Card Header
+        </div>
       </div>
     </header>
     <div
@@ -72,24 +437,175 @@ exports[`<Card /> Dragging story renders snapshot 1`] = `
         Card Footer
       </div>
     </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
   </article>
 </div>
 `;
 
-exports[`<Card /> Horizontal story renders snapshot 1`] = `
+exports[`<Card /> IsInteractive story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <article
-    class="card flex-row"
+    class="card card--container-style-low card--container-color-default card--is-interactive w-96"
   >
     <header
-      class="card__header"
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__custom"
+      >
+        <div
+          class="fpo w-full"
+        >
+          Card Header
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
     >
       <div
         class="fpo"
       >
-        Card Header
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="fpo"
+      >
+        Card Footer
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> TopStripe story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__text"
+      >
+        <div
+          class="text text--overline-md header__eyebrow header--size-md"
+        >
+          Recommended for you
+        </div>
+        <div
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
+        <div
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+      <div
+        class="header__action"
+      >
+        <div
+          class="menu"
+          data-headlessui-state=""
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            class=""
+            data-headlessui-state=""
+            id="headlessui-menu-button-:r4:"
+            type="button"
+          >
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="2rem"
+              role="img"
+              style="--icon-size: 2rem;"
+              viewBox="0 0 24 24"
+              width="2rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                show more
+              </title>
+              <path
+                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo my-4"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--medium"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> WhileDragging story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default card--is-dragging-true w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__custom"
+      >
+        <div
+          class="fpo w-full"
+        >
+          Card Header
+        </div>
       </div>
     </header>
     <div
@@ -110,92 +626,362 @@ exports[`<Card /> Horizontal story renders snapshot 1`] = `
         Card Footer
       </div>
     </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
   </article>
 </div>
 `;
 
-exports[`<Card /> InteractiveOnHover story renders snapshot 1`] = `
+exports[`<Card /> WithCustomizedHeader story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <article
-    class="card card--raised"
+    class="card card--container-style-low card--container-color-default w-96"
   >
+    <header
+      class="card__header header--size-md mb-size-2"
+    >
+      <div
+        class="header__custom"
+      >
+        Displaying 
+        <strong>
+          some text
+        </strong>
+         with 
+        <em>
+          mixed formatting
+        </em>
+        .
+      </div>
+    </header>
     <div
       class="card__body"
     >
       <div
-        class="fpo p-6"
+        class="fpo"
       >
-        Card Contents
+        Card Body
       </div>
     </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="fpo"
+      >
+        Card Footer
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
   </article>
 </div>
 `;
 
-exports[`<Card /> LoadingProfileCard story renders snapshot 1`] = `
+exports[`<Card /> WithFullHeader story renders snapshot 1`] = `
 <div
   class="p-8"
 >
-  <div
-    aria-label="Loading example profile card"
-    role="status"
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
   >
-    <article
-      class="card w-96"
+    <header
+      class="card__header header--size-md"
     >
       <div
-        class="card__body"
+        class="header__text"
       >
         <div
-          aria-hidden="true"
-          class="mb-3 skeleton skeleton-circle skeleton--is-animating"
-          style="width: 48px; height: 48px;"
-        />
+          class="text text--overline-md header__eyebrow header--size-md"
+        >
+          Recommended for you
+        </div>
         <div
-          aria-hidden="true"
-          class="mb-2 mt-2 skeleton skeleton--is-animating"
-          style="width: 15ch; height: 4rem;"
-        />
-        <hr
-          class="hr"
-        />
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
         <div
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="fpo"
+      >
+        Card Footer
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> WithFullHeaderAndIcon story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
+  >
+    <header
+      class="card__header header--size-md"
+    >
+      <div
+        class="header__icon"
+      >
+        <svg
           aria-hidden="true"
-          class="mb-2 mt-2 skeleton skeleton--is-animating"
-          style="width: 30ch; height: 1.5rem;"
-        />
+          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="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="header__text"
+      >
         <div
-          aria-hidden="true"
-          class="mb-2 mt-2 skeleton skeleton--is-animating"
-          style="width: 25ch; height: 1.5rem;"
-        />
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
         <div
-          aria-hidden="true"
-          class="mb-2 mt-2 skeleton skeleton--is-animating"
-          style="width: 10ch; height: 1.5rem;"
-        />
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          <span>
+            Get to know your colleagues
+          </span>
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="fpo"
+      >
+        Card Footer
       </div>
-    </article>
-  </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
 </div>
 `;
 
-exports[`<Card /> Raised story renders snapshot 1`] = `
+exports[`<Card /> WithHorizontalPrimaryButton story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <article
-    class="card card--raised w-96"
+    class="card card--container-style-low card--container-color-default w-96"
   >
     <header
-      class="card__header"
+      class="card__header header--size-md"
     >
       <div
-        class="fpo"
+        class="header__text"
       >
-        Card Header
+        <div
+          class="text text--overline-md header__eyebrow header--size-md"
+        >
+          Recommended for you
+        </div>
+        <div
+          class="text text--headline-sm header__title header--size-md"
+        >
+          Question of the day
+        </div>
+        <div
+          class="text text--body-lg header__sub-title header--size-md"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+      <div
+        class="header__action"
+      >
+        <div
+          class="menu"
+          data-headlessui-state=""
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            class=""
+            data-headlessui-state=""
+            id="headlessui-menu-button-:r2:"
+            type="button"
+          >
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="2rem"
+              role="img"
+              style="--icon-size: 2rem;"
+              viewBox="0 0 24 24"
+              width="2rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                show more
+              </title>
+              <path
+                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="card__body"
+    >
+      <div
+        class="fpo my-4"
+      >
+        Card Body
+      </div>
+    </div>
+    <footer
+      class="card__footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+      </div>
+    </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
+  </article>
+</div>
+`;
+
+exports[`<Card /> WithSmallFullHeaderAndIcon story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <article
+    class="card card--container-style-low card--container-color-default w-96"
+  >
+    <header
+      class="card__header header--size-sm"
+    >
+      <div
+        class="header__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1rem"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="header__text"
+      >
+        <div
+          class="text text--title-sm header__title header--size-sm"
+        >
+          Question of the day
+        </div>
+        <div
+          class="text text--body-sm header__sub-title header--size-sm"
+        >
+          Get to know your colleagues
+        </div>
+      </div>
+      <div
+        class="header__action"
+      >
+        <div
+          class="menu"
+          data-headlessui-state=""
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            class=""
+            data-headlessui-state=""
+            id="headlessui-menu-button-:r0:"
+            type="button"
+          >
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="2rem"
+              role="img"
+              style="--icon-size: 2rem;"
+              viewBox="0 0 24 24"
+              width="2rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                show more
+              </title>
+              <path
+                d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </header>
     <div
@@ -216,6 +1002,9 @@ exports[`<Card /> Raised story renders snapshot 1`] = `
         Card Footer
       </div>
     </footer>
+    <div
+      class="card__top-stripe top-stripe--none"
+    />
   </article>
 </div>
 `;
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index acbf4f85e..d9c55c883 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,2 +1 @@
 export { Card as default } from './Card';
-export { Card as CardV2 } from './Card-v2';
diff --git a/src/components/Checkbox/Checkbox-v2.module.css b/src/components/Checkbox/Checkbox-v2.module.css
deleted file mode 100644
index 6aef72f0a..000000000
--- a/src/components/Checkbox/Checkbox-v2.module.css
+++ /dev/null
@@ -1,154 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-.checkbox {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.checkbox__input {
-  height: 1.125rem;
-  width: 1.125rem;
-
-  /* The parent Checkbox component is a flex container. Make sure the input doesn't shrink. */
-  flex-shrink: 0;
-
-  /* Remove the browser's checkbox styles, allowing us to provide our own. */
-  appearance: none;
-
-  /* Magic value to center the checkbox on its label. */
-  margin: 3px;
-
-  border: 0.125rem solid currentColor;
-
-  /* Place the ::before content smack in the middle of the input. */
-  display: grid;
-  place-content: center;
-
-  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  
-}
-
-.checkbox__input:checked::before {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  content: '✓';
-  text-align: center;
-
-  /* Because the path does not have an explicit viewbox, this element's bounding box establishes
-  one. In other words, the height/width here need to match the expected viewbox for the path. */
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-.checkbox__input:checked {
-  background-color: currentColor;
-  border: currentColor;
-}
-
-.checkbox__input:indeterminate::before {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  content: '–';
-  text-align: center;
-
-  height: 1.5rem;
-  width: 1.5rem;
-  transform: translateY(-1px);
-}
-
-.checkbox__input:indeterminate {
-  background-color: currentColor;
-  border: currentColor;
-}
-
-.checkbox__labels {
-  position: relative;
-}
-
-.checkbox__sub-label {
-  display: block;
-
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.checkbox__input:not(:checked):not(:indeterminate) {
-  color: var(--eds-theme-color-border-utility-default-medium-emphasis);
-
-  &:not(:disabled):hover {
-    color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-  }
-
-  &:not(:disabled):active {
-    color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
-  }
-
-  .checkbox--error & {
-    color: var(--eds-theme-color-text-utility-critical);
-
-    &:hover {
-      color: var(--eds-theme-color-border-utility-critical-hover);
-      background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
-    }
-
-    &:active {
-      color: var(--eds-theme-color-border-utility-critical-active);
-      background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
-    }
-  }
-}
-
-.checkbox__input:checked,
-.checkbox__input:indeterminate {
-  color: var(--eds-theme-color-border-utility-default-high-emphasis);
-
-  &:hover {
-    color: var(--eds-theme-color-border-utility-default-high-emphasis-hover);
-  }
-
-  &:active {
-    color: var(--eds-theme-color-border-utility-default-high-emphasis-active);
-  }
-
-  .checkbox--error & {
-    color: var(--eds-theme-color-text-utility-critical);
-
-    &:hover {
-      color: var(--eds-theme-color-border-utility-critical-hover);
-    }
-
-    &:active {
-      color: var(--eds-theme-color-border-utility-critical-active);
-    }
-  }
-}
-
-.checkbox__input:disabled {
-  color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-  cursor: not-allowed;
-
-  &:not(:checked) {
-    color: var(--eds-theme-color-border-utility-disabled);
-    background-color: var(--eds-theme-color-text-utility-disabled-secondary);
-  }
-
-  &:checked,
-  &:indeterminate {
-    background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-
-    &::before {
-      color: var(--eds-theme-color-text-utility-disabled-primary);
-
-    }
-  }
-}
-
-.checkbox__input:focus-visible {
-  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .checkbox__input {
-    outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-  }
-}
diff --git a/src/components/Checkbox/Checkbox-v2.stories.tsx b/src/components/Checkbox/Checkbox-v2.stories.tsx
deleted file mode 100644
index a223e304f..000000000
--- a/src/components/Checkbox/Checkbox-v2.stories.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Checkbox } from './Checkbox-v2';
-
-const meta: Meta<typeof Checkbox> = {
-  title: 'Components/V2/Checkbox',
-  component: Checkbox,
-  args: {
-    label: 'Checkbox',
-  },
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Checkbox>;
-
-export const Default: Story = {};
-
-export const WithSublabel: Story = {
-  args: { subLabel: 'Additional descriptive text' },
-};
-
-export const Error: Story = {
-  args: {
-    isError: true,
-    label: 'In error state',
-  },
-};
-
-export const Checked: Story = {
-  ...Default,
-  args: {
-    defaultChecked: true,
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    indeterminate: true,
-  },
-};
-
-/**
- * `Checkbox` can be disabled in each available state.
- */
-export const Disabled: Story = {
-  render: (args) => (
-    <div className="p-0">
-      <Checkbox {...args} checked={false} disabled label="Disabled" />
-      <Checkbox {...args} checked disabled label="Disabled" />
-      <Checkbox {...args} disabled indeterminate label="Disabled" />
-    </div>
-  ),
-};
-
-/**
- * `Checkbox` doesn't require a visible label if `aria-label` is provided.
- */
-export const WithoutVisibleLabel: Story = {
-  args: {
-    'aria-label': 'a checkbox has no name',
-    label: undefined,
-  },
-};
-
-/**
- * Long labels will sit adjacent to the text box, and allow clicking to change the state of the checkbox. When constrained,
- * the text will wrap, fixing the checkbox to the top edge.
- */
-export const LongLabels: Story = {
-  args: {
-    label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  },
-};
diff --git a/src/components/Checkbox/Checkbox-v2.tsx b/src/components/Checkbox/Checkbox-v2.tsx
deleted file mode 100644
index e32034b44..000000000
--- a/src/components/Checkbox/Checkbox-v2.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-import useForwardedRef from '../../util/useForwardedRef';
-import { useId } from '../../util/useId';
-import type { EitherInclusive } from '../../util/utility-types';
-
-import FieldLabel from '../FieldLabel';
-import Text from '../Text';
-
-import styles from './Checkbox-v2.module.css';
-
-type CheckboxHTMLElementProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'id' | 'size'
->;
-
-type CheckboxInputProps = CheckboxHTMLElementProps & {
-  // Component API
-  /**
-   * Whether checkbox is checked.
-   */
-  checked?: boolean;
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * Checkbox ID. Used to connect the input with a label for accessibility purposes.
-   */
-  id: string;
-  /**
-   * Whether the checkbox is "indeterminate". Neither checked nor unchecked. The most common use
-   * case for this is when a checkbox has sub-checkboxes, to represent a "partially checked" state.
-   */
-  indeterminate?: boolean;
-  // Design API
-  /**
-   * Whether the radio button is in an error state
-   */
-  isError?: boolean;
-  /**
-   * Additional descriptive text below the primary label, adding additional detail
-   */
-  subLabel?: string;
-};
-
-// id is required in CheckboxInputProps but optional in CheckboxProps, so we
-// first remove `id` from CheckboxInputProps before intersecting.
-type CheckboxProps = Omit<CheckboxInputProps, 'id'> & {
-  /**
-   * HTML id attribute. If not passed, this component
-   * will generate an id to use for accessibility.
-   */
-  id?: string;
-} & EitherInclusive<
-    {
-      /**
-       * Visible text label for the component.
-       */
-      label: ReactNode;
-    },
-    {
-      /**
-       * Aria-label to provide an accesible name for the text input if no visible label is provided.
-       */
-      'aria-label': string;
-    }
-  >;
-
-/**
- * Checkbox input element, exported for greater flexibility.
- * You must provide an `id` prop and connect it to a visible label.
- */
-const CheckboxInput = React.forwardRef<HTMLInputElement, CheckboxInputProps>(
-  ({ checked, className, disabled, indeterminate, ...other }, ref) => {
-    const forwardedRef = useForwardedRef(ref);
-
-    // Make this checkbox indeterminate. Can only be done with JS for some reason.
-    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes.
-    React.useEffect(() => {
-      if (forwardedRef.current) {
-        forwardedRef.current.indeterminate = !!indeterminate;
-      }
-    }, [forwardedRef, indeterminate]);
-
-    return (
-      <input
-        checked={checked}
-        className={clsx(className, styles['checkbox__input'])}
-        disabled={disabled}
-        ref={forwardedRef}
-        type="checkbox"
-        {...other}
-      />
-    );
-  },
-);
-
-/**
- * `import {Checkbox} from "@chanzuckerberg/eds";`
- *
- * Checkbox control indicating if something is selected or unselected. Uncontrolled by default,
- * it can be used in place of boolean-like form data.
- *
- * **NOTE**: Requires either a visible `label` or `aria-label` prop.
- */
-export const Checkbox = Object.assign(
-  forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-    // All remaining props are passed to the `input` element
-    const { className, id, isError, label, disabled, subLabel, ...other } =
-      props;
-
-    const generatedId = useId();
-    const checkboxId = id || generatedId;
-
-    return (
-      <div
-        className={clsx(
-          className,
-          styles.checkbox,
-          isError && styles['checkbox--error'],
-        )}
-      >
-        <CheckboxInput
-          disabled={disabled}
-          id={checkboxId}
-          ref={ref}
-          {...other}
-        />
-        <div className={styles['checkbox__labels']}>
-          {label && (
-            <FieldLabel disabled={disabled} htmlFor={checkboxId}>
-              {label}
-            </FieldLabel>
-          )}
-          {subLabel && (
-            <Text
-              as="span"
-              className={styles['checkbox__sub-label']}
-              preset="body-sm"
-            >
-              {subLabel}
-            </Text>
-          )}
-        </div>
-      </div>
-    );
-  }),
-  {
-    Input: CheckboxInput,
-    Label: FieldLabel,
-  },
-);
-
-Checkbox.displayName = 'Checkbox';
-CheckboxInput.displayName = 'CheckboxInput';
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index e5e39b7bb..92fa8d8b5 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -6,8 +6,8 @@
 }
 
 .checkbox__input {
-  height: 18px;
-  width: 18px;
+  height: 1.125rem;
+  width: 1.125rem;
 
   /* The parent Checkbox component is a flex container. Make sure the input doesn't shrink. */
   flex-shrink: 0;
@@ -18,59 +18,137 @@
   /* Magic value to center the checkbox on its label. */
   margin: 3px;
 
-  color: var(--eds-theme-color-checkbox-brand-background);
-  border: 2px solid currentColor;
+  border: calc(var(--eds-size-quarter) / 16 * 1rem) solid currentColor;
 
   /* Place the ::before content smack in the middle of the input. */
   display: grid;
   place-content: center;
+
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  
 }
 
 .checkbox__input:checked::before {
-  background-color: currentColor;
-  content: '';
-
-  /* Clip this element in the shape of a checkbox. The element's background color will be visible
-  anywhere the svg path is solid. Whatever is behind the checkbox will show through wherever the
-  svg is transparent. See https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path */
-  clip-path: path(
-    'M10.6 16.2L17.65 9.15L16.25 7.75L10.6 13.4L7.75 10.55L6.35 11.95L10.6 16.2ZM3 21V3H21V21H3Z'
-  );
+  color: var(--eds-theme-color-text-neutral-default-inverse);
+  content: '✓';
+  text-align: center;
 
   /* Because the path does not have an explicit viewbox, this element's bounding box establishes
   one. In other words, the height/width here need to match the expected viewbox for the path. */
-  height: 24px;
-  width: 24px;
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
+}
+
+.checkbox__input:checked {
+  background-color: currentColor;
+  border: currentColor;
 }
 
 .checkbox__input:indeterminate::before {
+  color: var(--eds-theme-color-text-neutral-default-inverse);
+  content: '–';
+  text-align: center;
+
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
+  transform: translateY(-1px);
+}
+
+.checkbox__input:indeterminate {
   background-color: currentColor;
-  content: '';
+  border: currentColor;
+}
 
-  clip-path: path('M7 13H17V11H7V13ZM3 21V3H21V21H3Z');
+.checkbox__labels {
+  position: relative;
+}
+
+.checkbox__sub-label {
+  display: block;
 
-  height: 24px;
-  width: 24px;
+  color: var(--eds-theme-color-text-utility-default-secondary);
 }
 
-.checkbox__input:focus-visible {
-  @mixin focus;
+.checkbox__input:not(:checked):not(:indeterminate) {
+  color: var(--eds-theme-color-border-utility-default-medium-emphasis);
+
+  &:not(:disabled):hover {
+    color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:not(:disabled):active {
+    color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
+
+  .checkbox--error & {
+    color: var(--eds-theme-color-text-utility-critical);
+
+    &:hover {
+      color: var(--eds-theme-color-border-utility-critical-hover);
+      background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
+    }
+
+    &:active {
+      color: var(--eds-theme-color-border-utility-critical-active);
+      background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
+    }
+  }
 }
 
-@supports not selector(:focus-visible) {
-  .checkbox__input:focus {
-    @mixin focus;
-    outline-offset: 1px;
+.checkbox__input:checked,
+.checkbox__input:indeterminate {
+  color: var(--eds-theme-color-border-utility-default-high-emphasis);
+
+  &:hover {
+    color: var(--eds-theme-color-border-utility-default-high-emphasis-hover);
+  }
+
+  &:active {
+    color: var(--eds-theme-color-border-utility-default-high-emphasis-active);
+  }
+
+  .checkbox--error & {
+    color: var(--eds-theme-color-text-utility-critical);
+
+    &:hover {
+      color: var(--eds-theme-color-border-utility-critical-hover);
+    }
+
+    &:active {
+      color: var(--eds-theme-color-border-utility-critical-active);
+    }
   }
 }
 
 .checkbox__input:disabled {
-  color: var(--eds-theme-color-icon-disabled);
+  color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
   cursor: not-allowed;
+
+  &:not(:checked) {
+    color: var(--eds-theme-color-border-utility-disabled);
+    background-color: var(--eds-theme-color-text-utility-disabled-secondary);
+  }
+
+  &:checked,
+  &:indeterminate {
+    background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
+
+    &::before {
+      color: var(--eds-theme-color-text-utility-disabled-primary);
+
+    }
+  }
 }
 
-.checkbox__label--md {
-  /* Center the first line of the medium label with the checkbox. */
-  position: relative;
-  top: 0.0625rem;
+.checkbox__input:focus-visible {
+  outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .checkbox__input {
+    outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+  }
 }
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index a229c1f46..04ba05f87 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,20 +1,20 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
+
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
   component: Checkbox,
   args: {
-    disabled: false,
     label: 'Checkbox',
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
 
-  decorators: [(Story) => <div className="m-1">{Story()}</div>],
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
 
 export default meta;
@@ -23,25 +23,21 @@ type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {};
 
-export const Checked: Story = {
-  ...Default,
-  args: {
-    defaultChecked: true,
-  },
+export const WithSublabel: Story = {
+  args: { subLabel: 'Additional descriptive text' },
 };
 
-export const Medium: Story = {
-  ...Default,
+export const Error: Story = {
   args: {
-    size: 'md',
+    isError: true,
+    label: 'In error state',
   },
 };
 
-export const MediumChecked: Story = {
-  ...Medium,
+export const Checked: Story = {
+  ...Default,
   args: {
-    ...Checked.args,
-    ...Medium.args,
+    defaultChecked: true,
   },
 };
 
@@ -62,11 +58,6 @@ export const Disabled: Story = {
       <Checkbox {...args} disabled indeterminate label="Disabled" />
     </div>
   ),
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 /**
@@ -87,9 +78,4 @@ export const LongLabels: Story = {
   args: {
     label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
diff --git a/src/components/Checkbox/Checkbox-v2.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
similarity index 91%
rename from src/components/Checkbox/Checkbox-v2.test.tsx
rename to src/components/Checkbox/Checkbox.test.tsx
index fbffe38ac..6039c71a5 100644
--- a/src/components/Checkbox/Checkbox-v2.test.tsx
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -3,8 +3,8 @@ 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 { Checkbox } from './Checkbox-v2';
-import * as stories from './Checkbox-v2.stories';
+import { Checkbox } from './Checkbox';
+import * as stories from './Checkbox.stories';
 
 describe('<Checkbox />', () => {
   generateSnapshots(stories as StoryFile);
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index af24d9113..efefb7985 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,21 +1,23 @@
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import type { ReactNode } from 'react';
+
 import useForwardedRef from '../../util/useForwardedRef';
 import { useId } from '../../util/useId';
 import type { EitherInclusive } from '../../util/utility-types';
-import type { Size } from '../../util/variant-types';
-import { InputLabel, type InputLabelProps } from '../InputLabel/InputLabel';
+
+import FieldLabel from '../FieldLabel';
+import Text from '../Text';
 
 import styles from './Checkbox.module.css';
 
-type CheckboxLabelProps = InputLabelProps;
 type CheckboxHTMLElementProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'checked' | 'id' | 'size'
 >;
 
 type CheckboxInputProps = CheckboxHTMLElementProps & {
+  // Component API
   /**
    * Whether checkbox is checked.
    */
@@ -33,6 +35,15 @@ type CheckboxInputProps = CheckboxHTMLElementProps & {
    * case for this is when a checkbox has sub-checkboxes, to represent a "partially checked" state.
    */
   indeterminate?: boolean;
+  // Design API
+  /**
+   * Whether the radio button is in an error state
+   */
+  isError?: boolean;
+  /**
+   * Additional descriptive text below the primary label, adding additional detail
+   */
+  subLabel?: string;
 };
 
 // id is required in CheckboxInputProps but optional in CheckboxProps, so we
@@ -43,12 +54,6 @@ type CheckboxProps = Omit<CheckboxInputProps, 'id'> & {
    * will generate an id to use for accessibility.
    */
   id?: string;
-  /**
-   * Size of the checkbox and associated label.
-   *
-   * **Default is `"lg"`**.
-   */
-  size?: Extract<Size, 'md' | 'lg'>;
 } & EitherInclusive<
     {
       /**
@@ -93,15 +98,6 @@ const CheckboxInput = React.forwardRef<HTMLInputElement, CheckboxInputProps>(
   },
 );
 
-const CheckboxLabel = ({ className, size, ...other }: CheckboxLabelProps) => {
-  const componentClassName = clsx(
-    size === 'md' && styles['checkbox__label--md'],
-    className,
-  );
-
-  return <InputLabel className={componentClassName} size={size} {...other} />;
-};
-
 /**
  * `import {Checkbox} from "@chanzuckerberg/eds";`
  *
@@ -113,30 +109,48 @@ const CheckboxLabel = ({ className, size, ...other }: CheckboxLabelProps) => {
 export const Checkbox = Object.assign(
   forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     // All remaining props are passed to the `input` element
-    const { className, id, label, size = 'lg', disabled, ...other } = props;
+    const { className, id, isError, label, disabled, subLabel, ...other } =
+      props;
 
     const generatedId = useId();
     const checkboxId = id || generatedId;
 
     return (
-      <div className={clsx(className, styles.checkbox)}>
+      <div
+        className={clsx(
+          className,
+          styles.checkbox,
+          isError && styles['checkbox--error'],
+        )}
+      >
         <CheckboxInput
           disabled={disabled}
           id={checkboxId}
           ref={ref}
           {...other}
         />
-        {label && (
-          <CheckboxLabel disabled={disabled} htmlFor={checkboxId} size={size}>
-            {label}
-          </CheckboxLabel>
-        )}
+        <div className={styles['checkbox__labels']}>
+          {label && (
+            <FieldLabel disabled={disabled} htmlFor={checkboxId}>
+              {label}
+            </FieldLabel>
+          )}
+          {subLabel && (
+            <Text
+              as="span"
+              className={styles['checkbox__sub-label']}
+              preset="body-sm"
+            >
+              {subLabel}
+            </Text>
+          )}
+        </div>
       </div>
     );
   }),
   {
     Input: CheckboxInput,
-    Label: CheckboxLabel,
+    Label: FieldLabel,
   },
 );
 
diff --git a/src/components/Checkbox/__snapshots__/Checkbox-v2.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
similarity index 100%
rename from src/components/Checkbox/__snapshots__/Checkbox-v2.test.tsx.snap
rename to src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index c3458445f..048480331 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,2 +1 @@
 export { Checkbox as default } from './Checkbox';
-export { Checkbox as CheckboxV2 } from './Checkbox-v2';
diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css
deleted file mode 100644
index 653f85516..000000000
--- a/src/components/ClickableStyle/ClickableStyle.module.css
+++ /dev/null
@@ -1,530 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # CLICKABLE STYLE
-\*------------------------------------*/
-
-/**
- * Styled clickable element that should look like a button or link.
- */
-.clickable-style {
-  font: var(--eds-theme-typography-button-label);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  /* Adds a gap between children to automatically handle spacing between icons and text. */
-  gap: 0.75rem;
-  border-width: calc(var(--eds-theme-border-width) * 1px);
-  border-style: solid;
-  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
-  cursor: pointer;
-  /* Removes the underline in the case that the rendered element is an <a> tag. */
-  text-decoration: none;
-  transition-property: color, background-color, border-color;
-  transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
-  transition-timing-function: var(--eds-anim-ease);
-
-  :where(svg) {
-    /* Adds default size for icons passed in for consistency. */
-    --icon-size-default: 2em;
-    transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
-
-    @media screen and (prefers-reduced-motion) {
-      transition: none;
-    }
-  }
-
-  &:focus-visible {
-    @mixin focus;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      @mixin focus;
-    }
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-/**
- * Margin 0 added becuase Safari has margin on buttons.
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- *    for margin can happen where used.
- */
-:where(.clickable-style) {
-  margin: 0;
-}
-
-/**
- * Primary brand clickable style
- */
-:where(.clickable-style--primary).clickable-style--brand {
-  border-color: var(--eds-theme-color-button-primary-brand-border);
-  background-color: var(--eds-theme-color-button-primary-brand-background);
-  color: var(--eds-theme-color-button-primary-brand-text);
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-primary-brand-border-hover);
-    background-color: var(--eds-theme-color-button-primary-brand-background-hover);
-    color: var(--eds-theme-color-button-primary-brand-text-hover);
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-primary-brand-border-active);
-    background-color: var(--eds-theme-color-button-primary-brand-background-active);
-    color: var(--eds-theme-color-button-primary-brand-text-active);
-  }
-}
-
-/**
- * Primary error clickable style
- */
-:where(.clickable-style--primary).clickable-style--error {
-  border-color: var(--eds-theme-color-button-primary-error-border);
-  background-color: var(--eds-theme-color-button-primary-error-background);
-  color: var(--eds-theme-color-button-primary-error-text);
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-primary-error-border-hover);
-    background-color: var(--eds-theme-color-button-primary-error-background-hover);
-    color: var(--eds-theme-color-button-primary-error-text-hover);
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-primary-error-border-active);
-    background-color: var(--eds-theme-color-button-primary-error-background-active);
-    color: var(--eds-theme-color-button-primary-error-text-active);
-  }
-}
-
-/**
- * Secondary brand clickable style
- */
-:where(.clickable-style--secondary).clickable-style--brand {
-  border-color: var(--eds-theme-color-button-secondary-brand-border);
-  background-color: var(--eds-theme-color-button-secondary-brand-background);
-  color: var(--eds-theme-color-button-secondary-brand-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-brand-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
-    color: var(--eds-theme-color-button-secondary-brand-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-brand-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-brand-border-active);
-    background-color: var(--eds-theme-color-button-secondary-brand-background-active);
-    color: var(--eds-theme-color-button-secondary-brand-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-brand-icon-focus);
-    }
-  }
-}
-
-/**
- * Secondary neutral clickable style
- */
-:where(.clickable-style--secondary).clickable-style--neutral {
-  border-color: var(--eds-theme-color-button-secondary-neutral-border);
-  background-color: var(--eds-theme-color-button-secondary-neutral-background);
-  color: var(--eds-theme-color-button-secondary-neutral-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-neutral-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
-    color: var(--eds-theme-color-button-secondary-neutral-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
-    background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
-    color: var(--eds-theme-color-button-secondary-neutral-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-neutral-icon-active);
-    }
-  }
-}
-
-/**
- * Secondary success clickable style
- */
-:where(.clickable-style--secondary).clickable-style--success {
-  border-color: var(--eds-theme-color-button-secondary-success-border);
-  background-color: var(--eds-theme-color-button-secondary-success-background);
-  color: var(--eds-theme-color-button-secondary-success-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-success-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-success-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-success-background-hover);
-    color: var(--eds-theme-color-button-secondary-success-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-success-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-success-border-active);
-    background-color: var(--eds-theme-color-button-secondary-success-background-active);
-    color: var(--eds-theme-color-button-secondary-success-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-success-icon-active);
-    }
-  }
-}
-
-/**
- * Secondary warning clickable style
- */
-:where(.clickable-style--secondary).clickable-style--warning {
-  border-color: var(--eds-theme-color-button-secondary-warning-border);
-  background-color: var(--eds-theme-color-button-secondary-warning-background);
-  color: var(--eds-theme-color-button-secondary-warning-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-warning-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
-    color: var(--eds-theme-color-button-secondary-warning-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-warning-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-warning-border-active);
-    background-color: var(--eds-theme-color-button-secondary-warning-background-active);
-    color: var(--eds-theme-color-button-secondary-warning-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-warning-icon-active);
-    }
-  }
-}
-
-/**
- * Secondary error clickable style
- */
-:where(.clickable-style--secondary).clickable-style--error {
-  border-color: var(--eds-theme-color-button-secondary-error-border);
-  background-color: var(--eds-theme-color-button-secondary-error-background);
-  color: var(--eds-theme-color-button-secondary-error-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-error-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-error-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-error-background-hover);
-    color: var(--eds-theme-color-button-secondary-error-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-error-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-error-border-active);
-    background-color: var(--eds-theme-color-button-secondary-error-background-active);
-    color: var(--eds-theme-color-button-secondary-error-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-error-icon-active);
-    }
-  }
-}
-
-/**
- * Icon brand clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.clickable-style--icon).clickable-style--brand {
-  border-color: var(--eds-theme-color-button-icon-brand-border);
-  background-color: var(--eds-theme-color-button-icon-brand-background);
-  color: var(--eds-theme-color-button-icon-brand-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-brand);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-brand-border-hover);
-    background-color: var(--eds-theme-color-button-icon-brand-background-hover);
-    color: var(--eds-theme-color-button-icon-brand-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-brand-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-brand-border-active);
-    background-color: var(--eds-theme-color-button-icon-brand-background-active);
-    color: var(--eds-theme-color-button-icon-brand-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-brand-active);
-    }
-  }
-}
-
-/**
- * Icon neutral clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.clickable-style--icon).clickable-style--neutral {
-  border-color: var(--eds-theme-color-button-icon-neutral-border);
-  background-color: var(--eds-theme-color-button-icon-neutral-background);
-  color: var(--eds-theme-color-button-icon-neutral-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-neutral);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
-    background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
-    color: var(--eds-theme-color-button-icon-neutral-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-neutral-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-neutral-border-active);
-    background-color: var(--eds-theme-color-button-icon-neutral-background-active);
-    color: var(--eds-theme-color-button-icon-neutral-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-neutral-active);
-    }
-  }
-}
-
-/**
- * Icon success clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.clickable-style--icon).clickable-style--success {
-  border-color: var(--eds-theme-color-button-icon-success-border);
-  background-color: var(--eds-theme-color-button-icon-success-background);
-  color: var(--eds-theme-color-button-icon-success-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-success);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-success-border-hover);
-    background-color: var(--eds-theme-color-button-icon-success-background-hover);
-    color: var(--eds-theme-color-button-icon-success-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-success-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-success-border-active);
-    background-color: var(--eds-theme-color-button-icon-success-background-active);
-    color: var(--eds-theme-color-button-icon-success-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-success-active);
-    }
-  }
-}
-
-/**
- * Icon warning clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.clickable-style--icon).clickable-style--warning {
-  border-color: var(--eds-theme-color-button-icon-warning-border);
-  background-color: var(--eds-theme-color-button-icon-warning-background);
-  color: var(--eds-theme-color-button-icon-warning-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-warning);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-warning-border-hover);
-    background-color: var(--eds-theme-color-button-icon-warning-background-hover);
-    color: var(--eds-theme-color-button-icon-warning-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-warning-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-warning-border-active);
-    background-color: var(--eds-theme-color-button-icon-warning-background-active);
-    color: var(--eds-theme-color-button-icon-warning-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-warning-active);
-    }
-  }
-}
-
-/**
- * Icon error clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.clickable-style--icon).clickable-style--error {
-  border-color: var(--eds-theme-color-button-icon-error-border);
-  background-color: var(--eds-theme-color-button-icon-error-background);
-  color: var(--eds-theme-color-button-icon-error-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-error);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-error-border-hover);
-    background-color: var(--eds-theme-color-button-icon-error-background-hover);
-    color: var(--eds-theme-color-button-icon-error-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-error-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-error-border-active);
-    background-color: var(--eds-theme-color-button-icon-error-background-active);
-    color: var(--eds-theme-color-button-icon-error-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-error-active);
-    }
-  }
-}
-
-/**
- * Link button styles
- */
-.clickable-style--link {
-  @mixin textLink;
-
-  /**
-   * Override default Clickable styles
-   */
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  /**
-   * Smaller gap between text and icon in link button style
-   */
-  gap: 0.25em;
-}
-
-/**
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- * for margin can happen where used, but needs to be specific enough to override preflight.
- */
-a:where(.clickable-style--link),
-button:where(.clickable-style--link) {
-  /* 2px padding gives the text breathing room in the focus state */
-  padding: 2px;
-  /**
-   * -2px margin compensates for the padding so the link doesn't have too much space between it
-   *  and surrounding text
-   */
-  margin: -2px;
-}
-
-/**
- * Link neutral clickable style
- */
-:where(.clickable-style--link).clickable-style--neutral {
-  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
-
-  &:hover {
-    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
-  }
-
-  &:focus-visible {
-    background-color: var(--eds-theme-color-link-neutral-background-focus);
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      background-color: var(--eds-theme-color-link-neutral-background-focus);
-    }
-  }
-}
-
-/**
- * Small clickable style
- */
-.clickable-style--sm {
-  font: var(--eds-theme-typography-button-label-sm);
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-3) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
-}
-
-/**
- * Medium clickable style
- */
-.clickable-style--md {
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-4) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
-}
-
-/**
- * Large clickable style
- */
-.clickable-style--lg {
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-5) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
-}
-
-/**
- * Full-width clickable style
- * A block clickable style that fills 100% of the width of its container
- */
-.clickable-style--full-width {
-  width: 100%;
-}
diff --git a/src/components/ClickableStyle/ClickableStyle.stories.tsx b/src/components/ClickableStyle/ClickableStyle.stories.tsx
deleted file mode 100644
index 809e7278c..000000000
--- a/src/components/ClickableStyle/ClickableStyle.stories.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { ClickableStyle, SIZES, STATUSES, VARIANTS } from './ClickableStyle';
-import Icon from '../Icon';
-
-export default {
-  title: 'Components/ClickableStyle',
-  component: ClickableStyle,
-  args: {
-    status: 'brand',
-    variant: 'primary',
-    as: 'a',
-    children: 'example text',
-  },
-  parameters: {
-    badges: ['intro-1.0'],
-    layout: 'centered',
-    controls: { expand: true },
-  },
-  argTypes: {
-    status: {
-      options: STATUSES,
-      control: { type: 'radio' },
-    },
-    variant: {
-      options: VARIANTS,
-      control: { type: 'radio' },
-    },
-    as: {
-      options: ['a', 'button'],
-      control: { type: 'radio' },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: SIZES,
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof ClickableStyle>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    children: 'link',
-  },
-};
-
-type ExampleProps = {
-  to: string;
-};
-const CustomElement = ({ to, ...rest }: ExampleProps) => (
-  <button
-    onClick={() => {
-      console.log(`trigger route to ${to}`);
-    }}
-    {...rest}
-  >
-    Example Component
-  </button>
-);
-
-export const WithCustomElement: StoryObj<Args> = {
-  args: {
-    children: 'using custom element',
-    as: CustomElement,
-    to: '/home',
-  },
-  argTypes: {
-    as: {
-      control: false,
-    },
-  },
-};
-
-export const Primary: StoryObj<Args> = {
-  args: {
-    variant: 'primary',
-  },
-};
-
-export const PrimaryDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-    variant: 'primary',
-  },
-};
-
-export const PrimaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryMedium: StoryObj<Args> = {
-  args: {
-    size: 'md',
-    variant: 'primary',
-  },
-};
-
-export const PrimarySmall: StoryObj<Args> = {
-  args: {
-    size: 'sm',
-    variant: 'primary',
-  },
-};
-
-export const SecondaryDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const SecondaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-  },
-};
-
-export const TertiaryDisabled: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    disabled: true,
-  },
-};
-
-export const IconButtonLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Button
-      </>
-    ),
-    variant: 'icon',
-  },
-};
-
-export const Link: StoryObj<Args> = {
-  args: { variant: 'link' },
-};
-
-export const LinkDisabled: StoryObj<Args> = {
-  args: { variant: 'link', disabled: true },
-};
-
-export const LinkNeutral: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    variant: 'link',
-  },
-};
-
-export const Destructive: StoryObj<Args> = {
-  args: {
-    status: 'error',
-    variant: 'primary',
-  },
-};
diff --git a/src/components/ClickableStyle/ClickableStyle.test.ts b/src/components/ClickableStyle/ClickableStyle.test.ts
deleted file mode 100644
index ca39e7fa4..000000000
--- a/src/components/ClickableStyle/ClickableStyle.test.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-
-import * as stories from './ClickableStyle.stories';
-
-describe('<Button />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/ClickableStyle/ClickableStyle.tsx b/src/components/ClickableStyle/ClickableStyle.tsx
deleted file mode 100644
index f0146799f..000000000
--- a/src/components/ClickableStyle/ClickableStyle.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import clsx from 'clsx';
-import type { MouseEventHandler, ReactNode } from 'react';
-import React from 'react';
-import styles from './ClickableStyle.module.css';
-
-export const VARIANTS = ['primary', 'secondary', 'icon', 'link'] as const;
-export type Variant = (typeof VARIANTS)[number];
-
-export const STATUSES = [
-  'brand',
-  'neutral',
-  'success',
-  'warning',
-  'error',
-] as const;
-export type Status = (typeof STATUSES)[number];
-
-export const SIZES = ['sm', 'md', 'lg'] as const;
-export type Size = (typeof SIZES)[number];
-
-// Define Discriminating unions for the valid statuses based on variant
-export type IconStatus = {
-  variant?: Extract<Variant, 'icon'>;
-  status?: Status;
-};
-
-export type SecondaryStatus = {
-  variant?: Extract<Variant, 'secondary'>;
-  status?: Status;
-};
-
-export type PrimaryStatus = {
-  variant?: Extract<Variant, 'primary'>;
-  status?: Extract<Status, 'brand' | 'error'>;
-};
-
-export type LinkStatus = {
-  variant?: Extract<Variant, 'link'>;
-  status?: Extract<Status, 'brand' | 'neutral'>;
-};
-
-export type VariantStatus =
-  | IconStatus
-  | SecondaryStatus
-  | LinkStatus
-  | PrimaryStatus;
-
-export type ClickableStyleProps<IComponent extends React.ElementType> = {
-  /**
-   * Visually hidden clickable text (but text is still accessible to assistive technology).
-   * This overrides `children` for screen readers
-   */
-  'aria-label'?: string;
-  /**
-   * The visible clickable children
-   */
-  children: string | ReactNode;
-  /**
-   * CSS class names that can be appended to the component
-   */
-  className?: string;
-  /**
-   * Toggles clickable that fills the full width of its container
-   */
-  fullWidth?: boolean;
-  /**
-   * On click handler for component
-   */
-  onClick?: MouseEventHandler;
-  /**
-   * Available size variations for the clickable
-   */
-  size?: Size;
-  /**
-   * Available _color_ variations available for the ClickableStyle component
-   */
-  status?: Status;
-  /**
-   * Available _shape_ variations available for the ClickableStyle component
-   */
-  variant?: Variant;
-} & React.ComponentProps<IComponent>;
-
-/**
- * `import {ClickableStyle} from "@chanzuckerberg/eds";`
- *
- * A helper component that contains all the styling for buttons-like controls and navigation links.
- *
- * If you're styling a `<button>` or `<a>` element, you can use the `Button`
- * and `Link` components (respectively). `ClickableStyle` should only be used
- * directly when styling other elements or components to look like a button or link.
- *
- * Use the exported `VariantStatus` to augment the type when using `ClickableStyle`.
- */
-export const ClickableStyle = React.forwardRef(
-  <IComponent extends React.ElementType>(
-    props: ClickableStyleProps<IComponent>,
-    ref: React.ForwardedRef<HTMLElement>,
-  ) => {
-    const {
-      as: Component = 'button',
-      className,
-      fullWidth,
-      size = 'lg',
-      status = 'brand',
-      variant = 'secondary',
-      ...other
-    } = props;
-
-    const componentClassName = clsx(
-      // Base styles
-      styles['clickable-style'],
-      // Sizes
-      variant !== 'link' && [
-        size === 'sm' && styles['clickable-style--sm'],
-        size === 'md' && styles['clickable-style--md'],
-        size === 'lg' && styles['clickable-style--lg'],
-      ],
-      // Variants
-      variant === 'primary' && styles['clickable-style--primary'],
-      variant === 'secondary' && styles['clickable-style--secondary'],
-      variant === 'icon' && styles['clickable-style--icon'],
-      variant === 'link' && styles['clickable-style--link'],
-      // Colors
-      status === 'brand' && styles['clickable-style--brand'],
-      status === 'neutral' && styles['clickable-style--neutral'],
-      status === 'success' && styles['clickable-style--success'],
-      status === 'warning' && styles['clickable-style--warning'],
-      status === 'error' && styles['clickable-style--error'],
-      // Other options
-      fullWidth && styles['clickable-style--full-width'],
-      className,
-    );
-
-    return <Component className={componentClassName} ref={ref} {...other} />;
-  },
-);
-
-ClickableStyle.displayName = 'ClickableStyle';
diff --git a/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap b/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap
deleted file mode 100644
index f8cce046a..000000000
--- a/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap
+++ /dev/null
@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button /> Default story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  link
-</a>
-`;
-
-exports[`<Button /> Destructive story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> IconButtonLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</a>
-`;
-
-exports[`<Button /> Link story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--link clickable-style--brand"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> LinkDisabled story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--link clickable-style--brand"
-  disabled=""
->
-  example text
-</a>
-`;
-
-exports[`<Button /> LinkNeutral story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--link clickable-style--neutral"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> Primary story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> PrimaryDisabled story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
-  disabled=""
->
-  example text
-</a>
-`;
-
-exports[`<Button /> PrimaryLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</a>
-`;
-
-exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--md clickable-style--primary clickable-style--brand"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> PrimaryRightIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  Button
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-`;
-
-exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--primary clickable-style--brand"
->
-  example text
-</a>
-`;
-
-exports[`<Button /> SecondaryDisabled story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
-  disabled=""
->
-  example text
-</a>
-`;
-
-exports[`<Button /> SecondaryLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-  Button
-</a>
-`;
-
-exports[`<Button /> TertiaryDisabled story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--neutral"
-  disabled=""
->
-  example text
-</a>
-`;
-
-exports[`<Button /> WithCustomElement story renders snapshot 1`] = `
-<button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
->
-  Example Component
-</button>
-`;
diff --git a/src/components/ClickableStyle/index.ts b/src/components/ClickableStyle/index.ts
deleted file mode 100644
index 912872a26..000000000
--- a/src/components/ClickableStyle/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { ClickableStyle as default } from './ClickableStyle';
-export type { ClickableStyleProps, VariantStatus } from './ClickableStyle';
-export { SIZES, STATUSES, VARIANTS } from './ClickableStyle';
diff --git a/src/components/FieldLabel/FieldLabel.stories.ts b/src/components/FieldLabel/FieldLabel.stories.ts
index af90fa758..db501fa69 100644
--- a/src/components/FieldLabel/FieldLabel.stories.ts
+++ b/src/components/FieldLabel/FieldLabel.stories.ts
@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 import { FieldLabel } from './FieldLabel';
 
 export default {
-  title: 'Components/V2/FieldLabel',
+  title: 'Components/FieldLabel',
   component: FieldLabel,
   args: {
     children: 'Label',
diff --git a/src/components/FieldNote/FieldNote-v2.module.css b/src/components/FieldNote/FieldNote-v2.module.css
deleted file mode 100755
index 7b93228b4..000000000
--- a/src/components/FieldNote/FieldNote-v2.module.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # FIELD NOTE
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
- 
-/**
- * Fieldnote
- */
-.field-note {
-  display: flex;
-  align-items: center;
-  
-  font: var(--eds-theme-typography-body-sm);
-
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-/**
- * Fieldnote icon
- */
-.field-note__icon {
-  position: relative;
-  margin-right: 0.25rem;
-}
-
-/**
- * Disabled variant
- */
-.field-note--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
-
-/**
- * Error variant
- */
-.field-note--error {
-  color: var(--eds-theme-color-text-utility-critical);
-
-  & > .field-note__icon {
-    color: var(--eds-theme-color-text-utility-critical);
-  }
-}
-
-
-.field-note--warning {
-  color: var(--eds-theme-color-text-utility-warning);
-
-  & > .field-note__icon {
-    color: var(--eds-theme-color-icon-utility-warning);
-  }
-}
\ No newline at end of file
diff --git a/src/components/FieldNote/FieldNote-v2.stories.tsx b/src/components/FieldNote/FieldNote-v2.stories.tsx
deleted file mode 100644
index ed8a1a1de..000000000
--- a/src/components/FieldNote/FieldNote-v2.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { FieldNote } from './FieldNote-v2';
-import { LinkV2 as Link } from '../Link';
-import Text from '../Text';
-
-export default {
-  title: 'Components/V2/FieldNote',
-  component: FieldNote,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof FieldNote>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    children: 'This is a fieldnote.',
-    id: 'field-1',
-  },
-};
-
-export const WithErrorIcon: StoryObj<Args> = {
-  args: {
-    children: 'This is a fieldnote.',
-    id: 'field-1',
-    icon: 'warning-filled',
-    status: 'critical',
-  },
-};
-
-export const WithWarningIcon: StoryObj<Args> = {
-  args: {
-    children: 'This is a fieldnote.',
-    id: 'field-1',
-    icon: 'warning-filled',
-    status: 'warning',
-  },
-};
-
-export const WithText: StoryObj<Args> = {
-  args: {
-    children: (
-      <div className="max-w-xl">
-        <Text className="mb-6">Here is a field note that involves:</Text>
-        <ul className="ml-4 list-disc">
-          <li>Multiple lines</li>
-          <li>Arbitrary HTML text</li>
-          <li>
-            Even <Link href="#">text links</Link>
-          </li>
-        </ul>
-      </div>
-    ),
-    id: 'field-1',
-  },
-};
diff --git a/src/components/FieldNote/FieldNote-v2.tsx b/src/components/FieldNote/FieldNote-v2.tsx
deleted file mode 100644
index 8ed9c5eda..000000000
--- a/src/components/FieldNote/FieldNote-v2.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Status } from '../../util/variant-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import styles from './FieldNote-v2.module.css';
-
-export interface Props {
-  // Component API
-  /**
-   * 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;
-  // Design API
-  /**
-   * Toggles disabled styling of the field note.
-   */
-  disabled?: boolean;
-  /**
-   * Icon to use when an "icon" variant of the avatar.
-   *
-   * **Default is `"dangerous"`**.
-   */
-  icon?: Extract<IconName, 'dangerous' | 'warning-filled'>;
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-}
-
-/**
- * `import {FieldNote} from "@chanzuckerberg/eds";`
- *
- * Fieldnote component wraps text to describe other components.
- */
-export const FieldNote = ({
-  children,
-  className,
-  id,
-  disabled,
-  icon,
-  status,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['field-note'],
-    disabled && styles['field-note--disabled'],
-    status === 'critical' && styles['field-note--error'],
-    status === 'warning' && styles['field-note--warning'],
-    className,
-  );
-
-  let iconToUse = icon;
-  let title = 'fieldnote status icon';
-  if (status === 'critical') {
-    iconToUse = 'dangerous';
-    title = 'error';
-  } else if (status === 'warning') {
-    iconToUse = 'warning-filled';
-    title = 'warning';
-  }
-
-  return (
-    <div
-      aria-disabled={disabled ?? undefined}
-      className={componentClassName}
-      id={id}
-      {...other}
-    >
-      {(status === 'critical' || status === 'warning' || iconToUse) && (
-        <Icon
-          className={styles['field-note__icon']}
-          name={iconToUse}
-          purpose="informative"
-          size="1rem"
-          title={title}
-        />
-      )}
-      {children}
-    </div>
-  );
-};
-
-FieldNote.displayName = 'FieldNote';
diff --git a/src/components/FieldNote/FieldNote.module.css b/src/components/FieldNote/FieldNote.module.css
index 9e5ef473e..09d597bd9 100755
--- a/src/components/FieldNote/FieldNote.module.css
+++ b/src/components/FieldNote/FieldNote.module.css
@@ -3,21 +3,27 @@
 /*------------------------------------*\
     # FIELD NOTE
 \*------------------------------------*/
-
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
 /**
  * Fieldnote
  */
 .field-note {
+  display: flex;
+  align-items: center;
+  
   font: var(--eds-theme-typography-body-sm);
+
+  color: var(--eds-theme-color-text-utility-default-secondary);
 }
 
 /**
  * Fieldnote icon
  */
 .field-note__icon {
-  /* Centers icon with accompanying text */
   position: relative;
-  bottom: 1px;
   margin-right: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
@@ -25,15 +31,25 @@
  * Disabled variant
  */
 .field-note--disabled {
-  color: var(--eds-theme-color-text-disabled);
+  color: var(--eds-theme-color-text-utility-disabled-primary);
 }
 
 /**
  * Error variant
  */
 .field-note--error {
-  color: var(--eds-theme-color-text-utility-error);
-}
-.field-note--error > .field-note__icon {
-  color: var(--eds-theme-color-icon-utility-error);
+  color: var(--eds-theme-color-text-utility-critical);
+
+  & > .field-note__icon {
+    color: var(--eds-theme-color-text-utility-critical);
+  }
 }
+
+
+.field-note--warning {
+  color: var(--eds-theme-color-text-utility-warning);
+
+  & > .field-note__icon {
+    color: var(--eds-theme-color-icon-utility-warning);
+  }
+}
\ No newline at end of file
diff --git a/src/components/FieldNote/FieldNote.stories.tsx b/src/components/FieldNote/FieldNote.stories.tsx
index 6c4f0c02d..d6d2b0c34 100644
--- a/src/components/FieldNote/FieldNote.stories.tsx
+++ b/src/components/FieldNote/FieldNote.stories.tsx
@@ -10,7 +10,7 @@ export default {
   component: FieldNote,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
 } as Meta<Args>;
 
@@ -23,12 +23,21 @@ export const Default: StoryObj<Args> = {
   },
 };
 
-export const WithIcon: StoryObj<Args> = {
+export const WithErrorIcon: StoryObj<Args> = {
   args: {
     children: 'This is a fieldnote.',
     id: 'field-1',
-    icon: 'person-add',
-    isError: true,
+    icon: 'warning-filled',
+    status: 'critical',
+  },
+};
+
+export const WithWarningIcon: StoryObj<Args> = {
+  args: {
+    children: 'This is a fieldnote.',
+    id: 'field-1',
+    icon: 'warning-filled',
+    status: 'warning',
   },
 };
 
diff --git a/src/components/FieldNote/FieldNote.test.ts b/src/components/FieldNote/FieldNote.test.ts
deleted file mode 100644
index 2d36800ae..000000000
--- a/src/components/FieldNote/FieldNote.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './FieldNote.stories';
-
-describe('<FieldNote />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/FieldNote/FieldNote.tsx b/src/components/FieldNote/FieldNote.tsx
index 7520c72e6..187272d9d 100644
--- a/src/components/FieldNote/FieldNote.tsx
+++ b/src/components/FieldNote/FieldNote.tsx
@@ -1,10 +1,12 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
+import type { Status } from '../../util/variant-types';
 import Icon, { type IconName } from '../Icon';
 import styles from './FieldNote.module.css';
 
 export interface Props {
+  // Component API
   /**
    * Child node(s) that can be nested inside component
    */
@@ -14,21 +16,26 @@ export interface Props {
    */
   className?: string;
   /**
-   * Toggles disabled styling of the field note.
+   * HTML id for the component
    */
-  disabled?: boolean;
+  id?: string;
+  // Design API
   /**
-   * Icon to use when an "icon" variant of the avatar. Default is "dangerous"
+   * Toggles disabled styling of the field note.
    */
-  icon?: IconName;
+  disabled?: boolean;
   /**
-   * HTML id for the component
+   * Icon to use when an "icon" variant of the avatar.
+   *
+   * **Default is `"dangerous"`**.
    */
-  id?: string;
+  icon?: Extract<IconName, 'dangerous' | 'warning-filled'>;
   /**
-   * Error state of the form field
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
    */
-  isError?: boolean;
+  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
 }
 
 /**
@@ -37,29 +44,46 @@ export interface Props {
  * Fieldnote component wraps text to describe other components.
  */
 export const FieldNote = ({
+  children,
   className,
-  disabled,
-  icon = 'dangerous',
   id,
-  isError,
-  children,
+  disabled,
+  icon,
+  status,
   ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['field-note'],
     disabled && styles['field-note--disabled'],
-    isError && styles['field-note--error'],
+    status === 'critical' && styles['field-note--error'],
+    status === 'warning' && styles['field-note--warning'],
     className,
   );
+
+  let iconToUse = icon;
+  let title = 'fieldnote status icon';
+  if (status === 'critical') {
+    iconToUse = 'dangerous';
+    title = 'error';
+  } else if (status === 'warning') {
+    iconToUse = 'warning-filled';
+    title = 'warning';
+  }
+
   return (
-    <div className={componentClassName} id={id} {...other}>
-      {isError && (
+    <div
+      aria-disabled={disabled ?? undefined}
+      className={componentClassName}
+      id={id}
+      {...other}
+    >
+      {(status === 'critical' || status === 'warning' || iconToUse) && (
         <Icon
           className={styles['field-note__icon']}
-          name={icon}
+          name={iconToUse}
           purpose="informative"
           size="1rem"
-          title="error"
+          title={title}
         />
       )}
       {children}
diff --git a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
deleted file mode 100644
index d6665244a..000000000
--- a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FieldNote /> Default story renders snapshot 1`] = `
-<div
-  class="field-note"
-  id="field-1"
->
-  This is a fieldnote.
-</div>
-`;
-
-exports[`<FieldNote /> WithIcon story renders snapshot 1`] = `
-<div
-  class="field-note field-note--error"
-  id="field-1"
->
-  <svg
-    class="icon field-note__icon"
-    fill="currentColor"
-    height="1rem"
-    role="img"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      error
-    </title>
-    <path
-      d="M19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-    />
-  </svg>
-  This is a fieldnote.
-</div>
-`;
-
-exports[`<FieldNote /> WithText story renders snapshot 1`] = `
-<div
-  class="field-note"
-  id="field-1"
->
-  <div
-    class="max-w-xl"
-  >
-    <p
-      class="text text--body-md mb-6"
-    >
-      Here is a field note that involves:
-    </p>
-    <ul
-      class="ml-4 list-disc"
-    >
-      <li>
-        Multiple lines
-      </li>
-      <li>
-        Arbitrary HTML text
-      </li>
-      <li>
-        Even 
-        <a
-          class="link link--link link--brand"
-          href="#"
-        >
-          text links
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
diff --git a/src/components/FieldNote/index.ts b/src/components/FieldNote/index.ts
index cf6affa38..fb49e63ba 100644
--- a/src/components/FieldNote/index.ts
+++ b/src/components/FieldNote/index.ts
@@ -1,2 +1 @@
 export { FieldNote as default } from './FieldNote';
-export { FieldNote as FieldNoteV2 } from './FieldNote-v2';
diff --git a/src/components/Fieldset/__snapshots__/Fieldset.test.ts.snap b/src/components/Fieldset/__snapshots__/Fieldset.test.ts.snap
index 1f365bc35..f3ac35658 100644
--- a/src/components/Fieldset/__snapshots__/Fieldset.test.ts.snap
+++ b/src/components/Fieldset/__snapshots__/Fieldset.test.ts.snap
@@ -21,12 +21,16 @@ exports[`<Fieldset /> Default story renders snapshot 1`] = `
         id=":r0:"
         type="checkbox"
       />
-      <label
-        class="label label--lg"
-        for=":r0:"
+      <div
+        class="checkbox__labels"
       >
-        Checkbox label 1
-      </label>
+        <label
+          class="label label--lg"
+          for=":r0:"
+        >
+          Checkbox label 1
+        </label>
+      </div>
     </div>
     <div
       class="checkbox"
@@ -36,12 +40,16 @@ exports[`<Fieldset /> Default story renders snapshot 1`] = `
         id=":r1:"
         type="checkbox"
       />
-      <label
-        class="label label--lg"
-        for=":r1:"
+      <div
+        class="checkbox__labels"
       >
-        Checkbox label 2
-      </label>
+        <label
+          class="label label--lg"
+          for=":r1:"
+        >
+          Checkbox label 2
+        </label>
+      </div>
     </div>
     <div
       class="checkbox"
@@ -51,12 +59,16 @@ exports[`<Fieldset /> Default story renders snapshot 1`] = `
         id=":r2:"
         type="checkbox"
       />
-      <label
-        class="label label--lg"
-        for=":r2:"
+      <div
+        class="checkbox__labels"
       >
-        Checkbox label 3
-      </label>
+        <label
+          class="label label--lg"
+          for=":r2:"
+        >
+          Checkbox label 3
+        </label>
+      </div>
     </div>
     <div
       class="checkbox"
@@ -66,12 +78,16 @@ exports[`<Fieldset /> Default story renders snapshot 1`] = `
         id=":r3:"
         type="checkbox"
       />
-      <label
-        class="label label--lg"
-        for=":r3:"
+      <div
+        class="checkbox__labels"
       >
-        Checkbox label 4
-      </label>
+        <label
+          class="label label--lg"
+          for=":r3:"
+        >
+          Checkbox label 4
+        </label>
+      </div>
     </div>
     <div
       class="checkbox"
@@ -81,12 +97,16 @@ exports[`<Fieldset /> Default story renders snapshot 1`] = `
         id=":r4:"
         type="checkbox"
       />
-      <label
-        class="label label--lg"
-        for=":r4:"
+      <div
+        class="checkbox__labels"
       >
-        Checkbox label 5
-      </label>
+        <label
+          class="label label--lg"
+          for=":r4:"
+        >
+          Checkbox label 5
+        </label>
+      </div>
     </div>
   </div>
 </fieldset>
diff --git a/src/components/HorizontalStepper/HorizontalStepper.stories.tsx b/src/components/HorizontalStepper/HorizontalStepper.stories.tsx
index 6e16b5257..0b5f5089e 100644
--- a/src/components/HorizontalStepper/HorizontalStepper.stories.tsx
+++ b/src/components/HorizontalStepper/HorizontalStepper.stories.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { HorizontalStepper } from './HorizontalStepper';
 import Button from '../Button';
 import ButtonGroup from '../ButtonGroup';
-import Icon from '../Icon';
 
 export default {
   title: 'Components/HorizontalStepper',
@@ -18,12 +17,7 @@ export default {
     badges: ['intro-1.0'],
   },
 
-  decorators: [
-    (Story) => (
-      // Pushes contents away from storybook borders.
-      <div className="m-4">{Story()}</div>
-    ),
-  ],
+  decorators: [(Story) => <div className="m-4">{Story()}</div>],
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof HorizontalStepper>;
@@ -61,12 +55,16 @@ const InteractiveHorizontalStepper = ({ steps }: Args) => {
       <HorizontalStepper activeIndex={activeIndex} steps={steps} />
       <br />
       <ButtonGroup>
-        <Button onClick={onClickBack} variant="secondary">
+        <Button onClick={onClickBack} rank="secondary">
           Back
         </Button>
-        <Button onClick={onClickNext} variant="primary">
+        <Button
+          icon="arrow-right"
+          iconLayout="right"
+          onClick={onClickNext}
+          rank="primary"
+        >
           Next
-          <Icon name="arrow-forward" purpose="decorative" size="1.5rem" />
         </Button>
       </ButtonGroup>
     </>
diff --git a/src/components/HorizontalStepper/HorizontalStepper.tsx b/src/components/HorizontalStepper/HorizontalStepper.tsx
index 7c14d4300..1f8746401 100644
--- a/src/components/HorizontalStepper/HorizontalStepper.tsx
+++ b/src/components/HorizontalStepper/HorizontalStepper.tsx
@@ -33,9 +33,9 @@ export type StepProps = {
    */
   className?: string;
   /**
-   * Icon override for component. Default is 'check-circle'
+   * Icon override for component.'
    */
-  icon?: Extract<IconName, 'check-circle'>;
+  icon?: Extract<IconName, 'checkmark-encircled-filled'>;
   /**
    * Indicates which number the step is.
    */
@@ -150,7 +150,7 @@ export const HorizontalStepper = ({
  */
 export const HorizontalStep = ({
   className,
-  icon = 'check-circle',
+  icon = 'checkmark-encircled-filled',
   stepNumber,
   text,
   variant,
@@ -176,9 +176,9 @@ export const HorizontalStep = ({
       <NumberIcon
         aria-label={`current step ${stepNumber} ${text}`}
         className={numberIconClassName}
-        incomplete={variant !== 'active'}
+        // incomplete={variant !== 'active'}
         number={stepNumber}
-        numberIconTitle={`incomplete step ${stepNumber} ${text}`}
+        // numberIconTitle={`incomplete step ${stepNumber} ${text}`}
       />
     );
 
diff --git a/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap b/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
index 2c99456f5..cc65f7b08 100644
--- a/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
+++ b/src/components/HorizontalStepper/__snapshots__/HorizontalStepper.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 1 Step 1"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         1
       </span>
@@ -32,26 +33,11 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 2 Step 2"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 2 Step 2
-          </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>
+        2
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -68,26 +54,11 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 3 Step 3"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 3 Step 3
-          </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>
+        3
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -104,26 +75,11 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 4 Step 4"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 4 Step 4
-          </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>
+        4
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -140,26 +96,11 @@ exports[`<HorizontalStepper /> CappedLine story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 5 Step 5"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 5 Step 5
-          </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>
+        5
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -340,26 +281,11 @@ exports[`<HorizontalStepper /> HorizontalSteps story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 1 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 1 Horizontal 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>
+        1
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -372,8 +298,9 @@ exports[`<HorizontalStepper /> HorizontalSteps story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 1 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         1
       </span>
@@ -425,8 +352,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 1 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         1
       </span>
@@ -441,8 +369,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 2 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         2
       </span>
@@ -457,8 +386,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 3 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         3
       </span>
@@ -473,8 +403,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 4 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         4
       </span>
@@ -489,8 +420,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 5 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         5
       </span>
@@ -505,8 +437,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 6 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         6
       </span>
@@ -521,8 +454,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 7 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         7
       </span>
@@ -537,8 +471,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 8 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         8
       </span>
@@ -553,8 +488,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 9 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         9
       </span>
@@ -569,8 +505,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 10 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         10
       </span>
@@ -585,8 +522,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 21 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         21
       </span>
@@ -601,8 +539,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 32 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         32
       </span>
@@ -617,8 +556,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 43 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         43
       </span>
@@ -633,8 +573,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 54 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         54
       </span>
@@ -649,8 +590,9 @@ exports[`<HorizontalStepper /> HorizontalStepsDifferentNumbers story renders sna
     >
       <span
         aria-label="current step 65 Horizontal step"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         65
       </span>
@@ -676,8 +618,9 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 1 Step 1"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         1
       </span>
@@ -696,26 +639,11 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 2 Step 2"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 2 Step 2
-          </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>
+        2
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -732,26 +660,11 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 3 Step 3"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 3 Step 3
-          </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>
+        3
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -768,26 +681,11 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 4 Step 4"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 4 Step 4
-          </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>
+        4
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -804,26 +702,11 @@ exports[`<HorizontalStepper /> OnFirstStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 5 Step 5"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 5 Step 5
-          </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>
+        5
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -967,8 +850,9 @@ exports[`<HorizontalStepper /> OnLastStep story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 5 Step 5"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         5
       </span>
@@ -1054,8 +938,9 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 3 Step 3"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg horizontal-step__number-icon"
+        class="text text--label-lg-subtle horizontal-step__number-icon number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
         3
       </span>
@@ -1074,26 +959,11 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 4 Step 4"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 4 Step 4
-          </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>
+        4
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
@@ -1110,26 +980,11 @@ exports[`<HorizontalStepper /> SomeCompletedSteps story renders snapshot 1`] = `
     >
       <span
         aria-label="current step 5 Step 5"
-        class="text text--body-sm number-icon number-icon--base number-icon--lg number-icon--incomplete horizontal-step__number-icon horizontal-step__number-icon--incomplete"
+        class="text text--label-lg-subtle horizontal-step__number-icon horizontal-step__number-icon--incomplete number-icon number-icon--size-lg number-icon--status-default"
         role="img"
+        tabindex="-1"
       >
-        <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 5 Step 5
-          </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>
+        5
       </span>
       <span
         class="text text--body-sm horizontal-step__text"
diff --git a/src/components/Icon/Icon-v2.module.css b/src/components/Icon/Icon-v2.module.css
deleted file mode 100755
index 8db0ecf7a..000000000
--- a/src/components/Icon/Icon-v2.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/* ------------------------------------*\
-    # ICON
-\*------------------------------------ */
-
-/**
- * Small graphic that represents functionality.
- */
-.icon {
-  display: inline-block;
-  /**
-   * Size Priority:
-   * 1: --icon-size, passed through props
-   * 2: --icon-size-default, determined by context (text, button, pill)
-   * default: 1em, same size as surrounding text
-   *
-   * Inspired by https://www.youtube.com/watch?v=EDyiaDJJu-4
-   */
-  width: var(--icon-size, var(--icon-size-default, 1em));
-  height: var(--icon-size, var(--icon-size-default, 1em));
-}
diff --git a/src/components/Icon/Icon-v2.stories.tsx b/src/components/Icon/Icon-v2.stories.tsx
deleted file mode 100644
index f4a673dcd..000000000
--- a/src/components/Icon/Icon-v2.stories.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import kebabCase from 'lodash/kebabCase';
-import React from 'react';
-import { Icon, type IconProps } from './Icon-v2';
-import icons, { type IconName } from '../../icons/spritemap-v2';
-import * as ColorTokens from '../../tokens-dist/ts/colors';
-import Text from '../Text';
-import styles from './Icon.stories.module.css';
-
-const meta: Meta<typeof Icon> = {
-  title: 'Components/V2/Icon',
-  component: Icon,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  argTypes: {
-    name: {
-      control: {
-        type: 'select',
-      },
-      options: Object.keys(icons),
-    },
-    color: {
-      control: {
-        type: 'select',
-      },
-      // For now, take the variables and convert to equivalent tokens for the UI
-      options: [
-        'currentColor',
-        ...Object.keys(ColorTokens)
-          .filter((tokenVarName) => tokenVarName.indexOf('Icon') !== -1)
-          .map((tokenVarName) => `var(--${kebabCase(tokenVarName)})`),
-      ],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-export const Default: Story = {
-  render: ({ name, color, ...rest }) => {
-    return <Icon {...rest} color={color} name={name} />;
-  },
-  args: {
-    name: 'close',
-    purpose: 'decorative' as const,
-  },
-};
-
-export const Medium: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    size: '2em',
-  },
-};
-
-export const Large: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    size: '4em',
-  },
-};
-
-/**
- * You can control the color of the icon using any valid CSS color values, including our token suite.
- *
- * If `currentColor` for the whole container isn't sufficient,
- * use a CSS variable in `color` with the token you need, or
- * style `fill` with Tailwind: https://tailwindcss.com/docs/fill
- */
-export const CustomColor: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    color: 'var(--eds-theme-color-icon-utility-critical)',
-    size: '2em',
-  },
-};
-
-/**
- * Icons are positioned naturally in lines of text. Use the size, color, or other props
- * to match the recommended design and layout.
- *
- * See: https://material-ui.com/components/material-icons/
- */
-export const InText: Story = {
-  render: (args) => {
-    return (
-      <Text as="p">
-        The svg icon defaults to the surrounding text size (
-        <Icon
-          {...args}
-          name="add-encircled"
-          purpose="informative"
-          title="icon with 1em line height"
-        />
-        ; 1em) by default.
-      </Text>
-    );
-  },
-};
-
-/**
- * If your product needs icons not currently existing in the suite, you can introduce new
- * accessible icons by inserting the body of an SVG into `Icon`. Each resulting icon can be
- * treated like a standalone component, matching the recipe defined by design.
- */
-export const WithChildrenSvg: Story = {
-  ...Default,
-  args: {
-    viewBox: '0 0 24 24',
-    children: (
-      <path d="M11.6144 8.96051C12.2524 7.61848 13.9514 4.56304 14.905 3C15.5557 3.28671 16.1844 3.61871 16.7863 3.99342C15.9964 5.50177 14.2272 8.6643 13.5144 9.87646C14.7414 9.45266 18.4783 8.3362 20.1657 7.89646C20.4765 8.60506 20.8294 9.55291 21 10.0815C19.0439 10.5737 15.0872 11.5078 13.699 11.8109C15.335 12.2848 17.9431 13.0914 19.8642 13.7408C19.6118 14.2352 19.0345 15.2354 18.6209 15.9122C17.034 15.3311 15.0639 14.5451 13.4794 13.8934C13.9 14.3491 16.8143 17.8329 17.5178 18.7147C17.1322 19.2023 16.4217 20.0157 15.9566 20.5101C14.6058 18.7876 13.1522 16.819 12.0047 15.2149C12.0911 16.0785 12.3412 19.4119 12.43 20.8701C11.764 20.9339 10.8455 20.9841 10.093 21C10.0345 18.7739 10.0065 16.9648 10.0088 15.7253C9.39652 16.6367 7.40068 19.4734 6.97066 20.0544C6.58504 19.7263 5.80213 18.9152 5.48429 18.5985C6.41911 17.2975 8.24201 14.9939 9.14412 13.8957C8.24435 14.1965 4.57518 15.3266 3.53519 15.6046C3.35991 15.0418 3.11685 14.1076 3 13.5334C4.11945 13.2395 7.56661 12.4352 8.98987 12.1322C8.04103 11.5603 5.13607 9.68506 3.88574 8.81013C4.35316 8.17671 4.91872 7.48633 5.43521 6.88481C6.44015 7.60709 8.7772 9.32734 9.5718 9.92203C9.00857 7.9238 8.57388 5.88 8.13918 3.57646C8.9025 3.38437 9.67878 3.24503 10.4622 3.15949C10.6679 4.05949 11.4298 8.09468 11.6144 8.96051Z" />
-    ),
-  },
-};
-
-const IconsInGrid = (args: IconProps) => (
-  <div>
-    <ul className={styles['icon-grid']}>
-      {(Object.keys(icons) as IconName[]).map((name) => {
-        return (
-          <li className={styles['icon-grid__item']} key={name}>
-            <Icon className={styles['icon-grid__icon']} name={name} {...args} />
-            <span className={styles['icon-grid__text']}>{name}</span>
-          </li>
-        );
-      })}
-    </ul>
-  </div>
-);
-
-/**
- * Grid of all the available icons. Use the controls to change color, or other attributes
- *
- * **NOTE**: some icons marked as deprecated will be removed in future releases.
- */
-export const IconGrid: Story = {
-  render: (args) => <IconsInGrid {...args} />,
-  parameters: {
-    layout: 'padded',
-  },
-};
diff --git a/src/components/Icon/Icon-v2.test.ts b/src/components/Icon/Icon-v2.test.ts
deleted file mode 100644
index af6f4f3b1..000000000
--- a/src/components/Icon/Icon-v2.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 './Icon-v2.stories';
-
-describe('<Icon /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/Icon/Icon-v2.tsx b/src/components/Icon/Icon-v2.tsx
deleted file mode 100644
index 420e31a23..000000000
--- a/src/components/Icon/Icon-v2.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode, CSSProperties } from 'react';
-import React from 'react';
-import icons, { type IconName } from '../../icons/spritemap-v2';
-import styles from './Icon-v2.module.css';
-
-export type { IconName } from '../../icons/spritemap-v2';
-
-// TODO: export union utility type of "Extract<IconName, T> | (renderProps) => ReactNode" when updating IconName usages
-
-interface IconPropsBase {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Either a fragment of svg elements (g, path, circle, etc.), or a single
-   * svg element. Useful for creating specific icon components.
-   *
-   * @example
-   * function CircleIcon(props: IconProps) {
-   *   return (
-   *     <Icon {...props}>
-   *       <circle cx="50" cy="50" r="50" />
-   *     </Icon>
-   *   )
-   * }
-   */
-  children?: ReactNode;
-  /**
-   * The SVG Color, expects a valid css color (hex, rgb, css variable, etc.).
-   *
-   */
-  color?: string;
-  /**
-   * ID used so the svg can read the title of the SVG icon to the user when accessibility is needed
-   */
-  id?: string;
-  /**
-   * Name of icon to reference in icon sprite
-   */
-  name?: IconName;
-  /**
-   * Width/Height string (px, rem, em, vh, etc.)
-   * Generally prefer using "em" as it sizes to its parent container.
-   */
-  size?: string;
-  /**
-   * viewBox for the svg, used when the svg information is passed via children.
-   * To match included icons, recommend view box of "0 0 24 24"
-   */
-  viewBox?: string;
-}
-
-interface InformativeIconProps extends IconPropsBase {
-  /**
-   * The role of the icon.
-   *
-   * Use "informative" when the icon **_does_** provide additional meaning to other text on the
-   * page. You'll be required to pass in a title to label the icon.
-   */
-  purpose: 'informative';
-  title: string;
-}
-
-interface DecorativeIconProps extends IconPropsBase {
-  /**
-   * The role of the icon.
-   *
-   * Use "decorative" when the icon **_does not_** provide any additional context or meaning to
-   * associated text. Basically the icon is for show and people don't need it to understand what's
-   * on the page.
-   */
-  purpose: 'decorative';
-}
-
-export type IconProps = DecorativeIconProps | InformativeIconProps;
-
-interface SvgStyle extends CSSProperties {
-  '--icon-size'?: string;
-}
-
-/**
- * `import {Icon} from "@chanzuckerberg/eds";`
- *
- * Render arbitrary SVG path data while enforcing good accessibility practices.
- *
- * Icons are based on [Material Rounded](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Rounded),
- * and are encoded in a spritemap in `src/icons`.
- */
-export const Icon = (props: IconProps) => {
-  const {
-    children,
-    className,
-    color = 'currentColor',
-    name,
-    id,
-    purpose,
-    size,
-    viewBox,
-  } = props;
-
-  const componentClassName = clsx(styles['icon'], className);
-  const style: SvgStyle = {
-    '--icon-size': size,
-  };
-
-  const svgCommonProps = {
-    className: componentClassName,
-    fill: color,
-    height: size,
-    /**
-     * height/width html properties are overriden by the defaults applied in CSS module
-     */
-    style,
-    width: size,
-    xmlns: 'http://www.w3.org/2000/svg',
-    viewBox: name ? icons[name].viewBox : viewBox,
-  };
-
-  // allow passing custom SVGs to render, otherwise
-  // load from the spritemap of EDS icons
-  const computedSvg = name ? icons[name].content : children;
-
-  if (purpose === 'informative') {
-    return (
-      <svg {...svgCommonProps} role="img">
-        <title id={id}>{props.title}</title>
-        {computedSvg}
-      </svg>
-    );
-  } else {
-    return (
-      <svg {...svgCommonProps} aria-hidden>
-        {computedSvg}
-      </svg>
-    );
-  }
-};
-
-Icon.displayName = 'Icon';
diff --git a/src/components/Icon/Icon.module.css b/src/components/Icon/Icon.module.css
index 6e91c55bd..8db0ecf7a 100755
--- a/src/components/Icon/Icon.module.css
+++ b/src/components/Icon/Icon.module.css
@@ -18,10 +18,3 @@
   width: var(--icon-size, var(--icon-size-default, 1em));
   height: var(--icon-size, var(--icon-size-default, 1em));
 }
-
-/**
- * A block icon fills 100% of the width of its container
- */
-.icon--full-width {
-  display: block;
-}
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 9845ce834..61f77cdc7 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -2,9 +2,10 @@ import type { StoryObj, Meta } from '@storybook/react';
 import kebabCase from 'lodash/kebabCase';
 import React from 'react';
 import { Icon, type IconProps } from './Icon';
-import icons, { type IconName } from '../../icons/spritemap';
+import icons, { type IconName } from '../../icons/spritemap-v2';
 import * as ColorTokens from '../../tokens-dist/ts/colors';
 import Text from '../Text';
+
 import styles from './Icon.stories.module.css';
 
 const meta: Meta<typeof Icon> = {
@@ -12,7 +13,7 @@ const meta: Meta<typeof Icon> = {
   component: Icon,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   argTypes: {
     name: {
@@ -28,9 +29,9 @@ const meta: Meta<typeof Icon> = {
       // For now, take the variables and convert to equivalent tokens for the UI
       options: [
         'currentColor',
-        ...Object.keys(ColorTokens).map(
-          (tokenVarName) => `var(--${kebabCase(tokenVarName)})`,
-        ),
+        ...Object.keys(ColorTokens)
+          .filter((tokenVarName) => tokenVarName.indexOf('Icon') !== -1)
+          .map((tokenVarName) => `var(--${kebabCase(tokenVarName)})`),
       ],
     },
   },
@@ -76,7 +77,7 @@ export const CustomColor: Story = {
   ...Default,
   args: {
     ...Default.args,
-    color: 'var(--eds-color-brand-grape-400)',
+    color: 'var(--eds-theme-color-icon-utility-critical)',
     size: '2em',
   },
 };
@@ -94,7 +95,7 @@ export const InText: Story = {
         The svg icon defaults to the surrounding text size (
         <Icon
           {...args}
-          name="account-circle"
+          name="add-encircled"
           purpose="informative"
           title="icon with 1em line height"
         />
@@ -127,62 +128,6 @@ const IconsInGrid = (args: IconProps) => (
           <li className={styles['icon-grid__item']} key={name}>
             <Icon className={styles['icon-grid__icon']} name={name} {...args} />
             <span className={styles['icon-grid__text']}>{name}</span>
-            {name === 'avatar' && (
-              <div className={styles['icon-grid__deprecation']}>
-                <Icon
-                  className={styles['icon-grid__deprecation-icon']}
-                  name="status-error"
-                  {...args}
-                />
-                This has been replaced by person. This will be deprecated
-              </div>
-            )}
-            {name === 'class-copy' && (
-              <div className={styles['icon-grid__deprecation']}>
-                <Icon
-                  className={styles['icon-grid__deprecation-icon']}
-                  name="status-error"
-                  {...args}
-                />
-                This has been replaced by book. This will be deprecated
-              </div>
-            )}
-            {name === 'file-copy' && (
-              <div className={styles['icon-grid__deprecation']}>
-                <Icon
-                  className={styles['icon-grid__deprecation-icon']}
-                  name="status-error"
-                  {...args}
-                />
-                This has been replaced by copy. This will be deprecated
-              </div>
-            )}
-            {name === 'more-vert' && (
-              <div className={styles['icon-grid__deprecation']}>
-                <Icon
-                  className={styles['icon-grid__deprecation-icon']}
-                  name="status-error"
-                  {...args}
-                />
-                This has been replaced by dots-vertical. This will be deprecated
-              </div>
-            )}
-            {[
-              'status-check-circle',
-              'status-error',
-              'status-info',
-              'status-warning',
-            ].includes(name) && (
-              <div className={styles['icon-grid__deprecation']}>
-                <Icon
-                  className={styles['icon-grid__deprecation-icon']}
-                  name="status-error"
-                  {...args}
-                />
-                Icons with baked-in colors are not recommended. This will be
-                deprecated.
-              </div>
-            )}
           </li>
         );
       })}
@@ -197,4 +142,7 @@ const IconsInGrid = (args: IconProps) => (
  */
 export const IconGrid: Story = {
   render: (args) => <IconsInGrid {...args} />,
+  parameters: {
+    layout: 'padded',
+  },
 };
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index a3de1556f..58ed1a339 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import type { ReactNode, CSSProperties } from 'react';
 import React from 'react';
-import icons, { type IconName } from '../../icons/spritemap';
+import icons, { type IconName } from '../../icons/spritemap-v2';
 import styles from './Icon.module.css';
 
-export type { IconName } from '../../icons/spritemap';
+export type { IconName } from '../../icons/spritemap-v2';
 
 // TODO: export union utility type of "Extract<IconName, T> | (renderProps) => ReactNode" when updating IconName usages
 
@@ -32,11 +32,6 @@ interface IconPropsBase {
    *
    */
   color?: string;
-  /**
-   * If true, the element will be displayed as a block, otherwise
-   * default is inline like images
-   */
-  fullWidth?: boolean;
   /**
    * ID used so the svg can read the title of the SVG icon to the user when accessibility is needed
    */
@@ -52,6 +47,7 @@ interface IconPropsBase {
   size?: string;
   /**
    * viewBox for the svg, used when the svg information is passed via children.
+   * To match included icons, recommend view box of "0 0 24 24"
    */
   viewBox?: string;
 }
@@ -98,18 +94,13 @@ export const Icon = (props: IconProps) => {
     className,
     color = 'currentColor',
     name,
-    fullWidth = false,
     id,
     purpose,
     size,
     viewBox,
   } = props;
 
-  const componentClassName = clsx(
-    styles['icon'],
-    fullWidth && styles['icon--full-width'],
-    className,
-  );
+  const componentClassName = clsx(styles['icon'], className);
   const style: SvgStyle = {
     '--icon-size': size,
   };
diff --git a/src/components/Icon/__snapshots__/Icon-v2.test.ts.snap b/src/components/Icon/__snapshots__/Icon-v2.test.ts.snap
deleted file mode 100644
index 6b1f4363d..000000000
--- a/src/components/Icon/__snapshots__/Icon-v2.test.ts.snap
+++ /dev/null
@@ -1,2476 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Icon /> (v2) CustomColor story renders snapshot 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon"
-  fill="var(--eds-theme-color-icon-utility-critical)"
-  height="2em"
-  style="--icon-size: 2em;"
-  viewBox="0 0 24 24"
-  width="2em"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <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>
-`;
-
-exports[`<Icon /> (v2) Default story renders snapshot 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon"
-  fill="currentColor"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <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>
-`;
-
-exports[`<Icon /> (v2) IconGrid story renders snapshot 1`] = `
-<div>
-  <ul
-    class="icon-grid"
-  >
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__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>
-      <span
-        class="icon-grid__text"
-      >
-        add
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        add-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12.9999 12.6004V9.00039C12.9999 8.71706 12.9041 8.47956 12.7124 8.28789C12.5207 8.09622 12.2832 8.00039 11.9999 8.00039C11.7166 8.00039 11.4791 8.09622 11.2874 8.28789C11.0957 8.47956 10.9999 8.71706 10.9999 9.00039V12.9754C10.9999 13.1087 11.0249 13.2379 11.0749 13.3629C11.1249 13.4879 11.1999 13.6004 11.2999 13.7004L14.0999 16.5004C14.2832 16.6837 14.5166 16.7754 14.7999 16.7754C15.0832 16.7754 15.3166 16.6837 15.4999 16.5004C15.6832 16.3171 15.7749 16.0837 15.7749 15.8004C15.7749 15.5171 15.6832 15.2837 15.4999 15.1004L12.9999 12.6004ZM11.9999 22.0004C10.7499 22.0004 9.57907 21.7629 8.4874 21.2879C7.39574 20.8129 6.44574 20.1712 5.6374 19.3629C4.82907 18.5546 4.1874 17.6046 3.7124 16.5129C3.2374 15.4212 2.9999 14.2504 2.9999 13.0004C2.9999 11.7504 3.2374 10.5796 3.7124 9.48789C4.1874 8.39622 4.82907 7.44622 5.6374 6.63789C6.44574 5.82956 7.39574 5.18789 8.4874 4.71289C9.57907 4.23789 10.7499 4.00039 11.9999 4.00039C13.2499 4.00039 14.4207 4.23789 15.5124 4.71289C16.6041 5.18789 17.5541 5.82956 18.3624 6.63789C19.1707 7.44622 19.8124 8.39622 20.2874 9.48789C20.7624 10.5796 20.9999 11.7504 20.9999 13.0004C20.9999 14.2504 20.7624 15.4212 20.2874 16.5129C19.8124 17.6046 19.1707 18.5546 18.3624 19.3629C17.5541 20.1712 16.6041 20.8129 15.5124 21.2879C14.4207 21.7629 13.2499 22.0004 11.9999 22.0004ZM2.0499 7.30039C1.86657 7.11706 1.7749 6.88372 1.7749 6.60039C1.7749 6.31706 1.86657 6.08372 2.0499 5.90039L4.8999 3.05039C5.08324 2.86706 5.31657 2.77539 5.5999 2.77539C5.88324 2.77539 6.11657 2.86706 6.2999 3.05039C6.48324 3.23372 6.5749 3.46706 6.5749 3.75039C6.5749 4.03372 6.48324 4.26706 6.2999 4.45039L3.4499 7.30039C3.26657 7.48372 3.03324 7.57539 2.7499 7.57539C2.46657 7.57539 2.23324 7.48372 2.0499 7.30039ZM21.9499 7.30039C21.7666 7.48372 21.5332 7.57539 21.2499 7.57539C20.9666 7.57539 20.7332 7.48372 20.5499 7.30039L17.6999 4.45039C17.5166 4.26706 17.4249 4.03372 17.4249 3.75039C17.4249 3.46706 17.5166 3.23372 17.6999 3.05039C17.8832 2.86706 18.1166 2.77539 18.3999 2.77539C18.6832 2.77539 18.9166 2.86706 19.0999 3.05039L21.9499 5.90039C22.1332 6.08372 22.2249 6.31706 22.2249 6.60039C22.2249 6.88372 22.1332 7.11706 21.9499 7.30039ZM11.9999 20.0004C13.9499 20.0004 15.6041 19.3212 16.9624 17.9629C18.3207 16.6046 18.9999 14.9504 18.9999 13.0004C18.9999 11.0504 18.3207 9.39622 16.9624 8.03789C15.6041 6.67956 13.9499 6.00039 11.9999 6.00039C10.0499 6.00039 8.39574 6.67956 7.0374 8.03789C5.67907 9.39622 4.9999 11.0504 4.9999 13.0004C4.9999 14.9504 5.67907 16.6046 7.0374 17.9629C8.39574 19.3212 10.0499 20.0004 11.9999 20.0004Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        alarm
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15 12h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1zm6.18-6.99L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        alarm-add
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-down
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18.3,14.29L18.3,14.29c-0.39-0.39-1.02-0.39-1.41,0L13,18.17V3c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v15.18l-3.88-3.88 c-0.39-0.39-1.02-0.39-1.41,0l0,0c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59 C18.68,15.32,18.68,14.68,18.3,14.29z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-down-narrow
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-left
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-left-narrow
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-right
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-right-narrow
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5.71,9.7L5.71,9.7c0.39,0.39,1.02,0.39,1.41,0L11,5.83V21c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V5.83l3.88,3.88 c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L12.7,2.7c-0.39-0.39-1.02-0.39-1.41,0L5.71,8.29 C5.32,8.68,5.32,9.32,5.71,9.7z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        arrow-up-narrow
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12.0498C6 12.3331 6.02083 12.6081 6.0625 12.8748C6.10417 13.1415 6.16667 13.4081 6.25 13.6748C6.33333 13.9581 6.34167 14.2456 6.275 14.5373C6.20833 14.829 6.06667 15.0831 5.85 15.2998C5.66667 15.4831 5.44583 15.5665 5.1875 15.5498C4.92917 15.5331 4.75 15.4081 4.65 15.1748C4.43333 14.6748 4.27083 14.1623 4.1625 13.6373C4.05417 13.1123 4 12.5831 4 12.0498C4 9.81647 4.775 7.91647 6.325 6.3498C7.875 4.78314 9.76667 3.9998 12 3.9998H12.175L11.275 3.0998C11.0917 2.91647 11 2.68314 11 2.3998C11 2.11647 11.0917 1.88314 11.275 1.6998C11.4583 1.51647 11.6917 1.4248 11.975 1.4248C12.2583 1.4248 12.4917 1.51647 12.675 1.6998L15.275 4.2998C15.475 4.4998 15.575 4.73314 15.575 4.9998C15.575 5.26647 15.475 5.4998 15.275 5.6998L12.675 8.2998C12.4917 8.48314 12.2583 8.5748 11.975 8.5748C11.6917 8.5748 11.4583 8.48314 11.275 8.2998C11.0917 8.11647 11 7.88314 11 7.5998C11 7.31647 11.0917 7.08314 11.275 6.8998L12.175 5.9998H12C10.3333 5.9998 8.91667 6.5873 7.75 7.7623C6.58333 8.9373 6 10.3665 6 12.0498ZM18 11.9498C18 11.6665 17.9792 11.3915 17.9375 11.1248C17.8958 10.8581 17.8333 10.5915 17.75 10.3248C17.6667 10.0415 17.6583 9.75397 17.725 9.46231C17.7917 9.17064 17.9333 8.91647 18.15 8.6998C18.3333 8.51647 18.5542 8.43314 18.8125 8.4498C19.0708 8.46647 19.25 8.59147 19.35 8.8248C19.5667 9.3248 19.7292 9.83731 19.8375 10.3623C19.9458 10.8873 20 11.4165 20 11.9498C20 14.1831 19.225 16.0831 17.675 17.6498C16.125 19.2165 14.2333 19.9998 12 19.9998H11.825L12.725 20.8998C12.9083 21.0831 13 21.3165 13 21.5998C13 21.8831 12.9083 22.1165 12.725 22.2998C12.5417 22.4831 12.3083 22.5748 12.025 22.5748C11.7417 22.5748 11.5083 22.4831 11.325 22.2998L8.725 19.6998C8.525 19.4998 8.425 19.2665 8.425 18.9998C8.425 18.7331 8.525 18.4998 8.725 18.2998L11.325 15.6998C11.5083 15.5165 11.7417 15.4248 12.025 15.4248C12.3083 15.4248 12.5417 15.5165 12.725 15.6998C12.9083 15.8831 13 16.1165 13 16.3998C13 16.6831 12.9083 16.9165 12.725 17.0998L11.825 17.9998H12C13.6667 17.9998 15.0833 17.4123 16.25 16.2373C17.4167 15.0623 18 13.6331 18 11.9498Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        arrows-circular
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M16.5 6.75v10.58c0 2.09-1.53 3.95-3.61 4.15-2.39.23-4.39-1.64-4.39-3.98V5.14c0-1.31.94-2.5 2.24-2.63 1.5-.15 2.76 1.02 2.76 2.49v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75v8.61c0 1.31.94 2.5 2.24 2.63 1.5.15 2.76-1.02 2.76-2.49V5.17c0-2.09-1.53-3.95-3.61-4.15C9.01.79 7 2.66 7 5v12.27c0 2.87 2.1 5.44 4.96 5.71 3.29.3 6.04-2.26 6.04-5.48V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        attachment
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 10H17V8H12V10ZM12 16H17V14H12V16ZM9 11C9.55 11 10.0208 10.8042 10.4125 10.4125C10.8042 10.0208 11 9.55 11 9C11 8.45 10.8042 7.97917 10.4125 7.5875C10.0208 7.19583 9.55 7 9 7C8.45 7 7.97917 7.19583 7.5875 7.5875C7.19583 7.97917 7 8.45 7 9C7 9.55 7.19583 10.0208 7.5875 10.4125C7.97917 10.8042 8.45 11 9 11ZM9 17C9.55 17 10.0208 16.8042 10.4125 16.4125C10.8042 16.0208 11 15.55 11 15C11 14.45 10.8042 13.9792 10.4125 13.5875C10.0208 13.1958 9.55 13 9 13C8.45 13 7.97917 13.1958 7.5875 13.5875C7.19583 13.9792 7 14.45 7 15C7 15.55 7.19583 16.0208 7.5875 16.4125C7.97917 16.8042 8.45 17 9 17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        ballot
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        bell
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V4H16V10.125C16 10.325 15.9167 10.4708 15.75 10.5625C15.5833 10.6542 15.4167 10.65 15.25 10.55L14.025 9.8C13.8583 9.7 13.6875 9.65 13.5125 9.65C13.3375 9.65 13.1667 9.7 13 9.8L11.775 10.55C11.6083 10.65 11.4375 10.6542 11.2625 10.5625C11.0875 10.4708 11 10.325 11 10.125V4H6V20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        book
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        book-open
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 18L7.8 19.8C7.13333 20.0833 6.5 20.0292 5.9 19.6375C5.3 19.2458 5 18.6917 5 17.975V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V17.975C19 18.6917 18.7 19.2458 18.1 19.6375C17.5 20.0292 16.8667 20.0833 16.2 19.8L12 18ZM12 15.8L17 17.95V5H7V17.95L12 15.8ZM12 5H7H17H12Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        bookmark
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 12.9999C18.7167 12.9999 18.4792 12.9041 18.2875 12.7124C18.0958 12.5208 18 12.2833 18 11.9999C18 11.7166 18.0958 11.4791 18.2875 11.2874C18.4792 11.0958 18.7167 10.9999 19 10.9999H21C21.2833 10.9999 21.5208 11.0958 21.7125 11.2874C21.9042 11.4791 22 11.7166 22 11.9999C22 12.2833 21.9042 12.5208 21.7125 12.7124C21.5208 12.9041 21.2833 12.9999 21 12.9999H19ZM18.4 19.3999L16.8 18.1999C16.5667 18.0333 16.4333 17.8166 16.4 17.5499C16.3667 17.2833 16.4333 17.0333 16.6 16.7999C16.7667 16.5666 16.9833 16.4333 17.25 16.3999C17.5167 16.3666 17.7667 16.4333 18 16.5999L19.6 17.7999C19.8333 17.9666 19.9667 18.1833 20 18.4499C20.0333 18.7166 19.9667 18.9666 19.8 19.1999C19.6333 19.4333 19.4167 19.5666 19.15 19.5999C18.8833 19.6333 18.6333 19.5666 18.4 19.3999ZM18 7.39994C17.7667 7.5666 17.5167 7.63327 17.25 7.59993C16.9833 7.5666 16.7667 7.43327 16.6 7.19994C16.4333 6.9666 16.3667 6.7166 16.4 6.44993C16.4333 6.18327 16.5667 5.9666 16.8 5.79993L18.4 4.59993C18.6333 4.43327 18.8833 4.3666 19.15 4.39993C19.4167 4.43327 19.6333 4.5666 19.8 4.79993C19.9667 5.03327 20.0333 5.28327 20 5.54993C19.9667 5.8166 19.8333 6.03327 19.6 6.19993L18 7.39994ZM5 18.9999V14.9999H4C3.45 14.9999 2.97917 14.8041 2.5875 14.4124C2.19583 14.0208 2 13.5499 2 12.9999V10.9999C2 10.4499 2.19583 9.9791 2.5875 9.58743C2.97917 9.19577 3.45 8.99993 4 8.99993H8L11.475 6.89993C11.8083 6.69993 12.1458 6.69993 12.4875 6.89993C12.8292 7.09993 13 7.3916 13 7.77493V16.2249C13 16.6083 12.8292 16.8999 12.4875 17.0999C12.1458 17.2999 11.8083 17.2999 11.475 17.0999L8 14.9999H7V18.9999H5ZM14 15.3499V8.64993C14.45 9.04993 14.8125 9.53743 15.0875 10.1124C15.3625 10.6874 15.5 11.3166 15.5 11.9999C15.5 12.6833 15.3625 13.3124 15.0875 13.8874C14.8125 14.4624 14.45 14.9499 14 15.3499ZM11 14.4499V9.54993L8.55 10.9999H4V12.9999H8.55L11 14.4499Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        bullhorn
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8 6V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8ZM10 6H14V4H10V6ZM20 15H15V16C15 16.2833 14.9042 16.5208 14.7125 16.7125C14.5208 16.9042 14.2833 17 14 17H10C9.71667 17 9.47917 16.9042 9.2875 16.7125C9.09583 16.5208 9 16.2833 9 16V15H4V19H20V15ZM11 15H13V13H11V15ZM4 13H9V12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H14C14.2833 11 14.5208 11.0958 14.7125 11.2875C14.9042 11.4792 15 11.7167 15 12V13H20V8H4V13Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        business
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14.5 18C13.8 18 13.2083 17.7583 12.725 17.275C12.2417 16.7917 12 16.2 12 15.5C12 14.8 12.2417 14.2083 12.725 13.725C13.2083 13.2417 13.8 13 14.5 13C15.2 13 15.7917 13.2417 16.275 13.725C16.7583 14.2083 17 14.8 17 15.5C17 16.2 16.7583 16.7917 16.275 17.275C15.7917 17.7583 15.2 18 14.5 18ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        calendar
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 16.4L10.4 18C10.2167 18.1833 9.98333 18.275 9.7 18.275C9.41667 18.275 9.18333 18.1833 9 18C8.81667 17.8167 8.725 17.5833 8.725 17.3C8.725 17.0167 8.81667 16.7833 9 16.6L10.6 15L9 13.4C8.81667 13.2167 8.725 12.9833 8.725 12.7C8.725 12.4167 8.81667 12.1833 9 12C9.18333 11.8167 9.41667 11.725 9.7 11.725C9.98333 11.725 10.2167 11.8167 10.4 12L12 13.6L13.6 12C13.7833 11.8167 14.0167 11.725 14.3 11.725C14.5833 11.725 14.8167 11.8167 15 12C15.1833 12.1833 15.275 12.4167 15.275 12.7C15.275 12.9833 15.1833 13.2167 15 13.4L13.4 15L15 16.6C15.1833 16.7833 15.275 17.0167 15.275 17.3C15.275 17.5833 15.1833 17.8167 15 18C14.8167 18.1833 14.5833 18.275 14.3 18.275C14.0167 18.275 13.7833 18.1833 13.6 18L12 16.4ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        calendar-busy
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.95 15.45L14.425 11.975C14.625 11.775 14.8667 11.675 15.15 11.675C15.4333 11.675 15.675 11.775 15.875 11.975C16.075 12.175 16.175 12.4167 16.175 12.7C16.175 12.9833 16.075 13.225 15.875 13.425L11.65 17.65C11.45 17.85 11.2167 17.95 10.95 17.95C10.6833 17.95 10.45 17.85 10.25 17.65L8.125 15.525C7.925 15.325 7.825 15.0833 7.825 14.8C7.825 14.5167 7.925 14.275 8.125 14.075C8.325 13.875 8.56667 13.775 8.85 13.775C9.13333 13.775 9.375 13.875 9.575 14.075L10.95 15.45ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        calendar-favorable
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.275 10.9998C7.89167 10.9998 7.6 10.829 7.4 10.4873C7.2 10.1456 7.20833 9.80814 7.425 9.4748L11.15 3.3998C11.35 3.08314 11.6333 2.9248 12 2.9248C12.3667 2.9248 12.65 3.08314 12.85 3.3998L16.575 9.4748C16.7917 9.80814 16.8 10.1456 16.6 10.4873C16.4 10.829 16.1083 10.9998 15.725 10.9998H8.275ZM17.5 21.9998C16.25 21.9998 15.1875 21.5623 14.3125 20.6873C13.4375 19.8123 13 18.7498 13 17.4998C13 16.2498 13.4375 15.1873 14.3125 14.3123C15.1875 13.4373 16.25 12.9998 17.5 12.9998C18.75 12.9998 19.8125 13.4373 20.6875 14.3123C21.5625 15.1873 22 16.2498 22 17.4998C22 18.7498 21.5625 19.8123 20.6875 20.6873C19.8125 21.5623 18.75 21.9998 17.5 21.9998ZM4 21.4998C3.71667 21.4998 3.47917 21.404 3.2875 21.2123C3.09583 21.0206 3 20.7831 3 20.4998V14.4998C3 14.2165 3.09583 13.979 3.2875 13.7873C3.47917 13.5956 3.71667 13.4998 4 13.4998H10C10.2833 13.4998 10.5208 13.5956 10.7125 13.7873C10.9042 13.979 11 14.2165 11 14.4998V20.4998C11 20.7831 10.9042 21.0206 10.7125 21.2123C10.5208 21.404 10.2833 21.4998 10 21.4998H4ZM17.5 19.9998C18.2 19.9998 18.7917 19.7581 19.275 19.2748C19.7583 18.7915 20 18.1998 20 17.4998C20 16.7998 19.7583 16.2081 19.275 15.7248C18.7917 15.2415 18.2 14.9998 17.5 14.9998C16.8 14.9998 16.2083 15.2415 15.725 15.7248C15.2417 16.2081 15 16.7998 15 17.4998C15 18.1998 15.2417 18.7915 15.725 19.2748C16.2083 19.7581 16.8 19.9998 17.5 19.9998ZM5 19.4998H9V15.4998H5V19.4998ZM10.05 8.9998H13.95L12 5.8498L10.05 8.9998Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        category
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        check
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        checkmark-encircled-filled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-down
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17.2902 5.70973C16.9002 5.31973 16.2702 5.31973 15.8802 5.70973L12.0002 9.57973L8.11021 5.69973C7.72021 5.30973 7.09021 5.30973 6.70021 5.69973C6.31021 6.08973 6.31021 6.71973 6.70021 7.10973L11.2902 11.6997C11.6802 12.0897 12.3102 12.0897 12.7002 11.6997L17.2902 7.10973C17.6802 6.72973 17.6802 6.09973 17.2902 5.70973Z"
-        />
-        <path
-          d="M17.2902 12.2997C16.9002 11.9097 16.2702 11.9097 15.8802 12.2997L12.0002 16.1697L8.12021 12.2897C7.73021 11.8997 7.10022 11.8997 6.71022 12.2897C6.32022 12.6797 6.32022 13.3097 6.71022 13.6997L11.3002 18.2897C11.6902 18.6797 12.3202 18.6797 12.7102 18.2897L17.3002 13.6997C17.6802 13.3197 17.6802 12.6897 17.2902 12.2997Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-down-double
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <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>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-left
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7.14999 21.1C6.89999 20.85 6.77499 20.5542 6.77499 20.2125C6.77499 19.8708 6.89999 19.575 7.14999 19.325L14.475 12L7.12499 4.65C6.89166 4.41667 6.77499 4.125 6.77499 3.775C6.77499 3.425 6.89999 3.125 7.14999 2.875C7.39999 2.625 7.69583 2.5 8.03749 2.5C8.37916 2.5 8.67499 2.625 8.92499 2.875L17.325 11.3C17.425 11.4 17.4958 11.5083 17.5375 11.625C17.5792 11.7417 17.6 11.8667 17.6 12C17.6 12.1333 17.5792 12.2583 17.5375 12.375C17.4958 12.4917 17.425 12.6 17.325 12.7L8.89999 21.125C8.66666 21.3583 8.37916 21.475 8.03749 21.475C7.69583 21.475 7.39999 21.35 7.14999 21.1Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-right
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.7 18.29C7.09 18.68 7.72 18.68 8.11 18.29L12 14.42L15.88 18.3C16.27 18.69 16.9 18.69 17.29 18.3C17.68 17.91 17.68 17.28 17.29 16.89L12.7 12.3C12.31 11.91 11.68 11.91 11.29 12.3L6.7 16.88C6.31 17.27 6.31 17.9 6.7 18.29Z"
-        />
-        <path
-          d="M6.7 11.7C7.09 12.09 7.72 12.09 8.11 11.7L12 7.83L15.88 11.71C16.27 12.1 16.9 12.1 17.29 11.71C17.68 11.32 17.68 10.69 17.29 10.3L12.7 5.71C12.31 5.32 11.68 5.32 11.29 5.71L6.7 10.29C6.31 10.68 6.31 11.31 6.7 11.7Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        chevron-up-double
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 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>
-      <span
-        class="icon-grid__text"
-      >
-        circle
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24.21-.34.1-.79-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        clock
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <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>
-      <span
-        class="icon-grid__text"
-      >
-        close
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        close-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H6.5ZM10.35 16.575C10.4833 16.575 10.6083 16.5542 10.725 16.5125C10.8417 16.4708 10.95 16.4 11.05 16.3L15.275 12.075C15.475 11.875 15.575 11.6333 15.575 11.35C15.575 11.0667 15.475 10.825 15.275 10.625C15.075 10.425 14.8333 10.325 14.55 10.325C14.2667 10.325 14.025 10.425 13.825 10.625L10.325 14.125L8.925 12.725C8.725 12.525 8.49167 12.425 8.225 12.425C7.95833 12.425 7.725 12.525 7.525 12.725C7.325 12.925 7.225 13.1625 7.225 13.4375C7.225 13.7125 7.325 13.95 7.525 14.15L9.65 16.3C9.75 16.4 9.85833 16.4708 9.975 16.5125C10.0917 16.5542 10.2167 16.575 10.35 16.575ZM6.5 18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        cloud-favorable
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11 11V13C11 13.2833 11.0958 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14C12.2833 14 12.5208 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V11H15C15.2833 11 15.5208 10.9042 15.7125 10.7125C15.9042 10.5208 16 10.2833 16 10C16 9.71667 15.9042 9.47917 15.7125 9.2875C15.5208 9.09583 15.2833 9 15 9H13V7C13 6.71667 12.9042 6.47917 12.7125 6.2875C12.5208 6.09583 12.2833 6 12 6C11.7167 6 11.4792 6.09583 11.2875 6.2875C11.0958 6.47917 11 6.71667 11 7V9H9C8.71667 9 8.47917 9.09583 8.2875 9.2875C8.09583 9.47917 8 9.71667 8 10C8 10.2833 8.09583 10.5208 8.2875 10.7125C8.47917 10.9042 8.71667 11 9 11H11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        comment-add
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 15C12.2833 15 12.5208 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14C13 13.7167 12.9042 13.4792 12.7125 13.2875C12.5208 13.0958 12.2833 13 12 13C11.7167 13 11.4792 13.0958 11.2875 13.2875C11.0958 13.4792 11 13.7167 11 14C11 14.2833 11.0958 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15ZM12 11C12.2833 11 12.5208 10.9042 12.7125 10.7125C12.9042 10.5208 13 10.2833 13 10V6C13 5.71667 12.9042 5.47917 12.7125 5.2875C12.5208 5.09583 12.2833 5 12 5C11.7167 5 11.4792 5.09583 11.2875 5.2875C11.0958 5.47917 11 5.71667 11 6V10C11 10.1333 11.025 10.2625 11.075 10.3875C11.125 10.5125 11.1958 10.6208 11.2875 10.7125C11.3792 10.8042 11.4875 10.875 11.6125 10.925C11.7375 10.975 11.8667 11 12 11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        comment-critical
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7 18C6.71667 18 6.47917 17.9042 6.2875 17.7125C6.09583 17.5208 6 17.2833 6 17V15H19V6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V19.575C22 20.025 21.7958 20.3375 21.3875 20.5125C20.9792 20.6875 20.6167 20.6167 20.3 20.3L18 18H7ZM6 13L3.7 15.3C3.38333 15.6167 3.02083 15.6875 2.6125 15.5125C2.20417 15.3375 2 15.025 2 14.575V3C2 2.71667 2.09583 2.47917 2.2875 2.2875C2.47917 2.09583 2.71667 2 3 2H16C16.2833 2 16.5208 2.09583 16.7125 2.2875C16.9042 2.47917 17 2.71667 17 3V12C17 12.2833 16.9042 12.5208 16.7125 12.7125C16.5208 12.9042 16.2833 13 16 13H6ZM15 11V4H4V11H15Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        conversation
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 19H8C7.45 19 6.97917 18.8042 6.5875 18.4125C6.19583 18.0208 6 17.55 6 17V3C6 2.45 6.19583 1.97917 6.5875 1.5875C6.97917 1.19583 7.45 1 8 1H14.175C14.4417 1 14.6958 1.05 14.9375 1.15C15.1792 1.25 15.3917 1.39167 15.575 1.575L20.425 6.425C20.6083 6.60833 20.75 6.82083 20.85 7.0625C20.95 7.30417 21 7.55833 21 7.825V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19ZM19 8H15.5C15.0833 8 14.7292 7.85417 14.4375 7.5625C14.1458 7.27083 14 6.91667 14 6.5V3H8V17H19V8ZM4 23C3.45 23 2.97917 22.8042 2.5875 22.4125C2.19583 22.0208 2 21.55 2 21V8C2 7.71667 2.09583 7.47917 2.2875 7.2875C2.47917 7.09583 2.71667 7 3 7C3.28333 7 3.52083 7.09583 3.7125 7.2875C3.90417 7.47917 4 7.71667 4 8V21H14C14.2833 21 14.5208 21.0958 14.7125 21.2875C14.9042 21.4792 15 21.7167 15 22C15 22.2833 14.9042 22.5208 14.7125 22.7125C14.5208 22.9042 14.2833 23 14 23H4Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        copy
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        dangerous
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8 12C7.71667 12 7.47917 12.0958 7.2875 12.2875C7.09583 12.4792 7 12.7167 7 13V16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16V13C9 12.7167 8.90417 12.4792 8.7125 12.2875C8.52083 12.0958 8.28333 12 8 12ZM16 7C15.7167 7 15.4792 7.09583 15.2875 7.2875C15.0958 7.47917 15 7.71667 15 8V16C15 16.2833 15.0958 16.5208 15.2875 16.7125C15.4792 16.9042 15.7167 17 16 17C16.2833 17 16.5208 16.9042 16.7125 16.7125C16.9042 16.5208 17 16.2833 17 16V8C17 7.71667 16.9042 7.47917 16.7125 7.2875C16.5208 7.09583 16.2833 7 16 7ZM12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        data
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 18H15C15.2833 18 15.5208 17.9042 15.7125 17.7125C15.9042 17.5208 16 17.2833 16 17C16 16.7167 15.9042 16.4792 15.7125 16.2875C15.5208 16.0958 15.2833 16 15 16H9C8.71667 16 8.47917 16.0958 8.2875 16.2875C8.09583 16.4792 8 16.7167 8 17C8 17.2833 8.09583 17.5208 8.2875 17.7125C8.47917 17.9042 8.71667 18 9 18ZM9 14H15C15.2833 14 15.5208 13.9042 15.7125 13.7125C15.9042 13.5208 16 13.2833 16 13C16 12.7167 15.9042 12.4792 15.7125 12.2875C15.5208 12.0958 15.2833 12 15 12H9C8.71667 12 8.47917 12.0958 8.2875 12.2875C8.09583 12.4792 8 12.7167 8 13C8 13.2833 8.09583 13.5208 8.2875 13.7125C8.47917 13.9042 8.71667 14 9 14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        document
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        document-blank
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        dots-horizontal
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 20C11.45 20 10.9793 19.8043 10.588 19.413C10.196 19.021 10 18.55 10 18C10 17.45 10.196 16.979 10.588 16.587C10.9793 16.1957 11.45 16 12 16C12.55 16 13.021 16.1957 13.413 16.587C13.8043 16.979 14 17.45 14 18C14 18.55 13.8043 19.021 13.413 19.413C13.021 19.8043 12.55 20 12 20ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM12 8C11.45 8 10.9793 7.804 10.588 7.412C10.196 7.02067 10 6.55 10 6C10 5.45 10.196 4.97933 10.588 4.588C10.9793 4.196 11.45 4 12 4C12.55 4 13.021 4.196 13.413 4.588C13.8043 4.97933 14 5.45 14 6C14 6.55 13.8043 7.02067 13.413 7.412C13.021 7.804 12.55 8 12 8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        dots-vertical
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        drag-indicator
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 6.49969C14.76 6.49969 17 8.73969 17 11.4997C17 12.0097 16.9 12.4997 16.76 12.9597L19.82 16.0197C21.21 14.7897 22.31 13.2497 23 11.4897C21.27 7.10969 17 3.99969 12 3.99969C10.73 3.99969 9.51 4.19969 8.36 4.56969L10.53 6.73969C11 6.59969 11.49 6.49969 12 6.49969ZM2.71 3.15969C2.32 3.54969 2.32 4.17969 2.71 4.56969L4.68 6.53969C3.06 7.82969 1.77 9.52969 1 11.4997C2.73 15.8897 7 18.9997 12 18.9997C13.52 18.9997 14.97 18.6997 16.31 18.1797L19.03 20.8997C19.42 21.2897 20.05 21.2897 20.44 20.8997C20.83 20.5097 20.83 19.8797 20.44 19.4897L4.13 3.15969C3.74 2.76969 3.1 2.76969 2.71 3.15969ZM12 16.4997C9.24 16.4997 7 14.2597 7 11.4997C7 10.7297 7.18 9.99969 7.49 9.35969L9.06 10.9297C9.03 11.1097 9 11.2997 9 11.4997C9 13.1597 10.34 14.4997 12 14.4997C12.2 14.4997 12.38 14.4697 12.57 14.4297L14.14 15.9997C13.49 16.3197 12.77 16.4997 12 16.4997ZM14.97 11.1697C14.82 9.76969 13.72 8.67969 12.33 8.52969L14.97 11.1697Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        eye-closed
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4ZM12 16.5C9.24 16.5 7 14.26 7 11.5C7 8.74 9.24 6.5 12 6.5C14.76 6.5 17 8.74 17 11.5C17 14.26 14.76 16.5 12 16.5ZM12 8.5C10.34 8.5 9 9.84 9 11.5C9 13.16 10.34 14.5 12 14.5C13.66 14.5 15 13.16 15 11.5C15 9.84 13.66 8.5 12 8.5Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        eye-open
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="15.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <circle
-          cx="8.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4.41-6.11c-.35-.22-.82-.11-1.03.24-.74 1.17-2 1.87-3.38 1.87s-2.64-.7-3.38-1.88c-.22-.35-.68-.46-1.03-.24-.35.22-.46.68-.24 1.03C8.37 16.54 10.1 17.5 12 17.5s3.63-.97 4.65-2.58c.22-.35.11-.81-.24-1.03z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        face-happy
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="15.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <circle
-          cx="8.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-1.9 0-3.63.97-4.65 2.58-.22.35-.11.81.24 1.03.35.22.81.11 1.03-.24.74-1.18 2-1.88 3.38-1.88s2.64.7 3.38 1.88c.14.23.39.35.64.35.14 0 .27-.04.4-.11.35-.22.46-.68.24-1.03C15.63 14.96 13.9 14 12 14z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        face-unhappy
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.88 9.94l.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.89.88c-.29.29-.29.77 0 1.06.29.29.77.29 1.06 0l.53-.53zM12 17.5c2.03 0 3.8-1.11 4.75-2.75.19-.33-.05-.75-.44-.75H7.69c-.38 0-.63.42-.44.75.95 1.64 2.72 2.75 4.75 2.75zm1.53-7.03c.29.29.77.29 1.06 0l.53-.53.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.88.88c-.3.29-.3.77-.01 1.06zM11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        face-very-happy
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        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>
-      <span
-        class="icon-grid__text"
-      >
-        filter-list
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 6l-.72-1.45c-.17-.34-.52-.55-.9-.55H6c-.55 0-1 .45-1 1v15c0 .55.45 1 1 1s1-.45 1-1v-6h5l.72 1.45c.17.34.52.55.89.55H19c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1h-5zm4 8h-4l-1-2H7V6h5l1 2h5v6z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        flag
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        folder
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15 16C15.2833 16 15.5208 15.9042 15.7125 15.7125C15.9042 15.5208 16 15.2833 16 15V14H17C17.2833 14 17.5208 13.9042 17.7125 13.7125C17.9042 13.5208 18 13.2833 18 13C18 12.7167 17.9042 12.4792 17.7125 12.2875C17.5208 12.0958 17.2833 12 17 12H16V11C16 10.7167 15.9042 10.4792 15.7125 10.2875C15.5208 10.0958 15.2833 10 15 10C14.7167 10 14.4792 10.0958 14.2875 10.2875C14.0958 10.4792 14 10.7167 14 11V12H13C12.7167 12 12.4792 12.0958 12.2875 12.2875C12.0958 12.4792 12 12.7167 12 13C12 13.2833 12.0958 13.5208 12.2875 13.7125C12.4792 13.9042 12.7167 14 13 14H14V15C14 15.2833 14.0958 15.5208 14.2875 15.7125C14.4792 15.9042 14.7167 16 15 16ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        folder-add
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5.35995 6.11001C4.85995 6.53001 4.11995 6.51001 3.64995 6.05001C3.13995 5.55001 3.13995 4.71001 3.66995 4.23001C4.32995 3.64001 5.27995 3.01001 6.36995 3.01001C7.23995 3.01001 8.87995 3.70001 8.87995 5.87001C8.87995 7.23001 8.35995 8.01001 7.57995 9.15001C7.12995 9.81001 6.07995 11.58 5.72995 12.67C5.36995 13.76 5.63995 14.59 6.08995 14.59C6.50216 14.59 6.91437 14.0938 7.16801 13.7884C7.17895 13.7752 7.1896 13.7624 7.19995 13.75C7.42995 13.51 8.90995 11.76 9.48995 11.03C10.2499 10.1 12.1799 8.19001 14.4299 8.19001C17.3699 8.19001 18.3099 10.74 18.4599 12.39H19.6799C20.3699 12.39 20.9299 12.95 20.9299 13.64C20.9299 14.33 20.3699 14.89 19.6799 14.89H18.4699C18.0699 19.66 15.4099 20.99 13.7799 20.99C12.0099 20.99 10.5699 19.6 10.5699 17.9C10.5699 16.2 12.1699 13.17 15.9499 12.53C15.9429 12.4797 15.9361 12.4284 15.9293 12.3765C15.8307 11.6239 15.7148 10.74 14.1899 10.74C12.9399 10.74 11.3199 12.69 10.1099 14.18L10.0973 14.1956C8.99324 15.5583 8.11587 16.6412 7.04995 16.95C6.14995 17.22 5.15995 17.05 4.40995 16.49C3.54995 15.85 3.06995 14.79 3.06995 13.51C3.06995 11.4026 5.04924 8.49892 5.72566 7.50659C5.82599 7.3594 5.89765 7.25426 5.92995 7.20001C6.22995 6.71001 6.72995 5.88001 6.22995 5.68001C6.04995 5.60001 5.72995 5.79001 5.35995 6.11001ZM13.0699 17.84C13.0699 18.3 13.4999 18.56 13.8099 18.56C14.5099 18.56 15.6399 17.77 15.9399 15.08C13.7999 15.64 13.0699 17.24 13.0699 17.84Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        gesture
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 20.7254C11.8333 20.7254 11.6708 20.7046 11.5125 20.6629C11.3542 20.6212 11.2 20.5587 11.05 20.4754L6.05001 17.7754C5.71668 17.5921 5.45835 17.3462 5.27501 17.0379C5.09168 16.7296 5.00001 16.3837 5.00001 16.0004V11.2004L2.60001 9.87539C2.41668 9.77539 2.28335 9.65039 2.20001 9.50039C2.11668 9.35039 2.07501 9.18372 2.07501 9.00039C2.07501 8.81706 2.11668 8.65039 2.20001 8.50039C2.28335 8.35039 2.41668 8.22539 2.60001 8.12539L11.05 3.52539C11.2 3.44206 11.3542 3.37956 11.5125 3.33789C11.6708 3.29622 11.8333 3.27539 12 3.27539C12.1667 3.27539 12.3292 3.29622 12.4875 3.33789C12.6458 3.37956 12.8 3.44206 12.95 3.52539L22.475 8.72539C22.6417 8.80872 22.7708 8.92956 22.8625 9.08789C22.9542 9.24622 23 9.41706 23 9.60039V16.0004C23 16.2837 22.9042 16.5212 22.7125 16.7129C22.5208 16.9046 22.2833 17.0004 22 17.0004C21.7167 17.0004 21.4792 16.9046 21.2875 16.7129C21.0958 16.5212 21 16.2837 21 16.0004V10.1004L19 11.2004V16.0004C19 16.3837 18.9083 16.7296 18.725 17.0379C18.5417 17.3462 18.2833 17.5921 17.95 17.7754L12.95 20.4754C12.8 20.5587 12.6458 20.6212 12.4875 20.6629C12.3292 20.7046 12.1667 20.7254 12 20.7254ZM12 12.7004L18.85 9.00039L12 5.30039L5.15001 9.00039L12 12.7004ZM12 18.7254L17 16.0254V12.2504L12.975 14.4754C12.825 14.5587 12.6667 14.6212 12.5 14.6629C12.3333 14.7046 12.1667 14.7254 12 14.7254C11.8333 14.7254 11.6667 14.7046 11.5 14.6629C11.3333 14.6212 11.175 14.5587 11.025 14.4754L7.00001 12.2504V16.0254L12 18.7254Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        grad-cap
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56 C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9 c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07 l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55 C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11 c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2 c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55 C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        graph
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        heart-filled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM6 21C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V10C4 9.68333 4.07083 9.38333 4.2125 9.1C4.35417 8.81667 4.55 8.58333 4.8 8.4L10.8 3.9C10.9833 3.76667 11.175 3.66667 11.375 3.6C11.575 3.53333 11.7833 3.5 12 3.5C12.2167 3.5 12.425 3.53333 12.625 3.6C12.825 3.66667 13.0167 3.76667 13.2 3.9L19.2 8.4C19.45 8.58333 19.6458 8.81667 19.7875 9.1C19.9292 9.38333 20 9.68333 20 10V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H13V15H11V21H6Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        home
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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>
-      <span
-        class="icon-grid__text"
-      >
-        info-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        info-encircled-filled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.85 21.525C9.95 20.875 8.9875 20.35 7.9625 19.95C6.9375 19.55 5.86667 19.275 4.75 19.125C4.25 19.0583 3.83333 18.8458 3.5 18.4875C3.16667 18.1292 3 17.7167 3 17.25V10.2C3 9.56667 3.21667 9.04583 3.65 8.6375C4.08333 8.22917 4.59167 8.075 5.175 8.175C6.45833 8.39167 7.67917 8.78333 8.8375 9.35C9.99583 9.91667 11.05 10.65 12 11.55C12.95 10.65 14.0042 9.91667 15.1625 9.35C16.3208 8.78333 17.5417 8.39167 18.825 8.175C19.4083 8.075 19.9167 8.22917 20.35 8.6375C20.7833 9.04583 21 9.56667 21 10.2V17.25C21 17.7167 20.8333 18.1292 20.5 18.4875C20.1667 18.8458 19.75 19.0583 19.25 19.125C18.1333 19.275 17.0625 19.55 16.0375 19.95C15.0125 20.35 14.05 20.875 13.15 21.525C12.8167 21.775 12.4333 21.9 12 21.9C11.5667 21.9 11.1833 21.775 10.85 21.525ZM12 19.9C13.05 19.1167 14.1667 18.4917 15.35 18.025C16.5333 17.5583 17.75 17.25 19 17.1V10.2C17.7833 10.4167 16.5875 10.8542 15.4125 11.5125C14.2375 12.1708 13.1 13.05 12 14.15C10.9 13.05 9.7625 12.1708 8.5875 11.5125C7.4125 10.8542 6.21667 10.4167 5 10.2V17.1C6.25 17.25 7.46667 17.5583 8.65 18.025C9.83333 18.4917 10.95 19.1167 12 19.9ZM12 9C10.9 9 9.95833 8.60833 9.175 7.825C8.39167 7.04167 8 6.1 8 5C8 3.9 8.39167 2.95833 9.175 2.175C9.95833 1.39167 10.9 1 12 1C13.1 1 14.0417 1.39167 14.825 2.175C15.6083 2.95833 16 3.9 16 5C16 6.1 15.6083 7.04167 14.825 7.825C14.0417 8.60833 13.1 9 12 9ZM12 7C12.55 7 13.0208 6.80417 13.4125 6.4125C13.8042 6.02083 14 5.55 14 5C14 4.45 13.8042 3.97917 13.4125 3.5875C13.0208 3.19583 12.55 3 12 3C11.45 3 10.9792 3.19583 10.5875 3.5875C10.1958 3.97917 10 4.45 10 5C10 5.55 10.1958 6.02083 10.5875 6.4125C10.9792 6.80417 11.45 7 12 7Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        librarian
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17,7h-3c-0.55,0-1,0.45-1,1s0.45,1,1,1h3c1.65,0,3,1.35,3,3s-1.35,3-3,3h-3c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1h3 c2.76,0,5-2.24,5-5S19.76,7,17,7z M8,12c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1s-0.45-1-1-1H9C8.45,11,8,11.45,8,12z M10,15H7 c-1.65,0-3-1.35-3-3s1.35-3,3-3h3c0.55,0,1-0.45,1-1s-0.45-1-1-1H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h3c0.55,0,1-0.45,1-1 C11,15.45,10.55,15,10,15z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        link
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm8 14H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        lock
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        lock-open
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H11C11.2833 3 11.5208 3.09583 11.7125 3.2875C11.9042 3.47917 12 3.71667 12 4C12 4.28333 11.9042 4.52083 11.7125 4.7125C11.5208 4.90417 11.2833 5 11 5H5V19H11C11.2833 19 11.5208 19.0958 11.7125 19.2875C11.9042 19.4792 12 19.7167 12 20C12 20.2833 11.9042 20.5208 11.7125 20.7125C11.5208 20.9042 11.2833 21 11 21H5ZM17.175 13H10C9.71667 13 9.47917 12.9042 9.2875 12.7125C9.09583 12.5208 9 12.2833 9 12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H17.175L15.3 9.125C15.1167 8.94167 15.025 8.71667 15.025 8.45C15.025 8.18333 15.1167 7.95 15.3 7.75C15.4833 7.55 15.7167 7.44583 16 7.4375C16.2833 7.42917 16.525 7.525 16.725 7.725L20.3 11.3C20.5 11.5 20.6 11.7333 20.6 12C20.6 12.2667 20.5 12.5 20.3 12.7L16.725 16.275C16.525 16.475 16.2875 16.5708 16.0125 16.5625C15.7375 16.5542 15.5 16.45 15.3 16.25C15.1167 16.05 15.0292 15.8125 15.0375 15.5375C15.0458 15.2625 15.1417 15.0333 15.325 14.85L17.175 13Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        logout
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.2 19.8748C8.03333 19.6581 6.9 19.2831 5.8 18.7498C4.7 18.2165 3.72083 17.4748 2.8625 16.5248C2.00417 15.5748 1.3125 14.3998 0.7875 12.9998C0.2625 11.5998 0 9.93314 0 7.9998V7.7998C0 7.56647 0.075 7.3748 0.225 7.2248C0.375 7.0748 0.566667 6.9998 0.8 6.9998H1C1.85 6.9998 2.725 7.10814 3.625 7.3248C4.525 7.54147 5.36667 7.86647 6.15 8.2998C6.33333 7.06647 6.7 5.7998 7.25 4.4998C7.8 3.1998 8.45833 2.0248 9.225 0.974805C9.425 0.691471 9.68333 0.549805 10 0.549805C10.3167 0.549805 10.575 0.691471 10.775 0.974805C11.5417 2.0248 12.2 3.1998 12.75 4.4998C13.3 5.7998 13.6667 7.06647 13.85 8.2998C14.6333 7.86647 15.475 7.54147 16.375 7.3248C17.275 7.10814 18.15 6.9998 19 6.9998H19.1C19.35 6.9998 19.5625 7.0873 19.7375 7.2623C19.9125 7.4373 20 7.6498 20 7.8998V7.9998C20 9.93314 19.7375 11.5998 19.2125 12.9998C18.6875 14.3998 17.9958 15.5748 17.1375 16.5248C16.2792 17.4748 15.3 18.2165 14.2 18.7498C13.1 19.2831 11.9667 19.6581 10.8 19.8748C10.5833 19.9081 10.3167 19.9248 10 19.9248C9.68333 19.9248 9.41667 19.9081 9.2 19.8748ZM9.95 17.9498C9.76667 15.1998 8.9375 13.1123 7.4625 11.6873C5.9875 10.2623 4.18333 9.38314 2.05 9.0498C2.01667 9.0498 2.01667 9.0498 2.05 9.0498C2.23333 11.8665 3.0875 13.9831 4.6125 15.3998C6.1375 16.8165 7.91667 17.6665 9.95 17.9498C9.98333 17.9665 9.98333 17.9706 9.95 17.9623C9.91667 17.954 9.91667 17.9498 9.95 17.9498ZM8.05 9.44981C8.38333 9.73314 8.73333 10.0706 9.1 10.4623C9.46667 10.854 9.76667 11.2331 10 11.5998C10.25 11.2331 10.5542 10.854 10.9125 10.4623C11.2708 10.0706 11.6167 9.73314 11.95 9.44981C11.9167 8.4998 11.7292 7.50814 11.3875 6.4748C11.0458 5.44147 10.5833 4.43314 10 3.4498C9.41667 4.43314 8.95417 5.44147 8.6125 6.4748C8.27083 7.50814 8.08333 8.4998 8.05 9.44981ZM11.1 13.6998C11.3 14.2331 11.4708 14.8165 11.6125 15.4498C11.7542 16.0831 11.8667 16.7665 11.95 17.4998C12.55 17.2998 13.1833 16.9998 13.85 16.5998C14.5167 16.1998 15.1333 15.6665 15.7 14.9998C16.2667 14.3331 16.7583 13.5123 17.175 12.5373C17.5917 11.5623 17.85 10.3998 17.95 9.0498C17.95 9.01647 17.95 9.01647 17.95 9.0498C16.3833 9.28314 15.0083 9.80397 13.825 10.6123C12.6417 11.4206 11.7333 12.4498 11.1 13.6998Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        lotus
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM20 8L12.525 12.675C12.4417 12.725 12.3542 12.7625 12.2625 12.7875C12.1708 12.8125 12.0833 12.825 12 12.825C11.9167 12.825 11.8292 12.8125 11.7375 12.7875C11.6458 12.7625 11.5583 12.725 11.475 12.675L4 8V18H20V8ZM12 11L20 6H4L12 11ZM4 8.25V6.775V6.8V6.7875V8.25Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        mail
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14.35 20.775L9 18.9L4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3791 3 20.1 3 19.75V5.74996C3 5.5333 3.0625 5.34163 3.1875 5.17496C3.3125 5.0083 3.48333 4.8833 3.7 4.79996L8.35 3.22496C8.56667 3.1583 8.78333 3.1208 9 3.11246C9.21667 3.10413 9.43333 3.14163 9.65 3.22496L15 5.09996L19.65 3.29996C19.9833 3.16663 20.2917 3.20413 20.575 3.41246C20.8583 3.6208 21 3.89996 21 4.24996V18.25C21 18.4666 20.9375 18.6583 20.8125 18.825C20.6875 18.9916 20.5167 19.1166 20.3 19.2L15.65 20.775C15.4333 20.8416 15.2167 20.8791 15 20.8875C14.7833 20.8958 14.5667 20.8583 14.35 20.775ZM14 18.55V6.84996L10 5.44996V17.15L14 18.55ZM16 18.55L19 17.55V5.69996L16 6.84996V18.55ZM5 18.3L8 17.15V5.44996L5 6.44996V18.3Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        map
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.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 1z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        menu
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 14C11.1667 14 10.4583 13.7083 9.875 13.125C9.29167 12.5417 9 11.8333 9 11V5C9 4.16667 9.29167 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V17.925C9.45 17.7083 8.13333 17.0583 7.05 15.975C5.96667 14.8917 5.30833 13.5917 5.075 12.075C5.025 11.7917 5.1 11.5417 5.3 11.325C5.5 11.1083 5.76667 11 6.1 11C6.33333 11 6.54167 11.0875 6.725 11.2625C6.90833 11.4375 7.025 11.65 7.075 11.9C7.29167 13.0667 7.85833 14.0417 8.775 14.825C9.69167 15.6083 10.7667 16 12 16C13.2333 16 14.3083 15.6083 15.225 14.825C16.1417 14.0417 16.7083 13.0667 16.925 11.9C16.975 11.65 17.0958 11.4375 17.2875 11.2625C17.4792 11.0875 17.6917 11 17.925 11C18.2417 11 18.5 11.1083 18.7 11.325C18.9 11.5417 18.975 11.7917 18.925 12.075C18.6917 13.5917 18.0333 14.8917 16.95 15.975C15.8667 17.0583 14.55 17.7083 13 17.925V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11V5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5V11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        mic
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        open-in-new
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        pencil
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        person
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        person-add
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        person-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19.125 15.1248C18.9417 14.9415 18.8458 14.7081 18.8375 14.4248C18.8292 14.1415 18.9167 13.8831 19.1 13.6498C19.6167 13.0165 20.0208 12.304 20.3125 11.5123C20.6042 10.7206 20.75 9.88314 20.75 8.9998C20.75 8.13314 20.6042 7.30814 20.3125 6.5248C20.0208 5.74147 19.6167 5.03314 19.1 4.3998C18.9167 4.16647 18.825 3.90814 18.825 3.6248C18.825 3.34147 18.925 3.0998 19.125 2.8998C19.3583 2.66647 19.6375 2.5498 19.9625 2.5498C20.2875 2.5498 20.55 2.66647 20.75 2.8998C21.45 3.7498 22 4.69147 22.4 5.7248C22.8 6.75814 23 7.8498 23 8.9998C23 10.1498 22.8 11.2415 22.4 12.2748C22 13.3081 21.45 14.2498 20.75 15.0998C20.55 15.3331 20.2875 15.454 19.9625 15.4623C19.6375 15.4706 19.3583 15.3581 19.125 15.1248ZM15.9 11.8998C15.7167 11.7165 15.6125 11.479 15.5875 11.1873C15.5625 10.8956 15.6333 10.6081 15.8 10.3248C15.9167 10.1248 16.0042 9.9123 16.0625 9.6873C16.1208 9.4623 16.15 9.23314 16.15 8.9998C16.15 8.76647 16.1208 8.5373 16.0625 8.3123C16.0042 8.0873 15.9167 7.8748 15.8 7.6748C15.6333 7.39147 15.5625 7.10397 15.5875 6.8123C15.6125 6.52064 15.7167 6.28314 15.9 6.0998C16.1333 5.86647 16.4167 5.75397 16.75 5.7623C17.0833 5.77064 17.3417 5.8998 17.525 6.1498C17.8083 6.56647 18.0333 7.0123 18.2 7.4873C18.3667 7.9623 18.45 8.46647 18.45 8.9998C18.45 9.53314 18.3667 10.0373 18.2 10.5123C18.0333 10.9873 17.8083 11.4331 17.525 11.8498C17.3417 12.0998 17.0833 12.229 16.75 12.2373C16.4167 12.2456 16.1333 12.1331 15.9 11.8998ZM9 12.9998C7.9 12.9998 6.95833 12.6081 6.175 11.8248C5.39167 11.0415 5 10.0998 5 8.9998C5 7.8998 5.39167 6.95814 6.175 6.1748C6.95833 5.39147 7.9 4.9998 9 4.9998C10.1 4.9998 11.0417 5.39147 11.825 6.1748C12.6083 6.95814 13 7.8998 13 8.9998C13 10.0998 12.6083 11.0415 11.825 11.8248C11.0417 12.6081 10.1 12.9998 9 12.9998ZM2 20.9998C1.71667 20.9998 1.47917 20.904 1.2875 20.7123C1.09583 20.5206 1 20.2831 1 19.9998V18.1998C1 17.6498 1.14167 17.1331 1.425 16.6498C1.70833 16.1665 2.1 15.7998 2.6 15.5498C3.45 15.1165 4.40833 14.7498 5.475 14.4498C6.54167 14.1498 7.71667 13.9998 9 13.9998C10.2833 13.9998 11.4583 14.1498 12.525 14.4498C13.5917 14.7498 14.55 15.1165 15.4 15.5498C15.9 15.7998 16.2917 16.1665 16.575 16.6498C16.8583 17.1331 17 17.6498 17 18.1998V19.9998C17 20.2831 16.9042 20.5206 16.7125 20.7123C16.5208 20.904 16.2833 20.9998 16 20.9998H2ZM3 18.9998H15V18.1998C15 18.0165 14.9542 17.8498 14.8625 17.6998C14.7708 17.5498 14.65 17.4331 14.5 17.3498C13.9 17.0498 13.1292 16.7498 12.1875 16.4498C11.2458 16.1498 10.1833 15.9998 9 15.9998C7.81667 15.9998 6.75417 16.1498 5.8125 16.4498C4.87083 16.7498 4.1 17.0498 3.5 17.3498C3.35 17.4331 3.22917 17.5498 3.1375 17.6998C3.04583 17.8498 3 18.0165 3 18.1998V18.9998ZM9 10.9998C9.55 10.9998 10.0208 10.804 10.4125 10.4123C10.8042 10.0206 11 9.5498 11 8.9998C11 8.4498 10.8042 7.97897 10.4125 7.5873C10.0208 7.19564 9.55 6.9998 9 6.9998C8.45 6.9998 7.97917 7.19564 7.5875 7.5873C7.19583 7.97897 7 8.4498 7 8.9998C7 9.5498 7.19583 10.0206 7.5875 10.4123C7.97917 10.804 8.45 10.9998 9 10.9998Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        person-sound
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        persons
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.3 19.8C11.05 18.2833 12.05 17.2708 13.3 16.7625C14.55 16.2542 15.6167 16 16.5 16C16.8833 16 17.2583 16.0333 17.625 16.1C17.9917 16.1667 18.35 16.25 18.7 16.35C19.1 15.7167 19.4167 15.0333 19.65 14.3C19.8833 13.5667 20 12.8 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 12.75 4.09583 13.4667 4.2875 14.15C4.47917 14.8333 4.76667 15.4667 5.15 16.05C5.83333 15.7167 6.54167 15.4583 7.275 15.275C8.00833 15.0917 8.75 15 9.5 15C10.0333 15 10.5458 15.0458 11.0375 15.1375C11.5292 15.2292 12.0167 15.35 12.5 15.5C12.1167 15.7 11.7542 15.9333 11.4125 16.2C11.0708 16.4667 10.75 16.75 10.45 17.05C10.25 17.0167 10.0792 17 9.9375 17H9.5C8.96667 17 8.4375 17.0583 7.9125 17.175C7.3875 17.2917 6.88333 17.4667 6.4 17.7C6.93333 18.2333 7.52917 18.6792 8.1875 19.0375C8.84583 19.3958 9.55 19.65 10.3 19.8ZM12 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 22ZM9.5 13.5C8.53333 13.5 7.70833 13.1583 7.025 12.475C6.34167 11.7917 6 10.9667 6 10C6 9.03333 6.34167 8.20833 7.025 7.525C7.70833 6.84167 8.53333 6.5 9.5 6.5C10.4667 6.5 11.2917 6.84167 11.975 7.525C12.6583 8.20833 13 9.03333 13 10C13 10.9667 12.6583 11.7917 11.975 12.475C11.2917 13.1583 10.4667 13.5 9.5 13.5ZM9.5 11.5C9.91667 11.5 10.2708 11.3542 10.5625 11.0625C10.8542 10.7708 11 10.4167 11 10C11 9.58333 10.8542 9.22917 10.5625 8.9375C10.2708 8.64583 9.91667 8.5 9.5 8.5C9.08333 8.5 8.72917 8.64583 8.4375 8.9375C8.14583 9.22917 8 9.58333 8 10C8 10.4167 8.14583 10.7708 8.4375 11.0625C8.72917 11.3542 9.08333 11.5 9.5 11.5ZM16.5 14.5C15.8 14.5 15.2083 14.2583 14.725 13.775C14.2417 13.2917 14 12.7 14 12C14 11.3 14.2417 10.7083 14.725 10.225C15.2083 9.74167 15.8 9.5 16.5 9.5C17.2 9.5 17.7917 9.74167 18.275 10.225C18.7583 10.7083 19 11.3 19 12C19 12.7 18.7583 13.2917 18.275 13.775C17.7917 14.2583 17.2 14.5 16.5 14.5Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        persons-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.525 18.0252C11.1917 18.2418 10.8542 18.2543 10.5125 18.0627C10.1708 17.871 10 17.5752 10 17.1752V6.82518C10 6.42518 10.1708 6.12935 10.5125 5.93768C10.8542 5.74602 11.1917 5.75852 11.525 5.97518L19.675 11.1502C19.975 11.3502 20.125 11.6335 20.125 12.0002C20.125 12.3669 19.975 12.6502 19.675 12.8502L11.525 18.0252ZM12 15.3502L17.25 12.0002L12 8.65018V15.3502Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        play-arrow
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M16 8V5H8V8H6V4C6 3.71667 6.09583 3.47917 6.2875 3.2875C6.47917 3.09583 6.71667 3 7 3H17C17.2833 3 17.5208 3.09583 17.7125 3.2875C17.9042 3.47917 18 3.71667 18 4V8H16ZM18 12.5C18.2833 12.5 18.5208 12.4042 18.7125 12.2125C18.9042 12.0208 19 11.7833 19 11.5C19 11.2167 18.9042 10.9792 18.7125 10.7875C18.5208 10.5958 18.2833 10.5 18 10.5C17.7167 10.5 17.4792 10.5958 17.2875 10.7875C17.0958 10.9792 17 11.2167 17 11.5C17 11.7833 17.0958 12.0208 17.2875 12.2125C17.4792 12.4042 17.7167 12.5 18 12.5ZM8 19H16V15H8V19ZM8 21C7.45 21 6.97917 20.8042 6.5875 20.4125C6.19583 20.0208 6 19.55 6 19V17H3C2.71667 17 2.47917 16.9042 2.2875 16.7125C2.09583 16.5208 2 16.2833 2 16V11C2 10.15 2.29167 9.4375 2.875 8.8625C3.45833 8.2875 4.16667 8 5 8H19C19.85 8 20.5625 8.2875 21.1375 8.8625C21.7125 9.4375 22 10.15 22 11V16C22 16.2833 21.9042 16.5208 21.7125 16.7125C21.5208 16.9042 21.2833 17 21 17H18V19C18 19.55 17.8042 20.0208 17.4125 20.4125C17.0208 20.8042 16.55 21 16 21H8ZM20 15V11C20 10.7167 19.9042 10.4792 19.7125 10.2875C19.5208 10.0958 19.2833 10 19 10H5C4.71667 10 4.47917 10.0958 4.2875 10.2875C4.09583 10.4792 4 10.7167 4 11V15H6V13H18V15H20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        print
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18ZM12 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 20ZM12.1 7.7C12.5167 7.7 12.8792 7.83333 13.1875 8.1C13.4958 8.36667 13.65 8.7 13.65 9.1C13.65 9.46667 13.5375 9.79167 13.3125 10.075C13.0875 10.3583 12.8333 10.625 12.55 10.875C12.1667 11.2083 11.8292 11.575 11.5375 11.975C11.2458 12.375 11.1 12.825 11.1 13.325C11.1 13.5583 11.1875 13.7542 11.3625 13.9125C11.5375 14.0708 11.7417 14.15 11.975 14.15C12.225 14.15 12.4375 14.0667 12.6125 13.9C12.7875 13.7333 12.9 13.525 12.95 13.275C13.0167 12.925 13.1667 12.6125 13.4 12.3375C13.6333 12.0625 13.8833 11.8 14.15 11.55C14.5333 11.1833 14.8625 10.7833 15.1375 10.35C15.4125 9.91667 15.55 9.43333 15.55 8.9C15.55 8.05 15.2042 7.35417 14.5125 6.8125C13.8208 6.27083 13.0167 6 12.1 6C11.4667 6 10.8625 6.13333 10.2875 6.4C9.7125 6.66667 9.275 7.075 8.975 7.625C8.85833 7.825 8.82083 8.0375 8.8625 8.2625C8.90417 8.4875 9.01667 8.65833 9.2 8.775C9.43333 8.90833 9.675 8.95 9.925 8.9C10.175 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9625 8.03333 11.2375 7.9C11.5125 7.76667 11.8 7.7 12.1 7.7Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        question-mark-encircled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M16.2 9.9998H9.9C8.85 9.9998 7.9375 10.3331 7.1625 10.9998C6.3875 11.6665 6 12.4998 6 13.4998C6 14.4998 6.3875 15.3331 7.1625 15.9998C7.9375 16.6665 8.85 16.9998 9.9 16.9998H16C16.2833 16.9998 16.5208 17.0956 16.7125 17.2873C16.9042 17.479 17 17.7165 17 17.9998C17 18.2831 16.9042 18.5206 16.7125 18.7123C16.5208 18.904 16.2833 18.9998 16 18.9998H9.9C8.28333 18.9998 6.89583 18.4748 5.7375 17.4248C4.57917 16.3748 4 15.0665 4 13.4998C4 11.9331 4.57917 10.6248 5.7375 9.5748C6.89583 8.5248 8.28333 7.9998 9.9 7.9998H16.2L14.3 6.0998C14.1167 5.91647 14.025 5.68314 14.025 5.3998C14.025 5.11647 14.1167 4.88314 14.3 4.6998C14.4833 4.51647 14.7167 4.4248 15 4.4248C15.2833 4.4248 15.5167 4.51647 15.7 4.6998L19.3 8.2998C19.4 8.3998 19.4708 8.50814 19.5125 8.6248C19.5542 8.74147 19.575 8.86647 19.575 8.9998C19.575 9.13314 19.5542 9.25814 19.5125 9.3748C19.4708 9.49147 19.4 9.5998 19.3 9.6998L15.7 13.2998C15.5167 13.4831 15.2833 13.5748 15 13.5748C14.7167 13.5748 14.4833 13.4831 14.3 13.2998C14.1167 13.1165 14.025 12.8831 14.025 12.5998C14.025 12.3165 14.1167 12.0831 14.3 11.8998L16.2 9.9998Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        redo
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        remove
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        search
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 20V14C5 13.45 5.19583 12.9792 5.5875 12.5875C5.97917 12.1958 6.45 12 7 12H8V10H7C6.45 10 5.97917 9.80417 5.5875 9.4125C5.19583 9.02083 5 8.55 5 8V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V8C19 8.55 18.8042 9.02083 18.4125 9.4125C18.0208 9.80417 17.55 10 17 10H16V12H17C17.55 12 18.0208 12.1958 18.4125 12.5875C18.8042 12.9792 19 13.45 19 14V20C19 20.2833 18.9042 20.5208 18.7125 20.7125C18.5208 20.9042 18.2833 21 18 21C17.7167 21 17.4792 20.9042 17.2875 20.7125C17.0958 20.5208 17 20.2833 17 20V18H7V20C7 20.2833 6.90417 20.5208 6.7125 20.7125C6.52083 20.9042 6.28333 21 6 21C5.71667 21 5.47917 20.9042 5.2875 20.7125C5.09583 20.5208 5 20.2833 5 20ZM7 8H17V5H7V8ZM10 12H14V10H10V12ZM7 16H17V14H7V16Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        seat
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19.8 12.9252L4.4 19.4252C4.06667 19.5585 3.75 19.5294 3.45 19.3377C3.15 19.146 3 18.8669 3 18.5002V5.50022C3 5.13355 3.15 4.85438 3.45 4.66272C3.75 4.47105 4.06667 4.44188 4.4 4.57522L19.8 11.0752C20.2167 11.2585 20.425 11.5669 20.425 12.0002C20.425 12.4335 20.2167 12.7419 19.8 12.9252ZM5 17.0002L16.85 12.0002L5 7.00022V10.5002L11 12.0002L5 13.5002V17.0002Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        send
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M13.875 22H10.125C9.875 22 9.65834 21.9167 9.475 21.75C9.29167 21.5833 9.18333 21.375 9.15 21.125L8.85 18.8C8.63334 18.7167 8.42917 18.6167 8.2375 18.5C8.04584 18.3833 7.85834 18.2583 7.675 18.125L5.5 19.025C5.26667 19.1083 5.03333 19.1167 4.8 19.05C4.56667 18.9833 4.38334 18.8417 4.25 18.625L2.4 15.4C2.26667 15.1833 2.225 14.95 2.275 14.7C2.325 14.45 2.45 14.25 2.65 14.1L4.525 12.675C4.50834 12.5583 4.5 12.4458 4.5 12.3375V11.6625C4.5 11.5542 4.50834 11.4417 4.525 11.325L2.65 9.9C2.45 9.75 2.325 9.55 2.275 9.3C2.225 9.05 2.26667 8.81667 2.4 8.6L4.25 5.375C4.36667 5.14167 4.54584 4.99583 4.7875 4.9375C5.02917 4.87917 5.26667 4.89167 5.5 4.975L7.675 5.875C7.85834 5.74167 8.05 5.61667 8.25 5.5C8.45 5.38333 8.65 5.28333 8.85 5.2L9.15 2.875C9.18333 2.625 9.29167 2.41667 9.475 2.25C9.65834 2.08333 9.875 2 10.125 2H13.875C14.125 2 14.3417 2.08333 14.525 2.25C14.7083 2.41667 14.8167 2.625 14.85 2.875L15.15 5.2C15.3667 5.28333 15.5708 5.38333 15.7625 5.5C15.9542 5.61667 16.1417 5.74167 16.325 5.875L18.5 4.975C18.7333 4.89167 18.9667 4.88333 19.2 4.95C19.4333 5.01667 19.6167 5.15833 19.75 5.375L21.6 8.6C21.7333 8.81667 21.775 9.05 21.725 9.3C21.675 9.55 21.55 9.75 21.35 9.9L19.475 11.325C19.4917 11.4417 19.5 11.5542 19.5 11.6625V12.3375C19.5 12.4458 19.4833 12.5583 19.45 12.675L21.325 14.1C21.525 14.25 21.65 14.45 21.7 14.7C21.75 14.95 21.7083 15.1833 21.575 15.4L19.725 18.6C19.5917 18.8167 19.4042 18.9625 19.1625 19.0375C18.9208 19.1125 18.6833 19.1083 18.45 19.025L16.325 18.125C16.1417 18.2583 15.95 18.3833 15.75 18.5C15.55 18.6167 15.35 18.7167 15.15 18.8L14.85 21.125C14.8167 21.375 14.7083 21.5833 14.525 21.75C14.3417 21.9167 14.125 22 13.875 22ZM12.05 15.5C13.0167 15.5 13.8417 15.1583 14.525 14.475C15.2083 13.7917 15.55 12.9667 15.55 12C15.55 11.0333 15.2083 10.2083 14.525 9.525C13.8417 8.84167 13.0167 8.5 12.05 8.5C11.0667 8.5 10.2375 8.84167 9.5625 9.525C8.8875 10.2083 8.55 11.0333 8.55 12C8.55 12.9667 8.8875 13.7917 9.5625 14.475C10.2375 15.1583 11.0667 15.5 12.05 15.5ZM12.05 13.5C11.6333 13.5 11.2792 13.3542 10.9875 13.0625C10.6958 12.7708 10.55 12.4167 10.55 12C10.55 11.5833 10.6958 11.2292 10.9875 10.9375C11.2792 10.6458 11.6333 10.5 12.05 10.5C12.4667 10.5 12.8208 10.6458 13.1125 10.9375C13.4042 11.2292 13.55 11.5833 13.55 12C13.55 12.4167 13.4042 12.7708 13.1125 13.0625C12.8208 13.3542 12.4667 13.5 12.05 13.5ZM11 20H12.975L13.325 17.35C13.8417 17.2167 14.3208 17.0208 14.7625 16.7625C15.2042 16.5042 15.6083 16.1917 15.975 15.825L18.45 16.85L19.425 15.15L17.275 13.525C17.3583 13.2917 17.4167 13.0458 17.45 12.7875C17.4833 12.5292 17.5 12.2667 17.5 12C17.5 11.7333 17.4833 11.4708 17.45 11.2125C17.4167 10.9542 17.3583 10.7083 17.275 10.475L19.425 8.85L18.45 7.15L15.975 8.2C15.6083 7.81667 15.2042 7.49583 14.7625 7.2375C14.3208 6.97917 13.8417 6.78333 13.325 6.65L13 4H11.025L10.675 6.65C10.1583 6.78333 9.67917 6.97917 9.2375 7.2375C8.79584 7.49583 8.39167 7.80833 8.025 8.175L5.55 7.15L4.575 8.85L6.725 10.45C6.64167 10.7 6.58333 10.95 6.55 11.2C6.51667 11.45 6.5 11.7167 6.5 12C6.5 12.2667 6.51667 12.525 6.55 12.775C6.58333 13.025 6.64167 13.275 6.725 13.525L4.575 15.15L5.55 16.85L8.025 15.8C8.39167 16.1833 8.79584 16.5042 9.2375 16.7625C9.67917 17.0208 10.1583 17.2167 10.675 17.35L11 20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        settings
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18 22C17.1667 22 16.4583 21.7083 15.875 21.125C15.2917 20.5417 15 19.8333 15 19C15 18.8833 15.0083 18.7625 15.025 18.6375C15.0417 18.5125 15.0667 18.4 15.1 18.3L8.05 14.2C7.76667 14.45 7.45 14.6458 7.1 14.7875C6.75 14.9292 6.38333 15 6 15C5.16667 15 4.45833 14.7083 3.875 14.125C3.29167 13.5417 3 12.8333 3 12C3 11.1667 3.29167 10.4583 3.875 9.875C4.45833 9.29167 5.16667 9 6 9C6.38333 9 6.75 9.07083 7.1 9.2125C7.45 9.35417 7.76667 9.55 8.05 9.8L15.1 5.7C15.0667 5.6 15.0417 5.4875 15.025 5.3625C15.0083 5.2375 15 5.11667 15 5C15 4.16667 15.2917 3.45833 15.875 2.875C16.4583 2.29167 17.1667 2 18 2C18.8333 2 19.5417 2.29167 20.125 2.875C20.7083 3.45833 21 4.16667 21 5C21 5.83333 20.7083 6.54167 20.125 7.125C19.5417 7.70833 18.8333 8 18 8C17.6167 8 17.25 7.92917 16.9 7.7875C16.55 7.64583 16.2333 7.45 15.95 7.2L8.9 11.3C8.93333 11.4 8.95833 11.5125 8.975 11.6375C8.99167 11.7625 9 11.8833 9 12C9 12.1167 8.99167 12.2375 8.975 12.3625C8.95833 12.4875 8.93333 12.6 8.9 12.7L15.95 16.8C16.2333 16.55 16.55 16.3542 16.9 16.2125C17.25 16.0708 17.6167 16 18 16C18.8333 16 19.5417 16.2917 20.125 16.875C20.7083 17.4583 21 18.1667 21 19C21 19.8333 20.7083 20.5417 20.125 21.125C19.5417 21.7083 18.8333 22 18 22ZM18 6C18.2833 6 18.5208 5.90417 18.7125 5.7125C18.9042 5.52083 19 5.28333 19 5C19 4.71667 18.9042 4.47917 18.7125 4.2875C18.5208 4.09583 18.2833 4 18 4C17.7167 4 17.4792 4.09583 17.2875 4.2875C17.0958 4.47917 17 4.71667 17 5C17 5.28333 17.0958 5.52083 17.2875 5.7125C17.4792 5.90417 17.7167 6 18 6ZM6 13C6.28333 13 6.52083 12.9042 6.7125 12.7125C6.90417 12.5208 7 12.2833 7 12C7 11.7167 6.90417 11.4792 6.7125 11.2875C6.52083 11.0958 6.28333 11 6 11C5.71667 11 5.47917 11.0958 5.2875 11.2875C5.09583 11.4792 5 11.7167 5 12C5 12.2833 5.09583 12.5208 5.2875 12.7125C5.47917 12.9042 5.71667 13 6 13ZM18 20C18.2833 20 18.5208 19.9042 18.7125 19.7125C18.9042 19.5208 19 19.2833 19 19C19 18.7167 18.9042 18.4792 18.7125 18.2875C18.5208 18.0958 18.2833 18 18 18C17.7167 18 17.4792 18.0958 17.2875 18.2875C17.0958 18.4792 17 18.7167 17 19C17 19.2833 17.0958 19.5208 17.2875 19.7125C17.4792 19.9042 17.7167 20 18 20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        share
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19.46 7.99953L20.25 6.24953L22 5.45953C22.39 5.27953 22.39 4.72953 22 4.54953L20.25 3.75953L19.46 1.99953C19.28 1.60953 18.73 1.60953 18.55 1.99953L17.76 3.74953L16 4.53953C15.61 4.71953 15.61 5.26953 16 5.44953L17.75 6.23953L18.54 7.99953C18.72 8.38953 19.28 8.38953 19.46 7.99953ZM11.5 9.49953L9.91 5.99953C9.56 5.21953 8.44 5.21953 8.09 5.99953L6.5 9.49953L3 11.0895C2.22 11.4495 2.22 12.5595 3 12.9095L6.5 14.4995L8.09 17.9995C8.45 18.7795 9.56 18.7795 9.91 17.9995L11.5 14.4995L15 12.9095C15.78 12.5495 15.78 11.4395 15 11.0895L11.5 9.49953ZM18.54 15.9995L17.75 17.7495L16 18.5395C15.61 18.7195 15.61 19.2695 16 19.4495L17.75 20.2395L18.54 21.9995C18.72 22.3895 19.27 22.3895 19.45 21.9995L20.24 20.2495L22 19.4595C22.39 19.2795 22.39 18.7295 22 18.5495L20.25 17.7595L19.46 15.9995C19.28 15.6095 18.72 15.6095 18.54 15.9995Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        sparkles
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        star
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        star-filled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 18.1748V11.9998C14 11.7165 14.0958 11.479 14.2875 11.2873C14.4792 11.0956 14.7167 10.9998 15 10.9998C15.2833 10.9998 15.5208 11.0956 15.7125 11.2873C15.9042 11.479 16 11.7165 16 11.9998V18.1748L17.875 16.2998C18.0583 16.1165 18.2875 16.0206 18.5625 16.0123C18.8375 16.004 19.075 16.0998 19.275 16.2998C19.475 16.4831 19.5792 16.7123 19.5875 16.9873C19.5958 17.2623 19.5 17.4998 19.3 17.6998L15.7 21.2998C15.6 21.3998 15.4917 21.4706 15.375 21.5123C15.2583 21.554 15.1333 21.5748 15 21.5748C14.8667 21.5748 14.7417 21.554 14.625 21.5123C14.5083 21.4706 14.4 21.3998 14.3 21.2998L10.7 17.6998C10.5167 17.5165 10.425 17.2873 10.425 17.0123C10.425 16.7373 10.525 16.4998 10.725 16.2998C10.925 16.1165 11.1583 16.0206 11.425 16.0123C11.6917 16.004 11.925 16.0998 12.125 16.2998L14 18.1748ZM8 5.8248L6.125 7.6998C5.90834 7.91647 5.66667 8.01647 5.4 7.9998C5.13334 7.98314 4.90834 7.88314 4.725 7.6998C4.525 7.4998 4.425 7.2623 4.425 6.9873C4.425 6.7123 4.51667 6.48314 4.7 6.2998L8.3 2.6998C8.4 2.5998 8.50834 2.52897 8.625 2.4873C8.74167 2.44564 8.86667 2.4248 9 2.4248C9.13334 2.4248 9.25834 2.44564 9.375 2.4873C9.49167 2.52897 9.6 2.5998 9.7 2.6998L13.3 6.2998C13.4833 6.48314 13.575 6.71647 13.575 6.9998C13.575 7.28314 13.4833 7.51647 13.3 7.6998C13.1 7.8998 12.8625 7.9998 12.5875 7.9998C12.3125 7.9998 12.075 7.8998 11.875 7.6998L10 5.8248V11.9998C10 12.2831 9.90417 12.5206 9.7125 12.7123C9.52084 12.904 9.28334 12.9998 9 12.9998C8.71667 12.9998 8.47917 12.904 8.2875 12.7123C8.09584 12.5206 8 12.2831 8 11.9998V5.8248Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        swap-vertical
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M13 17H5C4.45 17 4 17.45 4 18C4 18.55 4.45 19 5 19H13C13.55 19 14 18.55 14 18C14 17.45 13.55 17 13 17ZM19 9H5C4.45 9 4 9.45 4 10C4 10.55 4.45 11 5 11H19C19.55 11 20 10.55 20 10C20 9.45 19.55 9 19 9ZM5 15H19C19.55 15 20 14.55 20 14C20 13.45 19.55 13 19 13H5C4.45 13 4 13.45 4 14C4 14.55 4.45 15 5 15ZM4 6C4 6.55 4.45 7 5 7H19C19.55 7 20 6.55 20 6C20 5.45 19.55 5 19 5H5C4.45 5 4 5.45 4 6Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        text-long
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 9H19C19.55 9 20 9.45 20 10C20 10.55 19.55 11 19 11H5C4.45 11 4 10.55 4 10C4 9.45 4.45 9 5 9ZM5 13H13C13.55 13 14 13.45 14 14C14 14.55 13.55 15 13 15H5C4.45 15 4 14.55 4 14C4 13.45 4.45 13 5 13Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        text-short
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 25 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2 13C1.46667 13 1 12.8 0.6 12.4C0.2 12 0 11.5333 0 11V9C0 8.88333 0.0166667 8.75833 0.05 8.625C0.0833333 8.49167 0.116667 8.36667 0.15 8.25L3.15 1.2C3.3 0.866667 3.55 0.583333 3.9 0.35C4.25 0.116667 4.61667 0 5 0H16V13L10 18.95C9.75 19.2 9.45417 19.3458 9.1125 19.3875C8.77083 19.4292 8.44167 19.3667 8.125 19.2C7.80833 19.0333 7.575 18.8 7.425 18.5C7.275 18.2 7.24167 17.8917 7.325 17.575L8.45 13H2ZM14 12.15V2H5L2 9V11H11L9.65 16.5L14 12.15ZM19 0C19.55 0 20.0208 0.195833 20.4125 0.5875C20.8042 0.979167 21 1.45 21 2V11C21 11.55 20.8042 12.0208 20.4125 12.4125C20.0208 12.8042 19.55 13 19 13H16V11H19V2H16V0H19Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        thumb-down
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 25 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 19.9996V6.99961L11 1.04961C11.25 0.799609 11.5458 0.653776 11.8875 0.612109C12.2292 0.570443 12.5583 0.632943 12.875 0.799609C13.1917 0.966276 13.425 1.19961 13.575 1.49961C13.725 1.79961 13.7583 2.10794 13.675 2.42461L12.55 6.99961H19C19.5333 6.99961 20 7.19961 20.4 7.59961C20.8 7.99961 21 8.46628 21 8.99961V10.9996C21 11.1163 20.9833 11.2413 20.95 11.3746C20.9167 11.5079 20.8833 11.6329 20.85 11.7496L17.85 18.7996C17.7 19.1329 17.45 19.4163 17.1 19.6496C16.75 19.8829 16.3833 19.9996 16 19.9996H5ZM7 7.84961V17.9996H16L19 10.9996V8.99961H10L11.35 3.49961L7 7.84961ZM2 19.9996C1.45 19.9996 0.979167 19.8038 0.5875 19.4121C0.195833 19.0204 0 18.5496 0 17.9996V8.99961C0 8.44961 0.195833 7.97878 0.5875 7.58711C0.979167 7.19544 1.45 6.99961 2 6.99961H5V8.99961H2V17.9996H5V19.9996H2Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        thumb-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7 2C6.71667 2 6.47917 1.90417 6.2875 1.7125C6.09583 1.52083 6 1.28333 6 1C6 0.716667 6.09583 0.479167 6.2875 0.2875C6.47917 0.0958333 6.71667 0 7 0H11C11.2833 0 11.5208 0.0958333 11.7125 0.2875C11.9042 0.479167 12 0.716667 12 1C12 1.28333 11.9042 1.52083 11.7125 1.7125C11.5208 1.90417 11.2833 2 11 2H7ZM9 13C9.28333 13 9.52083 12.9042 9.7125 12.7125C9.90417 12.5208 10 12.2833 10 12V8C10 7.71667 9.90417 7.47917 9.7125 7.2875C9.52083 7.09583 9.28333 7 9 7C8.71667 7 8.47917 7.09583 8.2875 7.2875C8.09583 7.47917 8 7.71667 8 8V12C8 12.2833 8.09583 12.5208 8.2875 12.7125C8.47917 12.9042 8.71667 13 9 13ZM9 21C7.76667 21 6.60417 20.7625 5.5125 20.2875C4.42083 19.8125 3.46667 19.1667 2.65 18.35C1.83333 17.5333 1.1875 16.5792 0.7125 15.4875C0.2375 14.3958 0 13.2333 0 12C0 10.7667 0.2375 9.60417 0.7125 8.5125C1.1875 7.42083 1.83333 6.46667 2.65 5.65C3.46667 4.83333 4.42083 4.1875 5.5125 3.7125C6.60417 3.2375 7.76667 3 9 3C10.0333 3 11.025 3.16667 11.975 3.5C12.925 3.83333 13.8167 4.31667 14.65 4.95L15.35 4.25C15.5333 4.06667 15.7667 3.975 16.05 3.975C16.3333 3.975 16.5667 4.06667 16.75 4.25C16.9333 4.43333 17.025 4.66667 17.025 4.95C17.025 5.23333 16.9333 5.46667 16.75 5.65L16.05 6.35C16.6833 7.18333 17.1667 8.075 17.5 9.025C17.8333 9.975 18 10.9667 18 12C18 13.2333 17.7625 14.3958 17.2875 15.4875C16.8125 16.5792 16.1667 17.5333 15.35 18.35C14.5333 19.1667 13.5792 19.8125 12.4875 20.2875C11.3958 20.7625 10.2333 21 9 21ZM9 19C10.9333 19 12.5833 18.3167 13.95 16.95C15.3167 15.5833 16 13.9333 16 12C16 10.0667 15.3167 8.41667 13.95 7.05C12.5833 5.68333 10.9333 5 9 5C7.06667 5 5.41667 5.68333 4.05 7.05C2.68333 8.41667 2 10.0667 2 12C2 13.9333 2.68333 15.5833 4.05 16.95C5.41667 18.3167 7.06667 19 9 19Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        timer
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18.95 16.15L17.45 14.65C17.6333 14.2 17.7708 13.7542 17.8625 13.3125C17.9542 12.8708 18 12.4333 18 12C18 10.0667 17.3167 8.41667 15.95 7.05C14.5833 5.68333 12.9333 5 11 5C10.6 5 10.175 5.04167 9.725 5.125C9.275 5.20833 8.80833 5.34167 8.325 5.525L6.825 4.025C7.45833 3.69167 8.12916 3.4375 8.8375 3.2625C9.54583 3.0875 10.2667 3 11 3C12 3 12.9792 3.16667 13.9375 3.5C14.8958 3.83333 15.8 4.31667 16.65 4.95L17.35 4.25C17.5333 4.06667 17.7667 3.975 18.05 3.975C18.3333 3.975 18.5667 4.06667 18.75 4.25C18.9333 4.43333 19.025 4.66667 19.025 4.95C19.025 5.23333 18.9333 5.46667 18.75 5.65L18.05 6.35C18.6833 7.2 19.1667 8.10417 19.5 9.0625C19.8333 10.0208 20 11 20 12C20 12.7 19.9125 13.3958 19.7375 14.0875C19.5625 14.7792 19.3 15.4667 18.95 16.15ZM12 9.2V8C12 7.71667 11.9042 7.47917 11.7125 7.2875C11.5208 7.09583 11.2833 7 11 7C10.8333 7 10.6792 7.03333 10.5375 7.1C10.3958 7.16667 10.2833 7.26667 10.2 7.4L12 9.2ZM11 21C9.76666 21 8.60416 20.7625 7.5125 20.2875C6.42083 19.8125 5.46666 19.1667 4.65 18.35C3.83333 17.5333 3.1875 16.5792 2.7125 15.4875C2.2375 14.3958 2 13.2333 2 12C2 11 2.15416 10.0375 2.4625 9.1125C2.77083 8.1875 3.21666 7.35 3.8 6.6L1.1 3.9C0.916664 3.71667 0.824997 3.48333 0.824997 3.2C0.824997 2.91667 0.916664 2.68333 1.1 2.5C1.28333 2.31667 1.51666 2.225 1.8 2.225C2.08333 2.225 2.31666 2.31667 2.5 2.5L19.5 19.5C19.6833 19.6833 19.775 19.9167 19.775 20.2C19.775 20.4833 19.6833 20.7167 19.5 20.9C19.3167 21.0833 19.0833 21.175 18.8 21.175C18.5167 21.175 18.2833 21.0833 18.1 20.9L16.4 19.2C15.6 19.7833 14.7375 20.2292 13.8125 20.5375C12.8875 20.8458 11.95 21 11 21ZM11 19C11.7 19 12.3833 18.8917 13.05 18.675C13.7167 18.4583 14.3417 18.15 14.925 17.75L5.2 8.025C4.8 8.60833 4.5 9.23333 4.3 9.9C4.1 10.5667 4 11.2667 4 12C4 13.9333 4.68333 15.5833 6.05 16.95C7.41666 18.3167 9.06666 19 11 19ZM9 2C8.71666 2 8.47916 1.90417 8.2875 1.7125C8.09583 1.52083 8 1.28333 8 1C8 0.716667 8.09583 0.479167 8.2875 0.2875C8.47916 0.0958333 8.71666 0 9 0H13C13.2833 0 13.5208 0.0958333 13.7125 0.2875C13.9042 0.479167 14 0.716667 14 1C14 1.28333 13.9042 1.52083 13.7125 1.7125C13.5208 1.90417 13.2833 2 13 2H9Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        timer-off
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6C4.71667 6 4.47917 5.90417 4.2875 5.7125C4.09583 5.52083 4 5.28333 4 5C4 4.71667 4.09583 4.47917 4.2875 4.2875C4.47917 4.09583 4.71667 4 5 4H9C9 3.71667 9.09583 3.47917 9.2875 3.2875C9.47917 3.09583 9.71667 3 10 3H14C14.2833 3 14.5208 3.09583 14.7125 3.2875C14.9042 3.47917 15 3.71667 15 4H19C19.2833 4 19.5208 4.09583 19.7125 4.2875C19.9042 4.47917 20 4.71667 20 5C20 5.28333 19.9042 5.52083 19.7125 5.7125C19.5208 5.90417 19.2833 6 19 6V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM7 6V19H17V6H7ZM9 16C9 16.2833 9.09583 16.5208 9.2875 16.7125C9.47917 16.9042 9.71667 17 10 17C10.2833 17 10.5208 16.9042 10.7125 16.7125C10.9042 16.5208 11 16.2833 11 16V9C11 8.71667 10.9042 8.47917 10.7125 8.2875C10.5208 8.09583 10.2833 8 10 8C9.71667 8 9.47917 8.09583 9.2875 8.2875C9.09583 8.47917 9 8.71667 9 9V16ZM13 16C13 16.2833 13.0958 16.5208 13.2875 16.7125C13.4792 16.9042 13.7167 17 14 17C14.2833 17 14.5208 16.9042 14.7125 16.7125C14.9042 16.5208 15 16.2833 15 16V9C15 8.71667 14.9042 8.47917 14.7125 8.2875C14.5208 8.09583 14.2833 8 14 8C13.7167 8 13.4792 8.09583 13.2875 8.2875C13.0958 8.47917 13 8.71667 13 9V16Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        trash
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.7 17.3C2.51667 17.1167 2.425 16.8875 2.425 16.6125C2.425 16.3375 2.51667 16.1 2.7 15.9L8.7 9.85C8.8 9.76667 8.90833 9.7 9.025 9.65C9.14167 9.6 9.26667 9.575 9.4 9.575C9.53333 9.575 9.6625 9.6 9.7875 9.65C9.9125 9.7 10.0167 9.76667 10.1 9.85L13.4 13.15L18.6 8H17C16.7167 8 16.4792 7.90417 16.2875 7.7125C16.0958 7.52083 16 7.28333 16 7C16 6.71667 16.0958 6.47917 16.2875 6.2875C16.4792 6.09583 16.7167 6 17 6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V11C22 11.2833 21.9042 11.5208 21.7125 11.7125C21.5208 11.9042 21.2833 12 21 12C20.7167 12 20.4792 11.9042 20.2875 11.7125C20.0958 11.5208 20 11.2833 20 11V9.4L14.1 15.3C14 15.4 13.8917 15.4708 13.775 15.5125C13.6583 15.5542 13.5333 15.575 13.4 15.575C13.2667 15.575 13.1417 15.5542 13.025 15.5125C12.9083 15.4708 12.8 15.4 12.7 15.3L9.4 12L4.075 17.325C3.89167 17.5083 3.66667 17.6 3.4 17.6C3.13333 17.6 2.9 17.5 2.7 17.3Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        trend-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8 18.9998C7.71667 18.9998 7.47917 18.904 7.2875 18.7123C7.09584 18.5206 7 18.2831 7 17.9998C7 17.7165 7.09584 17.479 7.2875 17.2873C7.47917 17.0956 7.71667 16.9998 8 16.9998H14.1C15.15 16.9998 16.0625 16.6665 16.8375 15.9998C17.6125 15.3331 18 14.4998 18 13.4998C18 12.4998 17.6125 11.6665 16.8375 10.9998C16.0625 10.3331 15.15 9.9998 14.1 9.9998H7.8L9.7 11.8998C9.88334 12.0831 9.975 12.3165 9.975 12.5998C9.975 12.8831 9.88334 13.1165 9.7 13.2998C9.51667 13.4831 9.28334 13.5748 9 13.5748C8.71667 13.5748 8.48334 13.4831 8.3 13.2998L4.7 9.6998C4.6 9.5998 4.52917 9.49147 4.4875 9.3748C4.44584 9.25814 4.425 9.13314 4.425 8.9998C4.425 8.86647 4.44584 8.74147 4.4875 8.6248C4.52917 8.50814 4.6 8.3998 4.7 8.2998L8.3 4.6998C8.48334 4.51647 8.71667 4.4248 9 4.4248C9.28334 4.4248 9.51667 4.51647 9.7 4.6998C9.88334 4.88314 9.975 5.11647 9.975 5.3998C9.975 5.68314 9.88334 5.91647 9.7 6.0998L7.8 7.9998H14.1C15.7167 7.9998 17.1042 8.5248 18.2625 9.5748C19.4208 10.6248 20 11.9331 20 13.4998C20 15.0665 19.4208 16.3748 18.2625 17.4248C17.1042 18.4748 15.7167 18.9998 14.1 18.9998H8Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        undo
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 5.83l2.46 2.46c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 3.7c-.39-.39-1.02-.39-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 5.83zm0 12.34l-2.46-2.46c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L12 18.17z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        unfold-more
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 19.9998C5.45 19.9998 4.97917 19.804 4.5875 19.4123C4.19583 19.0206 4 18.5498 4 17.9998V15.9998C4 15.7165 4.09583 15.479 4.2875 15.2873C4.47917 15.0956 4.71667 14.9998 5 14.9998C5.28333 14.9998 5.52083 15.0956 5.7125 15.2873C5.90417 15.479 6 15.7165 6 15.9998V17.9998H18V15.9998C18 15.7165 18.0958 15.479 18.2875 15.2873C18.4792 15.0956 18.7167 14.9998 19 14.9998C19.2833 14.9998 19.5208 15.0956 19.7125 15.2873C19.9042 15.479 20 15.7165 20 15.9998V17.9998C20 18.5498 19.8042 19.0206 19.4125 19.4123C19.0208 19.804 18.55 19.9998 18 19.9998H6ZM11 7.8498L9.125 9.7248C8.925 9.9248 8.6875 10.0206 8.4125 10.0123C8.1375 10.004 7.9 9.8998 7.7 9.6998C7.51667 9.4998 7.42083 9.26647 7.4125 8.9998C7.40417 8.73314 7.5 8.4998 7.7 8.2998L11.3 4.6998C11.4 4.5998 11.5083 4.52897 11.625 4.4873C11.7417 4.44564 11.8667 4.4248 12 4.4248C12.1333 4.4248 12.2583 4.44564 12.375 4.4873C12.4917 4.52897 12.6 4.5998 12.7 4.6998L16.3 8.2998C16.5 8.4998 16.5958 8.73314 16.5875 8.9998C16.5792 9.26647 16.4833 9.4998 16.3 9.6998C16.1 9.8998 15.8625 10.004 15.5875 10.0123C15.3125 10.0206 15.075 9.9248 14.875 9.7248L13 7.8498V14.9998C13 15.2831 12.9042 15.5206 12.7125 15.7123C12.5208 15.904 12.2833 15.9998 12 15.9998C11.7167 15.9998 11.4792 15.904 11.2875 15.7123C11.0958 15.5206 11 15.2831 11 14.9998V7.8498Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        upload
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.275 16L15.85 12.425C16 12.325 16.075 12.1833 16.075 12C16.075 11.8167 16 11.675 15.85 11.575L10.275 8C10.1083 7.88333 9.9375 7.875 9.7625 7.975C9.5875 8.075 9.5 8.225 9.5 8.425V15.575C9.5 15.775 9.5875 15.925 9.7625 16.025C9.9375 16.125 10.1083 16.1167 10.275 16ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V6H4V18Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        video
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        warning-filled
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          clip-path="url(#clip0_6658_850)"
-        >
-          <path
-            d="M21.6 12.2271C21.6 11.518 21.5364 10.8362 21.4182 10.1816H12V14.0498H17.3818C17.15 15.2998 16.4455 16.3589 15.3864 17.068V19.5771H18.6182C20.5091 17.8362 21.6 15.2725 21.6 12.2271Z"
-            fill="#4285F4"
-          />
-          <path
-            d="M11.9999 22.0004C14.6999 22.0004 16.9635 21.1049 18.618 19.5777L15.3862 17.0686C14.4908 17.6686 13.3453 18.0231 11.9999 18.0231C9.39528 18.0231 7.19078 16.264 6.40438 13.9004H3.06348V16.4913C4.70898 19.7595 8.09078 22.0004 11.9999 22.0004Z"
-            fill="#34A853"
-          />
-          <path
-            d="M6.4045 13.8997C6.2045 13.2997 6.0909 12.6588 6.0909 11.9997C6.0909 11.3406 6.2045 10.6997 6.4045 10.0997V7.50879H3.0636C2.3864 8.85879 2 10.3861 2 11.9997C2 13.6133 2.3864 15.1406 3.0636 16.4906L6.4045 13.8997Z"
-            fill="#FBBC04"
-          />
-          <path
-            d="M11.9999 5.9773C13.468 5.9773 14.7862 6.4818 15.8226 7.4727L18.6908 4.6045C16.959 2.9909 14.6953 2 11.9999 2C8.09078 2 4.70898 4.2409 3.06348 7.5091L6.40438 10.1C7.19078 7.7364 9.39528 5.9773 11.9999 5.9773Z"
-            fill="#E94235"
-          />
-        </g>
-        <defs>
-          <clippath
-            id="clip0_6658_850"
-          >
-            <rect
-              fill="white"
-              height="20"
-              transform="translate(2 2)"
-              width="20"
-            />
-          </clippath>
-        </defs>
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        logo-google-polychrome
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          clip-path="url(#clip0_6658_733)"
-        >
-          <path
-            d="M11.5236 2.95215H2.95215V11.5236H11.5236V2.95215Z"
-            fill="#F25022"
-          />
-          <path
-            d="M11.5236 12.4766H2.95215V21.048H11.5236V12.4766Z"
-            fill="#00A4EF"
-          />
-          <path
-            d="M21.0475 2.95215H12.4761V11.5236H21.0475V2.95215Z"
-            fill="#7FBA00"
-          />
-          <path
-            d="M21.0475 12.4766H12.4761V21.048H21.0475V12.4766Z"
-            fill="#FFB900"
-          />
-        </g>
-        <defs>
-          <clippath
-            id="clip0_6658_733"
-          >
-            <rect
-              fill="white"
-              height="20"
-              transform="translate(2 2)"
-              width="20"
-            />
-          </clippath>
-        </defs>
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        logo-microsoft-polychrome
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        radio-selected
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        radio-unselected
-      </span>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`<Icon /> (v2) InText story renders snapshot 1`] = `
-<p
-  class="text text--body-md"
->
-  The svg icon defaults to the surrounding text size (
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      icon with 1em line height
-    </title>
-    <path
-      d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-    />
-  </svg>
-  ; 1em) by default.
-</p>
-`;
-
-exports[`<Icon /> (v2) Large story renders snapshot 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon"
-  fill="currentColor"
-  height="4em"
-  style="--icon-size: 4em;"
-  viewBox="0 0 24 24"
-  width="4em"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <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>
-`;
-
-exports[`<Icon /> (v2) Medium story renders snapshot 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon"
-  fill="currentColor"
-  height="2em"
-  style="--icon-size: 2em;"
-  viewBox="0 0 24 24"
-  width="2em"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <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>
-`;
-
-exports[`<Icon /> (v2) WithChildrenSvg story renders snapshot 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon"
-  fill="currentColor"
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M11.6144 8.96051C12.2524 7.61848 13.9514 4.56304 14.905 3C15.5557 3.28671 16.1844 3.61871 16.7863 3.99342C15.9964 5.50177 14.2272 8.6643 13.5144 9.87646C14.7414 9.45266 18.4783 8.3362 20.1657 7.89646C20.4765 8.60506 20.8294 9.55291 21 10.0815C19.0439 10.5737 15.0872 11.5078 13.699 11.8109C15.335 12.2848 17.9431 13.0914 19.8642 13.7408C19.6118 14.2352 19.0345 15.2354 18.6209 15.9122C17.034 15.3311 15.0639 14.5451 13.4794 13.8934C13.9 14.3491 16.8143 17.8329 17.5178 18.7147C17.1322 19.2023 16.4217 20.0157 15.9566 20.5101C14.6058 18.7876 13.1522 16.819 12.0047 15.2149C12.0911 16.0785 12.3412 19.4119 12.43 20.8701C11.764 20.9339 10.8455 20.9841 10.093 21C10.0345 18.7739 10.0065 16.9648 10.0088 15.7253C9.39652 16.6367 7.40068 19.4734 6.97066 20.0544C6.58504 19.7263 5.80213 18.9152 5.48429 18.5985C6.41911 17.2975 8.24201 14.9939 9.14412 13.8957C8.24435 14.1965 4.57518 15.3266 3.53519 15.6046C3.35991 15.0418 3.11685 14.1076 3 13.5334C4.11945 13.2395 7.56661 12.4352 8.98987 12.1322C8.04103 11.5603 5.13607 9.68506 3.88574 8.81013C4.35316 8.17671 4.91872 7.48633 5.43521 6.88481C6.44015 7.60709 8.7772 9.32734 9.5718 9.92203C9.00857 7.9238 8.57388 5.88 8.13918 3.57646C8.9025 3.38437 9.67878 3.24503 10.4622 3.15949C10.6679 4.05949 11.4298 8.09468 11.6144 8.96051Z"
-  />
-</svg>
-`;
diff --git a/src/components/Icon/__snapshots__/Icon.test.ts.snap b/src/components/Icon/__snapshots__/Icon.test.ts.snap
index 02ec6a317..d4b453fd4 100644
--- a/src/components/Icon/__snapshots__/Icon.test.ts.snap
+++ b/src/components/Icon/__snapshots__/Icon.test.ts.snap
@@ -4,7 +4,7 @@ exports[`<Icon /> CustomColor story renders snapshot 1`] = `
 <svg
   aria-hidden="true"
   class="icon"
-  fill="var(--eds-color-brand-grape-400)"
+  fill="var(--eds-theme-color-icon-utility-critical)"
   height="2em"
   style="--icon-size: 2em;"
   viewBox="0 0 24 24"
@@ -47,13 +47,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
+          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>
       <span
         class="icon-grid__text"
       >
-        account-circle
+        add
       </span>
     </li>
     <li
@@ -67,13 +67,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15 12h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1zm6.18-6.99L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
+          d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        add-alarm
+        add-encircled
       </span>
     </li>
     <li
@@ -87,13 +87,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+          d="M12.9999 12.6004V9.00039C12.9999 8.71706 12.9041 8.47956 12.7124 8.28789C12.5207 8.09622 12.2832 8.00039 11.9999 8.00039C11.7166 8.00039 11.4791 8.09622 11.2874 8.28789C11.0957 8.47956 10.9999 8.71706 10.9999 9.00039V12.9754C10.9999 13.1087 11.0249 13.2379 11.0749 13.3629C11.1249 13.4879 11.1999 13.6004 11.2999 13.7004L14.0999 16.5004C14.2832 16.6837 14.5166 16.7754 14.7999 16.7754C15.0832 16.7754 15.3166 16.6837 15.4999 16.5004C15.6832 16.3171 15.7749 16.0837 15.7749 15.8004C15.7749 15.5171 15.6832 15.2837 15.4999 15.1004L12.9999 12.6004ZM11.9999 22.0004C10.7499 22.0004 9.57907 21.7629 8.4874 21.2879C7.39574 20.8129 6.44574 20.1712 5.6374 19.3629C4.82907 18.5546 4.1874 17.6046 3.7124 16.5129C3.2374 15.4212 2.9999 14.2504 2.9999 13.0004C2.9999 11.7504 3.2374 10.5796 3.7124 9.48789C4.1874 8.39622 4.82907 7.44622 5.6374 6.63789C6.44574 5.82956 7.39574 5.18789 8.4874 4.71289C9.57907 4.23789 10.7499 4.00039 11.9999 4.00039C13.2499 4.00039 14.4207 4.23789 15.5124 4.71289C16.6041 5.18789 17.5541 5.82956 18.3624 6.63789C19.1707 7.44622 19.8124 8.39622 20.2874 9.48789C20.7624 10.5796 20.9999 11.7504 20.9999 13.0004C20.9999 14.2504 20.7624 15.4212 20.2874 16.5129C19.8124 17.6046 19.1707 18.5546 18.3624 19.3629C17.5541 20.1712 16.6041 20.8129 15.5124 21.2879C14.4207 21.7629 13.2499 22.0004 11.9999 22.0004ZM2.0499 7.30039C1.86657 7.11706 1.7749 6.88372 1.7749 6.60039C1.7749 6.31706 1.86657 6.08372 2.0499 5.90039L4.8999 3.05039C5.08324 2.86706 5.31657 2.77539 5.5999 2.77539C5.88324 2.77539 6.11657 2.86706 6.2999 3.05039C6.48324 3.23372 6.5749 3.46706 6.5749 3.75039C6.5749 4.03372 6.48324 4.26706 6.2999 4.45039L3.4499 7.30039C3.26657 7.48372 3.03324 7.57539 2.7499 7.57539C2.46657 7.57539 2.23324 7.48372 2.0499 7.30039ZM21.9499 7.30039C21.7666 7.48372 21.5332 7.57539 21.2499 7.57539C20.9666 7.57539 20.7332 7.48372 20.5499 7.30039L17.6999 4.45039C17.5166 4.26706 17.4249 4.03372 17.4249 3.75039C17.4249 3.46706 17.5166 3.23372 17.6999 3.05039C17.8832 2.86706 18.1166 2.77539 18.3999 2.77539C18.6832 2.77539 18.9166 2.86706 19.0999 3.05039L21.9499 5.90039C22.1332 6.08372 22.2249 6.31706 22.2249 6.60039C22.2249 6.88372 22.1332 7.11706 21.9499 7.30039ZM11.9999 20.0004C13.9499 20.0004 15.6041 19.3212 16.9624 17.9629C18.3207 16.6046 18.9999 14.9504 18.9999 13.0004C18.9999 11.0504 18.3207 9.39622 16.9624 8.03789C15.6041 6.67956 13.9499 6.00039 11.9999 6.00039C10.0499 6.00039 8.39574 6.67956 7.0374 8.03789C5.67907 9.39622 4.9999 11.0504 4.9999 13.0004C4.9999 14.9504 5.67907 16.6046 7.0374 17.9629C8.39574 19.3212 10.0499 20.0004 11.9999 20.0004Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        add-circle
+        alarm
       </span>
     </li>
     <li
@@ -107,13 +107,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11 11V13C11 13.2833 11.0958 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14C12.2833 14 12.5208 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V11H15C15.2833 11 15.5208 10.9042 15.7125 10.7125C15.9042 10.5208 16 10.2833 16 10C16 9.71667 15.9042 9.47917 15.7125 9.2875C15.5208 9.09583 15.2833 9 15 9H13V7C13 6.71667 12.9042 6.47917 12.7125 6.2875C12.5208 6.09583 12.2833 6 12 6C11.7167 6 11.4792 6.09583 11.2875 6.2875C11.0958 6.47917 11 6.71667 11 7V9H9C8.71667 9 8.47917 9.09583 8.2875 9.2875C8.09583 9.47917 8 9.71667 8 10C8 10.2833 8.09583 10.5208 8.2875 10.7125C8.47917 10.9042 8.71667 11 9 11H11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
+          d="M15 12h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1zm6.18-6.99L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        add-comment
+        alarm-add
       </span>
     </li>
     <li
@@ -127,13 +127,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          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>
       <span
         class="icon-grid__text"
       >
-        add
+        arrow-down
       </span>
     </li>
     <li
@@ -147,13 +147,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.87 15.25l-3.37-2V8.72c0-.4-.32-.72-.72-.72h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l3.65 2.19c.34.2.78.1.98-.24.21-.35.1-.8-.25-1zm5.31-10.24L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13.36-.42.3-1.05-.12-1.41zM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41-.35-.43-.98-.48-1.4-.13L2.82 5.01c-.42.36-.48.99-.12 1.41.35.43.98.48 1.4.13zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"
+          d="M18.3,14.29L18.3,14.29c-0.39-0.39-1.02-0.39-1.41,0L13,18.17V3c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v15.18l-3.88-3.88 c-0.39-0.39-1.02-0.39-1.41,0l0,0c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59 C18.68,15.32,18.68,14.68,18.3,14.29z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        alarm
+        arrow-down-narrow
       </span>
     </li>
     <li
@@ -173,7 +173,7 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
       <span
         class="icon-grid__text"
       >
-        arrow-back
+        arrow-left
       </span>
     </li>
     <li
@@ -187,13 +187,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          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>
       <span
         class="icon-grid__text"
       >
-        arrow-downward
+        arrow-left-narrow
       </span>
     </li>
     <li
@@ -213,7 +213,7 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
       <span
         class="icon-grid__text"
       >
-        arrow-forward
+        arrow-right
       </span>
     </li>
     <li
@@ -227,13 +227,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18.3,14.29L18.3,14.29c-0.39-0.39-1.02-0.39-1.41,0L13,18.17V3c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v15.18l-3.88-3.88 c-0.39-0.39-1.02-0.39-1.41,0l0,0c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59 C18.68,15.32,18.68,14.68,18.3,14.29z"
+          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>
       <span
         class="icon-grid__text"
       >
-        arrow-narrow-down
+        arrow-right-narrow
       </span>
     </li>
     <li
@@ -247,13 +247,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          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>
       <span
         class="icon-grid__text"
       >
-        arrow-narrow-left
+        arrow-up
       </span>
     </li>
     <li
@@ -267,13 +267,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M5.71,9.7L5.71,9.7c0.39,0.39,1.02,0.39,1.41,0L11,5.83V21c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V5.83l3.88,3.88 c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L12.7,2.7c-0.39-0.39-1.02-0.39-1.41,0L5.71,8.29 C5.32,8.68,5.32,9.32,5.71,9.7z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        arrow-narrow-right
+        arrow-up-narrow
       </span>
     </li>
     <li
@@ -287,13 +287,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5.71,9.7L5.71,9.7c0.39,0.39,1.02,0.39,1.41,0L11,5.83V21c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V5.83l3.88,3.88 c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L12.7,2.7c-0.39-0.39-1.02-0.39-1.41,0L5.71,8.29 C5.32,8.68,5.32,9.32,5.71,9.7z"
+          d="M6 12.0498C6 12.3331 6.02083 12.6081 6.0625 12.8748C6.10417 13.1415 6.16667 13.4081 6.25 13.6748C6.33333 13.9581 6.34167 14.2456 6.275 14.5373C6.20833 14.829 6.06667 15.0831 5.85 15.2998C5.66667 15.4831 5.44583 15.5665 5.1875 15.5498C4.92917 15.5331 4.75 15.4081 4.65 15.1748C4.43333 14.6748 4.27083 14.1623 4.1625 13.6373C4.05417 13.1123 4 12.5831 4 12.0498C4 9.81647 4.775 7.91647 6.325 6.3498C7.875 4.78314 9.76667 3.9998 12 3.9998H12.175L11.275 3.0998C11.0917 2.91647 11 2.68314 11 2.3998C11 2.11647 11.0917 1.88314 11.275 1.6998C11.4583 1.51647 11.6917 1.4248 11.975 1.4248C12.2583 1.4248 12.4917 1.51647 12.675 1.6998L15.275 4.2998C15.475 4.4998 15.575 4.73314 15.575 4.9998C15.575 5.26647 15.475 5.4998 15.275 5.6998L12.675 8.2998C12.4917 8.48314 12.2583 8.5748 11.975 8.5748C11.6917 8.5748 11.4583 8.48314 11.275 8.2998C11.0917 8.11647 11 7.88314 11 7.5998C11 7.31647 11.0917 7.08314 11.275 6.8998L12.175 5.9998H12C10.3333 5.9998 8.91667 6.5873 7.75 7.7623C6.58333 8.9373 6 10.3665 6 12.0498ZM18 11.9498C18 11.6665 17.9792 11.3915 17.9375 11.1248C17.8958 10.8581 17.8333 10.5915 17.75 10.3248C17.6667 10.0415 17.6583 9.75397 17.725 9.46231C17.7917 9.17064 17.9333 8.91647 18.15 8.6998C18.3333 8.51647 18.5542 8.43314 18.8125 8.4498C19.0708 8.46647 19.25 8.59147 19.35 8.8248C19.5667 9.3248 19.7292 9.83731 19.8375 10.3623C19.9458 10.8873 20 11.4165 20 11.9498C20 14.1831 19.225 16.0831 17.675 17.6498C16.125 19.2165 14.2333 19.9998 12 19.9998H11.825L12.725 20.8998C12.9083 21.0831 13 21.3165 13 21.5998C13 21.8831 12.9083 22.1165 12.725 22.2998C12.5417 22.4831 12.3083 22.5748 12.025 22.5748C11.7417 22.5748 11.5083 22.4831 11.325 22.2998L8.725 19.6998C8.525 19.4998 8.425 19.2665 8.425 18.9998C8.425 18.7331 8.525 18.4998 8.725 18.2998L11.325 15.6998C11.5083 15.5165 11.7417 15.4248 12.025 15.4248C12.3083 15.4248 12.5417 15.5165 12.725 15.6998C12.9083 15.8831 13 16.1165 13 16.3998C13 16.6831 12.9083 16.9165 12.725 17.0998L11.825 17.9998H12C13.6667 17.9998 15.0833 17.4123 16.25 16.2373C17.4167 15.0623 18 13.6331 18 11.9498Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        arrow-narrow-up
+        arrows-circular
       </span>
     </li>
     <li
@@ -307,13 +307,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M16.5 6.75v10.58c0 2.09-1.53 3.95-3.61 4.15-2.39.23-4.39-1.64-4.39-3.98V5.14c0-1.31.94-2.5 2.24-2.63 1.5-.15 2.76 1.02 2.76 2.49v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75v8.61c0 1.31.94 2.5 2.24 2.63 1.5.15 2.76-1.02 2.76-2.49V5.17c0-2.09-1.53-3.95-3.61-4.15C9.01.79 7 2.66 7 5v12.27c0 2.87 2.1 5.44 4.96 5.71 3.29.3 6.04-2.26 6.04-5.48V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        arrow-upward
+        attachment
       </span>
     </li>
     <li
@@ -327,13 +327,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8 12C7.71667 12 7.47917 12.0958 7.2875 12.2875C7.09583 12.4792 7 12.7167 7 13V16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16V13C9 12.7167 8.90417 12.4792 8.7125 12.2875C8.52083 12.0958 8.28333 12 8 12ZM16 7C15.7167 7 15.4792 7.09583 15.2875 7.2875C15.0958 7.47917 15 7.71667 15 8V16C15 16.2833 15.0958 16.5208 15.2875 16.7125C15.4792 16.9042 15.7167 17 16 17C16.2833 17 16.5208 16.9042 16.7125 16.7125C16.9042 16.5208 17 16.2833 17 16V8C17 7.71667 16.9042 7.47917 16.7125 7.2875C16.5208 7.09583 16.2833 7 16 7ZM12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
+          d="M12 10H17V8H12V10ZM12 16H17V14H12V16ZM9 11C9.55 11 10.0208 10.8042 10.4125 10.4125C10.8042 10.0208 11 9.55 11 9C11 8.45 10.8042 7.97917 10.4125 7.5875C10.0208 7.19583 9.55 7 9 7C8.45 7 7.97917 7.19583 7.5875 7.5875C7.19583 7.97917 7 8.45 7 9C7 9.55 7.19583 10.0208 7.5875 10.4125C7.97917 10.8042 8.45 11 9 11ZM9 17C9.55 17 10.0208 16.8042 10.4125 16.4125C10.8042 16.0208 11 15.55 11 15C11 14.45 10.8042 13.9792 10.4125 13.5875C10.0208 13.1958 9.55 13 9 13C8.45 13 7.97917 13.1958 7.5875 13.5875C7.19583 13.9792 7 14.45 7 15C7 15.55 7.19583 16.0208 7.5875 16.4125C7.97917 16.8042 8.45 17 9 17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        assessment
+        ballot
       </span>
     </li>
     <li
@@ -347,13 +347,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z"
+          d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        assignment-late
+        bell
       </span>
     </li>
     <li
@@ -367,13 +367,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10.6 13.25L8.45 11.1C8.26667 10.9167 8.03333 10.825 7.75 10.825C7.46667 10.825 7.23333 10.9167 7.05 11.1C6.86667 11.2833 6.775 11.5167 6.775 11.8C6.775 12.0833 6.86667 12.3167 7.05 12.5L9.9 15.35C10.1 15.55 10.3333 15.65 10.6 15.65C10.8667 15.65 11.1 15.55 11.3 15.35L16.95 9.7C17.1333 9.51667 17.225 9.28333 17.225 9C17.225 8.71667 17.1333 8.48333 16.95 8.3C16.7667 8.11667 16.5333 8.025 16.25 8.025C15.9667 8.025 15.7333 8.11667 15.55 8.3L10.6 13.25ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z"
+          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V4H16V10.125C16 10.325 15.9167 10.4708 15.75 10.5625C15.5833 10.6542 15.4167 10.65 15.25 10.55L14.025 9.8C13.8583 9.7 13.6875 9.65 13.5125 9.65C13.3375 9.65 13.1667 9.7 13 9.8L11.775 10.55C11.6083 10.65 11.4375 10.6542 11.2625 10.5625C11.0875 10.4708 11 10.325 11 10.125V4H6V20Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        assignment-turned-in
+        book
       </span>
     </li>
     <li
@@ -387,13 +387,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM8 17H13C13.2833 17 13.5208 16.9042 13.7125 16.7125C13.9042 16.5208 14 16.2833 14 16C14 15.7167 13.9042 15.4792 13.7125 15.2875C13.5208 15.0958 13.2833 15 13 15H8C7.71667 15 7.47917 15.0958 7.2875 15.2875C7.09583 15.4792 7 15.7167 7 16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17ZM8 13H16C16.2833 13 16.5208 12.9042 16.7125 12.7125C16.9042 12.5208 17 12.2833 17 12C17 11.7167 16.9042 11.4792 16.7125 11.2875C16.5208 11.0958 16.2833 11 16 11H8C7.71667 11 7.47917 11.0958 7.2875 11.2875C7.09583 11.4792 7 11.7167 7 12C7 12.2833 7.09583 12.5208 7.2875 12.7125C7.47917 12.9042 7.71667 13 8 13ZM8 9H16C16.2833 9 16.5208 8.90417 16.7125 8.7125C16.9042 8.52083 17 8.28333 17 8C17 7.71667 16.9042 7.47917 16.7125 7.2875C16.5208 7.09583 16.2833 7 16 7H8C7.71667 7 7.47917 7.09583 7.2875 7.2875C7.09583 7.47917 7 7.71667 7 8C7 8.28333 7.09583 8.52083 7.2875 8.7125C7.47917 8.90417 7.71667 9 8 9ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z"
+          d="M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        assignment
+        book-open
       </span>
     </li>
     <li
@@ -407,13 +407,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M16.5 6.75v10.58c0 2.09-1.53 3.95-3.61 4.15-2.39.23-4.39-1.64-4.39-3.98V5.14c0-1.31.94-2.5 2.24-2.63 1.5-.15 2.76 1.02 2.76 2.49v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75v8.61c0 1.31.94 2.5 2.24 2.63 1.5.15 2.76-1.02 2.76-2.49V5.17c0-2.09-1.53-3.95-3.61-4.15C9.01.79 7 2.66 7 5v12.27c0 2.87 2.1 5.44 4.96 5.71 3.29.3 6.04-2.26 6.04-5.48V6.75c0-.41-.34-.75-.75-.75s-.75.34-.75.75z"
+          d="M12 18L7.8 19.8C7.13333 20.0833 6.5 20.0292 5.9 19.6375C5.3 19.2458 5 18.6917 5 17.975V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V17.975C19 18.6917 18.7 19.2458 18.1 19.6375C17.5 20.0292 16.8667 20.0833 16.2 19.8L12 18ZM12 15.8L17 17.95V5H7V17.95L12 15.8ZM12 5H7H17H12Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        attachment
+        bookmark
       </span>
     </li>
     <li
@@ -427,13 +427,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 6v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V4c-4.42 0-8 3.58-8 8 0 1.04.2 2.04.57 2.95.27.67 1.13.85 1.64.34.27-.27.38-.68.23-1.04C6.15 13.56 6 12.79 6 12c0-3.31 2.69-6 6-6zm5.79 2.71c-.27.27-.38.69-.23 1.04.28.7.44 1.46.44 2.25 0 3.31-2.69 6-6 6v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.31.31.85.09.85-.35V20c4.42 0 8-3.58 8-8 0-1.04-.2-2.04-.57-2.95-.27-.67-1.13-.85-1.64-.34z"
+          d="M19 12.9999C18.7167 12.9999 18.4792 12.9041 18.2875 12.7124C18.0958 12.5208 18 12.2833 18 11.9999C18 11.7166 18.0958 11.4791 18.2875 11.2874C18.4792 11.0958 18.7167 10.9999 19 10.9999H21C21.2833 10.9999 21.5208 11.0958 21.7125 11.2874C21.9042 11.4791 22 11.7166 22 11.9999C22 12.2833 21.9042 12.5208 21.7125 12.7124C21.5208 12.9041 21.2833 12.9999 21 12.9999H19ZM18.4 19.3999L16.8 18.1999C16.5667 18.0333 16.4333 17.8166 16.4 17.5499C16.3667 17.2833 16.4333 17.0333 16.6 16.7999C16.7667 16.5666 16.9833 16.4333 17.25 16.3999C17.5167 16.3666 17.7667 16.4333 18 16.5999L19.6 17.7999C19.8333 17.9666 19.9667 18.1833 20 18.4499C20.0333 18.7166 19.9667 18.9666 19.8 19.1999C19.6333 19.4333 19.4167 19.5666 19.15 19.5999C18.8833 19.6333 18.6333 19.5666 18.4 19.3999ZM18 7.39994C17.7667 7.5666 17.5167 7.63327 17.25 7.59993C16.9833 7.5666 16.7667 7.43327 16.6 7.19994C16.4333 6.9666 16.3667 6.7166 16.4 6.44993C16.4333 6.18327 16.5667 5.9666 16.8 5.79993L18.4 4.59993C18.6333 4.43327 18.8833 4.3666 19.15 4.39993C19.4167 4.43327 19.6333 4.5666 19.8 4.79993C19.9667 5.03327 20.0333 5.28327 20 5.54993C19.9667 5.8166 19.8333 6.03327 19.6 6.19993L18 7.39994ZM5 18.9999V14.9999H4C3.45 14.9999 2.97917 14.8041 2.5875 14.4124C2.19583 14.0208 2 13.5499 2 12.9999V10.9999C2 10.4499 2.19583 9.9791 2.5875 9.58743C2.97917 9.19577 3.45 8.99993 4 8.99993H8L11.475 6.89993C11.8083 6.69993 12.1458 6.69993 12.4875 6.89993C12.8292 7.09993 13 7.3916 13 7.77493V16.2249C13 16.6083 12.8292 16.8999 12.4875 17.0999C12.1458 17.2999 11.8083 17.2999 11.475 17.0999L8 14.9999H7V18.9999H5ZM14 15.3499V8.64993C14.45 9.04993 14.8125 9.53743 15.0875 10.1124C15.3625 10.6874 15.5 11.3166 15.5 11.9999C15.5 12.6833 15.3625 13.3124 15.0875 13.8874C14.8125 14.4624 14.45 14.9499 14 15.3499ZM11 14.4499V9.54993L8.55 10.9999H4V12.9999H8.55L11 14.4499Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        autorenew
+        bullhorn
       </span>
     </li>
     <li
@@ -447,39 +447,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z"
+          d="M8 6V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8ZM10 6H14V4H10V6ZM20 15H15V16C15 16.2833 14.9042 16.5208 14.7125 16.7125C14.5208 16.9042 14.2833 17 14 17H10C9.71667 17 9.47917 16.9042 9.2875 16.7125C9.09583 16.5208 9 16.2833 9 16V15H4V19H20V15ZM11 15H13V13H11V15ZM4 13H9V12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H14C14.2833 11 14.5208 11.0958 14.7125 11.2875C14.9042 11.4792 15 11.7167 15 12V13H20V8H4V13Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        avatar
+        business
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        This has been replaced by person. This will be deprecated
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -492,13 +467,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V4H16V10.125C16 10.325 15.9167 10.4708 15.75 10.5625C15.5833 10.6542 15.4167 10.65 15.25 10.55L14.025 9.8C13.8583 9.7 13.6875 9.65 13.5125 9.65C13.3375 9.65 13.1667 9.7 13 9.8L11.775 10.55C11.6083 10.65 11.4375 10.6542 11.2625 10.5625C11.0875 10.4708 11 10.325 11 10.125V4H6V20Z"
+          d="M14.5 18C13.8 18 13.2083 17.7583 12.725 17.275C12.2417 16.7917 12 16.2 12 15.5C12 14.8 12.2417 14.2083 12.725 13.725C13.2083 13.2417 13.8 13 14.5 13C15.2 13 15.7917 13.2417 16.275 13.725C16.7583 14.2083 17 14.8 17 15.5C17 16.2 16.7583 16.7917 16.275 17.275C15.7917 17.7583 15.2 18 14.5 18ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        book
+        calendar
       </span>
     </li>
     <li
@@ -512,13 +487,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V6c0-.55.45-1 1-1h8c.55 0 1 .45 1 1v12z"
+          d="M12 16.4L10.4 18C10.2167 18.1833 9.98333 18.275 9.7 18.275C9.41667 18.275 9.18333 18.1833 9 18C8.81667 17.8167 8.725 17.5833 8.725 17.3C8.725 17.0167 8.81667 16.7833 9 16.6L10.6 15L9 13.4C8.81667 13.2167 8.725 12.9833 8.725 12.7C8.725 12.4167 8.81667 12.1833 9 12C9.18333 11.8167 9.41667 11.725 9.7 11.725C9.98333 11.725 10.2167 11.8167 10.4 12L12 13.6L13.6 12C13.7833 11.8167 14.0167 11.725 14.3 11.725C14.5833 11.725 14.8167 11.8167 15 12C15.1833 12.1833 15.275 12.4167 15.275 12.7C15.275 12.9833 15.1833 13.2167 15 13.4L13.4 15L15 16.6C15.1833 16.7833 15.275 17.0167 15.275 17.3C15.275 17.5833 15.1833 17.8167 15 18C14.8167 18.1833 14.5833 18.275 14.3 18.275C14.0167 18.275 13.7833 18.1833 13.6 18L12 16.4ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        bookmark
+        calendar-busy
       </span>
     </li>
     <li
@@ -532,13 +507,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8 6V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8ZM10 6H14V4H10V6ZM20 15H15V16C15 16.2833 14.9042 16.5208 14.7125 16.7125C14.5208 16.9042 14.2833 17 14 17H10C9.71667 17 9.47917 16.9042 9.2875 16.7125C9.09583 16.5208 9 16.2833 9 16V15H4V19H20V15ZM11 15H13V13H11V15ZM4 13H9V12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H14C14.2833 11 14.5208 11.0958 14.7125 11.2875C14.9042 11.4792 15 11.7167 15 12V13H20V8H4V13Z"
+          d="M10.95 15.45L14.425 11.975C14.625 11.775 14.8667 11.675 15.15 11.675C15.4333 11.675 15.675 11.775 15.875 11.975C16.075 12.175 16.175 12.4167 16.175 12.7C16.175 12.9833 16.075 13.225 15.875 13.425L11.65 17.65C11.45 17.85 11.2167 17.95 10.95 17.95C10.6833 17.95 10.45 17.85 10.25 17.65L8.125 15.525C7.925 15.325 7.825 15.0833 7.825 14.8C7.825 14.5167 7.925 14.275 8.125 14.075C8.325 13.875 8.56667 13.775 8.85 13.775C9.13333 13.775 9.375 13.875 9.575 14.075L10.95 15.45ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        business-center
+        calendar-favorable
       </span>
     </li>
     <li
@@ -552,13 +527,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19 12.9999C18.7167 12.9999 18.4792 12.9041 18.2875 12.7124C18.0958 12.5208 18 12.2833 18 11.9999C18 11.7166 18.0958 11.4791 18.2875 11.2874C18.4792 11.0958 18.7167 10.9999 19 10.9999H21C21.2833 10.9999 21.5208 11.0958 21.7125 11.2874C21.9042 11.4791 22 11.7166 22 11.9999C22 12.2833 21.9042 12.5208 21.7125 12.7124C21.5208 12.9041 21.2833 12.9999 21 12.9999H19ZM18.4 19.3999L16.8 18.1999C16.5667 18.0333 16.4333 17.8166 16.4 17.5499C16.3667 17.2833 16.4333 17.0333 16.6 16.7999C16.7667 16.5666 16.9833 16.4333 17.25 16.3999C17.5167 16.3666 17.7667 16.4333 18 16.5999L19.6 17.7999C19.8333 17.9666 19.9667 18.1833 20 18.4499C20.0333 18.7166 19.9667 18.9666 19.8 19.1999C19.6333 19.4333 19.4167 19.5666 19.15 19.5999C18.8833 19.6333 18.6333 19.5666 18.4 19.3999ZM18 7.39994C17.7667 7.5666 17.5167 7.63327 17.25 7.59993C16.9833 7.5666 16.7667 7.43327 16.6 7.19994C16.4333 6.9666 16.3667 6.7166 16.4 6.44993C16.4333 6.18327 16.5667 5.9666 16.8 5.79993L18.4 4.59993C18.6333 4.43327 18.8833 4.3666 19.15 4.39993C19.4167 4.43327 19.6333 4.5666 19.8 4.79993C19.9667 5.03327 20.0333 5.28327 20 5.54993C19.9667 5.8166 19.8333 6.03327 19.6 6.19993L18 7.39994ZM5 18.9999V14.9999H4C3.45 14.9999 2.97917 14.8041 2.5875 14.4124C2.19583 14.0208 2 13.5499 2 12.9999V10.9999C2 10.4499 2.19583 9.9791 2.5875 9.58743C2.97917 9.19577 3.45 8.99993 4 8.99993H8L11.475 6.89993C11.8083 6.69993 12.1458 6.69993 12.4875 6.89993C12.8292 7.09993 13 7.3916 13 7.77493V16.2249C13 16.6083 12.8292 16.8999 12.4875 17.0999C12.1458 17.2999 11.8083 17.2999 11.475 17.0999L8 14.9999H7V18.9999H5ZM14 15.3499V8.64993C14.45 9.04993 14.8125 9.53743 15.0875 10.1124C15.3625 10.6874 15.5 11.3166 15.5 11.9999C15.5 12.6833 15.3625 13.3124 15.0875 13.8874C14.8125 14.4624 14.45 14.9499 14 15.3499ZM11 14.4499V9.54993L8.55 10.9999H4V12.9999H8.55L11 14.4499Z"
+          d="M8.275 10.9998C7.89167 10.9998 7.6 10.829 7.4 10.4873C7.2 10.1456 7.20833 9.80814 7.425 9.4748L11.15 3.3998C11.35 3.08314 11.6333 2.9248 12 2.9248C12.3667 2.9248 12.65 3.08314 12.85 3.3998L16.575 9.4748C16.7917 9.80814 16.8 10.1456 16.6 10.4873C16.4 10.829 16.1083 10.9998 15.725 10.9998H8.275ZM17.5 21.9998C16.25 21.9998 15.1875 21.5623 14.3125 20.6873C13.4375 19.8123 13 18.7498 13 17.4998C13 16.2498 13.4375 15.1873 14.3125 14.3123C15.1875 13.4373 16.25 12.9998 17.5 12.9998C18.75 12.9998 19.8125 13.4373 20.6875 14.3123C21.5625 15.1873 22 16.2498 22 17.4998C22 18.7498 21.5625 19.8123 20.6875 20.6873C19.8125 21.5623 18.75 21.9998 17.5 21.9998ZM4 21.4998C3.71667 21.4998 3.47917 21.404 3.2875 21.2123C3.09583 21.0206 3 20.7831 3 20.4998V14.4998C3 14.2165 3.09583 13.979 3.2875 13.7873C3.47917 13.5956 3.71667 13.4998 4 13.4998H10C10.2833 13.4998 10.5208 13.5956 10.7125 13.7873C10.9042 13.979 11 14.2165 11 14.4998V20.4998C11 20.7831 10.9042 21.0206 10.7125 21.2123C10.5208 21.404 10.2833 21.4998 10 21.4998H4ZM17.5 19.9998C18.2 19.9998 18.7917 19.7581 19.275 19.2748C19.7583 18.7915 20 18.1998 20 17.4998C20 16.7998 19.7583 16.2081 19.275 15.7248C18.7917 15.2415 18.2 14.9998 17.5 14.9998C16.8 14.9998 16.2083 15.2415 15.725 15.7248C15.2417 16.2081 15 16.7998 15 17.4998C15 18.1998 15.2417 18.7915 15.725 19.2748C16.2083 19.7581 16.8 19.9998 17.5 19.9998ZM5 19.4998H9V15.4998H5V19.4998ZM10.05 8.9998H13.95L12 5.8498L10.05 8.9998Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        campaign
+        category
       </span>
     </li>
     <li
@@ -572,13 +547,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        cancel
+        check
       </span>
     </li>
     <li
@@ -592,13 +567,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.275 10.9998C7.89167 10.9998 7.6 10.829 7.4 10.4873C7.2 10.1456 7.20833 9.80814 7.425 9.4748L11.15 3.3998C11.35 3.08314 11.6333 2.9248 12 2.9248C12.3667 2.9248 12.65 3.08314 12.85 3.3998L16.575 9.4748C16.7917 9.80814 16.8 10.1456 16.6 10.4873C16.4 10.829 16.1083 10.9998 15.725 10.9998H8.275ZM17.5 21.9998C16.25 21.9998 15.1875 21.5623 14.3125 20.6873C13.4375 19.8123 13 18.7498 13 17.4998C13 16.2498 13.4375 15.1873 14.3125 14.3123C15.1875 13.4373 16.25 12.9998 17.5 12.9998C18.75 12.9998 19.8125 13.4373 20.6875 14.3123C21.5625 15.1873 22 16.2498 22 17.4998C22 18.7498 21.5625 19.8123 20.6875 20.6873C19.8125 21.5623 18.75 21.9998 17.5 21.9998ZM4 21.4998C3.71667 21.4998 3.47917 21.404 3.2875 21.2123C3.09583 21.0206 3 20.7831 3 20.4998V14.4998C3 14.2165 3.09583 13.979 3.2875 13.7873C3.47917 13.5956 3.71667 13.4998 4 13.4998H10C10.2833 13.4998 10.5208 13.5956 10.7125 13.7873C10.9042 13.979 11 14.2165 11 14.4998V20.4998C11 20.7831 10.9042 21.0206 10.7125 21.2123C10.5208 21.404 10.2833 21.4998 10 21.4998H4ZM17.5 19.9998C18.2 19.9998 18.7917 19.7581 19.275 19.2748C19.7583 18.7915 20 18.1998 20 17.4998C20 16.7998 19.7583 16.2081 19.275 15.7248C18.7917 15.2415 18.2 14.9998 17.5 14.9998C16.8 14.9998 16.2083 15.2415 15.725 15.7248C15.2417 16.2081 15 16.7998 15 17.4998C15 18.1998 15.2417 18.7915 15.725 19.2748C16.2083 19.7581 16.8 19.9998 17.5 19.9998ZM5 19.4998H9V15.4998H5V19.4998ZM10.05 8.9998H13.95L12 5.8498L10.05 8.9998Z"
+          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>
       <span
         class="icon-grid__text"
       >
-        category
+        checkmark-encircled-filled
       </span>
     </li>
     <li
@@ -612,13 +587,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        check-circle
+        chevron-down
       </span>
     </li>
     <li
@@ -632,13 +607,16 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"
+          d="M17.2902 5.70973C16.9002 5.31973 16.2702 5.31973 15.8802 5.70973L12.0002 9.57973L8.11021 5.69973C7.72021 5.30973 7.09021 5.30973 6.70021 5.69973C6.31021 6.08973 6.31021 6.71973 6.70021 7.10973L11.2902 11.6997C11.6802 12.0897 12.3102 12.0897 12.7002 11.6997L17.2902 7.10973C17.6802 6.72973 17.6802 6.09973 17.2902 5.70973Z"
+        />
+        <path
+          d="M17.2902 12.2997C16.9002 11.9097 16.2702 11.9097 15.8802 12.2997L12.0002 16.1697L8.12021 12.2897C7.73021 11.8997 7.10022 11.8997 6.71022 12.2897C6.32022 12.6797 6.32022 13.3097 6.71022 13.6997L11.3002 18.2897C11.6902 18.6797 12.3202 18.6797 12.7102 18.2897L17.3002 13.6997C17.6802 13.3197 17.6802 12.6897 17.2902 12.2997Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        check
+        chevron-down-double
       </span>
     </li>
     <li
@@ -692,13 +670,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <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"
+          d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        circle-small
+        chevron-up
       </span>
     </li>
     <li
@@ -712,13 +690,16 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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 22Z"
+          d="M6.7 18.29C7.09 18.68 7.72 18.68 8.11 18.29L12 14.42L15.88 18.3C16.27 18.69 16.9 18.69 17.29 18.3C17.68 17.91 17.68 17.28 17.29 16.89L12.7 12.3C12.31 11.91 11.68 11.91 11.29 12.3L6.7 16.88C6.31 17.27 6.31 17.9 6.7 18.29Z"
+        />
+        <path
+          d="M6.7 11.7C7.09 12.09 7.72 12.09 8.11 11.7L12 7.83L15.88 11.71C16.27 12.1 16.9 12.1 17.29 11.71C17.68 11.32 17.68 10.69 17.29 10.3L12.7 5.71C12.31 5.32 11.68 5.32 11.29 5.71L6.7 10.29C6.31 10.68 6.31 11.31 6.7 11.7Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        circle
+        chevron-up-double
       </span>
     </li>
     <li
@@ -732,39 +713,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V4H16V10.125C16 10.325 15.9167 10.4708 15.75 10.5625C15.5833 10.6542 15.4167 10.65 15.25 10.55L14.025 9.8C13.8583 9.7 13.6875 9.65 13.5125 9.65C13.3375 9.65 13.1667 9.7 13 9.8L11.775 10.55C11.6083 10.65 11.4375 10.6542 11.2625 10.5625C11.0875 10.4708 11 10.325 11 10.125V4H6V20Z"
+          d="M12 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>
       <span
         class="icon-grid__text"
       >
-        class-copy
+        circle
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        This has been replaced by book. This will be deprecated
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -777,13 +733,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <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"
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24.21-.34.1-.79-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        close
+        clock
       </span>
     </li>
     <li
@@ -797,13 +753,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H6.5ZM10.35 16.575C10.4833 16.575 10.6083 16.5542 10.725 16.5125C10.8417 16.4708 10.95 16.4 11.05 16.3L15.275 12.075C15.475 11.875 15.575 11.6333 15.575 11.35C15.575 11.0667 15.475 10.825 15.275 10.625C15.075 10.425 14.8333 10.325 14.55 10.325C14.2667 10.325 14.025 10.425 13.825 10.625L10.325 14.125L8.925 12.725C8.725 12.525 8.49167 12.425 8.225 12.425C7.95833 12.425 7.725 12.525 7.525 12.725C7.325 12.925 7.225 13.1625 7.225 13.4375C7.225 13.7125 7.325 13.95 7.525 14.15L9.65 16.3C9.75 16.4 9.85833 16.4708 9.975 16.5125C10.0917 16.5542 10.2167 16.575 10.35 16.575ZM6.5 18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18Z"
+          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>
       <span
         class="icon-grid__text"
       >
-        cloud-done
+        close
       </span>
     </li>
     <li
@@ -817,13 +773,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19 19H8C7.45 19 6.97917 18.8042 6.5875 18.4125C6.19583 18.0208 6 17.55 6 17V3C6 2.45 6.19583 1.97917 6.5875 1.5875C6.97917 1.19583 7.45 1 8 1H14.175C14.4417 1 14.6958 1.05 14.9375 1.15C15.1792 1.25 15.3917 1.39167 15.575 1.575L20.425 6.425C20.6083 6.60833 20.75 6.82083 20.85 7.0625C20.95 7.30417 21 7.55833 21 7.825V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19ZM19 8H15.5C15.0833 8 14.7292 7.85417 14.4375 7.5625C14.1458 7.27083 14 6.91667 14 6.5V3H8V17H19V8ZM4 23C3.45 23 2.97917 22.8042 2.5875 22.4125C2.19583 22.0208 2 21.55 2 21V8C2 7.71667 2.09583 7.47917 2.2875 7.2875C2.47917 7.09583 2.71667 7 3 7C3.28333 7 3.52083 7.09583 3.7125 7.2875C3.90417 7.47917 4 7.71667 4 8V21H14C14.2833 21 14.5208 21.0958 14.7125 21.2875C14.9042 21.4792 15 21.7167 15 22C15 22.2833 14.9042 22.5208 14.7125 22.7125C14.5208 22.9042 14.2833 23 14 23H4Z"
+          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>
       <span
         class="icon-grid__text"
       >
-        copy
+        close-encircled
       </span>
     </li>
     <li
@@ -837,13 +793,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15 16C15.2833 16 15.5208 15.9042 15.7125 15.7125C15.9042 15.5208 16 15.2833 16 15V14H17C17.2833 14 17.5208 13.9042 17.7125 13.7125C17.9042 13.5208 18 13.2833 18 13C18 12.7167 17.9042 12.4792 17.7125 12.2875C17.5208 12.0958 17.2833 12 17 12H16V11C16 10.7167 15.9042 10.4792 15.7125 10.2875C15.5208 10.0958 15.2833 10 15 10C14.7167 10 14.4792 10.0958 14.2875 10.2875C14.0958 10.4792 14 10.7167 14 11V12H13C12.7167 12 12.4792 12.0958 12.2875 12.2875C12.0958 12.4792 12 12.7167 12 13C12 13.2833 12.0958 13.5208 12.2875 13.7125C12.4792 13.9042 12.7167 14 13 14H14V15C14 15.2833 14.0958 15.5208 14.2875 15.7125C14.4792 15.9042 14.7167 16 15 16ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
+          d="M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H6.5ZM10.35 16.575C10.4833 16.575 10.6083 16.5542 10.725 16.5125C10.8417 16.4708 10.95 16.4 11.05 16.3L15.275 12.075C15.475 11.875 15.575 11.6333 15.575 11.35C15.575 11.0667 15.475 10.825 15.275 10.625C15.075 10.425 14.8333 10.325 14.55 10.325C14.2667 10.325 14.025 10.425 13.825 10.625L10.325 14.125L8.925 12.725C8.725 12.525 8.49167 12.425 8.225 12.425C7.95833 12.425 7.725 12.525 7.525 12.725C7.325 12.925 7.225 13.1625 7.225 13.4375C7.225 13.7125 7.325 13.95 7.525 14.15L9.65 16.3C9.75 16.4 9.85833 16.4708 9.975 16.5125C10.0917 16.5542 10.2167 16.575 10.35 16.575ZM6.5 18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        create-new-folder
+        cloud-favorable
       </span>
     </li>
     <li
@@ -857,13 +813,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+          d="M11 11V13C11 13.2833 11.0958 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14C12.2833 14 12.5208 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V11H15C15.2833 11 15.5208 10.9042 15.7125 10.7125C15.9042 10.5208 16 10.2833 16 10C16 9.71667 15.9042 9.47917 15.7125 9.2875C15.5208 9.09583 15.2833 9 15 9H13V7C13 6.71667 12.9042 6.47917 12.7125 6.2875C12.5208 6.09583 12.2833 6 12 6C11.7167 6 11.4792 6.09583 11.2875 6.2875C11.0958 6.47917 11 6.71667 11 7V9H9C8.71667 9 8.47917 9.09583 8.2875 9.2875C8.09583 9.47917 8 9.71667 8 10C8 10.2833 8.09583 10.5208 8.2875 10.7125C8.47917 10.9042 8.71667 11 9 11H11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        create
+        comment-add
       </span>
     </li>
     <li
@@ -877,13 +833,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+          d="M12 15C12.2833 15 12.5208 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14C13 13.7167 12.9042 13.4792 12.7125 13.2875C12.5208 13.0958 12.2833 13 12 13C11.7167 13 11.4792 13.0958 11.2875 13.2875C11.0958 13.4792 11 13.7167 11 14C11 14.2833 11.0958 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15ZM12 11C12.2833 11 12.5208 10.9042 12.7125 10.7125C12.9042 10.5208 13 10.2833 13 10V6C13 5.71667 12.9042 5.47917 12.7125 5.2875C12.5208 5.09583 12.2833 5 12 5C11.7167 5 11.4792 5.09583 11.2875 5.2875C11.0958 5.47917 11 5.71667 11 6V10C11 10.1333 11.025 10.2625 11.075 10.3875C11.125 10.5125 11.1958 10.6208 11.2875 10.7125C11.3792 10.8042 11.4875 10.875 11.6125 10.925C11.7375 10.975 11.8667 11 12 11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        dangerous
+        comment-critical
       </span>
     </li>
     <li
@@ -897,13 +853,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6C4.71667 6 4.47917 5.90417 4.2875 5.7125C4.09583 5.52083 4 5.28333 4 5C4 4.71667 4.09583 4.47917 4.2875 4.2875C4.47917 4.09583 4.71667 4 5 4H9C9 3.71667 9.09583 3.47917 9.2875 3.2875C9.47917 3.09583 9.71667 3 10 3H14C14.2833 3 14.5208 3.09583 14.7125 3.2875C14.9042 3.47917 15 3.71667 15 4H19C19.2833 4 19.5208 4.09583 19.7125 4.2875C19.9042 4.47917 20 4.71667 20 5C20 5.28333 19.9042 5.52083 19.7125 5.7125C19.5208 5.90417 19.2833 6 19 6V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM7 6V19H17V6H7ZM9 16C9 16.2833 9.09583 16.5208 9.2875 16.7125C9.47917 16.9042 9.71667 17 10 17C10.2833 17 10.5208 16.9042 10.7125 16.7125C10.9042 16.5208 11 16.2833 11 16V9C11 8.71667 10.9042 8.47917 10.7125 8.2875C10.5208 8.09583 10.2833 8 10 8C9.71667 8 9.47917 8.09583 9.2875 8.2875C9.09583 8.47917 9 8.71667 9 9V16ZM13 16C13 16.2833 13.0958 16.5208 13.2875 16.7125C13.4792 16.9042 13.7167 17 14 17C14.2833 17 14.5208 16.9042 14.7125 16.7125C14.9042 16.5208 15 16.2833 15 16V9C15 8.71667 14.9042 8.47917 14.7125 8.2875C14.5208 8.09583 14.2833 8 14 8C13.7167 8 13.4792 8.09583 13.2875 8.2875C13.0958 8.47917 13 8.71667 13 9V16Z"
+          d="M7 18C6.71667 18 6.47917 17.9042 6.2875 17.7125C6.09583 17.5208 6 17.2833 6 17V15H19V6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V19.575C22 20.025 21.7958 20.3375 21.3875 20.5125C20.9792 20.6875 20.6167 20.6167 20.3 20.3L18 18H7ZM6 13L3.7 15.3C3.38333 15.6167 3.02083 15.6875 2.6125 15.5125C2.20417 15.3375 2 15.025 2 14.575V3C2 2.71667 2.09583 2.47917 2.2875 2.2875C2.47917 2.09583 2.71667 2 3 2H16C16.2833 2 16.5208 2.09583 16.7125 2.2875C16.9042 2.47917 17 2.71667 17 3V12C17 12.2833 16.9042 12.5208 16.7125 12.7125C16.5208 12.9042 16.2833 13 16 13H6ZM15 11V4H4V11H15Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        delete
+        conversation
       </span>
     </li>
     <li
@@ -917,13 +873,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9 18H15C15.2833 18 15.5208 17.9042 15.7125 17.7125C15.9042 17.5208 16 17.2833 16 17C16 16.7167 15.9042 16.4792 15.7125 16.2875C15.5208 16.0958 15.2833 16 15 16H9C8.71667 16 8.47917 16.0958 8.2875 16.2875C8.09583 16.4792 8 16.7167 8 17C8 17.2833 8.09583 17.5208 8.2875 17.7125C8.47917 17.9042 8.71667 18 9 18ZM9 14H15C15.2833 14 15.5208 13.9042 15.7125 13.7125C15.9042 13.5208 16 13.2833 16 13C16 12.7167 15.9042 12.4792 15.7125 12.2875C15.5208 12.0958 15.2833 12 15 12H9C8.71667 12 8.47917 12.0958 8.2875 12.2875C8.09583 12.4792 8 12.7167 8 13C8 13.2833 8.09583 13.5208 8.2875 13.7125C8.47917 13.9042 8.71667 14 9 14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
+          d="M19 19H8C7.45 19 6.97917 18.8042 6.5875 18.4125C6.19583 18.0208 6 17.55 6 17V3C6 2.45 6.19583 1.97917 6.5875 1.5875C6.97917 1.19583 7.45 1 8 1H14.175C14.4417 1 14.6958 1.05 14.9375 1.15C15.1792 1.25 15.3917 1.39167 15.575 1.575L20.425 6.425C20.6083 6.60833 20.75 6.82083 20.85 7.0625C20.95 7.30417 21 7.55833 21 7.825V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19ZM19 8H15.5C15.0833 8 14.7292 7.85417 14.4375 7.5625C14.1458 7.27083 14 6.91667 14 6.5V3H8V17H19V8ZM4 23C3.45 23 2.97917 22.8042 2.5875 22.4125C2.19583 22.0208 2 21.55 2 21V8C2 7.71667 2.09583 7.47917 2.2875 7.2875C2.47917 7.09583 2.71667 7 3 7C3.28333 7 3.52083 7.09583 3.7125 7.2875C3.90417 7.47917 4 7.71667 4 8V21H14C14.2833 21 14.5208 21.0958 14.7125 21.2875C14.9042 21.4792 15 21.7167 15 22C15 22.2833 14.9042 22.5208 14.7125 22.7125C14.5208 22.9042 14.2833 23 14 23H4Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        description
+        copy
       </span>
     </li>
     <li
@@ -937,13 +893,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
+          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        dots-horizontal
+        dangerous
       </span>
     </li>
     <li
@@ -957,13 +913,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 20C11.45 20 10.9793 19.8043 10.588 19.413C10.196 19.021 10 18.55 10 18C10 17.45 10.196 16.979 10.588 16.587C10.9793 16.1957 11.45 16 12 16C12.55 16 13.021 16.1957 13.413 16.587C13.8043 16.979 14 17.45 14 18C14 18.55 13.8043 19.021 13.413 19.413C13.021 19.8043 12.55 20 12 20ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM12 8C11.45 8 10.9793 7.804 10.588 7.412C10.196 7.02067 10 6.55 10 6C10 5.45 10.196 4.97933 10.588 4.588C10.9793 4.196 11.45 4 12 4C12.55 4 13.021 4.196 13.413 4.588C13.8043 4.97933 14 5.45 14 6C14 6.55 13.8043 7.02067 13.413 7.412C13.021 7.804 12.55 8 12 8Z"
+          d="M8 12C7.71667 12 7.47917 12.0958 7.2875 12.2875C7.09583 12.4792 7 12.7167 7 13V16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16V13C9 12.7167 8.90417 12.4792 8.7125 12.2875C8.52083 12.0958 8.28333 12 8 12ZM16 7C15.7167 7 15.4792 7.09583 15.2875 7.2875C15.0958 7.47917 15 7.71667 15 8V16C15 16.2833 15.0958 16.5208 15.2875 16.7125C15.4792 16.9042 15.7167 17 16 17C16.2833 17 16.5208 16.9042 16.7125 16.7125C16.9042 16.5208 17 16.2833 17 16V8C17 7.71667 16.9042 7.47917 16.7125 7.2875C16.5208 7.09583 16.2833 7 16 7ZM12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        dots-vertical
+        data
       </span>
     </li>
     <li
@@ -977,13 +933,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M9 18H15C15.2833 18 15.5208 17.9042 15.7125 17.7125C15.9042 17.5208 16 17.2833 16 17C16 16.7167 15.9042 16.4792 15.7125 16.2875C15.5208 16.0958 15.2833 16 15 16H9C8.71667 16 8.47917 16.0958 8.2875 16.2875C8.09583 16.4792 8 16.7167 8 17C8 17.2833 8.09583 17.5208 8.2875 17.7125C8.47917 17.9042 8.71667 18 9 18ZM9 14H15C15.2833 14 15.5208 13.9042 15.7125 13.7125C15.9042 13.5208 16 13.2833 16 13C16 12.7167 15.9042 12.4792 15.7125 12.2875C15.5208 12.0958 15.2833 12 15 12H9C8.71667 12 8.47917 12.0958 8.2875 12.2875C8.09583 12.4792 8 12.7167 8 13C8 13.2833 8.09583 13.5208 8.2875 13.7125C8.47917 13.9042 8.71667 14 9 14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        drag-indicator
+        document
       </span>
     </li>
     <li
@@ -997,13 +953,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        edit
+        document-blank
       </span>
     </li>
     <li
@@ -1016,22 +972,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="12"
-          cy="12"
-          r="8"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-          r="6"
+        <path
+          d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        empty-circle
+        dots-horizontal
       </span>
     </li>
     <li
@@ -1044,20 +992,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-strong)"
-          r="8"
-        />
         <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"
+          d="M12 20C11.45 20 10.9793 19.8043 10.588 19.413C10.196 19.021 10 18.55 10 18C10 17.45 10.196 16.979 10.588 16.587C10.9793 16.1957 11.45 16 12 16C12.55 16 13.021 16.1957 13.413 16.587C13.8043 16.979 14 17.45 14 18C14 18.55 13.8043 19.021 13.413 19.413C13.021 19.8043 12.55 20 12 20ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM12 8C11.45 8 10.9793 7.804 10.588 7.412C10.196 7.02067 10 6.55 10 6C10 5.45 10.196 4.97933 10.588 4.588C10.9793 4.196 11.45 4 12 4C12.55 4 13.021 4.196 13.413 4.588C13.8043 4.97933 14 5.45 14 6C14 6.55 13.8043 7.02067 13.413 7.412C13.021 7.804 12.55 8 12 8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        error-inverted
+        dots-vertical
       </span>
     </li>
     <li
@@ -1071,13 +1013,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          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>
       <span
         class="icon-grid__text"
       >
-        error
+        drag-indicator
       </span>
     </li>
     <li
@@ -1091,13 +1033,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10.95 15.45L14.425 11.975C14.625 11.775 14.8667 11.675 15.15 11.675C15.4333 11.675 15.675 11.775 15.875 11.975C16.075 12.175 16.175 12.4167 16.175 12.7C16.175 12.9833 16.075 13.225 15.875 13.425L11.65 17.65C11.45 17.85 11.2167 17.95 10.95 17.95C10.6833 17.95 10.45 17.85 10.25 17.65L8.125 15.525C7.925 15.325 7.825 15.0833 7.825 14.8C7.825 14.5167 7.925 14.275 8.125 14.075C8.325 13.875 8.56667 13.775 8.85 13.775C9.13333 13.775 9.375 13.875 9.575 14.075L10.95 15.45ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
+          d="M12 6.49969C14.76 6.49969 17 8.73969 17 11.4997C17 12.0097 16.9 12.4997 16.76 12.9597L19.82 16.0197C21.21 14.7897 22.31 13.2497 23 11.4897C21.27 7.10969 17 3.99969 12 3.99969C10.73 3.99969 9.51 4.19969 8.36 4.56969L10.53 6.73969C11 6.59969 11.49 6.49969 12 6.49969ZM2.71 3.15969C2.32 3.54969 2.32 4.17969 2.71 4.56969L4.68 6.53969C3.06 7.82969 1.77 9.52969 1 11.4997C2.73 15.8897 7 18.9997 12 18.9997C13.52 18.9997 14.97 18.6997 16.31 18.1797L19.03 20.8997C19.42 21.2897 20.05 21.2897 20.44 20.8997C20.83 20.5097 20.83 19.8797 20.44 19.4897L4.13 3.15969C3.74 2.76969 3.1 2.76969 2.71 3.15969ZM12 16.4997C9.24 16.4997 7 14.2597 7 11.4997C7 10.7297 7.18 9.99969 7.49 9.35969L9.06 10.9297C9.03 11.1097 9 11.2997 9 11.4997C9 13.1597 10.34 14.4997 12 14.4997C12.2 14.4997 12.38 14.4697 12.57 14.4297L14.14 15.9997C13.49 16.3197 12.77 16.4997 12 16.4997ZM14.97 11.1697C14.82 9.76969 13.72 8.67969 12.33 8.52969L14.97 11.1697Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        event-available
+        eye-closed
       </span>
     </li>
     <li
@@ -1111,13 +1053,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 16.4L10.4 18C10.2167 18.1833 9.98333 18.275 9.7 18.275C9.41667 18.275 9.18333 18.1833 9 18C8.81667 17.8167 8.725 17.5833 8.725 17.3C8.725 17.0167 8.81667 16.7833 9 16.6L10.6 15L9 13.4C8.81667 13.2167 8.725 12.9833 8.725 12.7C8.725 12.4167 8.81667 12.1833 9 12C9.18333 11.8167 9.41667 11.725 9.7 11.725C9.98333 11.725 10.2167 11.8167 10.4 12L12 13.6L13.6 12C13.7833 11.8167 14.0167 11.725 14.3 11.725C14.5833 11.725 14.8167 11.8167 15 12C15.1833 12.1833 15.275 12.4167 15.275 12.7C15.275 12.9833 15.1833 13.2167 15 13.4L13.4 15L15 16.6C15.1833 16.7833 15.275 17.0167 15.275 17.3C15.275 17.5833 15.1833 17.8167 15 18C14.8167 18.1833 14.5833 18.275 14.3 18.275C14.0167 18.275 13.7833 18.1833 13.6 18L12 16.4ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
+          d="M12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4ZM12 16.5C9.24 16.5 7 14.26 7 11.5C7 8.74 9.24 6.5 12 6.5C14.76 6.5 17 8.74 17 11.5C17 14.26 14.76 16.5 12 16.5ZM12 8.5C10.34 8.5 9 9.84 9 11.5C9 13.16 10.34 14.5 12 14.5C13.66 14.5 15 13.16 15 11.5C15 9.84 13.66 8.5 12 8.5Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        event-busy
+        eye-open
       </span>
     </li>
     <li
@@ -1130,14 +1072,24 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <circle
+          cx="15.5"
+          cy="9.5"
+          r="1.5"
+        />
+        <circle
+          cx="8.5"
+          cy="9.5"
+          r="1.5"
+        />
         <path
-          d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12H16C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14H8ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16H13C13.2833 16 13.5208 16.0958 13.7125 16.2875C13.9042 16.4792 14 16.7167 14 17C14 17.2833 13.9042 17.5208 13.7125 17.7125C13.5208 17.9042 13.2833 18 13 18H8Z"
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4.41-6.11c-.35-.22-.82-.11-1.03.24-.74 1.17-2 1.87-3.38 1.87s-2.64-.7-3.38-1.88c-.22-.35-.68-.46-1.03-.24-.35.22-.46.68-.24 1.03C8.37 16.54 10.1 17.5 12 17.5s3.63-.97 4.65-2.58c.22-.35.11-.81-.24-1.03z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        event-note
+        face-happy
       </span>
     </li>
     <li
@@ -1150,14 +1102,24 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <circle
+          cx="15.5"
+          cy="9.5"
+          r="1.5"
+        />
+        <circle
+          cx="8.5"
+          cy="9.5"
+          r="1.5"
+        />
         <path
-          d="M14.5 18C13.8 18 13.2083 17.7583 12.725 17.275C12.2417 16.7917 12 16.2 12 15.5C12 14.8 12.2417 14.2083 12.725 13.725C13.2083 13.2417 13.8 13 14.5 13C15.2 13 15.7917 13.2417 16.275 13.725C16.7583 14.2083 17 14.8 17 15.5C17 16.2 16.7583 16.7917 16.275 17.275C15.7917 17.7583 15.2 18 14.5 18ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V3C6 2.71667 6.09583 2.47917 6.2875 2.2875C6.47917 2.09583 6.71667 2 7 2C7.28333 2 7.52083 2.09583 7.7125 2.2875C7.90417 2.47917 8 2.71667 8 3V4H16V3C16 2.71667 16.0958 2.47917 16.2875 2.2875C16.4792 2.09583 16.7167 2 17 2C17.2833 2 17.5208 2.09583 17.7125 2.2875C17.9042 2.47917 18 2.71667 18 3V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z"
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-1.9 0-3.63.97-4.65 2.58-.22.35-.11.81.24 1.03.35.22.81.11 1.03-.24.74-1.18 2-1.88 3.38-1.88s2.64.7 3.38 1.88c.14.23.39.35.64.35.14 0 .27-.04.4-.11.35-.22.46-.68.24-1.03C15.63 14.96 13.9 14 12 14z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        event
+        face-unhappy
       </span>
     </li>
     <li
@@ -1171,13 +1133,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"
+          d="M8.88 9.94l.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.89.88c-.29.29-.29.77 0 1.06.29.29.77.29 1.06 0l.53-.53zM12 17.5c2.03 0 3.8-1.11 4.75-2.75.19-.33-.05-.75-.44-.75H7.69c-.38 0-.63.42-.44.75.95 1.64 2.72 2.75 4.75 2.75zm1.53-7.03c.29.29.77.29 1.06 0l.53-.53.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.88.88c-.3.29-.3.77-.01 1.06zM11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        expand-less
+        face-very-happy
       </span>
     </li>
     <li
@@ -1191,13 +1153,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          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>
       <span
         class="icon-grid__text"
       >
-        expand-more
+        filter-list
       </span>
     </li>
     <li
@@ -1211,13 +1173,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9 14.25C8.65 14.25 8.35417 14.1292 8.1125 13.8875C7.87083 13.6458 7.75 13.35 7.75 13C7.75 12.65 7.87083 12.3542 8.1125 12.1125C8.35417 11.8708 8.65 11.75 9 11.75C9.35 11.75 9.64583 11.8708 9.8875 12.1125C10.1292 12.3542 10.25 12.65 10.25 13C10.25 13.35 10.1292 13.6458 9.8875 13.8875C9.64583 14.1292 9.35 14.25 9 14.25ZM15 14.25C14.65 14.25 14.3542 14.1292 14.1125 13.8875C13.8708 13.6458 13.75 13.35 13.75 13C13.75 12.65 13.8708 12.3542 14.1125 12.1125C14.3542 11.8708 14.65 11.75 15 11.75C15.35 11.75 15.6458 11.8708 15.8875 12.1125C16.1292 12.3542 16.25 12.65 16.25 13C16.25 13.35 16.1292 13.6458 15.8875 13.8875C15.6458 14.1292 15.35 14.25 15 14.25ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 11.6 19.975 11.2125 19.925 10.8375C19.875 10.4625 19.7833 10.1 19.65 9.75C19.3 9.83333 18.95 9.89583 18.6 9.9375C18.25 9.97917 17.8833 10 17.5 10C15.9833 10 14.55 9.675 13.2 9.025C11.85 8.375 10.7 7.46667 9.75 6.3C9.21667 7.6 8.45417 8.72917 7.4625 9.6875C6.47083 10.6458 5.31667 11.3667 4 11.85V12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM12 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 22ZM10.65 4.125C11.35 5.29167 12.3 6.22917 13.5 6.9375C14.7 7.64583 16.0333 8 17.5 8C17.7333 8 17.9583 7.9875 18.175 7.9625C18.3917 7.9375 18.6167 7.90833 18.85 7.875C18.15 6.70833 17.2 5.77083 16 5.0625C14.8 4.35417 13.4667 4 12 4C11.7667 4 11.5417 4.0125 11.325 4.0375C11.1083 4.0625 10.8833 4.09167 10.65 4.125ZM4.425 9.475C5.275 8.99167 6.01667 8.36667 6.65 7.6C7.28333 6.83333 7.75833 5.975 8.075 5.025C7.225 5.50833 6.48333 6.13333 5.85 6.9C5.21667 7.66667 4.74167 8.525 4.425 9.475Z"
+          d="M14 6l-.72-1.45c-.17-.34-.52-.55-.9-.55H6c-.55 0-1 .45-1 1v15c0 .55.45 1 1 1s1-.45 1-1v-6h5l.72 1.45c.17.34.52.55.89.55H19c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1h-5zm4 8h-4l-1-2H7V6h5l1 2h5v6z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        face
+        flag
       </span>
     </li>
     <li
@@ -1231,13 +1193,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        favorite
+        folder
       </span>
     </li>
     <li
@@ -1251,13 +1213,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 15C12.2833 15 12.5208 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14C13 13.7167 12.9042 13.4792 12.7125 13.2875C12.5208 13.0958 12.2833 13 12 13C11.7167 13 11.4792 13.0958 11.2875 13.2875C11.0958 13.4792 11 13.7167 11 14C11 14.2833 11.0958 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15ZM12 11C12.2833 11 12.5208 10.9042 12.7125 10.7125C12.9042 10.5208 13 10.2833 13 10V6C13 5.71667 12.9042 5.47917 12.7125 5.2875C12.5208 5.09583 12.2833 5 12 5C11.7167 5 11.4792 5.09583 11.2875 5.2875C11.0958 5.47917 11 5.71667 11 6V10C11 10.1333 11.025 10.2625 11.075 10.3875C11.125 10.5125 11.1958 10.6208 11.2875 10.7125C11.3792 10.8042 11.4875 10.875 11.6125 10.925C11.7375 10.975 11.8667 11 12 11ZM6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM4 16H20V4H4V16Z"
+          d="M15 16C15.2833 16 15.5208 15.9042 15.7125 15.7125C15.9042 15.5208 16 15.2833 16 15V14H17C17.2833 14 17.5208 13.9042 17.7125 13.7125C17.9042 13.5208 18 13.2833 18 13C18 12.7167 17.9042 12.4792 17.7125 12.2875C17.5208 12.0958 17.2833 12 17 12H16V11C16 10.7167 15.9042 10.4792 15.7125 10.2875C15.5208 10.0958 15.2833 10 15 10C14.7167 10 14.4792 10.0958 14.2875 10.2875C14.0958 10.4792 14 10.7167 14 11V12H13C12.7167 12 12.4792 12.0958 12.2875 12.2875C12.0958 12.4792 12 12.7167 12 13C12 13.2833 12.0958 13.5208 12.2875 13.7125C12.4792 13.9042 12.7167 14 13 14H14V15C14 15.2833 14.0958 15.5208 14.2875 15.7125C14.4792 15.9042 14.7167 16 15 16ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        feedback
+        folder-add
       </span>
     </li>
     <li
@@ -1271,39 +1233,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19 19H8C7.45 19 6.97917 18.8042 6.5875 18.4125C6.19583 18.0208 6 17.55 6 17V3C6 2.45 6.19583 1.97917 6.5875 1.5875C6.97917 1.19583 7.45 1 8 1H14.175C14.4417 1 14.6958 1.05 14.9375 1.15C15.1792 1.25 15.3917 1.39167 15.575 1.575L20.425 6.425C20.6083 6.60833 20.75 6.82083 20.85 7.0625C20.95 7.30417 21 7.55833 21 7.825V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19ZM19 8H15.5C15.0833 8 14.7292 7.85417 14.4375 7.5625C14.1458 7.27083 14 6.91667 14 6.5V3H8V17H19V8ZM4 23C3.45 23 2.97917 22.8042 2.5875 22.4125C2.19583 22.0208 2 21.55 2 21V8C2 7.71667 2.09583 7.47917 2.2875 7.2875C2.47917 7.09583 2.71667 7 3 7C3.28333 7 3.52083 7.09583 3.7125 7.2875C3.90417 7.47917 4 7.71667 4 8V21H14C14.2833 21 14.5208 21.0958 14.7125 21.2875C14.9042 21.4792 15 21.7167 15 22C15 22.2833 14.9042 22.5208 14.7125 22.7125C14.5208 22.9042 14.2833 23 14 23H4Z"
+          d="M5.35995 6.11001C4.85995 6.53001 4.11995 6.51001 3.64995 6.05001C3.13995 5.55001 3.13995 4.71001 3.66995 4.23001C4.32995 3.64001 5.27995 3.01001 6.36995 3.01001C7.23995 3.01001 8.87995 3.70001 8.87995 5.87001C8.87995 7.23001 8.35995 8.01001 7.57995 9.15001C7.12995 9.81001 6.07995 11.58 5.72995 12.67C5.36995 13.76 5.63995 14.59 6.08995 14.59C6.50216 14.59 6.91437 14.0938 7.16801 13.7884C7.17895 13.7752 7.1896 13.7624 7.19995 13.75C7.42995 13.51 8.90995 11.76 9.48995 11.03C10.2499 10.1 12.1799 8.19001 14.4299 8.19001C17.3699 8.19001 18.3099 10.74 18.4599 12.39H19.6799C20.3699 12.39 20.9299 12.95 20.9299 13.64C20.9299 14.33 20.3699 14.89 19.6799 14.89H18.4699C18.0699 19.66 15.4099 20.99 13.7799 20.99C12.0099 20.99 10.5699 19.6 10.5699 17.9C10.5699 16.2 12.1699 13.17 15.9499 12.53C15.9429 12.4797 15.9361 12.4284 15.9293 12.3765C15.8307 11.6239 15.7148 10.74 14.1899 10.74C12.9399 10.74 11.3199 12.69 10.1099 14.18L10.0973 14.1956C8.99324 15.5583 8.11587 16.6412 7.04995 16.95C6.14995 17.22 5.15995 17.05 4.40995 16.49C3.54995 15.85 3.06995 14.79 3.06995 13.51C3.06995 11.4026 5.04924 8.49892 5.72566 7.50659C5.82599 7.3594 5.89765 7.25426 5.92995 7.20001C6.22995 6.71001 6.72995 5.88001 6.22995 5.68001C6.04995 5.60001 5.72995 5.79001 5.35995 6.11001ZM13.0699 17.84C13.0699 18.3 13.4999 18.56 13.8099 18.56C14.5099 18.56 15.6399 17.77 15.9399 15.08C13.7999 15.64 13.0699 17.24 13.0699 17.84Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        file-copy
+        gesture
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        This has been replaced by copy. This will be deprecated
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -1316,13 +1253,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M12 20.7254C11.8333 20.7254 11.6708 20.7046 11.5125 20.6629C11.3542 20.6212 11.2 20.5587 11.05 20.4754L6.05001 17.7754C5.71668 17.5921 5.45835 17.3462 5.27501 17.0379C5.09168 16.7296 5.00001 16.3837 5.00001 16.0004V11.2004L2.60001 9.87539C2.41668 9.77539 2.28335 9.65039 2.20001 9.50039C2.11668 9.35039 2.07501 9.18372 2.07501 9.00039C2.07501 8.81706 2.11668 8.65039 2.20001 8.50039C2.28335 8.35039 2.41668 8.22539 2.60001 8.12539L11.05 3.52539C11.2 3.44206 11.3542 3.37956 11.5125 3.33789C11.6708 3.29622 11.8333 3.27539 12 3.27539C12.1667 3.27539 12.3292 3.29622 12.4875 3.33789C12.6458 3.37956 12.8 3.44206 12.95 3.52539L22.475 8.72539C22.6417 8.80872 22.7708 8.92956 22.8625 9.08789C22.9542 9.24622 23 9.41706 23 9.60039V16.0004C23 16.2837 22.9042 16.5212 22.7125 16.7129C22.5208 16.9046 22.2833 17.0004 22 17.0004C21.7167 17.0004 21.4792 16.9046 21.2875 16.7129C21.0958 16.5212 21 16.2837 21 16.0004V10.1004L19 11.2004V16.0004C19 16.3837 18.9083 16.7296 18.725 17.0379C18.5417 17.3462 18.2833 17.5921 17.95 17.7754L12.95 20.4754C12.8 20.5587 12.6458 20.6212 12.4875 20.6629C12.3292 20.7046 12.1667 20.7254 12 20.7254ZM12 12.7004L18.85 9.00039L12 5.30039L5.15001 9.00039L12 12.7004ZM12 18.7254L17 16.0254V12.2504L12.975 14.4754C12.825 14.5587 12.6667 14.6212 12.5 14.6629C12.3333 14.7046 12.1667 14.7254 12 14.7254C11.8333 14.7254 11.6667 14.7046 11.5 14.6629C11.3333 14.6212 11.175 14.5587 11.025 14.4754L7.00001 12.2504V16.0254L12 18.7254Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        filter-list
+        grad-cap
       </span>
     </li>
     <li
@@ -1336,13 +1273,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14 6l-.72-1.45c-.17-.34-.52-.55-.9-.55H6c-.55 0-1 .45-1 1v15c0 .55.45 1 1 1s1-.45 1-1v-6h5l.72 1.45c.17.34.52.55.89.55H19c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1h-5zm4 8h-4l-1-2H7V6h5l1 2h5v6z"
+          d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56 C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9 c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07 l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55 C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11 c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2 c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55 C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        flag
+        graph
       </span>
     </li>
     <li
@@ -1356,13 +1293,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H9.175C9.44167 4 9.69583 4.05 9.9375 4.15C10.1792 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 6V18H20V8H11.175L9.175 6H4Z"
+          d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        folder
+        heart-filled
       </span>
     </li>
     <li
@@ -1376,13 +1313,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7 18C6.71667 18 6.47917 17.9042 6.2875 17.7125C6.09583 17.5208 6 17.2833 6 17V15H19V6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V19.575C22 20.025 21.7958 20.3375 21.3875 20.5125C20.9792 20.6875 20.6167 20.6167 20.3 20.3L18 18H7ZM6 13L3.7 15.3C3.38333 15.6167 3.02083 15.6875 2.6125 15.5125C2.20417 15.3375 2 15.025 2 14.575V3C2 2.71667 2.09583 2.47917 2.2875 2.2875C2.47917 2.09583 2.71667 2 3 2H16C16.2833 2 16.5208 2.09583 16.7125 2.2875C16.9042 2.47917 17 2.71667 17 3V12C17 12.2833 16.9042 12.5208 16.7125 12.7125C16.5208 12.9042 16.2833 13 16 13H6ZM15 11V4H4V11H15Z"
+          d="M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM6 21C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V10C4 9.68333 4.07083 9.38333 4.2125 9.1C4.35417 8.81667 4.55 8.58333 4.8 8.4L10.8 3.9C10.9833 3.76667 11.175 3.66667 11.375 3.6C11.575 3.53333 11.7833 3.5 12 3.5C12.2167 3.5 12.425 3.53333 12.625 3.6C12.825 3.66667 13.0167 3.76667 13.2 3.9L19.2 8.4C19.45 8.58333 19.6458 8.81667 19.7875 9.1C19.9292 9.38333 20 9.68333 20 10V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H13V15H11V21H6Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        forum
+        home
       </span>
     </li>
     <li
@@ -1396,13 +1333,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5.35995 6.11001C4.85995 6.53001 4.11995 6.51001 3.64995 6.05001C3.13995 5.55001 3.13995 4.71001 3.66995 4.23001C4.32995 3.64001 5.27995 3.01001 6.36995 3.01001C7.23995 3.01001 8.87995 3.70001 8.87995 5.87001C8.87995 7.23001 8.35995 8.01001 7.57995 9.15001C7.12995 9.81001 6.07995 11.58 5.72995 12.67C5.36995 13.76 5.63995 14.59 6.08995 14.59C6.50216 14.59 6.91437 14.0938 7.16801 13.7884C7.17895 13.7752 7.1896 13.7624 7.19995 13.75C7.42995 13.51 8.90995 11.76 9.48995 11.03C10.2499 10.1 12.1799 8.19001 14.4299 8.19001C17.3699 8.19001 18.3099 10.74 18.4599 12.39H19.6799C20.3699 12.39 20.9299 12.95 20.9299 13.64C20.9299 14.33 20.3699 14.89 19.6799 14.89H18.4699C18.0699 19.66 15.4099 20.99 13.7799 20.99C12.0099 20.99 10.5699 19.6 10.5699 17.9C10.5699 16.2 12.1699 13.17 15.9499 12.53C15.9429 12.4797 15.9361 12.4284 15.9293 12.3765C15.8307 11.6239 15.7148 10.74 14.1899 10.74C12.9399 10.74 11.3199 12.69 10.1099 14.18L10.0973 14.1956C8.99324 15.5583 8.11587 16.6412 7.04995 16.95C6.14995 17.22 5.15995 17.05 4.40995 16.49C3.54995 15.85 3.06995 14.79 3.06995 13.51C3.06995 11.4026 5.04924 8.49892 5.72566 7.50659C5.82599 7.3594 5.89765 7.25426 5.92995 7.20001C6.22995 6.71001 6.72995 5.88001 6.22995 5.68001C6.04995 5.60001 5.72995 5.79001 5.35995 6.11001ZM13.0699 17.84C13.0699 18.3 13.4999 18.56 13.8099 18.56C14.5099 18.56 15.6399 17.77 15.9399 15.08C13.7999 15.64 13.0699 17.24 13.0699 17.84Z"
+          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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>
       <span
         class="icon-grid__text"
       >
-        gesture
+        info-encircled
       </span>
     </li>
     <li
@@ -1416,13 +1353,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18ZM12 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 20ZM12.1 7.7C12.5167 7.7 12.8792 7.83333 13.1875 8.1C13.4958 8.36667 13.65 8.7 13.65 9.1C13.65 9.46667 13.5375 9.79167 13.3125 10.075C13.0875 10.3583 12.8333 10.625 12.55 10.875C12.1667 11.2083 11.8292 11.575 11.5375 11.975C11.2458 12.375 11.1 12.825 11.1 13.325C11.1 13.5583 11.1875 13.7542 11.3625 13.9125C11.5375 14.0708 11.7417 14.15 11.975 14.15C12.225 14.15 12.4375 14.0667 12.6125 13.9C12.7875 13.7333 12.9 13.525 12.95 13.275C13.0167 12.925 13.1667 12.6125 13.4 12.3375C13.6333 12.0625 13.8833 11.8 14.15 11.55C14.5333 11.1833 14.8625 10.7833 15.1375 10.35C15.4125 9.91667 15.55 9.43333 15.55 8.9C15.55 8.05 15.2042 7.35417 14.5125 6.8125C13.8208 6.27083 13.0167 6 12.1 6C11.4667 6 10.8625 6.13333 10.2875 6.4C9.7125 6.66667 9.275 7.075 8.975 7.625C8.85833 7.825 8.82083 8.0375 8.8625 8.2625C8.90417 8.4875 9.01667 8.65833 9.2 8.775C9.43333 8.90833 9.675 8.95 9.925 8.9C10.175 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9625 8.03333 11.2375 7.9C11.5125 7.76667 11.8 7.7 12.1 7.7Z"
+          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        help
+        info-encircled-filled
       </span>
     </li>
     <li
@@ -1436,13 +1373,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM6 21C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V10C4 9.68333 4.07083 9.38333 4.2125 9.1C4.35417 8.81667 4.55 8.58333 4.8 8.4L10.8 3.9C10.9833 3.76667 11.175 3.66667 11.375 3.6C11.575 3.53333 11.7833 3.5 12 3.5C12.2167 3.5 12.425 3.53333 12.625 3.6C12.825 3.66667 13.0167 3.76667 13.2 3.9L19.2 8.4C19.45 8.58333 19.6458 8.81667 19.7875 9.1C19.9292 9.38333 20 9.68333 20 10V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H13V15H11V21H6Z"
+          d="M10.85 21.525C9.95 20.875 8.9875 20.35 7.9625 19.95C6.9375 19.55 5.86667 19.275 4.75 19.125C4.25 19.0583 3.83333 18.8458 3.5 18.4875C3.16667 18.1292 3 17.7167 3 17.25V10.2C3 9.56667 3.21667 9.04583 3.65 8.6375C4.08333 8.22917 4.59167 8.075 5.175 8.175C6.45833 8.39167 7.67917 8.78333 8.8375 9.35C9.99583 9.91667 11.05 10.65 12 11.55C12.95 10.65 14.0042 9.91667 15.1625 9.35C16.3208 8.78333 17.5417 8.39167 18.825 8.175C19.4083 8.075 19.9167 8.22917 20.35 8.6375C20.7833 9.04583 21 9.56667 21 10.2V17.25C21 17.7167 20.8333 18.1292 20.5 18.4875C20.1667 18.8458 19.75 19.0583 19.25 19.125C18.1333 19.275 17.0625 19.55 16.0375 19.95C15.0125 20.35 14.05 20.875 13.15 21.525C12.8167 21.775 12.4333 21.9 12 21.9C11.5667 21.9 11.1833 21.775 10.85 21.525ZM12 19.9C13.05 19.1167 14.1667 18.4917 15.35 18.025C16.5333 17.5583 17.75 17.25 19 17.1V10.2C17.7833 10.4167 16.5875 10.8542 15.4125 11.5125C14.2375 12.1708 13.1 13.05 12 14.15C10.9 13.05 9.7625 12.1708 8.5875 11.5125C7.4125 10.8542 6.21667 10.4167 5 10.2V17.1C6.25 17.25 7.46667 17.5583 8.65 18.025C9.83333 18.4917 10.95 19.1167 12 19.9ZM12 9C10.9 9 9.95833 8.60833 9.175 7.825C8.39167 7.04167 8 6.1 8 5C8 3.9 8.39167 2.95833 9.175 2.175C9.95833 1.39167 10.9 1 12 1C13.1 1 14.0417 1.39167 14.825 2.175C15.6083 2.95833 16 3.9 16 5C16 6.1 15.6083 7.04167 14.825 7.825C14.0417 8.60833 13.1 9 12 9ZM12 7C12.55 7 13.0208 6.80417 13.4125 6.4125C13.8042 6.02083 14 5.55 14 5C14 4.45 13.8042 3.97917 13.4125 3.5875C13.0208 3.19583 12.55 3 12 3C11.45 3 10.9792 3.19583 10.5875 3.5875C10.1958 3.97917 10 4.45 10 5C10 5.55 10.1958 6.02083 10.5875 6.4125C10.9792 6.80417 11.45 7 12 7Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        home
+        librarian
       </span>
     </li>
     <li
@@ -1456,13 +1393,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
+          d="M17,7h-3c-0.55,0-1,0.45-1,1s0.45,1,1,1h3c1.65,0,3,1.35,3,3s-1.35,3-3,3h-3c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1h3 c2.76,0,5-2.24,5-5S19.76,7,17,7z M8,12c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1s-0.45-1-1-1H9C8.45,11,8,11.45,8,12z M10,15H7 c-1.65,0-3-1.35-3-3s1.35-3,3-3h3c0.55,0,1-0.45,1-1s-0.45-1-1-1H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h3c0.55,0,1-0.45,1-1 C11,15.45,10.55,15,10,15z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        info
+        link
       </span>
     </li>
     <li
@@ -1476,13 +1413,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H13.175C13.4417 2 13.6958 2.05 13.9375 2.15C14.1792 2.25 14.3917 2.39167 14.575 2.575L19.425 7.425C19.6083 7.60833 19.75 7.82083 19.85 8.0625C19.95 8.30417 20 8.55833 20 8.825V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 8V4H6V20H18V9H14C13.7167 9 13.4792 8.90417 13.2875 8.7125C13.0958 8.52083 13 8.28333 13 8Z"
+          d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm8 14H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        insert-drive-file
+        lock
       </span>
     </li>
     <li
@@ -1496,13 +1433,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11 14H13C13.2833 14 13.5208 13.9042 13.7125 13.7125C13.9042 13.5208 14 13.2833 14 13C14 12.7167 13.9042 12.4792 13.7125 12.2875C13.5208 12.0958 13.2833 12 13 12H11C10.7167 12 10.4792 12.0958 10.2875 12.2875C10.0958 12.4792 10 12.7167 10 13C10 13.2833 10.0958 13.5208 10.2875 13.7125C10.4792 13.9042 10.7167 14 11 14ZM11 11H17C17.2833 11 17.5208 10.9042 17.7125 10.7125C17.9042 10.5208 18 10.2833 18 10C18 9.71667 17.9042 9.47917 17.7125 9.2875C17.5208 9.09583 17.2833 9 17 9H11C10.7167 9 10.4792 9.09583 10.2875 9.2875C10.0958 9.47917 10 9.71667 10 10C10 10.2833 10.0958 10.5208 10.2875 10.7125C10.4792 10.9042 10.7167 11 11 11ZM11 8H17C17.2833 8 17.5208 7.90417 17.7125 7.7125C17.9042 7.52083 18 7.28333 18 7C18 6.71667 17.9042 6.47917 17.7125 6.2875C17.5208 6.09583 17.2833 6 17 6H11C10.7167 6 10.4792 6.09583 10.2875 6.2875C10.0958 6.47917 10 6.71667 10 7C10 7.28333 10.0958 7.52083 10.2875 7.7125C10.4792 7.90417 10.7167 8 11 8ZM8 18C7.45 18 6.97917 17.8042 6.5875 17.4125C6.19583 17.0208 6 16.55 6 16V4C6 3.45 6.19583 2.97917 6.5875 2.5875C6.97917 2.19583 7.45 2 8 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H8ZM8 16H20V4H8V16ZM4 22C3.45 22 2.97917 21.8042 2.5875 21.4125C2.19583 21.0208 2 20.55 2 20V7C2 6.71667 2.09583 6.47917 2.2875 6.2875C2.47917 6.09583 2.71667 6 3 6C3.28333 6 3.52083 6.09583 3.7125 6.2875C3.90417 6.47917 4 6.71667 4 7V20H17C17.2833 20 17.5208 20.0958 17.7125 20.2875C17.9042 20.4792 18 20.7167 18 21C18 21.2833 17.9042 21.5208 17.7125 21.7125C17.5208 21.9042 17.2833 22 17 22H4Z"
+          d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        library-books
+        lock-open
       </span>
     </li>
     <li
@@ -1516,13 +1453,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M17,7h-3c-0.55,0-1,0.45-1,1s0.45,1,1,1h3c1.65,0,3,1.35,3,3s-1.35,3-3,3h-3c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1h3 c2.76,0,5-2.24,5-5S19.76,7,17,7z M8,12c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1s-0.45-1-1-1H9C8.45,11,8,11.45,8,12z M10,15H7 c-1.65,0-3-1.35-3-3s1.35-3,3-3h3c0.55,0,1-0.45,1-1s-0.45-1-1-1H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h3c0.55,0,1-0.45,1-1 C11,15.45,10.55,15,10,15z"
+          d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H11C11.2833 3 11.5208 3.09583 11.7125 3.2875C11.9042 3.47917 12 3.71667 12 4C12 4.28333 11.9042 4.52083 11.7125 4.7125C11.5208 4.90417 11.2833 5 11 5H5V19H11C11.2833 19 11.5208 19.0958 11.7125 19.2875C11.9042 19.4792 12 19.7167 12 20C12 20.2833 11.9042 20.5208 11.7125 20.7125C11.5208 20.9042 11.2833 21 11 21H5ZM17.175 13H10C9.71667 13 9.47917 12.9042 9.2875 12.7125C9.09583 12.5208 9 12.2833 9 12C9 11.7167 9.09583 11.4792 9.2875 11.2875C9.47917 11.0958 9.71667 11 10 11H17.175L15.3 9.125C15.1167 8.94167 15.025 8.71667 15.025 8.45C15.025 8.18333 15.1167 7.95 15.3 7.75C15.4833 7.55 15.7167 7.44583 16 7.4375C16.2833 7.42917 16.525 7.525 16.725 7.725L20.3 11.3C20.5 11.5 20.6 11.7333 20.6 12C20.6 12.2667 20.5 12.5 20.3 12.7L16.725 16.275C16.525 16.475 16.2875 16.5708 16.0125 16.5625C15.7375 16.5542 15.5 16.45 15.3 16.25C15.1167 16.05 15.0292 15.8125 15.0375 15.5375C15.0458 15.2625 15.1417 15.0333 15.325 14.85L17.175 13Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        link
+        logout
       </span>
     </li>
     <li
@@ -1536,13 +1473,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10.85 21.525C9.95 20.875 8.9875 20.35 7.9625 19.95C6.9375 19.55 5.86667 19.275 4.75 19.125C4.25 19.0583 3.83333 18.8458 3.5 18.4875C3.16667 18.1292 3 17.7167 3 17.25V10.2C3 9.56667 3.21667 9.04583 3.65 8.6375C4.08333 8.22917 4.59167 8.075 5.175 8.175C6.45833 8.39167 7.67917 8.78333 8.8375 9.35C9.99583 9.91667 11.05 10.65 12 11.55C12.95 10.65 14.0042 9.91667 15.1625 9.35C16.3208 8.78333 17.5417 8.39167 18.825 8.175C19.4083 8.075 19.9167 8.22917 20.35 8.6375C20.7833 9.04583 21 9.56667 21 10.2V17.25C21 17.7167 20.8333 18.1292 20.5 18.4875C20.1667 18.8458 19.75 19.0583 19.25 19.125C18.1333 19.275 17.0625 19.55 16.0375 19.95C15.0125 20.35 14.05 20.875 13.15 21.525C12.8167 21.775 12.4333 21.9 12 21.9C11.5667 21.9 11.1833 21.775 10.85 21.525ZM12 19.9C13.05 19.1167 14.1667 18.4917 15.35 18.025C16.5333 17.5583 17.75 17.25 19 17.1V10.2C17.7833 10.4167 16.5875 10.8542 15.4125 11.5125C14.2375 12.1708 13.1 13.05 12 14.15C10.9 13.05 9.7625 12.1708 8.5875 11.5125C7.4125 10.8542 6.21667 10.4167 5 10.2V17.1C6.25 17.25 7.46667 17.5583 8.65 18.025C9.83333 18.4917 10.95 19.1167 12 19.9ZM12 9C10.9 9 9.95833 8.60833 9.175 7.825C8.39167 7.04167 8 6.1 8 5C8 3.9 8.39167 2.95833 9.175 2.175C9.95833 1.39167 10.9 1 12 1C13.1 1 14.0417 1.39167 14.825 2.175C15.6083 2.95833 16 3.9 16 5C16 6.1 15.6083 7.04167 14.825 7.825C14.0417 8.60833 13.1 9 12 9ZM12 7C12.55 7 13.0208 6.80417 13.4125 6.4125C13.8042 6.02083 14 5.55 14 5C14 4.45 13.8042 3.97917 13.4125 3.5875C13.0208 3.19583 12.55 3 12 3C11.45 3 10.9792 3.19583 10.5875 3.5875C10.1958 3.97917 10 4.45 10 5C10 5.55 10.1958 6.02083 10.5875 6.4125C10.9792 6.80417 11.45 7 12 7Z"
+          d="M9.2 19.8748C8.03333 19.6581 6.9 19.2831 5.8 18.7498C4.7 18.2165 3.72083 17.4748 2.8625 16.5248C2.00417 15.5748 1.3125 14.3998 0.7875 12.9998C0.2625 11.5998 0 9.93314 0 7.9998V7.7998C0 7.56647 0.075 7.3748 0.225 7.2248C0.375 7.0748 0.566667 6.9998 0.8 6.9998H1C1.85 6.9998 2.725 7.10814 3.625 7.3248C4.525 7.54147 5.36667 7.86647 6.15 8.2998C6.33333 7.06647 6.7 5.7998 7.25 4.4998C7.8 3.1998 8.45833 2.0248 9.225 0.974805C9.425 0.691471 9.68333 0.549805 10 0.549805C10.3167 0.549805 10.575 0.691471 10.775 0.974805C11.5417 2.0248 12.2 3.1998 12.75 4.4998C13.3 5.7998 13.6667 7.06647 13.85 8.2998C14.6333 7.86647 15.475 7.54147 16.375 7.3248C17.275 7.10814 18.15 6.9998 19 6.9998H19.1C19.35 6.9998 19.5625 7.0873 19.7375 7.2623C19.9125 7.4373 20 7.6498 20 7.8998V7.9998C20 9.93314 19.7375 11.5998 19.2125 12.9998C18.6875 14.3998 17.9958 15.5748 17.1375 16.5248C16.2792 17.4748 15.3 18.2165 14.2 18.7498C13.1 19.2831 11.9667 19.6581 10.8 19.8748C10.5833 19.9081 10.3167 19.9248 10 19.9248C9.68333 19.9248 9.41667 19.9081 9.2 19.8748ZM9.95 17.9498C9.76667 15.1998 8.9375 13.1123 7.4625 11.6873C5.9875 10.2623 4.18333 9.38314 2.05 9.0498C2.01667 9.0498 2.01667 9.0498 2.05 9.0498C2.23333 11.8665 3.0875 13.9831 4.6125 15.3998C6.1375 16.8165 7.91667 17.6665 9.95 17.9498C9.98333 17.9665 9.98333 17.9706 9.95 17.9623C9.91667 17.954 9.91667 17.9498 9.95 17.9498ZM8.05 9.44981C8.38333 9.73314 8.73333 10.0706 9.1 10.4623C9.46667 10.854 9.76667 11.2331 10 11.5998C10.25 11.2331 10.5542 10.854 10.9125 10.4623C11.2708 10.0706 11.6167 9.73314 11.95 9.44981C11.9167 8.4998 11.7292 7.50814 11.3875 6.4748C11.0458 5.44147 10.5833 4.43314 10 3.4498C9.41667 4.43314 8.95417 5.44147 8.6125 6.4748C8.27083 7.50814 8.08333 8.4998 8.05 9.44981ZM11.1 13.6998C11.3 14.2331 11.4708 14.8165 11.6125 15.4498C11.7542 16.0831 11.8667 16.7665 11.95 17.4998C12.55 17.2998 13.1833 16.9998 13.85 16.5998C14.5167 16.1998 15.1333 15.6665 15.7 14.9998C16.2667 14.3331 16.7583 13.5123 17.175 12.5373C17.5917 11.5623 17.85 10.3998 17.95 9.0498C17.95 9.01647 17.95 9.01647 17.95 9.0498C16.3833 9.28314 15.0083 9.80397 13.825 10.6123C12.6417 11.4206 11.7333 12.4498 11.1 13.6998Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        local-library
+        lotus
       </span>
     </li>
     <li
@@ -1556,13 +1493,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z"
+          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM20 8L12.525 12.675C12.4417 12.725 12.3542 12.7625 12.2625 12.7875C12.1708 12.8125 12.0833 12.825 12 12.825C11.9167 12.825 11.8292 12.8125 11.7375 12.7875C11.6458 12.7625 11.5583 12.725 11.475 12.675L4 8V18H20V8ZM12 11L20 6H4L12 11ZM4 8.25V6.775V6.8V6.7875V8.25Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        lock-open
+        mail
       </span>
     </li>
     <li
@@ -1576,13 +1513,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm8 14H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
+          d="M14.35 20.775L9 18.9L4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3791 3 20.1 3 19.75V5.74996C3 5.5333 3.0625 5.34163 3.1875 5.17496C3.3125 5.0083 3.48333 4.8833 3.7 4.79996L8.35 3.22496C8.56667 3.1583 8.78333 3.1208 9 3.11246C9.21667 3.10413 9.43333 3.14163 9.65 3.22496L15 5.09996L19.65 3.29996C19.9833 3.16663 20.2917 3.20413 20.575 3.41246C20.8583 3.6208 21 3.89996 21 4.24996V18.25C21 18.4666 20.9375 18.6583 20.8125 18.825C20.6875 18.9916 20.5167 19.1166 20.3 19.2L15.65 20.775C15.4333 20.8416 15.2167 20.8791 15 20.8875C14.7833 20.8958 14.5667 20.8583 14.35 20.775ZM14 18.55V6.84996L10 5.44996V17.15L14 18.55ZM16 18.55L19 17.55V5.69996L16 6.84996V18.55ZM5 18.3L8 17.15V5.44996L5 6.44996V18.3Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        lock
+        map
       </span>
     </li>
     <li
@@ -1596,13 +1533,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM20 8L12.525 12.675C12.4417 12.725 12.3542 12.7625 12.2625 12.7875C12.1708 12.8125 12.0833 12.825 12 12.825C11.9167 12.825 11.8292 12.8125 11.7375 12.7875C11.6458 12.7625 11.5583 12.725 11.475 12.675L4 8V18H20V8ZM12 11L20 6H4L12 11ZM4 8.25V6.775V6.8V6.7875V8.25Z"
+          d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.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 1z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        mail
+        menu
       </span>
     </li>
     <li
@@ -1616,13 +1553,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.35 20.775L9 18.9L4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3791 3 20.1 3 19.75V5.74996C3 5.5333 3.0625 5.34163 3.1875 5.17496C3.3125 5.0083 3.48333 4.8833 3.7 4.79996L8.35 3.22496C8.56667 3.1583 8.78333 3.1208 9 3.11246C9.21667 3.10413 9.43333 3.14163 9.65 3.22496L15 5.09996L19.65 3.29996C19.9833 3.16663 20.2917 3.20413 20.575 3.41246C20.8583 3.6208 21 3.89996 21 4.24996V18.25C21 18.4666 20.9375 18.6583 20.8125 18.825C20.6875 18.9916 20.5167 19.1166 20.3 19.2L15.65 20.775C15.4333 20.8416 15.2167 20.8791 15 20.8875C14.7833 20.8958 14.5667 20.8583 14.35 20.775ZM14 18.55V6.84996L10 5.44996V17.15L14 18.55ZM16 18.55L19 17.55V5.69996L16 6.84996V18.55ZM5 18.3L8 17.15V5.44996L5 6.44996V18.3Z"
+          d="M12 14C11.1667 14 10.4583 13.7083 9.875 13.125C9.29167 12.5417 9 11.8333 9 11V5C9 4.16667 9.29167 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V17.925C9.45 17.7083 8.13333 17.0583 7.05 15.975C5.96667 14.8917 5.30833 13.5917 5.075 12.075C5.025 11.7917 5.1 11.5417 5.3 11.325C5.5 11.1083 5.76667 11 6.1 11C6.33333 11 6.54167 11.0875 6.725 11.2625C6.90833 11.4375 7.025 11.65 7.075 11.9C7.29167 13.0667 7.85833 14.0417 8.775 14.825C9.69167 15.6083 10.7667 16 12 16C13.2333 16 14.3083 15.6083 15.225 14.825C16.1417 14.0417 16.7083 13.0667 16.925 11.9C16.975 11.65 17.0958 11.4375 17.2875 11.2625C17.4792 11.0875 17.6917 11 17.925 11C18.2417 11 18.5 11.1083 18.7 11.325C18.9 11.5417 18.975 11.7917 18.925 12.075C18.6917 13.5917 18.0333 14.8917 16.95 15.975C15.8667 17.0583 14.55 17.7083 13 17.925V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11V5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5V11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        map
+        mic
       </span>
     </li>
     <li
@@ -1636,13 +1573,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z"
+          d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        menu-book
+        open-in-new
       </span>
     </li>
     <li
@@ -1656,13 +1593,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.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 1z"
+          d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        menu
+        pencil
       </span>
     </li>
     <li
@@ -1676,13 +1613,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 14C11.1667 14 10.4583 13.7083 9.875 13.125C9.29167 12.5417 9 11.8333 9 11V5C9 4.16667 9.29167 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V17.925C9.45 17.7083 8.13333 17.0583 7.05 15.975C5.96667 14.8917 5.30833 13.5917 5.075 12.075C5.025 11.7917 5.1 11.5417 5.3 11.325C5.5 11.1083 5.76667 11 6.1 11C6.33333 11 6.54167 11.0875 6.725 11.2625C6.90833 11.4375 7.025 11.65 7.075 11.9C7.29167 13.0667 7.85833 14.0417 8.775 14.825C9.69167 15.6083 10.7667 16 12 16C13.2333 16 14.3083 15.6083 15.225 14.825C16.1417 14.0417 16.7083 13.0667 16.925 11.9C16.975 11.65 17.0958 11.4375 17.2875 11.2625C17.4792 11.0875 17.6917 11 17.925 11C18.2417 11 18.5 11.1083 18.7 11.325C18.9 11.5417 18.975 11.7917 18.925 12.075C18.6917 13.5917 18.0333 14.8917 16.95 15.975C15.8667 17.0583 14.55 17.7083 13 17.925V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21ZM12 12C12.2833 12 12.5208 11.9042 12.7125 11.7125C12.9042 11.5208 13 11.2833 13 11V5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5V11C11 11.2833 11.0958 11.5208 11.2875 11.7125C11.4792 11.9042 11.7167 12 12 12Z"
+          d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        mic
+        person
       </span>
     </li>
     <li
@@ -1696,13 +1633,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.03 0 3.8-1.11 4.75-2.75.19-.33-.05-.75-.44-.75H7.69c-.38 0-.63.42-.44.75.95 1.64 2.72 2.75 4.75 2.75z"
+          d="M19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        mood
+        person-add
       </span>
     </li>
     <li
@@ -1716,39 +1653,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+          d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        more-vert
+        person-encircled
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        This has been replaced by dots-vertical. This will be deprecated
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -1761,13 +1673,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
+          d="M19.125 15.1248C18.9417 14.9415 18.8458 14.7081 18.8375 14.4248C18.8292 14.1415 18.9167 13.8831 19.1 13.6498C19.6167 13.0165 20.0208 12.304 20.3125 11.5123C20.6042 10.7206 20.75 9.88314 20.75 8.9998C20.75 8.13314 20.6042 7.30814 20.3125 6.5248C20.0208 5.74147 19.6167 5.03314 19.1 4.3998C18.9167 4.16647 18.825 3.90814 18.825 3.6248C18.825 3.34147 18.925 3.0998 19.125 2.8998C19.3583 2.66647 19.6375 2.5498 19.9625 2.5498C20.2875 2.5498 20.55 2.66647 20.75 2.8998C21.45 3.7498 22 4.69147 22.4 5.7248C22.8 6.75814 23 7.8498 23 8.9998C23 10.1498 22.8 11.2415 22.4 12.2748C22 13.3081 21.45 14.2498 20.75 15.0998C20.55 15.3331 20.2875 15.454 19.9625 15.4623C19.6375 15.4706 19.3583 15.3581 19.125 15.1248ZM15.9 11.8998C15.7167 11.7165 15.6125 11.479 15.5875 11.1873C15.5625 10.8956 15.6333 10.6081 15.8 10.3248C15.9167 10.1248 16.0042 9.9123 16.0625 9.6873C16.1208 9.4623 16.15 9.23314 16.15 8.9998C16.15 8.76647 16.1208 8.5373 16.0625 8.3123C16.0042 8.0873 15.9167 7.8748 15.8 7.6748C15.6333 7.39147 15.5625 7.10397 15.5875 6.8123C15.6125 6.52064 15.7167 6.28314 15.9 6.0998C16.1333 5.86647 16.4167 5.75397 16.75 5.7623C17.0833 5.77064 17.3417 5.8998 17.525 6.1498C17.8083 6.56647 18.0333 7.0123 18.2 7.4873C18.3667 7.9623 18.45 8.46647 18.45 8.9998C18.45 9.53314 18.3667 10.0373 18.2 10.5123C18.0333 10.9873 17.8083 11.4331 17.525 11.8498C17.3417 12.0998 17.0833 12.229 16.75 12.2373C16.4167 12.2456 16.1333 12.1331 15.9 11.8998ZM9 12.9998C7.9 12.9998 6.95833 12.6081 6.175 11.8248C5.39167 11.0415 5 10.0998 5 8.9998C5 7.8998 5.39167 6.95814 6.175 6.1748C6.95833 5.39147 7.9 4.9998 9 4.9998C10.1 4.9998 11.0417 5.39147 11.825 6.1748C12.6083 6.95814 13 7.8998 13 8.9998C13 10.0998 12.6083 11.0415 11.825 11.8248C11.0417 12.6081 10.1 12.9998 9 12.9998ZM2 20.9998C1.71667 20.9998 1.47917 20.904 1.2875 20.7123C1.09583 20.5206 1 20.2831 1 19.9998V18.1998C1 17.6498 1.14167 17.1331 1.425 16.6498C1.70833 16.1665 2.1 15.7998 2.6 15.5498C3.45 15.1165 4.40833 14.7498 5.475 14.4498C6.54167 14.1498 7.71667 13.9998 9 13.9998C10.2833 13.9998 11.4583 14.1498 12.525 14.4498C13.5917 14.7498 14.55 15.1165 15.4 15.5498C15.9 15.7998 16.2917 16.1665 16.575 16.6498C16.8583 17.1331 17 17.6498 17 18.1998V19.9998C17 20.2831 16.9042 20.5206 16.7125 20.7123C16.5208 20.904 16.2833 20.9998 16 20.9998H2ZM3 18.9998H15V18.1998C15 18.0165 14.9542 17.8498 14.8625 17.6998C14.7708 17.5498 14.65 17.4331 14.5 17.3498C13.9 17.0498 13.1292 16.7498 12.1875 16.4498C11.2458 16.1498 10.1833 15.9998 9 15.9998C7.81667 15.9998 6.75417 16.1498 5.8125 16.4498C4.87083 16.7498 4.1 17.0498 3.5 17.3498C3.35 17.4331 3.22917 17.5498 3.1375 17.6998C3.04583 17.8498 3 18.0165 3 18.1998V18.9998ZM9 10.9998C9.55 10.9998 10.0208 10.804 10.4125 10.4123C10.8042 10.0206 11 9.5498 11 8.9998C11 8.4498 10.8042 7.97897 10.4125 7.5873C10.0208 7.19564 9.55 6.9998 9 6.9998C8.45 6.9998 7.97917 7.19564 7.5875 7.5873C7.19583 7.97897 7 8.4498 7 8.9998C7 9.5498 7.19583 10.0206 7.5875 10.4123C7.97917 10.804 8.45 10.9998 9 10.9998Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        notifications
+        person-sound
       </span>
     </li>
     <li
@@ -1781,13 +1693,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v1c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-1h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm-1 14H4c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h16c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1zm-5.52-5.13l-3.98 2.28c-.67.38-1.5-.11-1.5-.87V8.72c0-.77.83-1.25 1.5-.87l3.98 2.28c.67.39.67 1.35 0 1.74z"
+          d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        ondemand-video
+        persons
       </span>
     </li>
     <li
@@ -1801,13 +1713,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+          d="M10.3 19.8C11.05 18.2833 12.05 17.2708 13.3 16.7625C14.55 16.2542 15.6167 16 16.5 16C16.8833 16 17.2583 16.0333 17.625 16.1C17.9917 16.1667 18.35 16.25 18.7 16.35C19.1 15.7167 19.4167 15.0333 19.65 14.3C19.8833 13.5667 20 12.8 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 12.75 4.09583 13.4667 4.2875 14.15C4.47917 14.8333 4.76667 15.4667 5.15 16.05C5.83333 15.7167 6.54167 15.4583 7.275 15.275C8.00833 15.0917 8.75 15 9.5 15C10.0333 15 10.5458 15.0458 11.0375 15.1375C11.5292 15.2292 12.0167 15.35 12.5 15.5C12.1167 15.7 11.7542 15.9333 11.4125 16.2C11.0708 16.4667 10.75 16.75 10.45 17.05C10.25 17.0167 10.0792 17 9.9375 17H9.5C8.96667 17 8.4375 17.0583 7.9125 17.175C7.3875 17.2917 6.88333 17.4667 6.4 17.7C6.93333 18.2333 7.52917 18.6792 8.1875 19.0375C8.84583 19.3958 9.55 19.65 10.3 19.8ZM12 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 22ZM9.5 13.5C8.53333 13.5 7.70833 13.1583 7.025 12.475C6.34167 11.7917 6 10.9667 6 10C6 9.03333 6.34167 8.20833 7.025 7.525C7.70833 6.84167 8.53333 6.5 9.5 6.5C10.4667 6.5 11.2917 6.84167 11.975 7.525C12.6583 8.20833 13 9.03333 13 10C13 10.9667 12.6583 11.7917 11.975 12.475C11.2917 13.1583 10.4667 13.5 9.5 13.5ZM9.5 11.5C9.91667 11.5 10.2708 11.3542 10.5625 11.0625C10.8542 10.7708 11 10.4167 11 10C11 9.58333 10.8542 9.22917 10.5625 8.9375C10.2708 8.64583 9.91667 8.5 9.5 8.5C9.08333 8.5 8.72917 8.64583 8.4375 8.9375C8.14583 9.22917 8 9.58333 8 10C8 10.4167 8.14583 10.7708 8.4375 11.0625C8.72917 11.3542 9.08333 11.5 9.5 11.5ZM16.5 14.5C15.8 14.5 15.2083 14.2583 14.725 13.775C14.2417 13.2917 14 12.7 14 12C14 11.3 14.2417 10.7083 14.725 10.225C15.2083 9.74167 15.8 9.5 16.5 9.5C17.2 9.5 17.7917 9.74167 18.275 10.225C18.7583 10.7083 19 11.3 19 12C19 12.7 18.7583 13.2917 18.275 13.775C17.7917 14.2583 17.2 14.5 16.5 14.5Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        open-in-new
+        persons-encircled
       </span>
     </li>
     <li
@@ -1821,13 +1733,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
+          d="M11.525 18.0252C11.1917 18.2418 10.8542 18.2543 10.5125 18.0627C10.1708 17.871 10 17.5752 10 17.1752V6.82518C10 6.42518 10.1708 6.12935 10.5125 5.93768C10.8542 5.74602 11.1917 5.75852 11.525 5.97518L19.675 11.1502C19.975 11.3502 20.125 11.6335 20.125 12.0002C20.125 12.3669 19.975 12.6502 19.675 12.8502L11.525 18.0252ZM12 15.3502L17.25 12.0002L12 8.65018V15.3502Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        people
+        play-arrow
       </span>
     </li>
     <li
@@ -1841,13 +1753,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z"
+          d="M16 8V5H8V8H6V4C6 3.71667 6.09583 3.47917 6.2875 3.2875C6.47917 3.09583 6.71667 3 7 3H17C17.2833 3 17.5208 3.09583 17.7125 3.2875C17.9042 3.47917 18 3.71667 18 4V8H16ZM18 12.5C18.2833 12.5 18.5208 12.4042 18.7125 12.2125C18.9042 12.0208 19 11.7833 19 11.5C19 11.2167 18.9042 10.9792 18.7125 10.7875C18.5208 10.5958 18.2833 10.5 18 10.5C17.7167 10.5 17.4792 10.5958 17.2875 10.7875C17.0958 10.9792 17 11.2167 17 11.5C17 11.7833 17.0958 12.0208 17.2875 12.2125C17.4792 12.4042 17.7167 12.5 18 12.5ZM8 19H16V15H8V19ZM8 21C7.45 21 6.97917 20.8042 6.5875 20.4125C6.19583 20.0208 6 19.55 6 19V17H3C2.71667 17 2.47917 16.9042 2.2875 16.7125C2.09583 16.5208 2 16.2833 2 16V11C2 10.15 2.29167 9.4375 2.875 8.8625C3.45833 8.2875 4.16667 8 5 8H19C19.85 8 20.5625 8.2875 21.1375 8.8625C21.7125 9.4375 22 10.15 22 11V16C22 16.2833 21.9042 16.5208 21.7125 16.7125C21.5208 16.9042 21.2833 17 21 17H18V19C18 19.55 17.8042 20.0208 17.4125 20.4125C17.0208 20.8042 16.55 21 16 21H8ZM20 15V11C20 10.7167 19.9042 10.4792 19.7125 10.2875C19.5208 10.0958 19.2833 10 19 10H5C4.71667 10 4.47917 10.0958 4.2875 10.2875C4.09583 10.4792 4 10.7167 4 11V15H6V13H18V15H20Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        person
+        print
       </span>
     </li>
     <li
@@ -1861,13 +1773,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
+          d="M11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18ZM12 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 20ZM12.1 7.7C12.5167 7.7 12.8792 7.83333 13.1875 8.1C13.4958 8.36667 13.65 8.7 13.65 9.1C13.65 9.46667 13.5375 9.79167 13.3125 10.075C13.0875 10.3583 12.8333 10.625 12.55 10.875C12.1667 11.2083 11.8292 11.575 11.5375 11.975C11.2458 12.375 11.1 12.825 11.1 13.325C11.1 13.5583 11.1875 13.7542 11.3625 13.9125C11.5375 14.0708 11.7417 14.15 11.975 14.15C12.225 14.15 12.4375 14.0667 12.6125 13.9C12.7875 13.7333 12.9 13.525 12.95 13.275C13.0167 12.925 13.1667 12.6125 13.4 12.3375C13.6333 12.0625 13.8833 11.8 14.15 11.55C14.5333 11.1833 14.8625 10.7833 15.1375 10.35C15.4125 9.91667 15.55 9.43333 15.55 8.9C15.55 8.05 15.2042 7.35417 14.5125 6.8125C13.8208 6.27083 13.0167 6 12.1 6C11.4667 6 10.8625 6.13333 10.2875 6.4C9.7125 6.66667 9.275 7.075 8.975 7.625C8.85833 7.825 8.82083 8.0375 8.8625 8.2625C8.90417 8.4875 9.01667 8.65833 9.2 8.775C9.43333 8.90833 9.675 8.95 9.925 8.9C10.175 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9625 8.03333 11.2375 7.9C11.5125 7.76667 11.8 7.7 12.1 7.7Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        person-add
+        question-mark-encircled
       </span>
     </li>
     <li
@@ -1881,13 +1793,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11.525 18.0252C11.1917 18.2418 10.8542 18.2543 10.5125 18.0627C10.1708 17.871 10 17.5752 10 17.1752V6.82518C10 6.42518 10.1708 6.12935 10.5125 5.93768C10.8542 5.74602 11.1917 5.75852 11.525 5.97518L19.675 11.1502C19.975 11.3502 20.125 11.6335 20.125 12.0002C20.125 12.3669 19.975 12.6502 19.675 12.8502L11.525 18.0252ZM12 15.3502L17.25 12.0002L12 8.65018V15.3502Z"
+          d="M16.2 9.9998H9.9C8.85 9.9998 7.9375 10.3331 7.1625 10.9998C6.3875 11.6665 6 12.4998 6 13.4998C6 14.4998 6.3875 15.3331 7.1625 15.9998C7.9375 16.6665 8.85 16.9998 9.9 16.9998H16C16.2833 16.9998 16.5208 17.0956 16.7125 17.2873C16.9042 17.479 17 17.7165 17 17.9998C17 18.2831 16.9042 18.5206 16.7125 18.7123C16.5208 18.904 16.2833 18.9998 16 18.9998H9.9C8.28333 18.9998 6.89583 18.4748 5.7375 17.4248C4.57917 16.3748 4 15.0665 4 13.4998C4 11.9331 4.57917 10.6248 5.7375 9.5748C6.89583 8.5248 8.28333 7.9998 9.9 7.9998H16.2L14.3 6.0998C14.1167 5.91647 14.025 5.68314 14.025 5.3998C14.025 5.11647 14.1167 4.88314 14.3 4.6998C14.4833 4.51647 14.7167 4.4248 15 4.4248C15.2833 4.4248 15.5167 4.51647 15.7 4.6998L19.3 8.2998C19.4 8.3998 19.4708 8.50814 19.5125 8.6248C19.5542 8.74147 19.575 8.86647 19.575 8.9998C19.575 9.13314 19.5542 9.25814 19.5125 9.3748C19.4708 9.49147 19.4 9.5998 19.3 9.6998L15.7 13.2998C15.5167 13.4831 15.2833 13.5748 15 13.5748C14.7167 13.5748 14.4833 13.4831 14.3 13.2998C14.1167 13.1165 14.025 12.8831 14.025 12.5998C14.025 12.3165 14.1167 12.0831 14.3 11.8998L16.2 9.9998Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        play-arrow
+        redo
       </span>
     </li>
     <li
@@ -1901,13 +1813,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M16 8V5H8V8H6V4C6 3.71667 6.09583 3.47917 6.2875 3.2875C6.47917 3.09583 6.71667 3 7 3H17C17.2833 3 17.5208 3.09583 17.7125 3.2875C17.9042 3.47917 18 3.71667 18 4V8H16ZM18 12.5C18.2833 12.5 18.5208 12.4042 18.7125 12.2125C18.9042 12.0208 19 11.7833 19 11.5C19 11.2167 18.9042 10.9792 18.7125 10.7875C18.5208 10.5958 18.2833 10.5 18 10.5C17.7167 10.5 17.4792 10.5958 17.2875 10.7875C17.0958 10.9792 17 11.2167 17 11.5C17 11.7833 17.0958 12.0208 17.2875 12.2125C17.4792 12.4042 17.7167 12.5 18 12.5ZM8 19H16V15H8V19ZM8 21C7.45 21 6.97917 20.8042 6.5875 20.4125C6.19583 20.0208 6 19.55 6 19V17H3C2.71667 17 2.47917 16.9042 2.2875 16.7125C2.09583 16.5208 2 16.2833 2 16V11C2 10.15 2.29167 9.4375 2.875 8.8625C3.45833 8.2875 4.16667 8 5 8H19C19.85 8 20.5625 8.2875 21.1375 8.8625C21.7125 9.4375 22 10.15 22 11V16C22 16.2833 21.9042 16.5208 21.7125 16.7125C21.5208 16.9042 21.2833 17 21 17H18V19C18 19.55 17.8042 20.0208 17.4125 20.4125C17.0208 20.8042 16.55 21 16 21H8ZM20 15V11C20 10.7167 19.9042 10.4792 19.7125 10.2875C19.5208 10.0958 19.2833 10 19 10H5C4.71667 10 4.47917 10.0958 4.2875 10.2875C4.09583 10.4792 4 10.7167 4 11V15H6V13H18V15H20Z"
+          d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        print
+        remove
       </span>
     </li>
     <li
@@ -1921,13 +1833,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7 18C6.71667 18 6.47917 17.9042 6.2875 17.7125C6.09583 17.5208 6 17.2833 6 17V15H19V6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V19.575C22 20.025 21.7958 20.3375 21.3875 20.5125C20.9792 20.6875 20.6167 20.6167 20.3 20.3L18 18H7ZM6 13L3.7 15.3C3.38333 15.6167 3.02083 15.6875 2.6125 15.5125C2.20417 15.3375 2 15.025 2 14.575V3C2 2.71667 2.09583 2.47917 2.2875 2.2875C2.47917 2.09583 2.71667 2 3 2H16C16.2833 2 16.5208 2.09583 16.7125 2.2875C16.9042 2.47917 17 2.71667 17 3V12C17 12.2833 16.9042 12.5208 16.7125 12.7125C16.5208 12.9042 16.2833 13 16 13H6ZM15 11V4H4V11H15Z"
+          d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        question-answer
+        search
       </span>
     </li>
     <li
@@ -1941,13 +1853,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
+          d="M5 20V14C5 13.45 5.19583 12.9792 5.5875 12.5875C5.97917 12.1958 6.45 12 7 12H8V10H7C6.45 10 5.97917 9.80417 5.5875 9.4125C5.19583 9.02083 5 8.55 5 8V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V8C19 8.55 18.8042 9.02083 18.4125 9.4125C18.0208 9.80417 17.55 10 17 10H16V12H17C17.55 12 18.0208 12.1958 18.4125 12.5875C18.8042 12.9792 19 13.45 19 14V20C19 20.2833 18.9042 20.5208 18.7125 20.7125C18.5208 20.9042 18.2833 21 18 21C17.7167 21 17.4792 20.9042 17.2875 20.7125C17.0958 20.5208 17 20.2833 17 20V18H7V20C7 20.2833 6.90417 20.5208 6.7125 20.7125C6.52083 20.9042 6.28333 21 6 21C5.71667 21 5.47917 20.9042 5.2875 20.7125C5.09583 20.5208 5 20.2833 5 20ZM7 8H17V5H7V8ZM10 12H14V10H10V12ZM7 16H17V14H7V16Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        radio-selected
+        seat
       </span>
     </li>
     <li
@@ -1961,13 +1873,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
+          d="M19.8 12.9252L4.4 19.4252C4.06667 19.5585 3.75 19.5294 3.45 19.3377C3.15 19.146 3 18.8669 3 18.5002V5.50022C3 5.13355 3.15 4.85438 3.45 4.66272C3.75 4.47105 4.06667 4.44188 4.4 4.57522L19.8 11.0752C20.2167 11.2585 20.425 11.5669 20.425 12.0002C20.425 12.4335 20.2167 12.7419 19.8 12.9252ZM5 17.0002L16.85 12.0002L5 7.00022V10.5002L11 12.0002L5 13.5002V17.0002Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        radio-unselected
+        send
       </span>
     </li>
     <li
@@ -1981,13 +1893,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19.125 15.1248C18.9417 14.9415 18.8458 14.7081 18.8375 14.4248C18.8292 14.1415 18.9167 13.8831 19.1 13.6498C19.6167 13.0165 20.0208 12.304 20.3125 11.5123C20.6042 10.7206 20.75 9.88314 20.75 8.9998C20.75 8.13314 20.6042 7.30814 20.3125 6.5248C20.0208 5.74147 19.6167 5.03314 19.1 4.3998C18.9167 4.16647 18.825 3.90814 18.825 3.6248C18.825 3.34147 18.925 3.0998 19.125 2.8998C19.3583 2.66647 19.6375 2.5498 19.9625 2.5498C20.2875 2.5498 20.55 2.66647 20.75 2.8998C21.45 3.7498 22 4.69147 22.4 5.7248C22.8 6.75814 23 7.8498 23 8.9998C23 10.1498 22.8 11.2415 22.4 12.2748C22 13.3081 21.45 14.2498 20.75 15.0998C20.55 15.3331 20.2875 15.454 19.9625 15.4623C19.6375 15.4706 19.3583 15.3581 19.125 15.1248ZM15.9 11.8998C15.7167 11.7165 15.6125 11.479 15.5875 11.1873C15.5625 10.8956 15.6333 10.6081 15.8 10.3248C15.9167 10.1248 16.0042 9.9123 16.0625 9.6873C16.1208 9.4623 16.15 9.23314 16.15 8.9998C16.15 8.76647 16.1208 8.5373 16.0625 8.3123C16.0042 8.0873 15.9167 7.8748 15.8 7.6748C15.6333 7.39147 15.5625 7.10397 15.5875 6.8123C15.6125 6.52064 15.7167 6.28314 15.9 6.0998C16.1333 5.86647 16.4167 5.75397 16.75 5.7623C17.0833 5.77064 17.3417 5.8998 17.525 6.1498C17.8083 6.56647 18.0333 7.0123 18.2 7.4873C18.3667 7.9623 18.45 8.46647 18.45 8.9998C18.45 9.53314 18.3667 10.0373 18.2 10.5123C18.0333 10.9873 17.8083 11.4331 17.525 11.8498C17.3417 12.0998 17.0833 12.229 16.75 12.2373C16.4167 12.2456 16.1333 12.1331 15.9 11.8998ZM9 12.9998C7.9 12.9998 6.95833 12.6081 6.175 11.8248C5.39167 11.0415 5 10.0998 5 8.9998C5 7.8998 5.39167 6.95814 6.175 6.1748C6.95833 5.39147 7.9 4.9998 9 4.9998C10.1 4.9998 11.0417 5.39147 11.825 6.1748C12.6083 6.95814 13 7.8998 13 8.9998C13 10.0998 12.6083 11.0415 11.825 11.8248C11.0417 12.6081 10.1 12.9998 9 12.9998ZM2 20.9998C1.71667 20.9998 1.47917 20.904 1.2875 20.7123C1.09583 20.5206 1 20.2831 1 19.9998V18.1998C1 17.6498 1.14167 17.1331 1.425 16.6498C1.70833 16.1665 2.1 15.7998 2.6 15.5498C3.45 15.1165 4.40833 14.7498 5.475 14.4498C6.54167 14.1498 7.71667 13.9998 9 13.9998C10.2833 13.9998 11.4583 14.1498 12.525 14.4498C13.5917 14.7498 14.55 15.1165 15.4 15.5498C15.9 15.7998 16.2917 16.1665 16.575 16.6498C16.8583 17.1331 17 17.6498 17 18.1998V19.9998C17 20.2831 16.9042 20.5206 16.7125 20.7123C16.5208 20.904 16.2833 20.9998 16 20.9998H2ZM3 18.9998H15V18.1998C15 18.0165 14.9542 17.8498 14.8625 17.6998C14.7708 17.5498 14.65 17.4331 14.5 17.3498C13.9 17.0498 13.1292 16.7498 12.1875 16.4498C11.2458 16.1498 10.1833 15.9998 9 15.9998C7.81667 15.9998 6.75417 16.1498 5.8125 16.4498C4.87083 16.7498 4.1 17.0498 3.5 17.3498C3.35 17.4331 3.22917 17.5498 3.1375 17.6998C3.04583 17.8498 3 18.0165 3 18.1998V18.9998ZM9 10.9998C9.55 10.9998 10.0208 10.804 10.4125 10.4123C10.8042 10.0206 11 9.5498 11 8.9998C11 8.4498 10.8042 7.97897 10.4125 7.5873C10.0208 7.19564 9.55 6.9998 9 6.9998C8.45 6.9998 7.97917 7.19564 7.5875 7.5873C7.19583 7.97897 7 8.4498 7 8.9998C7 9.5498 7.19583 10.0206 7.5875 10.4123C7.97917 10.804 8.45 10.9998 9 10.9998Z"
+          d="M13.875 22H10.125C9.875 22 9.65834 21.9167 9.475 21.75C9.29167 21.5833 9.18333 21.375 9.15 21.125L8.85 18.8C8.63334 18.7167 8.42917 18.6167 8.2375 18.5C8.04584 18.3833 7.85834 18.2583 7.675 18.125L5.5 19.025C5.26667 19.1083 5.03333 19.1167 4.8 19.05C4.56667 18.9833 4.38334 18.8417 4.25 18.625L2.4 15.4C2.26667 15.1833 2.225 14.95 2.275 14.7C2.325 14.45 2.45 14.25 2.65 14.1L4.525 12.675C4.50834 12.5583 4.5 12.4458 4.5 12.3375V11.6625C4.5 11.5542 4.50834 11.4417 4.525 11.325L2.65 9.9C2.45 9.75 2.325 9.55 2.275 9.3C2.225 9.05 2.26667 8.81667 2.4 8.6L4.25 5.375C4.36667 5.14167 4.54584 4.99583 4.7875 4.9375C5.02917 4.87917 5.26667 4.89167 5.5 4.975L7.675 5.875C7.85834 5.74167 8.05 5.61667 8.25 5.5C8.45 5.38333 8.65 5.28333 8.85 5.2L9.15 2.875C9.18333 2.625 9.29167 2.41667 9.475 2.25C9.65834 2.08333 9.875 2 10.125 2H13.875C14.125 2 14.3417 2.08333 14.525 2.25C14.7083 2.41667 14.8167 2.625 14.85 2.875L15.15 5.2C15.3667 5.28333 15.5708 5.38333 15.7625 5.5C15.9542 5.61667 16.1417 5.74167 16.325 5.875L18.5 4.975C18.7333 4.89167 18.9667 4.88333 19.2 4.95C19.4333 5.01667 19.6167 5.15833 19.75 5.375L21.6 8.6C21.7333 8.81667 21.775 9.05 21.725 9.3C21.675 9.55 21.55 9.75 21.35 9.9L19.475 11.325C19.4917 11.4417 19.5 11.5542 19.5 11.6625V12.3375C19.5 12.4458 19.4833 12.5583 19.45 12.675L21.325 14.1C21.525 14.25 21.65 14.45 21.7 14.7C21.75 14.95 21.7083 15.1833 21.575 15.4L19.725 18.6C19.5917 18.8167 19.4042 18.9625 19.1625 19.0375C18.9208 19.1125 18.6833 19.1083 18.45 19.025L16.325 18.125C16.1417 18.2583 15.95 18.3833 15.75 18.5C15.55 18.6167 15.35 18.7167 15.15 18.8L14.85 21.125C14.8167 21.375 14.7083 21.5833 14.525 21.75C14.3417 21.9167 14.125 22 13.875 22ZM12.05 15.5C13.0167 15.5 13.8417 15.1583 14.525 14.475C15.2083 13.7917 15.55 12.9667 15.55 12C15.55 11.0333 15.2083 10.2083 14.525 9.525C13.8417 8.84167 13.0167 8.5 12.05 8.5C11.0667 8.5 10.2375 8.84167 9.5625 9.525C8.8875 10.2083 8.55 11.0333 8.55 12C8.55 12.9667 8.8875 13.7917 9.5625 14.475C10.2375 15.1583 11.0667 15.5 12.05 15.5ZM12.05 13.5C11.6333 13.5 11.2792 13.3542 10.9875 13.0625C10.6958 12.7708 10.55 12.4167 10.55 12C10.55 11.5833 10.6958 11.2292 10.9875 10.9375C11.2792 10.6458 11.6333 10.5 12.05 10.5C12.4667 10.5 12.8208 10.6458 13.1125 10.9375C13.4042 11.2292 13.55 11.5833 13.55 12C13.55 12.4167 13.4042 12.7708 13.1125 13.0625C12.8208 13.3542 12.4667 13.5 12.05 13.5ZM11 20H12.975L13.325 17.35C13.8417 17.2167 14.3208 17.0208 14.7625 16.7625C15.2042 16.5042 15.6083 16.1917 15.975 15.825L18.45 16.85L19.425 15.15L17.275 13.525C17.3583 13.2917 17.4167 13.0458 17.45 12.7875C17.4833 12.5292 17.5 12.2667 17.5 12C17.5 11.7333 17.4833 11.4708 17.45 11.2125C17.4167 10.9542 17.3583 10.7083 17.275 10.475L19.425 8.85L18.45 7.15L15.975 8.2C15.6083 7.81667 15.2042 7.49583 14.7625 7.2375C14.3208 6.97917 13.8417 6.78333 13.325 6.65L13 4H11.025L10.675 6.65C10.1583 6.78333 9.67917 6.97917 9.2375 7.2375C8.79584 7.49583 8.39167 7.80833 8.025 8.175L5.55 7.15L4.575 8.85L6.725 10.45C6.64167 10.7 6.58333 10.95 6.55 11.2C6.51667 11.45 6.5 11.7167 6.5 12C6.5 12.2667 6.51667 12.525 6.55 12.775C6.58333 13.025 6.64167 13.275 6.725 13.525L4.575 15.15L5.55 16.85L8.025 15.8C8.39167 16.1833 8.79584 16.5042 9.2375 16.7625C9.67917 17.0208 10.1583 17.2167 10.675 17.35L11 20Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        record-voice-over
+        settings
       </span>
     </li>
     <li
@@ -2001,13 +1913,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z"
+          d="M18 22C17.1667 22 16.4583 21.7083 15.875 21.125C15.2917 20.5417 15 19.8333 15 19C15 18.8833 15.0083 18.7625 15.025 18.6375C15.0417 18.5125 15.0667 18.4 15.1 18.3L8.05 14.2C7.76667 14.45 7.45 14.6458 7.1 14.7875C6.75 14.9292 6.38333 15 6 15C5.16667 15 4.45833 14.7083 3.875 14.125C3.29167 13.5417 3 12.8333 3 12C3 11.1667 3.29167 10.4583 3.875 9.875C4.45833 9.29167 5.16667 9 6 9C6.38333 9 6.75 9.07083 7.1 9.2125C7.45 9.35417 7.76667 9.55 8.05 9.8L15.1 5.7C15.0667 5.6 15.0417 5.4875 15.025 5.3625C15.0083 5.2375 15 5.11667 15 5C15 4.16667 15.2917 3.45833 15.875 2.875C16.4583 2.29167 17.1667 2 18 2C18.8333 2 19.5417 2.29167 20.125 2.875C20.7083 3.45833 21 4.16667 21 5C21 5.83333 20.7083 6.54167 20.125 7.125C19.5417 7.70833 18.8333 8 18 8C17.6167 8 17.25 7.92917 16.9 7.7875C16.55 7.64583 16.2333 7.45 15.95 7.2L8.9 11.3C8.93333 11.4 8.95833 11.5125 8.975 11.6375C8.99167 11.7625 9 11.8833 9 12C9 12.1167 8.99167 12.2375 8.975 12.3625C8.95833 12.4875 8.93333 12.6 8.9 12.7L15.95 16.8C16.2333 16.55 16.55 16.3542 16.9 16.2125C17.25 16.0708 17.6167 16 18 16C18.8333 16 19.5417 16.2917 20.125 16.875C20.7083 17.4583 21 18.1667 21 19C21 19.8333 20.7083 20.5417 20.125 21.125C19.5417 21.7083 18.8333 22 18 22ZM18 6C18.2833 6 18.5208 5.90417 18.7125 5.7125C18.9042 5.52083 19 5.28333 19 5C19 4.71667 18.9042 4.47917 18.7125 4.2875C18.5208 4.09583 18.2833 4 18 4C17.7167 4 17.4792 4.09583 17.2875 4.2875C17.0958 4.47917 17 4.71667 17 5C17 5.28333 17.0958 5.52083 17.2875 5.7125C17.4792 5.90417 17.7167 6 18 6ZM6 13C6.28333 13 6.52083 12.9042 6.7125 12.7125C6.90417 12.5208 7 12.2833 7 12C7 11.7167 6.90417 11.4792 6.7125 11.2875C6.52083 11.0958 6.28333 11 6 11C5.71667 11 5.47917 11.0958 5.2875 11.2875C5.09583 11.4792 5 11.7167 5 12C5 12.2833 5.09583 12.5208 5.2875 12.7125C5.47917 12.9042 5.71667 13 6 13ZM18 20C18.2833 20 18.5208 19.9042 18.7125 19.7125C18.9042 19.5208 19 19.2833 19 19C19 18.7167 18.9042 18.4792 18.7125 18.2875C18.5208 18.0958 18.2833 18 18 18C17.7167 18 17.4792 18.0958 17.2875 18.2875C17.0958 18.4792 17 18.7167 17 19C17 19.2833 17.0958 19.5208 17.2875 19.7125C17.4792 19.9042 17.7167 20 18 20Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        remove
+        share
       </span>
     </li>
     <li
@@ -2021,13 +1933,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24.21-.34.1-.79-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z"
+          d="M19.46 7.99953L20.25 6.24953L22 5.45953C22.39 5.27953 22.39 4.72953 22 4.54953L20.25 3.75953L19.46 1.99953C19.28 1.60953 18.73 1.60953 18.55 1.99953L17.76 3.74953L16 4.53953C15.61 4.71953 15.61 5.26953 16 5.44953L17.75 6.23953L18.54 7.99953C18.72 8.38953 19.28 8.38953 19.46 7.99953ZM11.5 9.49953L9.91 5.99953C9.56 5.21953 8.44 5.21953 8.09 5.99953L6.5 9.49953L3 11.0895C2.22 11.4495 2.22 12.5595 3 12.9095L6.5 14.4995L8.09 17.9995C8.45 18.7795 9.56 18.7795 9.91 17.9995L11.5 14.4995L15 12.9095C15.78 12.5495 15.78 11.4395 15 11.0895L11.5 9.49953ZM18.54 15.9995L17.75 17.7495L16 18.5395C15.61 18.7195 15.61 19.2695 16 19.4495L17.75 20.2395L18.54 21.9995C18.72 22.3895 19.27 22.3895 19.45 21.9995L20.24 20.2495L22 19.4595C22.39 19.2795 22.39 18.7295 22 18.5495L20.25 17.7595L19.46 15.9995C19.28 15.6095 18.72 15.6095 18.54 15.9995Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        schedule
+        sparkles
       </span>
     </li>
     <li
@@ -2041,13 +1953,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 20.7254C11.8333 20.7254 11.6708 20.7046 11.5125 20.6629C11.3542 20.6212 11.2 20.5587 11.05 20.4754L6.05001 17.7754C5.71668 17.5921 5.45835 17.3462 5.27501 17.0379C5.09168 16.7296 5.00001 16.3837 5.00001 16.0004V11.2004L2.60001 9.87539C2.41668 9.77539 2.28335 9.65039 2.20001 9.50039C2.11668 9.35039 2.07501 9.18372 2.07501 9.00039C2.07501 8.81706 2.11668 8.65039 2.20001 8.50039C2.28335 8.35039 2.41668 8.22539 2.60001 8.12539L11.05 3.52539C11.2 3.44206 11.3542 3.37956 11.5125 3.33789C11.6708 3.29622 11.8333 3.27539 12 3.27539C12.1667 3.27539 12.3292 3.29622 12.4875 3.33789C12.6458 3.37956 12.8 3.44206 12.95 3.52539L22.475 8.72539C22.6417 8.80872 22.7708 8.92956 22.8625 9.08789C22.9542 9.24622 23 9.41706 23 9.60039V16.0004C23 16.2837 22.9042 16.5212 22.7125 16.7129C22.5208 16.9046 22.2833 17.0004 22 17.0004C21.7167 17.0004 21.4792 16.9046 21.2875 16.7129C21.0958 16.5212 21 16.2837 21 16.0004V10.1004L19 11.2004V16.0004C19 16.3837 18.9083 16.7296 18.725 17.0379C18.5417 17.3462 18.2833 17.5921 17.95 17.7754L12.95 20.4754C12.8 20.5587 12.6458 20.6212 12.4875 20.6629C12.3292 20.7046 12.1667 20.7254 12 20.7254ZM12 12.7004L18.85 9.00039L12 5.30039L5.15001 9.00039L12 12.7004ZM12 18.7254L17 16.0254V12.2504L12.975 14.4754C12.825 14.5587 12.6667 14.6212 12.5 14.6629C12.3333 14.7046 12.1667 14.7254 12 14.7254C11.8333 14.7254 11.6667 14.7046 11.5 14.6629C11.3333 14.6212 11.175 14.5587 11.025 14.4754L7.00001 12.2504V16.0254L12 18.7254Z"
+          d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        school
+        star
       </span>
     </li>
     <li
@@ -2061,13 +1973,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+          d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        search
+        star-filled
       </span>
     </li>
     <li
@@ -2081,13 +1993,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19.8 12.9252L4.4 19.4252C4.06667 19.5585 3.75 19.5294 3.45 19.3377C3.15 19.146 3 18.8669 3 18.5002V5.50022C3 5.13355 3.15 4.85438 3.45 4.66272C3.75 4.47105 4.06667 4.44188 4.4 4.57522L19.8 11.0752C20.2167 11.2585 20.425 11.5669 20.425 12.0002C20.425 12.4335 20.2167 12.7419 19.8 12.9252ZM5 17.0002L16.85 12.0002L5 7.00022V10.5002L11 12.0002L5 13.5002V17.0002Z"
+          d="M14 18.1748V11.9998C14 11.7165 14.0958 11.479 14.2875 11.2873C14.4792 11.0956 14.7167 10.9998 15 10.9998C15.2833 10.9998 15.5208 11.0956 15.7125 11.2873C15.9042 11.479 16 11.7165 16 11.9998V18.1748L17.875 16.2998C18.0583 16.1165 18.2875 16.0206 18.5625 16.0123C18.8375 16.004 19.075 16.0998 19.275 16.2998C19.475 16.4831 19.5792 16.7123 19.5875 16.9873C19.5958 17.2623 19.5 17.4998 19.3 17.6998L15.7 21.2998C15.6 21.3998 15.4917 21.4706 15.375 21.5123C15.2583 21.554 15.1333 21.5748 15 21.5748C14.8667 21.5748 14.7417 21.554 14.625 21.5123C14.5083 21.4706 14.4 21.3998 14.3 21.2998L10.7 17.6998C10.5167 17.5165 10.425 17.2873 10.425 17.0123C10.425 16.7373 10.525 16.4998 10.725 16.2998C10.925 16.1165 11.1583 16.0206 11.425 16.0123C11.6917 16.004 11.925 16.0998 12.125 16.2998L14 18.1748ZM8 5.8248L6.125 7.6998C5.90834 7.91647 5.66667 8.01647 5.4 7.9998C5.13334 7.98314 4.90834 7.88314 4.725 7.6998C4.525 7.4998 4.425 7.2623 4.425 6.9873C4.425 6.7123 4.51667 6.48314 4.7 6.2998L8.3 2.6998C8.4 2.5998 8.50834 2.52897 8.625 2.4873C8.74167 2.44564 8.86667 2.4248 9 2.4248C9.13334 2.4248 9.25834 2.44564 9.375 2.4873C9.49167 2.52897 9.6 2.5998 9.7 2.6998L13.3 6.2998C13.4833 6.48314 13.575 6.71647 13.575 6.9998C13.575 7.28314 13.4833 7.51647 13.3 7.6998C13.1 7.8998 12.8625 7.9998 12.5875 7.9998C12.3125 7.9998 12.075 7.8998 11.875 7.6998L10 5.8248V11.9998C10 12.2831 9.90417 12.5206 9.7125 12.7123C9.52084 12.904 9.28334 12.9998 9 12.9998C8.71667 12.9998 8.47917 12.904 8.2875 12.7123C8.09584 12.5206 8 12.2831 8 11.9998V5.8248Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        send
+        swap-vertical
       </span>
     </li>
     <li
@@ -2100,24 +2012,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="15.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <circle
-          cx="8.5"
-          cy="9.5"
-          r="1.5"
-        />
         <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-1.9 0-3.63.97-4.65 2.58-.22.35-.11.81.24 1.03.35.22.81.11 1.03-.24.74-1.18 2-1.88 3.38-1.88s2.64.7 3.38 1.88c.14.23.39.35.64.35.14 0 .27-.04.4-.11.35-.22.46-.68.24-1.03C15.63 14.96 13.9 14 12 14z"
+          d="M13 17H5C4.45 17 4 17.45 4 18C4 18.55 4.45 19 5 19H13C13.55 19 14 18.55 14 18C14 17.45 13.55 17 13 17ZM19 9H5C4.45 9 4 9.45 4 10C4 10.55 4.45 11 5 11H19C19.55 11 20 10.55 20 10C20 9.45 19.55 9 19 9ZM5 15H19C19.55 15 20 14.55 20 14C20 13.45 19.55 13 19 13H5C4.45 13 4 13.45 4 14C4 14.55 4.45 15 5 15ZM4 6C4 6.55 4.45 7 5 7H19C19.55 7 20 6.55 20 6C20 5.45 19.55 5 19 5H5C4.45 5 4 5.45 4 6Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        sentiment-dissatisfied
+        text-long
       </span>
     </li>
     <li
@@ -2130,24 +2032,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="15.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <circle
-          cx="8.5"
-          cy="9.5"
-          r="1.5"
-        />
         <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4.41-6.11c-.35-.22-.82-.11-1.03.24-.74 1.17-2 1.87-3.38 1.87s-2.64-.7-3.38-1.88c-.22-.35-.68-.46-1.03-.24-.35.22-.46.68-.24 1.03C8.37 16.54 10.1 17.5 12 17.5s3.63-.97 4.65-2.58c.22-.35.11-.81-.24-1.03z"
+          d="M5 9H19C19.55 9 20 9.45 20 10C20 10.55 19.55 11 19 11H5C4.45 11 4 10.55 4 10C4 9.45 4.45 9 5 9ZM5 13H13C13.55 13 14 13.45 14 14C14 14.55 13.55 15 13 15H5C4.45 15 4 14.55 4 14C4 13.45 4.45 13 5 13Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        sentiment-satisfied
+        text-short
       </span>
     </li>
     <li
@@ -2157,17 +2049,17 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         aria-hidden="true"
         class="icon icon-grid__icon"
         fill="currentColor"
-        viewBox="0 0 24 24"
+        viewBox="0 0 25 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.88 9.94l.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.89.88c-.29.29-.29.77 0 1.06.29.29.77.29 1.06 0l.53-.53zM12 17.5c2.03 0 3.8-1.11 4.75-2.75.19-.33-.05-.75-.44-.75H7.69c-.38 0-.63.42-.44.75.95 1.64 2.72 2.75 4.75 2.75zm1.53-7.03c.29.29.77.29 1.06 0l.53-.53.53.53c.29.29.77.29 1.06 0 .29-.29.29-.77 0-1.06l-.88-.88c-.39-.39-1.02-.39-1.41 0l-.88.88c-.3.29-.3.77-.01 1.06zM11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+          d="M2 13C1.46667 13 1 12.8 0.6 12.4C0.2 12 0 11.5333 0 11V9C0 8.88333 0.0166667 8.75833 0.05 8.625C0.0833333 8.49167 0.116667 8.36667 0.15 8.25L3.15 1.2C3.3 0.866667 3.55 0.583333 3.9 0.35C4.25 0.116667 4.61667 0 5 0H16V13L10 18.95C9.75 19.2 9.45417 19.3458 9.1125 19.3875C8.77083 19.4292 8.44167 19.3667 8.125 19.2C7.80833 19.0333 7.575 18.8 7.425 18.5C7.275 18.2 7.24167 17.8917 7.325 17.575L8.45 13H2ZM14 12.15V2H5L2 9V11H11L9.65 16.5L14 12.15ZM19 0C19.55 0 20.0208 0.195833 20.4125 0.5875C20.8042 0.979167 21 1.45 21 2V11C21 11.55 20.8042 12.0208 20.4125 12.4125C20.0208 12.8042 19.55 13 19 13H16V11H19V2H16V0H19Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        sentiment-very-satisfied
+        thumb-down
       </span>
     </li>
     <li
@@ -2177,17 +2069,17 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         aria-hidden="true"
         class="icon icon-grid__icon"
         fill="currentColor"
-        viewBox="0 0 24 24"
+        viewBox="0 0 25 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8 25C7.71666 25 7.47916 24.9042 7.2875 24.7125C7.09583 24.5208 7 24.2833 7 24C7 23.7167 7.09583 23.4792 7.2875 23.2875C7.47916 23.0958 7.71666 23 8 23C8.28333 23 8.52083 23.0958 8.7125 23.2875C8.90416 23.4792 9 23.7167 9 24C9 24.2833 8.90416 24.5208 8.7125 24.7125C8.52083 24.9042 8.28333 25 8 25ZM12 25C11.7167 25 11.4792 24.9042 11.2875 24.7125C11.0958 24.5208 11 24.2833 11 24C11 23.7167 11.0958 23.4792 11.2875 23.2875C11.4792 23.0958 11.7167 23 12 23C12.2833 23 12.5208 23.0958 12.7125 23.2875C12.9042 23.4792 13 23.7167 13 24C13 24.2833 12.9042 24.5208 12.7125 24.7125C12.5208 24.9042 12.2833 25 12 25ZM16 25C15.7167 25 15.4792 24.9042 15.2875 24.7125C15.0958 24.5208 15 24.2833 15 24C15 23.7167 15.0958 23.4792 15.2875 23.2875C15.4792 23.0958 15.7167 23 16 23C16.2833 23 16.5208 23.0958 16.7125 23.2875C16.9042 23.4792 17 23.7167 17 24C17 24.2833 16.9042 24.5208 16.7125 24.7125C16.5208 24.9042 16.2833 25 16 25ZM12 15C11.1667 15 10.4583 14.7083 9.875 14.125C9.29166 13.5417 9 12.8333 9 12V6C9 5.16667 9.29166 4.45833 9.875 3.875C10.4583 3.29167 11.1667 3 12 3C12.8333 3 13.5417 3.29167 14.125 3.875C14.7083 4.45833 15 5.16667 15 6V12C15 12.8333 14.7083 13.5417 14.125 14.125C13.5417 14.7083 12.8333 15 12 15ZM12 22C11.7167 22 11.4792 21.9042 11.2875 21.7125C11.0958 21.5208 11 21.2833 11 21V18.9C9.45 18.7 8.13333 18.0583 7.05 16.975C5.96666 15.8917 5.30833 14.5917 5.075 13.075C5.025 12.7917 5.1 12.5417 5.3 12.325C5.5 12.1083 5.76666 12 6.1 12C6.33333 12 6.54166 12.0875 6.725 12.2625C6.90833 12.4375 7.025 12.65 7.075 12.9C7.29166 14.0667 7.85833 15.0417 8.775 15.825C9.69166 16.6083 10.7667 17 12 17C13.2333 17 14.3083 16.6083 15.225 15.825C16.1417 15.0417 16.7083 14.0667 16.925 12.9C16.975 12.65 17.0958 12.4375 17.2875 12.2625C17.4792 12.0875 17.6917 12 17.925 12C18.2417 12 18.5 12.1083 18.7 12.325C18.9 12.5417 18.975 12.7917 18.925 13.075C18.6917 14.5917 18.0333 15.8917 16.95 16.975C15.8667 18.0583 14.55 18.7 13 18.9V21C13 21.2833 12.9042 21.5208 12.7125 21.7125C12.5208 21.9042 12.2833 22 12 22ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V6C13 5.71667 12.9042 5.47917 12.7125 5.2875C12.5208 5.09583 12.2833 5 12 5C11.7167 5 11.4792 5.09583 11.2875 5.2875C11.0958 5.47917 11 5.71667 11 6V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13Z"
+          d="M5 19.9996V6.99961L11 1.04961C11.25 0.799609 11.5458 0.653776 11.8875 0.612109C12.2292 0.570443 12.5583 0.632943 12.875 0.799609C13.1917 0.966276 13.425 1.19961 13.575 1.49961C13.725 1.79961 13.7583 2.10794 13.675 2.42461L12.55 6.99961H19C19.5333 6.99961 20 7.19961 20.4 7.59961C20.8 7.99961 21 8.46628 21 8.99961V10.9996C21 11.1163 20.9833 11.2413 20.95 11.3746C20.9167 11.5079 20.8833 11.6329 20.85 11.7496L17.85 18.7996C17.7 19.1329 17.45 19.4163 17.1 19.6496C16.75 19.8829 16.3833 19.9996 16 19.9996H5ZM7 7.84961V17.9996H16L19 10.9996V8.99961H10L11.35 3.49961L7 7.84961ZM2 19.9996C1.45 19.9996 0.979167 19.8038 0.5875 19.4121C0.195833 19.0204 0 18.5496 0 17.9996V8.99961C0 8.44961 0.195833 7.97878 0.5875 7.58711C0.979167 7.19544 1.45 6.99961 2 6.99961H5V8.99961H2V17.9996H5V19.9996H2Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        settings-voice
+        thumb-up
       </span>
     </li>
     <li
@@ -2201,13 +2093,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M13.875 22H10.125C9.875 22 9.65834 21.9167 9.475 21.75C9.29167 21.5833 9.18333 21.375 9.15 21.125L8.85 18.8C8.63334 18.7167 8.42917 18.6167 8.2375 18.5C8.04584 18.3833 7.85834 18.2583 7.675 18.125L5.5 19.025C5.26667 19.1083 5.03333 19.1167 4.8 19.05C4.56667 18.9833 4.38334 18.8417 4.25 18.625L2.4 15.4C2.26667 15.1833 2.225 14.95 2.275 14.7C2.325 14.45 2.45 14.25 2.65 14.1L4.525 12.675C4.50834 12.5583 4.5 12.4458 4.5 12.3375V11.6625C4.5 11.5542 4.50834 11.4417 4.525 11.325L2.65 9.9C2.45 9.75 2.325 9.55 2.275 9.3C2.225 9.05 2.26667 8.81667 2.4 8.6L4.25 5.375C4.36667 5.14167 4.54584 4.99583 4.7875 4.9375C5.02917 4.87917 5.26667 4.89167 5.5 4.975L7.675 5.875C7.85834 5.74167 8.05 5.61667 8.25 5.5C8.45 5.38333 8.65 5.28333 8.85 5.2L9.15 2.875C9.18333 2.625 9.29167 2.41667 9.475 2.25C9.65834 2.08333 9.875 2 10.125 2H13.875C14.125 2 14.3417 2.08333 14.525 2.25C14.7083 2.41667 14.8167 2.625 14.85 2.875L15.15 5.2C15.3667 5.28333 15.5708 5.38333 15.7625 5.5C15.9542 5.61667 16.1417 5.74167 16.325 5.875L18.5 4.975C18.7333 4.89167 18.9667 4.88333 19.2 4.95C19.4333 5.01667 19.6167 5.15833 19.75 5.375L21.6 8.6C21.7333 8.81667 21.775 9.05 21.725 9.3C21.675 9.55 21.55 9.75 21.35 9.9L19.475 11.325C19.4917 11.4417 19.5 11.5542 19.5 11.6625V12.3375C19.5 12.4458 19.4833 12.5583 19.45 12.675L21.325 14.1C21.525 14.25 21.65 14.45 21.7 14.7C21.75 14.95 21.7083 15.1833 21.575 15.4L19.725 18.6C19.5917 18.8167 19.4042 18.9625 19.1625 19.0375C18.9208 19.1125 18.6833 19.1083 18.45 19.025L16.325 18.125C16.1417 18.2583 15.95 18.3833 15.75 18.5C15.55 18.6167 15.35 18.7167 15.15 18.8L14.85 21.125C14.8167 21.375 14.7083 21.5833 14.525 21.75C14.3417 21.9167 14.125 22 13.875 22ZM12.05 15.5C13.0167 15.5 13.8417 15.1583 14.525 14.475C15.2083 13.7917 15.55 12.9667 15.55 12C15.55 11.0333 15.2083 10.2083 14.525 9.525C13.8417 8.84167 13.0167 8.5 12.05 8.5C11.0667 8.5 10.2375 8.84167 9.5625 9.525C8.8875 10.2083 8.55 11.0333 8.55 12C8.55 12.9667 8.8875 13.7917 9.5625 14.475C10.2375 15.1583 11.0667 15.5 12.05 15.5ZM12.05 13.5C11.6333 13.5 11.2792 13.3542 10.9875 13.0625C10.6958 12.7708 10.55 12.4167 10.55 12C10.55 11.5833 10.6958 11.2292 10.9875 10.9375C11.2792 10.6458 11.6333 10.5 12.05 10.5C12.4667 10.5 12.8208 10.6458 13.1125 10.9375C13.4042 11.2292 13.55 11.5833 13.55 12C13.55 12.4167 13.4042 12.7708 13.1125 13.0625C12.8208 13.3542 12.4667 13.5 12.05 13.5ZM11 20H12.975L13.325 17.35C13.8417 17.2167 14.3208 17.0208 14.7625 16.7625C15.2042 16.5042 15.6083 16.1917 15.975 15.825L18.45 16.85L19.425 15.15L17.275 13.525C17.3583 13.2917 17.4167 13.0458 17.45 12.7875C17.4833 12.5292 17.5 12.2667 17.5 12C17.5 11.7333 17.4833 11.4708 17.45 11.2125C17.4167 10.9542 17.3583 10.7083 17.275 10.475L19.425 8.85L18.45 7.15L15.975 8.2C15.6083 7.81667 15.2042 7.49583 14.7625 7.2375C14.3208 6.97917 13.8417 6.78333 13.325 6.65L13 4H11.025L10.675 6.65C10.1583 6.78333 9.67917 6.97917 9.2375 7.2375C8.79584 7.49583 8.39167 7.80833 8.025 8.175L5.55 7.15L4.575 8.85L6.725 10.45C6.64167 10.7 6.58333 10.95 6.55 11.2C6.51667 11.45 6.5 11.7167 6.5 12C6.5 12.2667 6.51667 12.525 6.55 12.775C6.58333 13.025 6.64167 13.275 6.725 13.525L4.575 15.15L5.55 16.85L8.025 15.8C8.39167 16.1833 8.79584 16.5042 9.2375 16.7625C9.67917 17.0208 10.1583 17.2167 10.675 17.35L11 20Z"
+          d="M7 2C6.71667 2 6.47917 1.90417 6.2875 1.7125C6.09583 1.52083 6 1.28333 6 1C6 0.716667 6.09583 0.479167 6.2875 0.2875C6.47917 0.0958333 6.71667 0 7 0H11C11.2833 0 11.5208 0.0958333 11.7125 0.2875C11.9042 0.479167 12 0.716667 12 1C12 1.28333 11.9042 1.52083 11.7125 1.7125C11.5208 1.90417 11.2833 2 11 2H7ZM9 13C9.28333 13 9.52083 12.9042 9.7125 12.7125C9.90417 12.5208 10 12.2833 10 12V8C10 7.71667 9.90417 7.47917 9.7125 7.2875C9.52083 7.09583 9.28333 7 9 7C8.71667 7 8.47917 7.09583 8.2875 7.2875C8.09583 7.47917 8 7.71667 8 8V12C8 12.2833 8.09583 12.5208 8.2875 12.7125C8.47917 12.9042 8.71667 13 9 13ZM9 21C7.76667 21 6.60417 20.7625 5.5125 20.2875C4.42083 19.8125 3.46667 19.1667 2.65 18.35C1.83333 17.5333 1.1875 16.5792 0.7125 15.4875C0.2375 14.3958 0 13.2333 0 12C0 10.7667 0.2375 9.60417 0.7125 8.5125C1.1875 7.42083 1.83333 6.46667 2.65 5.65C3.46667 4.83333 4.42083 4.1875 5.5125 3.7125C6.60417 3.2375 7.76667 3 9 3C10.0333 3 11.025 3.16667 11.975 3.5C12.925 3.83333 13.8167 4.31667 14.65 4.95L15.35 4.25C15.5333 4.06667 15.7667 3.975 16.05 3.975C16.3333 3.975 16.5667 4.06667 16.75 4.25C16.9333 4.43333 17.025 4.66667 17.025 4.95C17.025 5.23333 16.9333 5.46667 16.75 5.65L16.05 6.35C16.6833 7.18333 17.1667 8.075 17.5 9.025C17.8333 9.975 18 10.9667 18 12C18 13.2333 17.7625 14.3958 17.2875 15.4875C16.8125 16.5792 16.1667 17.5333 15.35 18.35C14.5333 19.1667 13.5792 19.8125 12.4875 20.2875C11.3958 20.7625 10.2333 21 9 21ZM9 19C10.9333 19 12.5833 18.3167 13.95 16.95C15.3167 15.5833 16 13.9333 16 12C16 10.0667 15.3167 8.41667 13.95 7.05C12.5833 5.68333 10.9333 5 9 5C7.06667 5 5.41667 5.68333 4.05 7.05C2.68333 8.41667 2 10.0667 2 12C2 13.9333 2.68333 15.5833 4.05 16.95C5.41667 18.3167 7.06667 19 9 19Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        settings
+        timer
       </span>
     </li>
     <li
@@ -2221,13 +2113,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18 22C17.1667 22 16.4583 21.7083 15.875 21.125C15.2917 20.5417 15 19.8333 15 19C15 18.8833 15.0083 18.7625 15.025 18.6375C15.0417 18.5125 15.0667 18.4 15.1 18.3L8.05 14.2C7.76667 14.45 7.45 14.6458 7.1 14.7875C6.75 14.9292 6.38333 15 6 15C5.16667 15 4.45833 14.7083 3.875 14.125C3.29167 13.5417 3 12.8333 3 12C3 11.1667 3.29167 10.4583 3.875 9.875C4.45833 9.29167 5.16667 9 6 9C6.38333 9 6.75 9.07083 7.1 9.2125C7.45 9.35417 7.76667 9.55 8.05 9.8L15.1 5.7C15.0667 5.6 15.0417 5.4875 15.025 5.3625C15.0083 5.2375 15 5.11667 15 5C15 4.16667 15.2917 3.45833 15.875 2.875C16.4583 2.29167 17.1667 2 18 2C18.8333 2 19.5417 2.29167 20.125 2.875C20.7083 3.45833 21 4.16667 21 5C21 5.83333 20.7083 6.54167 20.125 7.125C19.5417 7.70833 18.8333 8 18 8C17.6167 8 17.25 7.92917 16.9 7.7875C16.55 7.64583 16.2333 7.45 15.95 7.2L8.9 11.3C8.93333 11.4 8.95833 11.5125 8.975 11.6375C8.99167 11.7625 9 11.8833 9 12C9 12.1167 8.99167 12.2375 8.975 12.3625C8.95833 12.4875 8.93333 12.6 8.9 12.7L15.95 16.8C16.2333 16.55 16.55 16.3542 16.9 16.2125C17.25 16.0708 17.6167 16 18 16C18.8333 16 19.5417 16.2917 20.125 16.875C20.7083 17.4583 21 18.1667 21 19C21 19.8333 20.7083 20.5417 20.125 21.125C19.5417 21.7083 18.8333 22 18 22ZM18 6C18.2833 6 18.5208 5.90417 18.7125 5.7125C18.9042 5.52083 19 5.28333 19 5C19 4.71667 18.9042 4.47917 18.7125 4.2875C18.5208 4.09583 18.2833 4 18 4C17.7167 4 17.4792 4.09583 17.2875 4.2875C17.0958 4.47917 17 4.71667 17 5C17 5.28333 17.0958 5.52083 17.2875 5.7125C17.4792 5.90417 17.7167 6 18 6ZM6 13C6.28333 13 6.52083 12.9042 6.7125 12.7125C6.90417 12.5208 7 12.2833 7 12C7 11.7167 6.90417 11.4792 6.7125 11.2875C6.52083 11.0958 6.28333 11 6 11C5.71667 11 5.47917 11.0958 5.2875 11.2875C5.09583 11.4792 5 11.7167 5 12C5 12.2833 5.09583 12.5208 5.2875 12.7125C5.47917 12.9042 5.71667 13 6 13ZM18 20C18.2833 20 18.5208 19.9042 18.7125 19.7125C18.9042 19.5208 19 19.2833 19 19C19 18.7167 18.9042 18.4792 18.7125 18.2875C18.5208 18.0958 18.2833 18 18 18C17.7167 18 17.4792 18.0958 17.2875 18.2875C17.0958 18.4792 17 18.7167 17 19C17 19.2833 17.0958 19.5208 17.2875 19.7125C17.4792 19.9042 17.7167 20 18 20Z"
+          d="M18.95 16.15L17.45 14.65C17.6333 14.2 17.7708 13.7542 17.8625 13.3125C17.9542 12.8708 18 12.4333 18 12C18 10.0667 17.3167 8.41667 15.95 7.05C14.5833 5.68333 12.9333 5 11 5C10.6 5 10.175 5.04167 9.725 5.125C9.275 5.20833 8.80833 5.34167 8.325 5.525L6.825 4.025C7.45833 3.69167 8.12916 3.4375 8.8375 3.2625C9.54583 3.0875 10.2667 3 11 3C12 3 12.9792 3.16667 13.9375 3.5C14.8958 3.83333 15.8 4.31667 16.65 4.95L17.35 4.25C17.5333 4.06667 17.7667 3.975 18.05 3.975C18.3333 3.975 18.5667 4.06667 18.75 4.25C18.9333 4.43333 19.025 4.66667 19.025 4.95C19.025 5.23333 18.9333 5.46667 18.75 5.65L18.05 6.35C18.6833 7.2 19.1667 8.10417 19.5 9.0625C19.8333 10.0208 20 11 20 12C20 12.7 19.9125 13.3958 19.7375 14.0875C19.5625 14.7792 19.3 15.4667 18.95 16.15ZM12 9.2V8C12 7.71667 11.9042 7.47917 11.7125 7.2875C11.5208 7.09583 11.2833 7 11 7C10.8333 7 10.6792 7.03333 10.5375 7.1C10.3958 7.16667 10.2833 7.26667 10.2 7.4L12 9.2ZM11 21C9.76666 21 8.60416 20.7625 7.5125 20.2875C6.42083 19.8125 5.46666 19.1667 4.65 18.35C3.83333 17.5333 3.1875 16.5792 2.7125 15.4875C2.2375 14.3958 2 13.2333 2 12C2 11 2.15416 10.0375 2.4625 9.1125C2.77083 8.1875 3.21666 7.35 3.8 6.6L1.1 3.9C0.916664 3.71667 0.824997 3.48333 0.824997 3.2C0.824997 2.91667 0.916664 2.68333 1.1 2.5C1.28333 2.31667 1.51666 2.225 1.8 2.225C2.08333 2.225 2.31666 2.31667 2.5 2.5L19.5 19.5C19.6833 19.6833 19.775 19.9167 19.775 20.2C19.775 20.4833 19.6833 20.7167 19.5 20.9C19.3167 21.0833 19.0833 21.175 18.8 21.175C18.5167 21.175 18.2833 21.0833 18.1 20.9L16.4 19.2C15.6 19.7833 14.7375 20.2292 13.8125 20.5375C12.8875 20.8458 11.95 21 11 21ZM11 19C11.7 19 12.3833 18.8917 13.05 18.675C13.7167 18.4583 14.3417 18.15 14.925 17.75L5.2 8.025C4.8 8.60833 4.5 9.23333 4.3 9.9C4.1 10.5667 4 11.2667 4 12C4 13.9333 4.68333 15.5833 6.05 16.95C7.41666 18.3167 9.06666 19 11 19ZM9 2C8.71666 2 8.47916 1.90417 8.2875 1.7125C8.09583 1.52083 8 1.28333 8 1C8 0.716667 8.09583 0.479167 8.2875 0.2875C8.47916 0.0958333 8.71666 0 9 0H13C13.2833 0 13.5208 0.0958333 13.7125 0.2875C13.9042 0.479167 14 0.716667 14 1C14 1.28333 13.9042 1.52083 13.7125 1.7125C13.5208 1.90417 13.2833 2 13 2H9Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        share-custom
+        timer-off
       </span>
     </li>
     <li
@@ -2241,13 +2133,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9.2 19.8748C8.03333 19.6581 6.9 19.2831 5.8 18.7498C4.7 18.2165 3.72083 17.4748 2.8625 16.5248C2.00417 15.5748 1.3125 14.3998 0.7875 12.9998C0.2625 11.5998 0 9.93314 0 7.9998V7.7998C0 7.56647 0.075 7.3748 0.225 7.2248C0.375 7.0748 0.566667 6.9998 0.8 6.9998H1C1.85 6.9998 2.725 7.10814 3.625 7.3248C4.525 7.54147 5.36667 7.86647 6.15 8.2998C6.33333 7.06647 6.7 5.7998 7.25 4.4998C7.8 3.1998 8.45833 2.0248 9.225 0.974805C9.425 0.691471 9.68333 0.549805 10 0.549805C10.3167 0.549805 10.575 0.691471 10.775 0.974805C11.5417 2.0248 12.2 3.1998 12.75 4.4998C13.3 5.7998 13.6667 7.06647 13.85 8.2998C14.6333 7.86647 15.475 7.54147 16.375 7.3248C17.275 7.10814 18.15 6.9998 19 6.9998H19.1C19.35 6.9998 19.5625 7.0873 19.7375 7.2623C19.9125 7.4373 20 7.6498 20 7.8998V7.9998C20 9.93314 19.7375 11.5998 19.2125 12.9998C18.6875 14.3998 17.9958 15.5748 17.1375 16.5248C16.2792 17.4748 15.3 18.2165 14.2 18.7498C13.1 19.2831 11.9667 19.6581 10.8 19.8748C10.5833 19.9081 10.3167 19.9248 10 19.9248C9.68333 19.9248 9.41667 19.9081 9.2 19.8748ZM9.95 17.9498C9.76667 15.1998 8.9375 13.1123 7.4625 11.6873C5.9875 10.2623 4.18333 9.38314 2.05 9.0498C2.01667 9.0498 2.01667 9.0498 2.05 9.0498C2.23333 11.8665 3.0875 13.9831 4.6125 15.3998C6.1375 16.8165 7.91667 17.6665 9.95 17.9498C9.98333 17.9665 9.98333 17.9706 9.95 17.9623C9.91667 17.954 9.91667 17.9498 9.95 17.9498ZM8.05 9.44981C8.38333 9.73314 8.73333 10.0706 9.1 10.4623C9.46667 10.854 9.76667 11.2331 10 11.5998C10.25 11.2331 10.5542 10.854 10.9125 10.4623C11.2708 10.0706 11.6167 9.73314 11.95 9.44981C11.9167 8.4998 11.7292 7.50814 11.3875 6.4748C11.0458 5.44147 10.5833 4.43314 10 3.4498C9.41667 4.43314 8.95417 5.44147 8.6125 6.4748C8.27083 7.50814 8.08333 8.4998 8.05 9.44981ZM11.1 13.6998C11.3 14.2331 11.4708 14.8165 11.6125 15.4498C11.7542 16.0831 11.8667 16.7665 11.95 17.4998C12.55 17.2998 13.1833 16.9998 13.85 16.5998C14.5167 16.1998 15.1333 15.6665 15.7 14.9998C16.2667 14.3331 16.7583 13.5123 17.175 12.5373C17.5917 11.5623 17.85 10.3998 17.95 9.0498C17.95 9.01647 17.95 9.01647 17.95 9.0498C16.3833 9.28314 15.0083 9.80397 13.825 10.6123C12.6417 11.4206 11.7333 12.4498 11.1 13.6998Z"
+          d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6C4.71667 6 4.47917 5.90417 4.2875 5.7125C4.09583 5.52083 4 5.28333 4 5C4 4.71667 4.09583 4.47917 4.2875 4.2875C4.47917 4.09583 4.71667 4 5 4H9C9 3.71667 9.09583 3.47917 9.2875 3.2875C9.47917 3.09583 9.71667 3 10 3H14C14.2833 3 14.5208 3.09583 14.7125 3.2875C14.9042 3.47917 15 3.71667 15 4H19C19.2833 4 19.5208 4.09583 19.7125 4.2875C19.9042 4.47917 20 4.71667 20 5C20 5.28333 19.9042 5.52083 19.7125 5.7125C19.5208 5.90417 19.2833 6 19 6V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM7 6V19H17V6H7ZM9 16C9 16.2833 9.09583 16.5208 9.2875 16.7125C9.47917 16.9042 9.71667 17 10 17C10.2833 17 10.5208 16.9042 10.7125 16.7125C10.9042 16.5208 11 16.2833 11 16V9C11 8.71667 10.9042 8.47917 10.7125 8.2875C10.5208 8.09583 10.2833 8 10 8C9.71667 8 9.47917 8.09583 9.2875 8.2875C9.09583 8.47917 9 8.71667 9 9V16ZM13 16C13 16.2833 13.0958 16.5208 13.2875 16.7125C13.4792 16.9042 13.7167 17 14 17C14.2833 17 14.5208 16.9042 14.7125 16.7125C14.9042 16.5208 15 16.2833 15 16V9C15 8.71667 14.9042 8.47917 14.7125 8.2875C14.5208 8.09583 14.2833 8 14 8C13.7167 8 13.4792 8.09583 13.2875 8.2875C13.0958 8.47917 13 8.71667 13 9V16Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        spa
+        trash
       </span>
     </li>
     <li
@@ -2257,17 +2149,17 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         aria-hidden="true"
         class="icon icon-grid__icon"
         fill="currentColor"
-        viewBox="0 0 32 32"
+        viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M16 30.9995C11.726 30.9995 7.708 29.3355 4.686 26.3135C1.664 23.2915 0 19.2735 0 14.9995C0 11.9735 0.849 9.02652 2.456 6.47752C4.019 3.99952 6.227 1.99752 8.842 0.686523L10.186 3.36852C8.06 4.43352 6.264 6.06152 4.994 8.07652C3.689 10.1455 3 12.5385 3 14.9985C3 22.1665 8.832 27.9985 16 27.9985C23.168 27.9985 29 22.1665 29 14.9985C29 12.5395 28.31 10.1455 27.006 8.07652C25.735 6.06152 23.94 4.43352 21.814 3.36852L23.158 0.686523C25.773 1.99652 27.982 3.99952 29.544 6.47752C31.151 9.02652 32 11.9725 32 14.9995C32 19.2735 30.336 23.2915 27.314 26.3135C24.292 29.3355 20.274 30.9995 16 30.9995Z"
+          d="M2.7 17.3C2.51667 17.1167 2.425 16.8875 2.425 16.6125C2.425 16.3375 2.51667 16.1 2.7 15.9L8.7 9.85C8.8 9.76667 8.90833 9.7 9.025 9.65C9.14167 9.6 9.26667 9.575 9.4 9.575C9.53333 9.575 9.6625 9.6 9.7875 9.65C9.9125 9.7 10.0167 9.76667 10.1 9.85L13.4 13.15L18.6 8H17C16.7167 8 16.4792 7.90417 16.2875 7.7125C16.0958 7.52083 16 7.28333 16 7C16 6.71667 16.0958 6.47917 16.2875 6.2875C16.4792 6.09583 16.7167 6 17 6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V11C22 11.2833 21.9042 11.5208 21.7125 11.7125C21.5208 11.9042 21.2833 12 21 12C20.7167 12 20.4792 11.9042 20.2875 11.7125C20.0958 11.5208 20 11.2833 20 11V9.4L14.1 15.3C14 15.4 13.8917 15.4708 13.775 15.5125C13.6583 15.5542 13.5333 15.575 13.4 15.575C13.2667 15.575 13.1417 15.5542 13.025 15.5125C12.9083 15.4708 12.8 15.4 12.7 15.3L9.4 12L4.075 17.325C3.89167 17.5083 3.66667 17.6 3.4 17.6C3.13333 17.6 2.9 17.5 2.7 17.3Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        spinner
+        trend-up
       </span>
     </li>
     <li
@@ -2281,13 +2173,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10 12.95L12.775 15.05C12.975 15.1833 13.175 15.1875 13.375 15.0625C13.575 14.9375 13.6333 14.7583 13.55 14.525L12.5 11.05L15.225 9.1C15.425 8.95 15.4833 8.7625 15.4 8.5375C15.3167 8.3125 15.1583 8.2 14.925 8.2H11.6L10.475 4.55C10.3917 4.31667 10.2333 4.2 10 4.2C9.76667 4.2 9.60833 4.31667 9.525 4.55L8.4 8.2H5.075C4.84167 8.2 4.68333 8.3125 4.6 8.5375C4.51667 8.7625 4.575 8.95 4.775 9.1L7.5 11.05L6.45 14.525C6.36667 14.7583 6.425 14.9375 6.625 15.0625C6.825 15.1875 7.025 15.1833 7.225 15.05L10 12.95ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2167 18 14.1042 17.2208 15.6625 15.6625C17.2208 14.1042 18 12.2167 18 10C18 7.78333 17.2208 5.89583 15.6625 4.3375C14.1042 2.77917 12.2167 2 10 2C7.78333 2 5.89583 2.77917 4.3375 4.3375C2.77917 5.89583 2 7.78333 2 10C2 12.2167 2.77917 14.1042 4.3375 15.6625C5.89583 17.2208 7.78333 18 10 18Z"
+          d="M8 18.9998C7.71667 18.9998 7.47917 18.904 7.2875 18.7123C7.09584 18.5206 7 18.2831 7 17.9998C7 17.7165 7.09584 17.479 7.2875 17.2873C7.47917 17.0956 7.71667 16.9998 8 16.9998H14.1C15.15 16.9998 16.0625 16.6665 16.8375 15.9998C17.6125 15.3331 18 14.4998 18 13.4998C18 12.4998 17.6125 11.6665 16.8375 10.9998C16.0625 10.3331 15.15 9.9998 14.1 9.9998H7.8L9.7 11.8998C9.88334 12.0831 9.975 12.3165 9.975 12.5998C9.975 12.8831 9.88334 13.1165 9.7 13.2998C9.51667 13.4831 9.28334 13.5748 9 13.5748C8.71667 13.5748 8.48334 13.4831 8.3 13.2998L4.7 9.6998C4.6 9.5998 4.52917 9.49147 4.4875 9.3748C4.44584 9.25814 4.425 9.13314 4.425 8.9998C4.425 8.86647 4.44584 8.74147 4.4875 8.6248C4.52917 8.50814 4.6 8.3998 4.7 8.2998L8.3 4.6998C8.48334 4.51647 8.71667 4.4248 9 4.4248C9.28334 4.4248 9.51667 4.51647 9.7 4.6998C9.88334 4.88314 9.975 5.11647 9.975 5.3998C9.975 5.68314 9.88334 5.91647 9.7 6.0998L7.8 7.9998H14.1C15.7167 7.9998 17.1042 8.5248 18.2625 9.5748C19.4208 10.6248 20 11.9331 20 13.4998C20 15.0665 19.4208 16.3748 18.2625 17.4248C17.1042 18.4748 15.7167 18.9998 14.1 18.9998H8Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        star-circle
+        undo
       </span>
     </li>
     <li
@@ -2301,13 +2193,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19.65 9.04l-4.84-.42-1.89-4.45c-.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.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
+          d="M12 5.83l2.46 2.46c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 3.7c-.39-.39-1.02-.39-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 5.83zm0 12.34l-2.46-2.46c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L12 18.17z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        star-outline
+        unfold-more
       </span>
     </li>
     <li
@@ -2321,13 +2213,13 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         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"
+          d="M6 19.9998C5.45 19.9998 4.97917 19.804 4.5875 19.4123C4.19583 19.0206 4 18.5498 4 17.9998V15.9998C4 15.7165 4.09583 15.479 4.2875 15.2873C4.47917 15.0956 4.71667 14.9998 5 14.9998C5.28333 14.9998 5.52083 15.0956 5.7125 15.2873C5.90417 15.479 6 15.7165 6 15.9998V17.9998H18V15.9998C18 15.7165 18.0958 15.479 18.2875 15.2873C18.4792 15.0956 18.7167 14.9998 19 14.9998C19.2833 14.9998 19.5208 15.0956 19.7125 15.2873C19.9042 15.479 20 15.7165 20 15.9998V17.9998C20 18.5498 19.8042 19.0206 19.4125 19.4123C19.0208 19.804 18.55 19.9998 18 19.9998H6ZM11 7.8498L9.125 9.7248C8.925 9.9248 8.6875 10.0206 8.4125 10.0123C8.1375 10.004 7.9 9.8998 7.7 9.6998C7.51667 9.4998 7.42083 9.26647 7.4125 8.9998C7.40417 8.73314 7.5 8.4998 7.7 8.2998L11.3 4.6998C11.4 4.5998 11.5083 4.52897 11.625 4.4873C11.7417 4.44564 11.8667 4.4248 12 4.4248C12.1333 4.4248 12.2583 4.44564 12.375 4.4873C12.4917 4.52897 12.6 4.5998 12.7 4.6998L16.3 8.2998C16.5 8.4998 16.5958 8.73314 16.5875 8.9998C16.5792 9.26647 16.4833 9.4998 16.3 9.6998C16.1 9.8998 15.8625 10.004 15.5875 10.0123C15.3125 10.0206 15.075 9.9248 14.875 9.7248L13 7.8498V14.9998C13 15.2831 12.9042 15.5206 12.7125 15.7123C12.5208 15.904 12.2833 15.9998 12 15.9998C11.7167 15.9998 11.4792 15.904 11.2875 15.7123C11.0958 15.5206 11 15.2831 11 14.9998V7.8498Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        star
+        upload
       </span>
     </li>
     <li
@@ -2341,44 +2233,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.6 11.8L6.45 9.65C6.26667 9.46667 6.03333 9.375 5.75 9.375C5.46667 9.375 5.23333 9.46667 5.05 9.65C4.86667 9.83333 4.775 10.0667 4.775 10.35C4.775 10.6333 4.86667 10.8667 5.05 11.05L7.9 13.9C8.1 14.1 8.33333 14.2 8.6 14.2C8.86667 14.2 9.1 14.1 9.3 13.9L14.95 8.25C15.1333 8.06667 15.225 7.83333 15.225 7.55C15.225 7.26667 15.1333 7.03333 14.95 6.85C14.7667 6.66667 14.5333 6.575 14.25 6.575C13.9667 6.575 13.7333 6.66667 13.55 6.85L8.6 11.8ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-          fill="var(--eds-theme-color-icon-utility-success)"
-        />
-        <path
-          d="M8.6 11.8L6.45 9.65C6.26667 9.46667 6.03333 9.375 5.75 9.375C5.46667 9.375 5.23333 9.46667 5.05 9.65C4.86667 9.83333 4.775 10.0667 4.775 10.35C4.775 10.6333 4.86667 10.8667 5.05 11.05L7.9 13.9C8.1 14.1 8.33333 14.2 8.6 14.2C8.86667 14.2 9.1 14.1 9.3 13.9L14.95 8.25C15.1333 8.06667 15.225 7.83333 15.225 7.55C15.225 7.26667 15.1333 7.03333 14.95 6.85C14.7667 6.66667 14.5333 6.575 14.25 6.575C13.9667 6.575 13.7333 6.66667 13.55 6.85L8.6 11.8Z"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
+          d="M10.275 16L15.85 12.425C16 12.325 16.075 12.1833 16.075 12C16.075 11.8167 16 11.675 15.85 11.575L10.275 8C10.1083 7.88333 9.9375 7.875 9.7625 7.975C9.5875 8.075 9.5 8.225 9.5 8.425V15.575C9.5 15.775 9.5875 15.925 9.7625 16.025C9.9375 16.125 10.1083 16.1167 10.275 16ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V6H4V18Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        status-check-circle
+        video
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        Icons with baked-in colors are not recommended. This will be deprecated.
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -2391,48 +2253,14 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-          fill="var(--eds-theme-color-background-grade-revise-default)"
-        />
-        <path
-          d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-          fill="var(--eds-theme-color-text-neutral-strong)"
-        />
-        <path
-          d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-          fill="var(--eds-theme-color-text-neutral-strong)"
+          d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
         />
       </svg>
       <span
         class="icon-grid__text"
       >
-        status-error
+        warning-filled
       </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
-          />
-          <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        Icons with baked-in colors are not recommended. This will be deprecated.
-      </div>
     </li>
     <li
       class="icon-grid__item"
@@ -2444,342 +2272,43 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-          fill="var(--eds-theme-color-icon-brand-primary)"
-        />
-        <path
-          d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14V10C11 9.71667 10.9042 9.47917 10.7125 9.2875C10.5208 9.09583 10.2833 9 10 9C9.71667 9 9.47917 9.09583 9.2875 9.2875C9.09583 9.47917 9 9.71667 9 10V14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-        />
-        <path
-          d="M10 7C10.2833 7 10.5208 6.90417 10.7125 6.7125C10.9042 6.52083 11 6.28333 11 6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6C9 6.28333 9.09583 6.52083 9.2875 6.7125C9.47917 6.90417 9.71667 7 10 7Z"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        status-info
-      </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
+        <g
+          clip-path="url(#clip0_6658_850)"
         >
           <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
+            d="M21.6 12.2271C21.6 11.518 21.5364 10.8362 21.4182 10.1816H12V14.0498H17.3818C17.15 15.2998 16.4455 16.3589 15.3864 17.068V19.5771H18.6182C20.5091 17.8362 21.6 15.2725 21.6 12.2271Z"
+            fill="#4285F4"
           />
           <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-          <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
-          />
-        </svg>
-        Icons with baked-in colors are not recommended. This will be deprecated.
-      </div>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M1.72497 18C1.54164 18 1.37497 17.9542 1.22497 17.8625C1.07497 17.7708 0.958306 17.65 0.874973 17.5C0.791639 17.35 0.745806 17.1875 0.737473 17.0125C0.729139 16.8375 0.774973 16.6667 0.874973 16.5L10.125 0.5C10.225 0.333333 10.3541 0.208333 10.5125 0.125C10.6708 0.0416667 10.8333 0 11 0C11.1666 0 11.3291 0.0416667 11.4875 0.125C11.6458 0.208333 11.775 0.333333 11.875 0.5L21.125 16.5C21.225 16.6667 21.2708 16.8375 21.2625 17.0125C21.2541 17.1875 21.2083 17.35 21.125 17.5C21.0416 17.65 20.925 17.7708 20.775 17.8625C20.625 17.9542 20.4583 18 20.275 18H1.72497Z"
-          fill="#C64600"
-        />
-        <path
-          d="M11 15C11.2833 15 11.5208 14.9042 11.7125 14.7125C11.9041 14.5208 12 14.2833 12 14C12 13.7167 11.9041 13.4792 11.7125 13.2875C11.5208 13.0958 11.2833 13 11 13C10.7166 13 10.4791 13.0958 10.2875 13.2875C10.0958 13.4792 9.99997 13.7167 9.99997 14C9.99997 14.2833 10.0958 14.5208 10.2875 14.7125C10.4791 14.9042 10.7166 15 11 15Z"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-        />
-        <path
-          d="M11 12C11.2833 12 11.5208 11.9042 11.7125 11.7125C11.9041 11.5208 12 11.2833 12 11V8C12 7.71667 11.9041 7.47917 11.7125 7.2875C11.5208 7.09583 11.2833 7 11 7C10.7166 7 10.4791 7.09583 10.2875 7.2875C10.0958 7.47917 9.99997 7.71667 9.99997 8V11C9.99997 11.2833 10.0958 11.5208 10.2875 11.7125C10.4791 11.9042 10.7166 12 11 12Z"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        status-warning
-      </span>
-      <div
-        class="icon-grid__deprecation"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon icon-grid__deprecation-icon"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
-            fill="var(--eds-theme-color-background-grade-revise-default)"
+            d="M11.9999 22.0004C14.6999 22.0004 16.9635 21.1049 18.618 19.5777L15.3862 17.0686C14.4908 17.6686 13.3453 18.0231 11.9999 18.0231C9.39528 18.0231 7.19078 16.264 6.40438 13.9004H3.06348V16.4913C4.70898 19.7595 8.09078 22.0004 11.9999 22.0004Z"
+            fill="#34A853"
           />
           <path
-            d="M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
+            d="M6.4045 13.8997C6.2045 13.2997 6.0909 12.6588 6.0909 11.9997C6.0909 11.3406 6.2045 10.6997 6.4045 10.0997V7.50879H3.0636C2.3864 8.85879 2 10.3861 2 11.9997C2 13.6133 2.3864 15.1406 3.0636 16.4906L6.4045 13.8997Z"
+            fill="#FBBC04"
           />
           <path
-            d="M10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11Z"
-            fill="var(--eds-theme-color-text-neutral-strong)"
+            d="M11.9999 5.9773C13.468 5.9773 14.7862 6.4818 15.8226 7.4727L18.6908 4.6045C16.959 2.9909 14.6953 2 11.9999 2C8.09078 2 4.70898 4.2409 3.06348 7.5091L6.40438 10.1C7.19078 7.7364 9.39528 5.9773 11.9999 5.9773Z"
+            fill="#E94235"
           />
-        </svg>
-        Icons with baked-in colors are not recommended. This will be deprecated.
-      </div>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10.3 19.8C11.05 18.2833 12.05 17.2708 13.3 16.7625C14.55 16.2542 15.6167 16 16.5 16C16.8833 16 17.2583 16.0333 17.625 16.1C17.9917 16.1667 18.35 16.25 18.7 16.35C19.1 15.7167 19.4167 15.0333 19.65 14.3C19.8833 13.5667 20 12.8 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 12.75 4.09583 13.4667 4.2875 14.15C4.47917 14.8333 4.76667 15.4667 5.15 16.05C5.83333 15.7167 6.54167 15.4583 7.275 15.275C8.00833 15.0917 8.75 15 9.5 15C10.0333 15 10.5458 15.0458 11.0375 15.1375C11.5292 15.2292 12.0167 15.35 12.5 15.5C12.1167 15.7 11.7542 15.9333 11.4125 16.2C11.0708 16.4667 10.75 16.75 10.45 17.05C10.25 17.0167 10.0792 17 9.9375 17H9.5C8.96667 17 8.4375 17.0583 7.9125 17.175C7.3875 17.2917 6.88333 17.4667 6.4 17.7C6.93333 18.2333 7.52917 18.6792 8.1875 19.0375C8.84583 19.3958 9.55 19.65 10.3 19.8ZM12 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 22ZM9.5 13.5C8.53333 13.5 7.70833 13.1583 7.025 12.475C6.34167 11.7917 6 10.9667 6 10C6 9.03333 6.34167 8.20833 7.025 7.525C7.70833 6.84167 8.53333 6.5 9.5 6.5C10.4667 6.5 11.2917 6.84167 11.975 7.525C12.6583 8.20833 13 9.03333 13 10C13 10.9667 12.6583 11.7917 11.975 12.475C11.2917 13.1583 10.4667 13.5 9.5 13.5ZM9.5 11.5C9.91667 11.5 10.2708 11.3542 10.5625 11.0625C10.8542 10.7708 11 10.4167 11 10C11 9.58333 10.8542 9.22917 10.5625 8.9375C10.2708 8.64583 9.91667 8.5 9.5 8.5C9.08333 8.5 8.72917 8.64583 8.4375 8.9375C8.14583 9.22917 8 9.58333 8 10C8 10.4167 8.14583 10.7708 8.4375 11.0625C8.72917 11.3542 9.08333 11.5 9.5 11.5ZM16.5 14.5C15.8 14.5 15.2083 14.2583 14.725 13.775C14.2417 13.2917 14 12.7 14 12C14 11.3 14.2417 10.7083 14.725 10.225C15.2083 9.74167 15.8 9.5 16.5 9.5C17.2 9.5 17.7917 9.74167 18.275 10.225C18.7583 10.7083 19 11.3 19 12C19 12.7 18.7583 13.2917 18.275 13.775C17.7917 14.2583 17.2 14.5 16.5 14.5Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        supervised-user-circle
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 18.1748V11.9998C14 11.7165 14.0958 11.479 14.2875 11.2873C14.4792 11.0956 14.7167 10.9998 15 10.9998C15.2833 10.9998 15.5208 11.0956 15.7125 11.2873C15.9042 11.479 16 11.7165 16 11.9998V18.1748L17.875 16.2998C18.0583 16.1165 18.2875 16.0206 18.5625 16.0123C18.8375 16.004 19.075 16.0998 19.275 16.2998C19.475 16.4831 19.5792 16.7123 19.5875 16.9873C19.5958 17.2623 19.5 17.4998 19.3 17.6998L15.7 21.2998C15.6 21.3998 15.4917 21.4706 15.375 21.5123C15.2583 21.554 15.1333 21.5748 15 21.5748C14.8667 21.5748 14.7417 21.554 14.625 21.5123C14.5083 21.4706 14.4 21.3998 14.3 21.2998L10.7 17.6998C10.5167 17.5165 10.425 17.2873 10.425 17.0123C10.425 16.7373 10.525 16.4998 10.725 16.2998C10.925 16.1165 11.1583 16.0206 11.425 16.0123C11.6917 16.004 11.925 16.0998 12.125 16.2998L14 18.1748ZM8 5.8248L6.125 7.6998C5.90834 7.91647 5.66667 8.01647 5.4 7.9998C5.13334 7.98314 4.90834 7.88314 4.725 7.6998C4.525 7.4998 4.425 7.2623 4.425 6.9873C4.425 6.7123 4.51667 6.48314 4.7 6.2998L8.3 2.6998C8.4 2.5998 8.50834 2.52897 8.625 2.4873C8.74167 2.44564 8.86667 2.4248 9 2.4248C9.13334 2.4248 9.25834 2.44564 9.375 2.4873C9.49167 2.52897 9.6 2.5998 9.7 2.6998L13.3 6.2998C13.4833 6.48314 13.575 6.71647 13.575 6.9998C13.575 7.28314 13.4833 7.51647 13.3 7.6998C13.1 7.8998 12.8625 7.9998 12.5875 7.9998C12.3125 7.9998 12.075 7.8998 11.875 7.6998L10 5.8248V11.9998C10 12.2831 9.90417 12.5206 9.7125 12.7123C9.52084 12.904 9.28334 12.9998 9 12.9998C8.71667 12.9998 8.47917 12.904 8.2875 12.7123C8.09584 12.5206 8 12.2831 8 11.9998V5.8248Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        swap-vert
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 25 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2 13C1.46667 13 1 12.8 0.6 12.4C0.2 12 0 11.5333 0 11V9C0 8.88333 0.0166667 8.75833 0.05 8.625C0.0833333 8.49167 0.116667 8.36667 0.15 8.25L3.15 1.2C3.3 0.866667 3.55 0.583333 3.9 0.35C4.25 0.116667 4.61667 0 5 0H16V13L10 18.95C9.75 19.2 9.45417 19.3458 9.1125 19.3875C8.77083 19.4292 8.44167 19.3667 8.125 19.2C7.80833 19.0333 7.575 18.8 7.425 18.5C7.275 18.2 7.24167 17.8917 7.325 17.575L8.45 13H2ZM14 12.15V2H5L2 9V11H11L9.65 16.5L14 12.15ZM19 0C19.55 0 20.0208 0.195833 20.4125 0.5875C20.8042 0.979167 21 1.45 21 2V11C21 11.55 20.8042 12.0208 20.4125 12.4125C20.0208 12.8042 19.55 13 19 13H16V11H19V2H16V0H19Z"
-        />
+        </g>
+        <defs>
+          <clippath
+            id="clip0_6658_850"
+          >
+            <rect
+              fill="white"
+              height="20"
+              transform="translate(2 2)"
+              width="20"
+            />
+          </clippath>
+        </defs>
       </svg>
       <span
         class="icon-grid__text"
       >
-        thumb-down
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 25 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 19.9996V6.99961L11 1.04961C11.25 0.799609 11.5458 0.653776 11.8875 0.612109C12.2292 0.570443 12.5583 0.632943 12.875 0.799609C13.1917 0.966276 13.425 1.19961 13.575 1.49961C13.725 1.79961 13.7583 2.10794 13.675 2.42461L12.55 6.99961H19C19.5333 6.99961 20 7.19961 20.4 7.59961C20.8 7.99961 21 8.46628 21 8.99961V10.9996C21 11.1163 20.9833 11.2413 20.95 11.3746C20.9167 11.5079 20.8833 11.6329 20.85 11.7496L17.85 18.7996C17.7 19.1329 17.45 19.4163 17.1 19.6496C16.75 19.8829 16.3833 19.9996 16 19.9996H5ZM7 7.84961V17.9996H16L19 10.9996V8.99961H10L11.35 3.49961L7 7.84961ZM2 19.9996C1.45 19.9996 0.979167 19.8038 0.5875 19.4121C0.195833 19.0204 0 18.5496 0 17.9996V8.99961C0 8.44961 0.195833 7.97878 0.5875 7.58711C0.979167 7.19544 1.45 6.99961 2 6.99961H5V8.99961H2V17.9996H5V19.9996H2Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        thumb-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56 C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9 c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07 l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55 C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11 c-0.18,0-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2 c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55 C14.64,12.02,14.82,12,15,12c0.18,0,0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8c0-1.1,0.9-2,2-2S23,6.9,23,8z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        timeline
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M18.95 16.15L17.45 14.65C17.6333 14.2 17.7708 13.7542 17.8625 13.3125C17.9542 12.8708 18 12.4333 18 12C18 10.0667 17.3167 8.41667 15.95 7.05C14.5833 5.68333 12.9333 5 11 5C10.6 5 10.175 5.04167 9.725 5.125C9.275 5.20833 8.80833 5.34167 8.325 5.525L6.825 4.025C7.45833 3.69167 8.12916 3.4375 8.8375 3.2625C9.54583 3.0875 10.2667 3 11 3C12 3 12.9792 3.16667 13.9375 3.5C14.8958 3.83333 15.8 4.31667 16.65 4.95L17.35 4.25C17.5333 4.06667 17.7667 3.975 18.05 3.975C18.3333 3.975 18.5667 4.06667 18.75 4.25C18.9333 4.43333 19.025 4.66667 19.025 4.95C19.025 5.23333 18.9333 5.46667 18.75 5.65L18.05 6.35C18.6833 7.2 19.1667 8.10417 19.5 9.0625C19.8333 10.0208 20 11 20 12C20 12.7 19.9125 13.3958 19.7375 14.0875C19.5625 14.7792 19.3 15.4667 18.95 16.15ZM12 9.2V8C12 7.71667 11.9042 7.47917 11.7125 7.2875C11.5208 7.09583 11.2833 7 11 7C10.8333 7 10.6792 7.03333 10.5375 7.1C10.3958 7.16667 10.2833 7.26667 10.2 7.4L12 9.2ZM11 21C9.76666 21 8.60416 20.7625 7.5125 20.2875C6.42083 19.8125 5.46666 19.1667 4.65 18.35C3.83333 17.5333 3.1875 16.5792 2.7125 15.4875C2.2375 14.3958 2 13.2333 2 12C2 11 2.15416 10.0375 2.4625 9.1125C2.77083 8.1875 3.21666 7.35 3.8 6.6L1.1 3.9C0.916664 3.71667 0.824997 3.48333 0.824997 3.2C0.824997 2.91667 0.916664 2.68333 1.1 2.5C1.28333 2.31667 1.51666 2.225 1.8 2.225C2.08333 2.225 2.31666 2.31667 2.5 2.5L19.5 19.5C19.6833 19.6833 19.775 19.9167 19.775 20.2C19.775 20.4833 19.6833 20.7167 19.5 20.9C19.3167 21.0833 19.0833 21.175 18.8 21.175C18.5167 21.175 18.2833 21.0833 18.1 20.9L16.4 19.2C15.6 19.7833 14.7375 20.2292 13.8125 20.5375C12.8875 20.8458 11.95 21 11 21ZM11 19C11.7 19 12.3833 18.8917 13.05 18.675C13.7167 18.4583 14.3417 18.15 14.925 17.75L5.2 8.025C4.8 8.60833 4.5 9.23333 4.3 9.9C4.1 10.5667 4 11.2667 4 12C4 13.9333 4.68333 15.5833 6.05 16.95C7.41666 18.3167 9.06666 19 11 19ZM9 2C8.71666 2 8.47916 1.90417 8.2875 1.7125C8.09583 1.52083 8 1.28333 8 1C8 0.716667 8.09583 0.479167 8.2875 0.2875C8.47916 0.0958333 8.71666 0 9 0H13C13.2833 0 13.5208 0.0958333 13.7125 0.2875C13.9042 0.479167 14 0.716667 14 1C14 1.28333 13.9042 1.52083 13.7125 1.7125C13.5208 1.90417 13.2833 2 13 2H9Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        timer-off
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7 2C6.71667 2 6.47917 1.90417 6.2875 1.7125C6.09583 1.52083 6 1.28333 6 1C6 0.716667 6.09583 0.479167 6.2875 0.2875C6.47917 0.0958333 6.71667 0 7 0H11C11.2833 0 11.5208 0.0958333 11.7125 0.2875C11.9042 0.479167 12 0.716667 12 1C12 1.28333 11.9042 1.52083 11.7125 1.7125C11.5208 1.90417 11.2833 2 11 2H7ZM9 13C9.28333 13 9.52083 12.9042 9.7125 12.7125C9.90417 12.5208 10 12.2833 10 12V8C10 7.71667 9.90417 7.47917 9.7125 7.2875C9.52083 7.09583 9.28333 7 9 7C8.71667 7 8.47917 7.09583 8.2875 7.2875C8.09583 7.47917 8 7.71667 8 8V12C8 12.2833 8.09583 12.5208 8.2875 12.7125C8.47917 12.9042 8.71667 13 9 13ZM9 21C7.76667 21 6.60417 20.7625 5.5125 20.2875C4.42083 19.8125 3.46667 19.1667 2.65 18.35C1.83333 17.5333 1.1875 16.5792 0.7125 15.4875C0.2375 14.3958 0 13.2333 0 12C0 10.7667 0.2375 9.60417 0.7125 8.5125C1.1875 7.42083 1.83333 6.46667 2.65 5.65C3.46667 4.83333 4.42083 4.1875 5.5125 3.7125C6.60417 3.2375 7.76667 3 9 3C10.0333 3 11.025 3.16667 11.975 3.5C12.925 3.83333 13.8167 4.31667 14.65 4.95L15.35 4.25C15.5333 4.06667 15.7667 3.975 16.05 3.975C16.3333 3.975 16.5667 4.06667 16.75 4.25C16.9333 4.43333 17.025 4.66667 17.025 4.95C17.025 5.23333 16.9333 5.46667 16.75 5.65L16.05 6.35C16.6833 7.18333 17.1667 8.075 17.5 9.025C17.8333 9.975 18 10.9667 18 12C18 13.2333 17.7625 14.3958 17.2875 15.4875C16.8125 16.5792 16.1667 17.5333 15.35 18.35C14.5333 19.1667 13.5792 19.8125 12.4875 20.2875C11.3958 20.7625 10.2333 21 9 21ZM9 19C10.9333 19 12.5833 18.3167 13.95 16.95C15.3167 15.5833 16 13.9333 16 12C16 10.0667 15.3167 8.41667 13.95 7.05C12.5833 5.68333 10.9333 5 9 5C7.06667 5 5.41667 5.68333 4.05 7.05C2.68333 8.41667 2 10.0667 2 12C2 13.9333 2.68333 15.5833 4.05 16.95C5.41667 18.3167 7.06667 19 9 19Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        timer
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.7 17.3C2.51667 17.1167 2.425 16.8875 2.425 16.6125C2.425 16.3375 2.51667 16.1 2.7 15.9L8.7 9.85C8.8 9.76667 8.90833 9.7 9.025 9.65C9.14167 9.6 9.26667 9.575 9.4 9.575C9.53333 9.575 9.6625 9.6 9.7875 9.65C9.9125 9.7 10.0167 9.76667 10.1 9.85L13.4 13.15L18.6 8H17C16.7167 8 16.4792 7.90417 16.2875 7.7125C16.0958 7.52083 16 7.28333 16 7C16 6.71667 16.0958 6.47917 16.2875 6.2875C16.4792 6.09583 16.7167 6 17 6H21C21.2833 6 21.5208 6.09583 21.7125 6.2875C21.9042 6.47917 22 6.71667 22 7V11C22 11.2833 21.9042 11.5208 21.7125 11.7125C21.5208 11.9042 21.2833 12 21 12C20.7167 12 20.4792 11.9042 20.2875 11.7125C20.0958 11.5208 20 11.2833 20 11V9.4L14.1 15.3C14 15.4 13.8917 15.4708 13.775 15.5125C13.6583 15.5542 13.5333 15.575 13.4 15.575C13.2667 15.575 13.1417 15.5542 13.025 15.5125C12.9083 15.4708 12.8 15.4 12.7 15.3L9.4 12L4.075 17.325C3.89167 17.5083 3.66667 17.6 3.4 17.6C3.13333 17.6 2.9 17.5 2.7 17.3Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        trending-up
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 5.83l2.46 2.46c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 3.7c-.39-.39-1.02-.39-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 5.83zm0 12.34l-2.46-2.46c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L12 18.17z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        unfold-more
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 17C4.45 17 3.97917 16.8042 3.5875 16.4125C3.19583 16.0208 3 15.55 3 15V9C3 8.45 3.19583 7.97917 3.5875 7.5875C3.97917 7.19583 4.45 7 5 7H19C19.55 7 20.0208 7.19583 20.4125 7.5875C20.8042 7.97917 21 8.45 21 9V15C21 15.55 20.8042 16.0208 20.4125 16.4125C20.0208 16.8042 19.55 17 19 17H5ZM5 15H19V9H5V15ZM3.975 5C3.69167 5 3.45833 4.90417 3.275 4.7125C3.09167 4.52083 3 4.28333 3 4C3 3.71667 3.09583 3.47917 3.2875 3.2875C3.47917 3.09583 3.71667 3 4 3H20.025C20.3083 3 20.5417 3.09583 20.725 3.2875C20.9083 3.47917 21 3.71667 21 4C21 4.28333 20.9042 4.52083 20.7125 4.7125C20.5208 4.90417 20.2833 5 20 5H3.975ZM3.975 21C3.69167 21 3.45833 20.9042 3.275 20.7125C3.09167 20.5208 3 20.2833 3 20C3 19.7167 3.09583 19.4792 3.2875 19.2875C3.47917 19.0958 3.71667 19 4 19H20.025C20.3083 19 20.5417 19.0958 20.725 19.2875C20.9083 19.4792 21 19.7167 21 20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H3.975Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        view-day
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5 15h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1s.45 1 1 1zm0-8h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1s.45 1 1 1zM4 6c0 .55.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        view-headline
-      </span>
-    </li>
-    <li
-      class="icon-grid__item"
-    >
-      <svg
-        aria-hidden="true"
-        class="icon icon-grid__icon"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3.02499 17V7C3.02499 6.45 3.22083 5.97917 3.61249 5.5875C4.00416 5.19583 4.47499 5 5.02499 5H19C19.55 5 20.0208 5.19583 20.4125 5.5875C20.8042 5.97917 21 6.45 21 7V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19H5.02499C4.47499 19 4.00416 18.8042 3.61249 18.4125C3.22083 18.0208 3.02499 17.55 3.02499 17ZM15.675 11H19V7H15.675V11ZM10.35 11H13.675V7H10.35V11ZM5.02499 11H8.34999V7H5.02499V11ZM5.02499 17H8.34999V13H5.02499V17ZM10.35 17H13.675V13H10.35V17ZM15.675 17H19V13H15.675V17Z"
-        />
-      </svg>
-      <span
-        class="icon-grid__text"
-      >
-        view-module
+        logo-google-polychrome
       </span>
     </li>
     <li
@@ -2792,14 +2321,43 @@ exports[`<Icon /> IconGrid story renders snapshot 1`] = `
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-        />
+        <g
+          clip-path="url(#clip0_6658_733)"
+        >
+          <path
+            d="M11.5236 2.95215H2.95215V11.5236H11.5236V2.95215Z"
+            fill="#F25022"
+          />
+          <path
+            d="M11.5236 12.4766H2.95215V21.048H11.5236V12.4766Z"
+            fill="#00A4EF"
+          />
+          <path
+            d="M21.0475 2.95215H12.4761V11.5236H21.0475V2.95215Z"
+            fill="#7FBA00"
+          />
+          <path
+            d="M21.0475 12.4766H12.4761V21.048H21.0475V12.4766Z"
+            fill="#FFB900"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="clip0_6658_733"
+          >
+            <rect
+              fill="white"
+              height="20"
+              transform="translate(2 2)"
+              width="20"
+            />
+          </clippath>
+        </defs>
       </svg>
       <span
         class="icon-grid__text"
       >
-        warning
+        logo-microsoft-polychrome
       </span>
     </li>
   </ul>
@@ -2822,7 +2380,7 @@ exports[`<Icon /> InText story renders snapshot 1`] = `
       icon with 1em line height
     </title>
     <path
-      d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 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 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z"
+      d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
     />
   </svg>
   ; 1em) by default.
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 9799563bc..f09d75f80 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1,7 +1,2 @@
 export { Icon as default } from './Icon';
 export type { IconName, IconProps } from './Icon';
-export { Icon as IconV2 } from './Icon-v2';
-export type {
-  IconName as IconNameV2,
-  IconProps as IconV2Props,
-} from './Icon-v2';
diff --git a/src/components/InlineNotification/InlineNotification-v2.module.css b/src/components/InlineNotification/InlineNotification-v2.module.css
deleted file mode 100644
index 84cd146bd..000000000
--- a/src/components/InlineNotification/InlineNotification-v2.module.css
+++ /dev/null
@@ -1,50 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # INLINE NOTIFICATION
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * A messaging element that is used inline.
- */
-.inline-notification {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-
-  border: 0.125rem solid;
-  border-left: 0.5rem solid;
-
-  /* NOTE: by specifying no default color for borders, they inherit from color below */
-  &.inline-notification--status-informational {
-    color: var(--eds-theme-color-text-utility-informational);
-    background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
-  }
-
-  &.inline-notification--status-critical {
-    color: var(--eds-theme-color-text-utility-critical);
-    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
-  }
-
-  &.inline-notification--status-favorable {
-    color: var(--eds-theme-color-text-utility-favorable);
-    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
-  }
-
-  &.inline-notification--status-warning {
-    color: var(--eds-theme-color-text-utility-warning);
-    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
-  }
-}
-
-.inline-notification__icon {
-  flex-shrink: 0;
-}
-
-.inline-notification__body {
-  flex-grow: 2;
-}
diff --git a/src/components/InlineNotification/InlineNotification-v2.stories.tsx b/src/components/InlineNotification/InlineNotification-v2.stories.tsx
deleted file mode 100644
index a78d1762d..000000000
--- a/src/components/InlineNotification/InlineNotification-v2.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { InlineNotification } from './InlineNotification-v2';
-
-export default {
-  title: 'Components/V2/InlineNotification',
-  component: InlineNotification,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  args: {
-    title: 'Inline notifications lorem ipsum text',
-    className: 'w-96',
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof InlineNotification>;
-
-export const Default: StoryObj<Args> = {};
-
-export const WithSubTitle: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-    subTitle: 'Additional text which provides additional detail',
-  },
-};
-
-export const WithFormattedSubTitle: StoryObj<Args> = {
-  args: {
-    ...Default.args,
-    subTitle: (
-      <span>
-        <em>Additional text</em> which provides additional detail
-      </span>
-    ),
-  },
-};
-
-export const Favorable: StoryObj<Args> = {
-  args: {
-    ...WithSubTitle.args,
-    status: 'favorable',
-  },
-};
-
-export const Warning: StoryObj<Args> = {
-  args: {
-    ...WithSubTitle.args,
-    status: 'warning',
-  },
-};
-
-export const Critical: StoryObj<Args> = {
-  args: {
-    ...WithSubTitle.args,
-    status: 'critical',
-  },
-};
-
-export const LongText: StoryObj<Args> = {
-  args: {
-    title:
-      '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.',
-  },
-};
diff --git a/src/components/InlineNotification/InlineNotification-v2.test.ts b/src/components/InlineNotification/InlineNotification-v2.test.ts
deleted file mode 100644
index 05231e98c..000000000
--- a/src/components/InlineNotification/InlineNotification-v2.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 './InlineNotification-v2.stories';
-
-describe('<InlineNotification /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx
deleted file mode 100644
index 46550e64b..000000000
--- a/src/components/InlineNotification/InlineNotification-v2.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
-import type { Status } from '../../util/variant-types';
-
-import { IconV2 as Icon } from '../Icon';
-import Text from '../Text';
-
-import styles from './InlineNotification-v2.module.css';
-
-type InlineNotificationProps = {
-  // Component API
-  /**
-   * CSS class names that can be appended to the component for styling.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Keyword to characterize the state of the notification
-   */
-  status?: Status;
-  /**
-   * Secondary text used to describe the content in more detail
-   */
-  subTitle?: React.ReactNode;
-  /**
-   * The title/heading of the component
-   */
-  title: string;
-};
-
-/**
- * `import {InlineNotification} from "@chanzuckerberg/eds";`
- *
- * An alert placed within a section of a page to provide a contextual notification. For example, an error which applies to multiple fields within a form.
- */
-export const InlineNotification = ({
-  className,
-  status = 'informational',
-  subTitle,
-  title,
-  ...other
-}: InlineNotificationProps) => {
-  const componentClassName = clsx(
-    styles['inline-notification'],
-    status && styles[`inline-notification--status-${status}`],
-    className,
-  );
-
-  return (
-    <div className={componentClassName} {...other}>
-      <Icon
-        className={styles['inline-notification__icon']}
-        name={getIconNameFromStatus(status)}
-        purpose="decorative"
-        size="1rem"
-      />
-      <div className={styles['inline-notication__body']}>
-        <Text
-          as="div"
-          className={styles[`inline-notification__title`]}
-          preset="title-xs"
-        >
-          {title}
-        </Text>
-        {subTitle && (
-          <Text as="div" preset="body-xs">
-            {subTitle}
-          </Text>
-        )}
-      </div>
-    </div>
-  );
-};
-
-InlineNotification.displayName = 'InlineNotification';
diff --git a/src/components/InlineNotification/InlineNotification.module.css b/src/components/InlineNotification/InlineNotification.module.css
index ee86302f2..3b3720c45 100644
--- a/src/components/InlineNotification/InlineNotification.module.css
+++ b/src/components/InlineNotification/InlineNotification.module.css
@@ -3,67 +3,48 @@
 /*------------------------------------*\
     # INLINE NOTIFICATION
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * A messaging element that is used inline.
  */
 .inline-notification {
-  display: inline-flex;
-  padding: calc(var(--eds-size-quarter) / 16 * 1rem) calc(var(--eds-size-half) / 16 * 1rem);
-  border-radius: calc(var(--eds-border-radius-md) * 1px);
-}
+  display: flex;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
-/**
- * Icon that sits left of the notification text.
- */
-.inline-notification__icon {
-  /* Retain icon original size and wrap text instead. */
-  flex-shrink: 0; 
-  color: var(--messaging-icon-color);
-}
+  border: calc(var(--eds-size-quarter) / 16 * 1rem) solid;
+  border-left: calc(var(--eds-size-1) / 16 * 1rem) solid;
 
-/**
- * Text that sits right of the icon.
- */
-.inline-notification__text {
-  margin: calc(var(--eds-size-half) / 16 * 1rem);
-}
+  /* NOTE: by specifying no default color for borders, they inherit from color below */
+  &.inline-notification--status-informational {
+    color: var(--eds-theme-color-text-utility-informational);
+    background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+  }
 
-/**
- * Color variants
- */
-.inline-notification--brand {
-  @mixin messagingBrand;
+  &.inline-notification--status-critical {
+    color: var(--eds-theme-color-text-utility-critical);
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
 
-  border: calc(var(--eds-theme-border-width) * 1px) solid
-    var(--eds-theme-color-border-brand-primary-strong);
-}
-.inline-notification--success {
-  @mixin messagingSuccess;
+  &.inline-notification--status-favorable {
+    color: var(--eds-theme-color-text-utility-favorable);
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
 
-  border: calc(var(--eds-theme-border-width) * 1px) solid
-    var(--eds-theme-color-border-utility-success-default);
+  &.inline-notification--status-warning {
+    color: var(--eds-theme-color-text-utility-warning);
+    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+  }
 }
-.inline-notification--warning {
-  @mixin messagingWarning;
 
-  border: calc(var(--eds-theme-border-width) * 1px) solid
-    var(--eds-theme-color-border-utility-warning-strong);
-}
-.inline-notification--subtle {
-  background-color: var(--eds-theme-color-background-neutral-default);
+.inline-notification__icon {
+  flex-shrink: 0;
 }
 
-/**
- * Full width variant of the inline notification.
- */
-.inline-notification--full-width {
-  display: flex;
-  border: 0;
-  border-radius: 0;
-  /*  Accounts for the lack of border in height to make it 44px. */
-  padding: calc(calc(var(--eds-size-1) / 16 * 1rem) + calc(var(--eds-theme-border-width) * 1px)); 
-}
-.inline-notification--full-width-subtle {
-  background-color: var(--eds-theme-color-background-neutral-default);
+.inline-notification__body {
+  flex-grow: 2;
 }
diff --git a/src/components/InlineNotification/InlineNotification.stories.tsx b/src/components/InlineNotification/InlineNotification.stories.tsx
index 037622def..230a4f7ab 100644
--- a/src/components/InlineNotification/InlineNotification.stories.tsx
+++ b/src/components/InlineNotification/InlineNotification.stories.tsx
@@ -1,115 +1,67 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
-import { InlineNotification, VARIANTS } from './InlineNotification';
+
+import { InlineNotification } from './InlineNotification';
 
 export default {
   title: 'Components/InlineNotification',
   component: InlineNotification,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   args: {
-    text: 'Inline notifications lorem ipsum text',
-    variant: 'success' as const,
-  },
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: VARIANTS,
-    },
+    title: 'Inline notifications lorem ipsum text',
+    className: 'w-96',
   },
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof InlineNotification>;
 
-export const Success: StoryObj<Args> = {};
+export const Default: StoryObj<Args> = {};
 
-export const LongText: StoryObj<Args> = {
+export const WithSubTitle: StoryObj<Args> = {
   args: {
-    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.',
+    ...Default.args,
+    subTitle: 'Additional text which provides additional detail',
   },
 };
 
-const getVariants = (optionalArgs: Omit<Args, 'text' | 'variant'> = {}) =>
-  VARIANTS.map((variant) => {
-    return (
-      <InlineNotification
-        key={variant}
-        {...optionalArgs}
-        text={`${variant} inline notification lorem ipsum`}
-        variant={variant}
-      />
-    );
-  });
-
-export const SubtleVariants: StoryObj<Args> = {
-  render: () => (
-    <div
-      style={{
-        display: 'inline-flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      }}
-    >
-      {getVariants()}
-    </div>
-  ),
-};
-
-export const StrongVariants: StoryObj<Args> = {
-  render: () => (
-    <div
-      style={{
-        display: 'inline-flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      }}
-    >
-      {getVariants({ isStrong: true })}
-    </div>
-  ),
+export const WithFormattedSubTitle: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    subTitle: (
+      <span>
+        <em>Additional text</em> which provides additional detail
+      </span>
+    ),
+  },
 };
 
-export const FullWidthSuccess: StoryObj<Args> = {
+export const Favorable: StoryObj<Args> = {
   args: {
-    isFullWidth: true,
+    ...WithSubTitle.args,
+    status: 'favorable',
   },
 };
 
-export const FullWidthLongText: StoryObj<Args> = {
+export const Warning: StoryObj<Args> = {
   args: {
-    isFullWidth: true,
-    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.',
+    ...WithSubTitle.args,
+    status: 'warning',
   },
 };
 
-export const FullWidthVariants: StoryObj<Args> = {
-  render: () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      }}
-    >
-      {getVariants({ isFullWidth: true })}
-    </div>
-  ),
+export const Critical: StoryObj<Args> = {
+  args: {
+    ...WithSubTitle.args,
+    status: 'critical',
+  },
 };
 
-export const FullWidthStrongVariants: StoryObj<Args> = {
-  render: () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      }}
-    >
-      {getVariants({ isFullWidth: true, isStrong: true })}
-    </div>
-  ),
+export const LongText: StoryObj<Args> = {
+  args: {
+    title:
+      '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.',
+  },
 };
diff --git a/src/components/InlineNotification/InlineNotification.tsx b/src/components/InlineNotification/InlineNotification.tsx
index dbe19df68..ad02ab3aa 100644
--- a/src/components/InlineNotification/InlineNotification.tsx
+++ b/src/components/InlineNotification/InlineNotification.tsx
@@ -1,102 +1,75 @@
 import clsx from 'clsx';
 import React from 'react';
-import type { ReactNode } from 'react';
-import Icon, { type IconName } from '../Icon';
-import Text from '../Text';
-import styles from './InlineNotification.module.css';
 
-export const VARIANTS = ['brand', 'success', 'warning'] as const;
+import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
+import type { Status } from '../../util/variant-types';
 
-const variantToIconAssetsMap: {
-  [key in Variant]: {
-    icon: Extract<
-      IconName,
-      'info' | 'check-circle' | 'warning' | 'error-inverted'
-    >;
-    title: 'info' | 'success' | 'alert';
-  };
-} = {
-  brand: {
-    icon: 'info',
-    title: 'info',
-  },
-  success: {
-    icon: 'check-circle',
-    title: 'success',
-  },
-  warning: {
-    icon: 'warning',
-    title: 'alert',
-  },
-};
+import Icon from '../Icon';
+import Text from '../Text';
 
-type Variant = (typeof VARIANTS)[number];
+import styles from './InlineNotification.module.css';
 
-type Props = {
+type InlineNotificationProps = {
+  // Component API
   /**
    * CSS class names that can be appended to the component for styling.
    */
   className?: string;
+  // Design API
   /**
-   * Toggles notification that fills the full width of its container.
+   * Keyword to characterize the state of the notification
    */
-  isFullWidth?: boolean;
+  status?: Status;
   /**
-   * Toggles the stronger background variants.
+   * Secondary text used to describe the content in more detail
    */
-  isStrong?: boolean;
+  subTitle?: React.ReactNode;
   /**
-   * The text contents of the tag, nested inside the component, in addition to the icon.
+   * The title/heading of the component
    */
-  text: ReactNode;
-  /**
-   * The color variant of the tag.
-   */
-  variant: Variant;
+  title: string;
 };
 
 /**
  * `import {InlineNotification} from "@chanzuckerberg/eds";`
  *
- * This component provides an inline banner accompanied with an icon for messaging users.
+ * An alert placed within a section of a page to provide a contextual notification. For example, an error which applies to multiple fields within a form.
  */
 export const InlineNotification = ({
   className,
-  isFullWidth,
-  isStrong,
-  text,
-  variant,
+  status = 'informational',
+  subTitle,
+  title,
   ...other
-}: Props) => {
-  const subtle = !isStrong;
+}: InlineNotificationProps) => {
   const componentClassName = clsx(
     styles['inline-notification'],
-    styles[`inline-notification--${variant}`],
-    subtle && styles['inline-notification--subtle'],
-    isFullWidth && styles[`inline-notification--full-width`],
-    isFullWidth && subtle && styles[`inline-notification--full-width-subtle`],
+    status && styles[`inline-notification--status-${status}`],
     className,
   );
 
-  const iconClassName = clsx(
-    styles['inline-notification__icon'],
-    styles[`inline-notification__icon--${variant}`],
-  );
-
-  const textClassName = clsx(styles[`inline-notification__text`]);
-
   return (
     <div className={componentClassName} {...other}>
       <Icon
-        className={iconClassName}
-        name={variantToIconAssetsMap[variant].icon}
-        purpose="informative"
-        size="1.5rem"
-        title={variantToIconAssetsMap[variant].title}
+        className={styles['inline-notification__icon']}
+        name={getIconNameFromStatus(status)}
+        purpose="decorative"
+        size="1rem"
       />
-      <Text as="span" className={textClassName} preset="label-md-subtle">
-        {text}
-      </Text>
+      <div className={styles['inline-notication__body']}>
+        <Text
+          as="div"
+          className={styles[`inline-notification__title`]}
+          preset="title-xs"
+        >
+          {title}
+        </Text>
+        {subTitle && (
+          <Text as="div" preset="body-xs">
+            {subTitle}
+          </Text>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap
deleted file mode 100644
index 086e3bba5..000000000
--- a/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap
+++ /dev/null
@@ -1,241 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InlineNotification /> (v2) Critical story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-critical w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-    <div
-      class="text text--body-xs"
-    >
-      Additional text which provides additional detail
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) Default story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-informational w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) Favorable story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-favorable w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    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
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-    <div
-      class="text text--body-xs"
-    >
-      Additional text which provides additional detail
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) LongText story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-informational w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      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.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) Warning story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-warning w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-    <div
-      class="text text--body-xs"
-    >
-      Additional text which provides additional detail
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) WithFormattedSubTitle story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-informational w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-    <div
-      class="text text--body-xs"
-    >
-      <span>
-        <em>
-          Additional text
-        </em>
-         which provides additional detail
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InlineNotification /> (v2) WithSubTitle story renders snapshot 1`] = `
-<div
-  class="inline-notification inline-notification--status-informational w-96"
->
-  <svg
-    aria-hidden="true"
-    class="icon inline-notification__icon"
-    fill="currentColor"
-    height="1rem"
-    style="--icon-size: 1rem;"
-    viewBox="0 0 24 24"
-    width="1rem"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
-    />
-  </svg>
-  <div
-    class="inline-notication__body"
-  >
-    <div
-      class="text text--title-xs inline-notification__title"
-    >
-      Inline notifications lorem ipsum text
-    </div>
-    <div
-      class="text text--body-xs"
-    >
-      Additional text which provides additional detail
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
index c54fef784..4e04543da 100644
--- a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
+++ b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap
@@ -1,457 +1,241 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<InlineNotification /> FullWidthLongText story renders snapshot 1`] = `
+exports[`<InlineNotification /> Critical story renders snapshot 1`] = `
 <div
-  class="inline-notification inline-notification--success inline-notification--subtle inline-notification--full-width inline-notification--full-width-subtle"
+  class="inline-notification inline-notification--status-critical w-96"
 >
   <svg
-    class="icon inline-notification__icon inline-notification__icon--success"
+    aria-hidden="true"
+    class="icon inline-notification__icon"
     fill="currentColor"
-    height="1.5rem"
-    role="img"
-    style="--icon-size: 1.5rem;"
+    height="1rem"
+    style="--icon-size: 1rem;"
     viewBox="0 0 24 24"
-    width="1.5rem"
+    width="1rem"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
     />
   </svg>
-  <span
-    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>
-</div>
-`;
-
-exports[`<InlineNotification /> FullWidthStrongVariants story renders snapshot 1`] = `
-<div
-  style="display: flex; flex-direction: column; gap: 0.25rem;"
->
   <div
-    class="inline-notification inline-notification--brand inline-notification--full-width"
+    class="inline-notication__body"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--brand"
-      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"
+    <div
+      class="text text--title-xs inline-notification__title"
     >
-      <title>
-        info
-      </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 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
     >
-      brand inline notification lorem ipsum
-    </span>
-  </div>
-  <div
-    class="inline-notification inline-notification--success inline-notification--full-width"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--success"
-      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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      success inline notification lorem ipsum
-    </span>
-  </div>
-  <div
-    class="inline-notification inline-notification--warning inline-notification--full-width"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--warning"
-      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>
-        alert
-      </title>
-      <path
-        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      warning inline notification lorem ipsum
-    </span>
+      Additional text which provides additional detail
+    </div>
   </div>
 </div>
 `;
 
-exports[`<InlineNotification /> FullWidthSuccess story renders snapshot 1`] = `
+exports[`<InlineNotification /> Default story renders snapshot 1`] = `
 <div
-  class="inline-notification inline-notification--success inline-notification--subtle inline-notification--full-width inline-notification--full-width-subtle"
+  class="inline-notification inline-notification--status-informational w-96"
 >
   <svg
-    class="icon inline-notification__icon inline-notification__icon--success"
+    aria-hidden="true"
+    class="icon inline-notification__icon"
     fill="currentColor"
-    height="1.5rem"
-    role="img"
-    style="--icon-size: 1.5rem;"
+    height="1rem"
+    style="--icon-size: 1rem;"
     viewBox="0 0 24 24"
-    width="1.5rem"
+    width="1rem"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
     />
   </svg>
-  <span
-    class="text text--label-md-subtle inline-notification__text"
+  <div
+    class="inline-notication__body"
   >
-    Inline notifications lorem ipsum text
-  </span>
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+  </div>
 </div>
 `;
 
-exports[`<InlineNotification /> FullWidthVariants story renders snapshot 1`] = `
+exports[`<InlineNotification /> Favorable story renders snapshot 1`] = `
 <div
-  style="display: flex; flex-direction: column; gap: 0.25rem;"
+  class="inline-notification inline-notification--status-favorable w-96"
 >
-  <div
-    class="inline-notification inline-notification--brand inline-notification--subtle inline-notification--full-width inline-notification--full-width-subtle"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--brand"
-      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>
-        info
-      </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 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      brand inline notification lorem ipsum
-    </span>
-  </div>
-  <div
-    class="inline-notification inline-notification--success inline-notification--subtle inline-notification--full-width inline-notification--full-width-subtle"
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--success"
-      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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      success inline notification lorem ipsum
-    </span>
-  </div>
+    <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
-    class="inline-notification inline-notification--warning inline-notification--subtle inline-notification--full-width inline-notification--full-width-subtle"
+    class="inline-notication__body"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--warning"
-      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"
+    <div
+      class="text text--title-xs inline-notification__title"
     >
-      <title>
-        alert
-      </title>
-      <path
-        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
     >
-      warning inline notification lorem ipsum
-    </span>
+      Additional text which provides additional detail
+    </div>
   </div>
 </div>
 `;
 
 exports[`<InlineNotification /> LongText story renders snapshot 1`] = `
 <div
-  class="inline-notification inline-notification--success inline-notification--subtle"
+  class="inline-notification inline-notification--status-informational w-96"
 >
   <svg
-    class="icon inline-notification__icon inline-notification__icon--success"
+    aria-hidden="true"
+    class="icon inline-notification__icon"
     fill="currentColor"
-    height="1.5rem"
-    role="img"
-    style="--icon-size: 1.5rem;"
+    height="1rem"
+    style="--icon-size: 1rem;"
     viewBox="0 0 24 24"
-    width="1.5rem"
+    width="1rem"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
     />
   </svg>
-  <span
-    class="text text--label-md-subtle inline-notification__text"
+  <div
+    class="inline-notication__body"
   >
-    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>
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      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.
+    </div>
+  </div>
 </div>
 `;
 
-exports[`<InlineNotification /> StrongVariants story renders snapshot 1`] = `
+exports[`<InlineNotification /> Warning story renders snapshot 1`] = `
 <div
-  style="display: inline-flex; flex-direction: column; gap: 0.25rem;"
+  class="inline-notification inline-notification--status-warning w-96"
 >
-  <div
-    class="inline-notification inline-notification--brand"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--brand"
-      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>
-        info
-      </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 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      brand inline notification lorem ipsum
-    </span>
-  </div>
-  <div
-    class="inline-notification inline-notification--success"
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--success"
-      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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      success inline notification lorem ipsum
-    </span>
-  </div>
+    <path
+      d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
+    />
+  </svg>
   <div
-    class="inline-notification inline-notification--warning"
+    class="inline-notication__body"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--warning"
-      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"
+    <div
+      class="text text--title-xs inline-notification__title"
     >
-      <title>
-        alert
-      </title>
-      <path
-        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
     >
-      warning inline notification lorem ipsum
-    </span>
+      Additional text which provides additional detail
+    </div>
   </div>
 </div>
 `;
 
-exports[`<InlineNotification /> SubtleVariants story renders snapshot 1`] = `
+exports[`<InlineNotification /> WithFormattedSubTitle story renders snapshot 1`] = `
 <div
-  style="display: inline-flex; flex-direction: column; gap: 0.25rem;"
+  class="inline-notification inline-notification--status-informational w-96"
 >
-  <div
-    class="inline-notification inline-notification--brand inline-notification--subtle"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--brand"
-      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>
-        info
-      </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 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      brand inline notification lorem ipsum
-    </span>
-  </div>
-  <div
-    class="inline-notification inline-notification--success inline-notification--subtle"
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--success"
-      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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      success inline notification lorem ipsum
-    </span>
-  </div>
+    <path
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
+    />
+  </svg>
   <div
-    class="inline-notification inline-notification--warning inline-notification--subtle"
-  >
-    <svg
-      class="icon inline-notification__icon inline-notification__icon--warning"
-      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>
-        alert
-      </title>
-      <path
-        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-      />
-    </svg>
-    <span
-      class="text text--label-md-subtle inline-notification__text"
-    >
-      warning inline notification lorem ipsum
-    </span>
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      <span>
+        <em>
+          Additional text
+        </em>
+         which provides additional detail
+      </span>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<InlineNotification /> Success story renders snapshot 1`] = `
+exports[`<InlineNotification /> WithSubTitle story renders snapshot 1`] = `
 <div
-  class="inline-notification inline-notification--success inline-notification--subtle"
+  class="inline-notification inline-notification--status-informational w-96"
 >
   <svg
-    class="icon inline-notification__icon inline-notification__icon--success"
+    aria-hidden="true"
+    class="icon inline-notification__icon"
     fill="currentColor"
-    height="1.5rem"
-    role="img"
-    style="--icon-size: 1.5rem;"
+    height="1rem"
+    style="--icon-size: 1rem;"
     viewBox="0 0 24 24"
-    width="1.5rem"
+    width="1rem"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 22Z"
     />
   </svg>
-  <span
-    class="text text--label-md-subtle inline-notification__text"
+  <div
+    class="inline-notication__body"
   >
-    Inline notifications lorem ipsum text
-  </span>
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      Additional text which provides additional detail
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/components/InlineNotification/index.ts b/src/components/InlineNotification/index.ts
index 4587a66e8..62e79f80a 100644
--- a/src/components/InlineNotification/index.ts
+++ b/src/components/InlineNotification/index.ts
@@ -1,2 +1 @@
 export { InlineNotification as default } from './InlineNotification';
-export { InlineNotification as InlineNotificationV2 } from './InlineNotification-v2';
diff --git a/src/components/Input/Input-v2.module.css b/src/components/Input/Input-v2.module.css
deleted file mode 100644
index fba2becb9..000000000
--- a/src/components/Input/Input-v2.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # INPUT
-\*------------------------------------*/
-
-/**
- * Default input styles 
- */
-.input {
-  @mixin inputStylesV2;
-}
diff --git a/src/components/Input/Input-v2.tsx b/src/components/Input/Input-v2.tsx
deleted file mode 100644
index 6e7c0a27d..000000000
--- a/src/components/Input/Input-v2.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import clsx from 'clsx';
-import type { ChangeEventHandler } from 'react';
-import React, { forwardRef } from 'react';
-import type { Status } from '../../util/variant-types';
-import styles from './Input-v2.module.css';
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  /**
-   * Aria-label to provide an accesible name for the text input if no visible label is provided.
-   */
-  'aria-label'?: string;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Disables the input and prevents editing the contents
-   */
-  disabled?: boolean;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-  /**
-   * Gives a hint as to the type of data needed for text input
-   */
-  inputMode?:
-    | 'text'
-    | 'email'
-    | 'url'
-    | 'search'
-    | 'tel'
-    | 'none'
-    | 'numeric'
-    | 'decimal';
-  /**
-   * Maximum number the input can take.
-   */
-  max?: number | string;
-  /**
-   * Minimum number the input can take.
-   */
-  min?: number | string;
-  /**
-   * HTML name attribute for the input
-   */
-  name?: string;
-  /**
-   * Function that fires when field value has changed
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  /**
-   * Placeholder attribute for input. Note: placeholder should be used sparingly
-   */
-  placeholder?: string;
-  /**
-   * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive
-   */
-  readOnly?: boolean;
-  /**
-   * Indicates that field is required for form to be successfully submitted
-   */
-  required?: boolean;
-  /**
-   * Title attribute on input
-   */
-  title?: string;
-  /**
-   * HTML type attribute, allowing switching between text, password, and other HTML5 input field types
-   */
-  type?: React.HTMLInputTypeAttribute;
-  /**
-   * The value of the input
-   */
-  value?: string | number;
-  /**
-   * The default value of the input
-   */
-  defaultValue?: string | number;
-  // Design API
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-};
-
-/**
- * Input component for one line of text.
- */
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, disabled, id, status, ...other }, ref) => {
-    const componentClassName = clsx(
-      styles['input'],
-      status === 'critical' && styles['error'],
-      status === 'warning' && styles['warning'],
-      className,
-    );
-
-    return (
-      <input
-        className={componentClassName}
-        disabled={disabled}
-        id={id}
-        ref={ref}
-        {...other}
-      />
-    );
-  },
-);
-
-Input.displayName = 'Input';
diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
index e9d7288a1..fba2becb9 100644
--- a/src/components/Input/Input.module.css
+++ b/src/components/Input/Input.module.css
@@ -8,6 +8,5 @@
  * Default input styles 
  */
 .input {
-  @mixin inputStyles;
-  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
+  @mixin inputStylesV2;
 }
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index f5a23be01..dee6d4b48 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import type { ChangeEventHandler } from 'react';
 import React, { forwardRef } from 'react';
+import type { Status } from '../../util/variant-types';
 import styles from './Input.module.css';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -32,10 +33,6 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     | 'none'
     | 'numeric'
     | 'decimal';
-  /**
-   * Error state of the form field
-   */
-  isError?: boolean;
   /**
    * Maximum number the input can take.
    */
@@ -80,16 +77,24 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
    * The default value of the input
    */
   defaultValue?: string | number;
+  // Design API
+  /**
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
+   */
+  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
 };
 
 /**
  * Input component for one line of text.
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, disabled, id, isError, ...other }, ref) => {
+  ({ className, disabled, id, status, ...other }, ref) => {
     const componentClassName = clsx(
       styles['input'],
-      isError && styles['error'],
+      status === 'critical' && styles['error'],
+      status === 'warning' && styles['warning'],
       className,
     );
 
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index 81e5d2cfd..78585db2e 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,3 +1,2 @@
 export { Input as default } from './Input';
 export type { InputProps } from './Input';
-export { Input as InputV2, type InputProps as InputPropsV2 } from './Input-v2';
diff --git a/src/components/InputField/InputField-v2.module.css b/src/components/InputField/InputField-v2.module.css
deleted file mode 100644
index 0912eaeb2..000000000
--- a/src/components/InputField/InputField-v2.module.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/*------------------------------------*\
-    # INPUT FIELD
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
- 
-/**
- * Wraps the Label and the optional/required hint.
- * TODO: match/share the overline styles between Select and InputField
- */
-.input-field__overline {
-  display: flex;
-  margin-bottom: 0.25rem;
-  gap: 0.25rem;
-}
-
-.input-field__overline--no-label {
-  justify-content: flex-start;
-}
-
-/**
- * Input Field Within
- *
- * A slot to put arbitrary content that appears within the input field border to the right. 
- *
- * Typically used for buttons and icon buttons to enable things like show/hide password buttons .
- */
-.input-field__input-within {
-  position: absolute;
-  right: 0.5rem;
-  top: 0;
-  bottom: 0;
-  display: grid;
-  align-items: center;
-  justify-content: center;
-}
-
-.input-field__leading-icon {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  bottom: 0;
-  left: 0.5rem;
-  display: grid;
-  align-items: center;
-  justify-content: center;
-
-  color: var(--eds-theme-color-icon-utility-default-secondary);
-}
-
-/**
- * Input field body
- */
-.input-field__body {
-  position: relative;
-}
-
-.input-field__input--leading-icon {
-  padding-left: 2.25rem;
-}
-
-.input-field__input--input-within {
-  padding-right: 8rem;
-}
-
-.input-field__footer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.input-field--has-fieldNote {
-  margin-bottom: 0.25rem;
-}
-
-.input-field__label {
-  color: var(--eds-theme-color-text-utility-default-primary);
-  font: var(--eds-theme-typography-form-label);
-}
-
-.input-field__label--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
-
-.input-field__required-text {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-  font: var(--eds-theme-typography-body-sm);
-}
-
-.input-field__character-counter {
-  font: var(--eds-theme-typography-body-sm);
-  text-align: right;
-  flex: 1 0 50%;
-
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.input-field--invalid-length {
-  color: var(--eds-theme-color-text-utility-critical);
-}
-
-.input-field__required-text--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
-
diff --git a/src/components/InputField/InputField-v2.stories.tsx b/src/components/InputField/InputField-v2.stories.tsx
deleted file mode 100644
index 6cd19a5c9..000000000
--- a/src/components/InputField/InputField-v2.stories.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { InputField } from './InputField-v2';
-import { ButtonV2 as Button } from '../Button';
-import { Label } from '../Label/Label';
-import { Table } from '../Table/Table';
-
-const meta: Meta<typeof InputField> = {
-  title: 'Components/V2/InputField',
-  component: InputField,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-    backgrounds: {
-      default: 'eds-color-neutral-white',
-    },
-  },
-  args: {
-    className: 'w-96',
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-export default meta;
-type Story = StoryObj<typeof InputField>;
-
-export const Default: Story = {
-  args: {
-    label: 'Default input field',
-    fieldNote: 'This is a fieldnote.',
-  },
-};
-
-/**
- * Fields, when containing text, have a theme matching the rest of the interface.
- */
-export const WithText: Story = {
-  args: {
-    label: 'Default input field',
-    fieldNote: 'This is a fieldnote.',
-    defaultValue: 'Text value',
-  },
-};
-
-/**
- * Fields do not required a `fieldNote`.
- */
-export const NoFieldnote: Story = {
-  args: {
-    label: 'Default input field',
-  },
-};
-
-/**
- * Fields can have an error state.
- */
-export const Error: Story = {
-  args: {
-    label: 'Error input field',
-    status: 'critical',
-    fieldNote: 'This is a fieldnote with an error.',
-  },
-};
-
-/**
- * Fields can have a warning state.
- */
-export const Warning: Story = {
-  args: {
-    label: 'Warning input field',
-    status: 'warning',
-    fieldNote:
-      'This uses the warning treatment and also applies to the field note',
-  },
-};
-
-/**
- * Read-only fields can have a value and are not editable, but are different from disabled fields.
- */
-export const ReadOnly: Story = {
-  args: {
-    label: 'Read-only field',
-    readOnly: true,
-    defaultValue: 'some read-only information',
-    fieldNote: 'This will show up like text, but not be interactive',
-  },
-};
-
-/**
- * Fields can be marked as disabled (and contain a value in such cases).
- */
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled input field',
-    disabled: true,
-    fieldNote: 'This InputField is disabled',
-    defaultValue: 'Text in disabled field',
-  },
-};
-
-/**
- * Fields can have a leading icon, indicating what kind of content can go into the field.
- */
-export const LeadingIcon: Story = {
-  args: {
-    leadingIcon: 'search',
-    'aria-label': 'search field',
-    placeholder: 'Search...',
-  },
-};
-
-/**
- * Fields can be marked as required.
- */
-export const Required: Story = {
-  args: {
-    label: 'Input field with fieldNote',
-    showHint: true,
-    required: true,
-    fieldNote: 'This is a fieldnote for a required input field.',
-  },
-};
-
-/**
- * Fields can be marked as required.
- */
-export const RequiredDisabled: Story = {
-  args: {
-    label: 'Input field with fieldNote',
-    showHint: true,
-    required: true,
-    disabled: true,
-    fieldNote: 'This is a fieldnote for a required input field.',
-  },
-};
-
-/**
- * When not using a visible label with `InputField`, you must apply some time of ARIA label to the component, like `aria-label`.
- */
-export const NoVisibleLabel: Story = {
-  args: {
-    'aria-label': 'Input for no visible label',
-    fieldNote: 'This input field has no visible label',
-    required: true,
-  },
-};
-
-/**
- * Password fields show dots instead of characters, to help with security.
- */
-export const Password: Story = {
-  args: {
-    label: 'Password',
-    type: 'password',
-  },
-};
-
-/**
- * Fields can have an optional field hint added, for extra clarity.
- */
-export const ShowHint: Story = {
-  args: {
-    label: 'Field with Optional Hint',
-    showHint: true,
-  },
-};
-
-/**
- * You can render certain components **within** an `InputField`, such as a button, icon, or other
- * small component. This facility is used to implement controls that should appear visibly nested
- * within the button, to the right-hand side.
- *
- * Please keep the text of the button brief (button width < 128px)
- */
-export const InputWithin: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-  },
-  render: () => (
-    <InputField
-      inputWithin={
-        <Button rank="secondary" size="sm">
-          Button
-        </Button>
-      }
-      label="Input field with button inside"
-      type="text"
-    />
-  ),
-};
-
-/**
- * You can lock the maximum length of the text content of `InputField`. When setting `maxLength`,
- * the field will reuse the browser's [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
- * behavior (e.g., prevent further text from being typed, prevent keydown events, etc.).
- */
-export const WithAMaxLength: Story = {
-  args: {
-    defaultValue: 'Some initial text',
-    label: 'test label',
-    maxLength: 15,
-    required: true,
-  },
-  render: (args) => <InputField {...args} />,
-};
-
-/**
- * If you want to signal that a field has reached a maximum length but want to allow more text to be typed, you can use
- * `recommendedMaxLength`. This will show a similar UI to using `maxLength` but will allow more text to be typed, and
- * emit any appropriate events.
- */
-export const WithARecommendedLength: Story = {
-  args: {
-    defaultValue: 'Some initial text',
-    label: 'Shortened Length Field',
-    recommendedMaxLength: 15,
-    required: true,
-  },
-  render: (args) => <InputField {...args} />,
-};
-
-/**
- * Both `maxLength` and `recommendedMaxLength` can be specified at the same time. Text length between `recommendedMaxLength`
- * and `maxLength` will show the treatment warning the user about the text length being violated.
- */
-export const WithBothMaxAndRecommendedLength: Story = {
-  args: {
-    label: 'test label',
-    defaultValue: 'Some initial text',
-    fieldNote: 'Longer Field Description',
-    maxLength: 20,
-    recommendedMaxLength: 15,
-    required: true,
-  },
-  render: (args) => <InputField {...args} />,
-};
-
-/**
- * This **implementation example** shows how to attach labels to fields and labels
- * when the label is in a different column.
- */
-export const TabularInput: Story = {
-  parameters: {
-    badges: ['intro-1.1', 'implementationExample'],
-  },
-  render: (args) => (
-    <Table>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Label</Table.HeaderCell>
-          <Table.HeaderCell>Field</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell className="flex items-center">
-            <Label
-              className="flex items-center"
-              htmlFor="field-1"
-              id="input-1"
-              text="Input One"
-            />
-          </Table.Cell>
-          <Table.Cell>
-            <InputField
-              aria-label="redundant"
-              aria-labelledby="input-1"
-              id="field-1"
-              placeholder="click the label to highlight field"
-            />
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  ),
-};
diff --git a/src/components/InputField/InputField-v2.test.tsx b/src/components/InputField/InputField-v2.test.tsx
deleted file mode 100644
index 994d1e6f5..000000000
--- a/src/components/InputField/InputField-v2.test.tsx
+++ /dev/null
@@ -1,78 +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 { InputField } from './InputField-v2';
-
-import * as stories from './InputField-v2.stories';
-
-describe('<InputField />', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('handles changes to the text within the component', async () => {
-    const user = userEvent.setup();
-    const onChange = jest.fn();
-
-    render(
-      <InputField
-        aria-label="label"
-        data-testid="test-input"
-        onChange={onChange}
-      />,
-    );
-    const input = screen.getByTestId('test-input');
-    const testText = 'typing';
-
-    input.focus();
-
-    await user.keyboard(testText);
-
-    expect(onChange).toHaveBeenCalledTimes(testText.length);
-  });
-
-  it('will not fire when maxLength is reached', async () => {
-    const user = userEvent.setup();
-    const onChange = jest.fn();
-    const testText = 'typing';
-
-    render(
-      <InputField
-        aria-label="label"
-        data-testid="test-input"
-        defaultValue={testText}
-        maxLength={6}
-        onChange={onChange}
-      />,
-    );
-    const input = screen.getByTestId('test-input');
-
-    input.focus();
-    await user.keyboard(testText);
-
-    expect(onChange).toHaveBeenCalledTimes(0);
-  });
-
-  it('will fire when recommendedMaxLength is reached', async () => {
-    const user = userEvent.setup();
-    const onChange = jest.fn();
-    const testText = 'typing';
-
-    render(
-      <InputField
-        aria-label="label"
-        data-testid="test-input"
-        defaultValue={testText}
-        onChange={onChange}
-        recommendedMaxLength={6}
-      />,
-    );
-    const input = screen.getByTestId('test-input');
-
-    input.focus();
-    await user.keyboard(testText);
-
-    expect(onChange).toHaveBeenCalledTimes(testText.length);
-  });
-});
diff --git a/src/components/InputField/InputField-v2.tsx b/src/components/InputField/InputField-v2.tsx
deleted file mode 100644
index 3342e9dfc..000000000
--- a/src/components/InputField/InputField-v2.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-import clsx from 'clsx';
-import type { ChangeEventHandler, ReactNode } from 'react';
-import React, { forwardRef, useState } from 'react';
-import { getMinValue } from '../../util/getMinValue';
-import { useId } from '../../util/useId';
-import type {
-  EitherInclusive,
-  ForwardedRefComponent,
-} from '../../util/utility-types';
-import type { Status } from '../../util/variant-types';
-import FieldLabel from '../FieldLabel';
-import { FieldNoteV2 as FieldNote } from '../FieldNote';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import { InputV2 as Input } from '../Input';
-import Text from '../Text';
-import styles from './InputField-v2.module.css';
-
-export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  // Component API
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Default value passed down from higher levels for initial state
-   */
-  defaultValue?: string | number;
-  /**
-   * Disables the field and prevents editing the contents
-   */
-  disabled?: boolean;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-  /**
-   * Gives a hint as to the type of data needed for text input (e.g., to render the correct input keyboard on mobile).
-   */
-  inputMode?: React.InputHTMLAttributes<HTMLInputElement>['inputMode'];
-  /**
-   * Node(s) that can be nested within the input field (e.g., secondary and tertiary `Button` components)
-   */
-  inputWithin?: ReactNode;
-  /**
-   * Maximum value allowed for the input, if type is 'number'.
-   */
-  max?: number | string;
-  /**
-   * Minimum value allowed for the input, if type is 'number'.
-   */
-  min?: number | string;
-  /**
-   * HTML name attribute for the input
-   */
-  name?: string;
-  /**
-   * Function that runs on change of the input
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  /**
-   * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive
-   */
-  readOnly?: boolean;
-  /**
-   * Title attribute on input
-   */
-  title?: string;
-  /**
-   * HTML type attribute, allowing switching between text, password, and other HTML5 input field types
-   *
-   * **NOTE**: this excludes types that correspond to non-text controls, like `checkbox`, `radio`, etc.
-   */
-  type?: Extract<
-    React.InputHTMLAttributes<HTMLInputElement>['type'],
-    | 'text'
-    | 'password'
-    | 'datetime'
-    | 'datetime-local'
-    | 'date'
-    | 'month'
-    | 'time'
-    | 'week'
-    | 'number'
-    | 'email'
-    | 'url'
-    | 'search'
-    | 'tel'
-  >;
-  /**
-   * Value passed down from higher levels for initial state
-   */
-  value?: string | number;
-  // Design API
-  /**
-   * Text under the text input used to provide a description or error message to describe the input.
-   */
-  fieldNote?: ReactNode;
-  /**
-   * An icon that prefixes the field input.
-   */
-  leadingIcon?: IconName;
-  /**
-   * Placeholder attribute for input. Note: placeholder should be used sparingly
-   */
-  placeholder?: string;
-  /**
-   * Behaves similar to `maxLength` but allows the user to continue typing more text.
-   * Should not be larger than `maxLength`, if present.
-   */
-  recommendedMaxLength?: number;
-  /**
-   * Indicates that field is required for form to be successfully submitted
-   */
-  required?: boolean;
-  /**
-   * Whether it should show the field hint or not
-   *
-   * **Default is `"false"`**.
-   */
-  showHint?: boolean;
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-} & EitherInclusive<
-    {
-      /**
-       * Visible text label for the component.
-       */
-      label: string;
-    },
-    {
-      /**
-       * Aria-label to provide an accesible name for the text input if no visible label is provided.
-       */
-      'aria-label': string;
-    }
-  >;
-
-type InputFieldType = ForwardedRefComponent<
-  HTMLInputElement,
-  InputFieldProps
-> & {
-  Input?: typeof Input;
-  Label?: typeof FieldLabel;
-};
-
-/**
- * `import {InputField} from "@chanzuckerberg/eds";`
- *
- * An input with optional labels and error messaging built-in.
- *
- * **NOTE**: This component requires `label` or `aria-label` prop
- */
-export const InputField: InputFieldType = forwardRef(
-  (
-    {
-      'aria-describedby': ariaDescribedBy,
-      className,
-      disabled,
-      fieldNote,
-      id,
-      inputWithin,
-      label,
-      leadingIcon,
-      maxLength,
-      onChange,
-      readOnly,
-      recommendedMaxLength,
-      required,
-      showHint,
-      status = 'default',
-      type = 'text',
-      ...other
-    },
-    ref,
-  ) => {
-    const shouldRenderOverline = !!(label || required);
-    const [fieldText, setFieldText] = useState(other.defaultValue);
-
-    const overlineClassName = clsx(
-      styles['input-field__overline'],
-      !label && styles['input-field__overline--no-label'],
-    );
-
-    const labelClassName = clsx(
-      styles['input-field__label'],
-      disabled && styles['input-field__label--disabled'],
-    );
-
-    const requiredTextClassName = clsx(
-      styles['input-field__required-text'],
-      disabled && styles['input-field__required-text--disabled'],
-    );
-
-    const inputBodyClassName = clsx(
-      styles['input-field__body'],
-      fieldNote && styles['input-field--has-fieldNote'],
-    );
-
-    const fieldLength = fieldText?.toString().length ?? 0;
-
-    const textExceedsMaxLength =
-      maxLength !== undefined && fieldLength ? fieldLength > maxLength : false;
-
-    const textExceedsRecommendedLength =
-      recommendedMaxLength !== undefined && fieldLength
-        ? fieldLength > recommendedMaxLength
-        : false;
-
-    const shouldRenderError =
-      textExceedsMaxLength || textExceedsRecommendedLength;
-
-    const generatedIdVar = useId();
-    const idVar = id || generatedIdVar;
-
-    const generatedAriaDescribedById = useId();
-    const ariaDescribedByVar = fieldNote
-      ? ariaDescribedBy || generatedAriaDescribedById
-      : undefined;
-
-    const fieldLengthCountClassName = clsx(
-      (textExceedsMaxLength || textExceedsRecommendedLength) &&
-        styles['input-field--invalid-length'],
-    );
-
-    // Modify the padding of `Input` to account for trailing/leading icons and trailing buttons
-    const inputOverlayClassName = clsx(
-      leadingIcon && styles['input-field__input--leading-icon'],
-      inputWithin && styles['input-field__input--input-within'],
-    );
-    // Pick the smallest of the lengths to set as the maximum value allowed
-    const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);
-
-    return (
-      <div className={className}>
-        {shouldRenderOverline && (
-          <div className={overlineClassName}>
-            {label && (
-              <FieldLabel
-                className={labelClassName}
-                disabled={disabled}
-                htmlFor={idVar}
-              >
-                {label}
-              </FieldLabel>
-            )}
-            {required && showHint && (
-              <Text
-                aria-disabled={disabled ?? undefined}
-                as="span"
-                className={requiredTextClassName}
-                preset="body-sm"
-              >
-                (Required)
-              </Text>
-            )}
-            {!required && showHint && (
-              <Text
-                aria-disabled={disabled ?? undefined}
-                as="span"
-                className={requiredTextClassName}
-                preset="body-sm"
-              >
-                (Optional)
-              </Text>
-            )}
-            {maxLengthShown && (
-              <div className={styles['input-field__character-counter']}>
-                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
-                / {maxLengthShown}
-              </div>
-            )}
-          </div>
-        )}
-
-        <div className={inputBodyClassName}>
-          <Input
-            aria-describedby={ariaDescribedByVar}
-            aria-invalid={!!(status === 'critical')}
-            className={inputOverlayClassName}
-            disabled={disabled}
-            id={idVar}
-            maxLength={maxLength}
-            onChange={(e) => {
-              setFieldText(e.target.value);
-              onChange && onChange(e);
-            }}
-            readOnly={readOnly}
-            ref={ref}
-            required={required}
-            status={shouldRenderError ? 'critical' : status}
-            type={type}
-            {...other}
-          />
-          {inputWithin && (
-            <div className={styles['input-field__input-within']}>
-              {inputWithin}
-            </div>
-          )}
-          {leadingIcon && (
-            <div className={styles['input-field__leading-icon']}>
-              <Icon name={leadingIcon} purpose="decorative" size="1.5rem" />
-            </div>
-          )}
-        </div>
-        {maxLengthShown ? (
-          <div className={styles['input-field__footer']}>
-            {fieldNote && (
-              <FieldNote
-                disabled={disabled}
-                id={ariaDescribedByVar}
-                status={shouldRenderError ? 'critical' : status}
-              >
-                {fieldNote}
-              </FieldNote>
-            )}
-          </div>
-        ) : (
-          <>
-            {/* TODO: maintained for seamless upgrades; can be removed on next breaking change */}
-            {fieldNote && (
-              <FieldNote
-                disabled={disabled}
-                id={ariaDescribedByVar}
-                status={shouldRenderError ? 'critical' : status}
-              >
-                {fieldNote}
-              </FieldNote>
-            )}
-          </>
-        )}
-      </div>
-    );
-  },
-);
-
-InputField.displayName = 'InputField';
-InputField.Input = Input;
-InputField.Label = FieldLabel;
diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css
index b1439cc9a..f86523276 100644
--- a/src/components/InputField/InputField.module.css
+++ b/src/components/InputField/InputField.module.css
@@ -1,19 +1,52 @@
 /*------------------------------------*\
     # INPUT FIELD
 \*------------------------------------*/
-
 /**
- * Wraps the Label and the optional/required indicator.
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
+ 
+/**
+ * Wraps the Label and the optional/required hint.
+ * TODO: match/share the overline styles between Select and InputField
  */
 .input-field__overline {
   display: flex;
-  justify-content: space-between;
   margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
-  color: var(--eds-theme-color-form-label);
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .input-field__overline--no-label {
-  justify-content: flex-end;
+  justify-content: flex-start;
+}
+
+/**
+ * Input Field Within
+ *
+ * A slot to put arbitrary content that appears within the input field border to the right. 
+ *
+ * Typically used for buttons and icon buttons to enable things like show/hide password buttons .
+ */
+.input-field__input-within {
+  position: absolute;
+  right: calc(var(--eds-size-1) / 16 * 1rem);
+  top: 0;
+  bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-field__leading-icon {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--eds-size-1) / 16 * 1rem);
+  display: grid;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--eds-theme-color-icon-utility-default-secondary);
 }
 
 /**
@@ -23,58 +56,50 @@
   position: relative;
 }
 
+.input-field__input--leading-icon {
+  padding-left: 2.25rem;
+}
+
+.input-field__input--input-within {
+  padding-right: 8rem;
+}
+
+.input-field__footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-field--has-fieldNote {
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
+}
+
 .input-field__label {
-  color: var(--eds-theme-color-form-label);
+  color: var(--eds-theme-color-text-utility-default-primary);
   font: var(--eds-theme-typography-form-label);
 }
 
 .input-field__label--disabled {
-  color: var(--eds-theme-color-text-disabled);
+  color: var(--eds-theme-color-text-utility-disabled-primary);
 }
 
 .input-field__required-text {
-  color: var(--eds-theme-color-text-neutral-subtle);
+  color: var(--eds-theme-color-text-utility-default-secondary);
   font: var(--eds-theme-typography-body-sm);
 }
 
-.input-field__required-text--disabled {
-  color: var(--eds-theme-color-text-disabled);
-}
-
-.input-field__footer {
-  display: flex;
-  justify-content: space-between;
-}
-
 .input-field__character-counter {
   font: var(--eds-theme-typography-body-sm);
-
-  color: var(--eds-theme-color-text-neutral-default);
-  flex: 1 0 50%;
   text-align: right;
-}
+  flex: 1 0 50%;
 
-.input-field--has-fieldNote {
-  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
+  color: var(--eds-theme-color-text-utility-default-secondary);
 }
 
 .input-field--invalid-length {
-  color: var(--eds-theme-color-text-utility-error);
+  color: var(--eds-theme-color-text-utility-critical);
 }
 
-/**
- * Input Field Within
- *
- * A slot to put arbitrary content that appears within the input field border to the right. 
- *
- * Typically used for buttons and icon buttons to enable things like show/hide password buttons .
- */
-.input-field__input-within {
-  position: absolute;
-  right: calc(var(--eds-size-2) / 16 * 1rem);
-  top: 0;
-  bottom: 0;
-  display: grid;
-  align-items: center;
-  justify-content: center;
+.input-field__required-text--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
 }
+
diff --git a/src/components/InputField/InputField.stories.tsx b/src/components/InputField/InputField.stories.tsx
index 7daef22a6..7fe40f1d6 100644
--- a/src/components/InputField/InputField.stories.tsx
+++ b/src/components/InputField/InputField.stories.tsx
@@ -11,12 +11,15 @@ const meta: Meta<typeof InputField> = {
   component: InputField,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
     backgrounds: {
       default: 'eds-color-neutral-white',
     },
   },
-  decorators: [(Story) => <div className="p-2">{Story()}</div>],
+  args: {
+    className: 'w-96',
+  },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
 
 export default meta;
@@ -29,42 +32,112 @@ export const Default: Story = {
   },
 };
 
+/**
+ * Fields, when containing text, have a theme matching the rest of the interface.
+ */
+export const WithText: Story = {
+  args: {
+    label: 'Default input field',
+    fieldNote: 'This is a fieldnote.',
+    defaultValue: 'Text value',
+  },
+};
+
+/**
+ * Fields do not required a `fieldNote`.
+ */
 export const NoFieldnote: Story = {
   args: {
     label: 'Default input field',
   },
 };
 
+/**
+ * Fields can have an error state.
+ */
 export const Error: Story = {
   args: {
     label: 'Error input field',
-    isError: true,
+    status: 'critical',
     fieldNote: 'This is a fieldnote with an error.',
   },
 };
 
+/**
+ * Fields can have a warning state.
+ */
+export const Warning: Story = {
+  args: {
+    label: 'Warning input field',
+    status: 'warning',
+    fieldNote:
+      'This uses the warning treatment and also applies to the field note',
+  },
+};
+
+/**
+ * Read-only fields can have a value and are not editable, but are different from disabled fields.
+ */
+export const ReadOnly: Story = {
+  args: {
+    label: 'Read-only field',
+    readOnly: true,
+    defaultValue: 'some read-only information',
+    fieldNote: 'This will show up like text, but not be interactive',
+  },
+};
+
+/**
+ * Fields can be marked as disabled (and contain a value in such cases).
+ */
 export const Disabled: Story = {
   args: {
     label: 'Disabled input field',
     disabled: true,
     fieldNote: 'This InputField is disabled',
+    defaultValue: 'Text in disabled field',
   },
-  parameters: {
-    axe: {
-      // Disabled input does not need to meet color contrast
-      disabledRules: ['color-contrast'],
-    },
+};
+
+/**
+ * Fields can have a leading icon, indicating what kind of content can go into the field.
+ */
+export const LeadingIcon: Story = {
+  args: {
+    leadingIcon: 'search',
+    'aria-label': 'search field',
+    placeholder: 'Search...',
   },
 };
 
+/**
+ * Fields can be marked as required.
+ */
 export const Required: Story = {
   args: {
     label: 'Input field with fieldNote',
+    showHint: true,
+    required: true,
+    fieldNote: 'This is a fieldnote for a required input field.',
+  },
+};
+
+/**
+ * Fields can be marked as required.
+ */
+export const RequiredDisabled: Story = {
+  args: {
+    label: 'Input field with fieldNote',
+    showHint: true,
     required: true,
+    disabled: true,
     fieldNote: 'This is a fieldnote for a required input field.',
   },
 };
 
+/**
+ * When not using a visible label with `InputField`, you must apply some time of ARIA label to the component, like `aria-label`.
+ */
 export const NoVisibleLabel: Story = {
   args: {
     'aria-label': 'Input for no visible label',
@@ -73,10 +146,32 @@ export const NoVisibleLabel: Story = {
   },
 };
 
+/**
+ * Password fields show dots instead of characters, to help with security.
+ */
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+  },
+};
+
+/**
+ * Fields can have an optional field hint added, for extra clarity.
+ */
+export const ShowHint: Story = {
+  args: {
+    label: 'Field with Optional Hint',
+    showHint: true,
+  },
+};
+
 /**
  * You can render certain components **within** an `InputField`, such as a button, icon, or other
  * small component. This facility is used to implement controls that should appear visibly nested
  * within the button, to the right-hand side.
+ *
+ * Please keep the text of the button brief (button width < 128px)
  */
 export const InputWithin: Story = {
   parameters: {
@@ -90,7 +185,7 @@ export const InputWithin: Story = {
   render: () => (
     <InputField
       inputWithin={
-        <Button size="sm" variant="icon">
+        <Button rank="secondary" size="sm">
           Button
         </Button>
       }
@@ -123,7 +218,7 @@ export const WithAMaxLength: Story = {
 export const WithARecommendedLength: Story = {
   args: {
     defaultValue: 'Some initial text',
-    label: 'test label',
+    label: 'Shortened Length Field',
     recommendedMaxLength: 15,
     required: true,
   },
diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
index 406ec1bfe..d63f1fcf3 100644
--- a/src/components/InputField/InputField.tsx
+++ b/src/components/InputField/InputField.tsx
@@ -7,25 +7,28 @@ import type {
   EitherInclusive,
   ForwardedRefComponent,
 } from '../../util/utility-types';
+import type { Status } from '../../util/variant-types';
+import FieldLabel from '../FieldLabel';
 import FieldNote from '../FieldNote';
+import Icon, { type IconName } from '../Icon';
 import Input from '../Input';
-import InputLabel from '../InputLabel';
 import Text from '../Text';
 import styles from './InputField.module.css';
 
 export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  // Component API
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
   /**
-   * Disables the field and prevents editing the contents
+   * Default value passed down from higher levels for initial state
    */
-  disabled?: boolean;
+  defaultValue?: string | number;
   /**
-   * Text under the text input used to provide a description or error message to describe the input.
+   * Disables the field and prevents editing the contents
    */
-  fieldNote?: ReactNode;
+  disabled?: boolean;
   /**
    * HTML id for the component
    */
@@ -35,15 +38,9 @@ export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    */
   inputMode?: React.InputHTMLAttributes<HTMLInputElement>['inputMode'];
   /**
-   * Node(s) that can be nested within the input field
+   * Node(s) that can be nested within the input field (e.g., secondary and tertiary `Button` components)
    */
   inputWithin?: ReactNode;
-  /**
-   * Error variant of the form field
-   *
-   * **Default is `false`**.
-   */
-  isError?: boolean;
   /**
    * Maximum value allowed for the input, if type is 'number'.
    */
@@ -60,23 +57,10 @@ export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    * Function that runs on change of the input
    */
   onChange?: ChangeEventHandler<HTMLInputElement>;
-  /**
-   * Placeholder attribute for input. Note: placeholder should be used sparingly
-   */
-  placeholder?: string;
   /**
    * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive
    */
   readOnly?: boolean;
-  /**
-   * Behaves similar to `maxLength` but allows the user to continue typing more text.
-   * Should not be larger than `maxLength`, if present.
-   */
-  recommendedMaxLength?: number;
-  /**
-   * Indicates that field is required for form to be successfully submitted
-   */
-  required?: boolean;
   /**
    * Title attribute on input
    */
@@ -106,10 +90,40 @@ export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    * Value passed down from higher levels for initial state
    */
   value?: string | number;
+  // Design API
   /**
-   * Default value passed down from higher levels for initial state
+   * Text under the text input used to provide a description or error message to describe the input.
    */
-  defaultValue?: string | number;
+  fieldNote?: ReactNode;
+  /**
+   * An icon that prefixes the field input.
+   */
+  leadingIcon?: IconName;
+  /**
+   * Placeholder attribute for input. Note: placeholder should be used sparingly
+   */
+  placeholder?: string;
+  /**
+   * Behaves similar to `maxLength` but allows the user to continue typing more text.
+   * Should not be larger than `maxLength`, if present.
+   */
+  recommendedMaxLength?: number;
+  /**
+   * Indicates that field is required for form to be successfully submitted
+   */
+  required?: boolean;
+  /**
+   * Whether it should show the field hint or not
+   *
+   * **Default is `"false"`**.
+   */
+  showHint?: boolean;
+  /**
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
+   */
+  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
 } & EitherInclusive<
     {
       /**
@@ -130,7 +144,7 @@ type InputFieldType = ForwardedRefComponent<
   InputFieldProps
 > & {
   Input?: typeof Input;
-  Label?: typeof InputLabel;
+  Label?: typeof FieldLabel;
 };
 
 /**
@@ -149,12 +163,15 @@ export const InputField: InputFieldType = forwardRef(
       fieldNote,
       id,
       inputWithin,
-      isError,
       label,
+      leadingIcon,
       maxLength,
       onChange,
+      readOnly,
       recommendedMaxLength,
       required,
+      showHint,
+      status = 'default',
       type = 'text',
       ...other
     },
@@ -194,7 +211,7 @@ export const InputField: InputFieldType = forwardRef(
         : false;
 
     const shouldRenderError =
-      isError || textExceedsMaxLength || textExceedsRecommendedLength;
+      textExceedsMaxLength || textExceedsRecommendedLength;
 
     const generatedIdVar = useId();
     const idVar = id || generatedIdVar;
@@ -209,6 +226,11 @@ export const InputField: InputFieldType = forwardRef(
         styles['input-field--invalid-length'],
     );
 
+    // Modify the padding of `Input` to account for trailing/leading icons and trailing buttons
+    const inputOverlayClassName = clsx(
+      leadingIcon && styles['input-field__input--leading-icon'],
+      inputWithin && styles['input-field__input--input-within'],
+    );
     // Pick the smallest of the lengths to set as the maximum value allowed
     const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);
 
@@ -217,36 +239,59 @@ export const InputField: InputFieldType = forwardRef(
         {shouldRenderOverline && (
           <div className={overlineClassName}>
             {label && (
-              <InputLabel className={labelClassName} htmlFor={idVar}>
+              <FieldLabel
+                className={labelClassName}
+                disabled={disabled}
+                htmlFor={idVar}
+              >
                 {label}
-              </InputLabel>
+              </FieldLabel>
+            )}
+            {required && showHint && (
+              <Text
+                aria-disabled={disabled ?? undefined}
+                as="span"
+                className={requiredTextClassName}
+                preset="body-sm"
+              >
+                (Required)
+              </Text>
             )}
-            {required && (
+            {!required && showHint && (
               <Text
+                aria-disabled={disabled ?? undefined}
                 as="span"
                 className={requiredTextClassName}
                 preset="body-sm"
               >
-                Required
+                (Optional)
               </Text>
             )}
+            {maxLengthShown && (
+              <div className={styles['input-field__character-counter']}>
+                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
+                / {maxLengthShown}
+              </div>
+            )}
           </div>
         )}
 
         <div className={inputBodyClassName}>
           <Input
             aria-describedby={ariaDescribedByVar}
-            aria-invalid={!!isError}
+            aria-invalid={!!(status === 'critical')}
+            className={inputOverlayClassName}
             disabled={disabled}
             id={idVar}
-            isError={shouldRenderError}
             maxLength={maxLength}
-            onChange={(e) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setFieldText(e.target.value);
               onChange && onChange(e);
             }}
+            readOnly={readOnly}
             ref={ref}
             required={required}
+            status={shouldRenderError ? 'critical' : status}
             type={type}
             {...other}
           />
@@ -255,6 +300,11 @@ export const InputField: InputFieldType = forwardRef(
               {inputWithin}
             </div>
           )}
+          {leadingIcon && (
+            <div className={styles['input-field__leading-icon']}>
+              <Icon name={leadingIcon} purpose="decorative" size="1.5rem" />
+            </div>
+          )}
         </div>
         {maxLengthShown ? (
           <div className={styles['input-field__footer']}>
@@ -262,26 +312,20 @@ export const InputField: InputFieldType = forwardRef(
               <FieldNote
                 disabled={disabled}
                 id={ariaDescribedByVar}
-                isError={shouldRenderError}
+                status={shouldRenderError ? 'critical' : status}
               >
                 {fieldNote}
               </FieldNote>
             )}
-            {maxLengthShown && (
-              <div className={styles['input-field__character-counter']}>
-                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
-                / {maxLengthShown}
-              </div>
-            )}
           </div>
         ) : (
           <>
-            {/* maintained for seamless upgrades; can be removed on next breaking change */}
+            {/* TODO: maintained for seamless upgrades; can be removed on next breaking change */}
             {fieldNote && (
               <FieldNote
                 disabled={disabled}
                 id={ariaDescribedByVar}
-                isError={shouldRenderError}
+                status={shouldRenderError ? 'critical' : status}
               >
                 {fieldNote}
               </FieldNote>
@@ -295,4 +339,4 @@ export const InputField: InputFieldType = forwardRef(
 
 InputField.displayName = 'InputField';
 InputField.Input = Input;
-InputField.Label = InputLabel;
+InputField.Label = FieldLabel;
diff --git a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap b/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
deleted file mode 100644
index 934128432..000000000
--- a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
+++ /dev/null
@@ -1,812 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InputField /> Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r0:"
-      >
-        Default input field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":r1:"
-        aria-invalid="false"
-        class="input"
-        id=":r0:"
-        type="text"
-      />
-    </div>
-    <div
-      class="field-note"
-      id=":r1:"
-    >
-      This is a fieldnote.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> Disabled story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        aria-disabled="true"
-        class="label label--lg label--disabled input-field__label input-field__label--disabled"
-        for=":rc:"
-      >
-        Disabled input field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":rd:"
-        aria-invalid="false"
-        class="input"
-        disabled=""
-        id=":rc:"
-        type="text"
-        value="Text in disabled field"
-      />
-    </div>
-    <div
-      aria-disabled="true"
-      class="field-note field-note--disabled"
-      id=":rd:"
-    >
-      This InputField is disabled
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> Error story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r6:"
-      >
-        Error input field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":r7:"
-        aria-invalid="true"
-        class="input error"
-        id=":r6:"
-        type="text"
-      />
-    </div>
-    <div
-      class="field-note field-note--error"
-      id=":r7:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          error
-        </title>
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      This is a fieldnote with an error.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> InputWithin story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div>
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":rq:"
-      >
-        Input field with button inside
-      </label>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input input-field__input--input-within"
-        id=":rq:"
-        type="text"
-      />
-      <div
-        class="input-field__input-within"
-      >
-        <button
-          class="button button--layout-none button--secondary button--sm button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Button
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> LeadingIcon story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        aria-label="search field"
-        class="input input-field__input--leading-icon"
-        id=":re:"
-        placeholder="Search..."
-        type="text"
-      />
-      <div
-        class="input-field__leading-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="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-          />
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r4:"
-      >
-        Default input field
-      </label>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input"
-        id=":r4:"
-        type="text"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline input-field__overline--no-label"
-    />
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":rl:"
-        aria-invalid="false"
-        aria-label="Input for no visible label"
-        class="input"
-        id=":rk:"
-        required=""
-        type="text"
-      />
-    </div>
-    <div
-      class="field-note"
-      id=":rl:"
-    >
-      This input field has no visible label
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> Password story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":rm:"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input"
-        id=":rm:"
-        type="password"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":ra:"
-      >
-        Read-only field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":rb:"
-        aria-invalid="false"
-        class="input"
-        id=":ra:"
-        readonly=""
-        type="text"
-        value="some read-only information"
-      />
-    </div>
-    <div
-      class="field-note"
-      id=":rb:"
-    >
-      This will show up like text, but not be interactive
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> Required story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":rg:"
-      >
-        Input field with fieldNote
-      </label>
-      <span
-        class="text text--body-sm input-field__required-text"
-      >
-        (Required)
-      </span>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":rh:"
-        aria-invalid="false"
-        class="input"
-        id=":rg:"
-        required=""
-        type="text"
-      />
-    </div>
-    <div
-      class="field-note"
-      id=":rh:"
-    >
-      This is a fieldnote for a required input field.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> RequiredDisabled story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        aria-disabled="true"
-        class="label label--lg label--disabled input-field__label input-field__label--disabled"
-        for=":ri:"
-      >
-        Input field with fieldNote
-      </label>
-      <span
-        aria-disabled="true"
-        class="text text--body-sm input-field__required-text input-field__required-text--disabled"
-      >
-        (Required)
-      </span>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":rj:"
-        aria-invalid="false"
-        class="input"
-        disabled=""
-        id=":ri:"
-        required=""
-        type="text"
-      />
-    </div>
-    <div
-      aria-disabled="true"
-      class="field-note field-note--disabled"
-      id=":rj:"
-    >
-      This is a fieldnote for a required input field.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> ShowHint story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":ro:"
-      >
-        Field with Optional Hint
-      </label>
-      <span
-        class="text text--body-sm input-field__required-text"
-      >
-        (Optional)
-      </span>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input"
-        id=":ro:"
-        type="text"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> TabularInput story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <table
-    class="table"
-  >
-    <thead>
-      <tr
-        class="table-row"
-      >
-        <th
-          class="table-header-cell"
-        >
-          Label
-        </th>
-        <th
-          class="table-header-cell"
-        >
-          Field
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        class="table-row"
-      >
-        <td
-          class="table-cell flex items-center"
-        >
-          <label
-            class="label flex items-center"
-            for="field-1"
-            id="input-1"
-          >
-            Input One
-             
-          </label>
-        </td>
-        <td
-          class="table-cell"
-        >
-          <div>
-            <div
-              class="input-field__body"
-            >
-              <input
-                aria-invalid="false"
-                aria-label="redundant"
-                aria-labelledby="input-1"
-                class="input"
-                id="field-1"
-                placeholder="click the label to highlight field"
-                type="text"
-              />
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`<InputField /> Warning story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r8:"
-      >
-        Warning input field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":r9:"
-        aria-invalid="false"
-        class="input warning"
-        id=":r8:"
-        type="text"
-      />
-    </div>
-    <div
-      class="field-note field-note--warning"
-      id=":r9:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          warning
-        </title>
-        <path
-          d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
-        />
-      </svg>
-      This uses the warning treatment and also applies to the field note
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":rs:"
-      >
-        test label
-      </label>
-      <div
-        class="input-field__character-counter"
-      >
-        <span
-          class="input-field--invalid-length"
-        >
-          17
-        </span>
-         
-        / 
-        15
-      </div>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input error"
-        id=":rs:"
-        maxlength="15"
-        required=""
-        type="text"
-        value="Some initial text"
-      />
-    </div>
-    <div
-      class="input-field__footer"
-    />
-  </div>
-</div>
-`;
-
-exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":ru:"
-      >
-        Shortened Length Field
-      </label>
-      <div
-        class="input-field__character-counter"
-      >
-        <span
-          class="input-field--invalid-length"
-        >
-          17
-        </span>
-         
-        / 
-        15
-      </div>
-    </div>
-    <div
-      class="input-field__body"
-    >
-      <input
-        aria-invalid="false"
-        class="input error"
-        id=":ru:"
-        required=""
-        type="text"
-        value="Some initial text"
-      />
-    </div>
-    <div
-      class="input-field__footer"
-    />
-  </div>
-</div>
-`;
-
-exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r10:"
-      >
-        test label
-      </label>
-      <div
-        class="input-field__character-counter"
-      >
-        <span
-          class="input-field--invalid-length"
-        >
-          17
-        </span>
-         
-        / 
-        15
-      </div>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":r11:"
-        aria-invalid="false"
-        class="input error"
-        id=":r10:"
-        maxlength="20"
-        required=""
-        type="text"
-        value="Some initial text"
-      />
-    </div>
-    <div
-      class="input-field__footer"
-    >
-      <div
-        class="field-note field-note--error"
-        id=":r11:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            error
-          </title>
-          <path
-            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-          />
-        </svg>
-        Longer Field Description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InputField /> WithText story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="w-96"
-  >
-    <div
-      class="input-field__overline"
-    >
-      <label
-        class="label label--lg input-field__label"
-        for=":r2:"
-      >
-        Default input field
-      </label>
-    </div>
-    <div
-      class="input-field__body input-field--has-fieldNote"
-    >
-      <input
-        aria-describedby=":r3:"
-        aria-invalid="false"
-        class="input"
-        id=":r2:"
-        type="text"
-        value="Text value"
-      />
-    </div>
-    <div
-      class="field-note"
-      id=":r3:"
-    >
-      This is a fieldnote.
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/InputField/__snapshots__/InputField.test.tsx.snap b/src/components/InputField/__snapshots__/InputField.test.tsx.snap
index db1700ea4..934128432 100644
--- a/src/components/InputField/__snapshots__/InputField.test.tsx.snap
+++ b/src/components/InputField/__snapshots__/InputField.test.tsx.snap
@@ -2,9 +2,11 @@
 
 exports[`<InputField /> Default story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
@@ -38,15 +40,18 @@ exports[`<InputField /> Default story renders snapshot 1`] = `
 
 exports[`<InputField /> Disabled story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
-        class="label label--lg input-field__label input-field__label--disabled"
-        for=":r6:"
+        aria-disabled="true"
+        class="label label--lg label--disabled input-field__label input-field__label--disabled"
+        for=":rc:"
       >
         Disabled input field
       </label>
@@ -55,17 +60,19 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r7:"
+        aria-describedby=":rd:"
         aria-invalid="false"
         class="input"
         disabled=""
-        id=":r6:"
+        id=":rc:"
         type="text"
+        value="Text in disabled field"
       />
     </div>
     <div
+      aria-disabled="true"
       class="field-note field-note--disabled"
-      id=":r7:"
+      id=":rd:"
     >
       This InputField is disabled
     </div>
@@ -75,15 +82,17 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
 
 exports[`<InputField /> Error story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":r4:"
+        for=":r6:"
       >
         Error input field
       </label>
@@ -92,16 +101,16 @@ exports[`<InputField /> Error story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r5:"
+        aria-describedby=":r7:"
         aria-invalid="true"
         class="input error"
-        id=":r4:"
+        id=":r6:"
         type="text"
       />
     </div>
     <div
       class="field-note field-note--error"
-      id=":r5:"
+      id=":r7:"
     >
       <svg
         class="icon field-note__icon"
@@ -128,7 +137,7 @@ exports[`<InputField /> Error story renders snapshot 1`] = `
 
 exports[`<InputField /> InputWithin story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
   <div>
     <div
@@ -136,7 +145,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rc:"
+        for=":rq:"
       >
         Input field with button inside
       </label>
@@ -146,18 +155,22 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
     >
       <input
         aria-invalid="false"
-        class="input"
-        id=":rc:"
+        class="input input-field__input--input-within"
+        id=":rq:"
         type="text"
       />
       <div
         class="input-field__input-within"
       >
         <button
-          class="button button--sm button--icon button--brand"
+          class="button button--layout-none button--secondary button--sm button--variant-default"
           type="button"
         >
-          Button
+          <span
+            class="button__text"
+          >
+            Button
+          </span>
         </button>
       </div>
     </div>
@@ -165,17 +178,60 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<InputField /> LeadingIcon story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__body"
+    >
+      <input
+        aria-invalid="false"
+        aria-label="search field"
+        class="input input-field__input--leading-icon"
+        id=":re:"
+        placeholder="Search..."
+        type="text"
+      />
+      <div
+        class="input-field__leading-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="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":r2:"
+        for=":r4:"
       >
         Default input field
       </label>
@@ -186,7 +242,7 @@ exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":r2:"
+        id=":r4:"
         type="text"
       />
     </div>
@@ -196,17 +252,84 @@ exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
 
 exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline input-field__overline--no-label"
+    />
+    <div
+      class="input-field__body input-field--has-fieldNote"
     >
-      <span
-        class="text text--body-sm input-field__required-text"
+      <input
+        aria-describedby=":rl:"
+        aria-invalid="false"
+        aria-label="Input for no visible label"
+        class="input"
+        id=":rk:"
+        required=""
+        type="text"
+      />
+    </div>
+    <div
+      class="field-note"
+      id=":rl:"
+    >
+      This input field has no visible label
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InputField /> Password story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":rm:"
       >
-        Required
-      </span>
+        Password
+      </label>
+    </div>
+    <div
+      class="input-field__body"
+    >
+      <input
+        aria-invalid="false"
+        class="input"
+        id=":rm:"
+        type="password"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":ra:"
+      >
+        Read-only field
+      </label>
     </div>
     <div
       class="input-field__body input-field--has-fieldNote"
@@ -214,18 +337,18 @@ exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
       <input
         aria-describedby=":rb:"
         aria-invalid="false"
-        aria-label="Input for no visible label"
         class="input"
         id=":ra:"
-        required=""
+        readonly=""
         type="text"
+        value="some read-only information"
       />
     </div>
     <div
       class="field-note"
       id=":rb:"
     >
-      This input field has no visible label
+      This will show up like text, but not be interactive
     </div>
   </div>
 </div>
@@ -233,39 +356,41 @@ exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
 
 exports[`<InputField /> Required story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":r8:"
+        for=":rg:"
       >
         Input field with fieldNote
       </label>
       <span
         class="text text--body-sm input-field__required-text"
       >
-        Required
+        (Required)
       </span>
     </div>
     <div
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r9:"
+        aria-describedby=":rh:"
         aria-invalid="false"
         class="input"
-        id=":r8:"
+        id=":rg:"
         required=""
         type="text"
       />
     </div>
     <div
       class="field-note"
-      id=":r9:"
+      id=":rh:"
     >
       This is a fieldnote for a required input field.
     </div>
@@ -273,9 +398,93 @@ exports[`<InputField /> Required story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<InputField /> RequiredDisabled story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        aria-disabled="true"
+        class="label label--lg label--disabled input-field__label input-field__label--disabled"
+        for=":ri:"
+      >
+        Input field with fieldNote
+      </label>
+      <span
+        aria-disabled="true"
+        class="text text--body-sm input-field__required-text input-field__required-text--disabled"
+      >
+        (Required)
+      </span>
+    </div>
+    <div
+      class="input-field__body input-field--has-fieldNote"
+    >
+      <input
+        aria-describedby=":rj:"
+        aria-invalid="false"
+        class="input"
+        disabled=""
+        id=":ri:"
+        required=""
+        type="text"
+      />
+    </div>
+    <div
+      aria-disabled="true"
+      class="field-note field-note--disabled"
+      id=":rj:"
+    >
+      This is a fieldnote for a required input field.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InputField /> ShowHint story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":ro:"
+      >
+        Field with Optional Hint
+      </label>
+      <span
+        class="text text--body-sm input-field__required-text"
+      >
+        (Optional)
+      </span>
+    </div>
+    <div
+      class="input-field__body"
+    >
+      <input
+        aria-invalid="false"
+        class="input"
+        id=":ro:"
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<InputField /> TabularInput story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
   <table
     class="table"
@@ -337,78 +546,89 @@ exports[`<InputField /> TabularInput story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
+exports[`<InputField /> Warning story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":re:"
+        for=":r8:"
       >
-        test label
+        Warning input field
       </label>
-      <span
-        class="text text--body-sm input-field__required-text"
-      >
-        Required
-      </span>
     </div>
     <div
-      class="input-field__body"
+      class="input-field__body input-field--has-fieldNote"
     >
       <input
+        aria-describedby=":r9:"
         aria-invalid="false"
-        class="input error"
-        id=":re:"
-        maxlength="15"
-        required=""
+        class="input warning"
+        id=":r8:"
         type="text"
-        value="Some initial text"
       />
     </div>
     <div
-      class="input-field__footer"
+      class="field-note field-note--warning"
+      id=":r9:"
     >
-      <div
-        class="input-field__character-counter"
+      <svg
+        class="icon field-note__icon"
+        fill="currentColor"
+        height="1rem"
+        role="img"
+        style="--icon-size: 1rem;"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <span
-          class="input-field--invalid-length"
-        >
-          17
-        </span>
-         
-        / 
-        15
-      </div>
+        <title>
+          warning
+        </title>
+        <path
+          d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
+        />
+      </svg>
+      This uses the warning treatment and also applies to the field note
     </div>
   </div>
 </div>
 `;
 
-exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
+exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":rg:"
+        for=":rs:"
       >
         test label
       </label>
-      <span
-        class="text text--body-sm input-field__required-text"
+      <div
+        class="input-field__character-counter"
       >
-        Required
-      </span>
+        <span
+          class="input-field--invalid-length"
+        >
+          17
+        </span>
+         
+        / 
+        15
+      </div>
     </div>
     <div
       class="input-field__body"
@@ -416,7 +636,8 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":rg:"
+        id=":rs:"
+        maxlength="15"
         required=""
         type="text"
         value="Some initial text"
@@ -424,7 +645,27 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
     </div>
     <div
       class="input-field__footer"
+    />
+  </div>
+</div>
+`;
+
+exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
     >
+      <label
+        class="label label--lg input-field__label"
+        for=":ru:"
+      >
+        Shortened Length Field
+      </label>
       <div
         class="input-field__character-counter"
       >
@@ -438,38 +679,62 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
         15
       </div>
     </div>
+    <div
+      class="input-field__body"
+    >
+      <input
+        aria-invalid="false"
+        class="input error"
+        id=":ru:"
+        required=""
+        type="text"
+        value="Some initial text"
+      />
+    </div>
+    <div
+      class="input-field__footer"
+    />
   </div>
 </div>
 `;
 
 exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1`] = `
 <div
-  class="p-2"
+  class="p-8"
 >
-  <div>
+  <div
+    class="w-96"
+  >
     <div
       class="input-field__overline"
     >
       <label
         class="label label--lg input-field__label"
-        for=":ri:"
+        for=":r10:"
       >
         test label
       </label>
-      <span
-        class="text text--body-sm input-field__required-text"
+      <div
+        class="input-field__character-counter"
       >
-        Required
-      </span>
+        <span
+          class="input-field--invalid-length"
+        >
+          17
+        </span>
+         
+        / 
+        15
+      </div>
     </div>
     <div
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rj:"
+        aria-describedby=":r11:"
         aria-invalid="false"
         class="input error"
-        id=":ri:"
+        id=":r10:"
         maxlength="20"
         required=""
         type="text"
@@ -481,7 +746,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <div
         class="field-note field-note--error"
-        id=":rj:"
+        id=":r11:"
       >
         <svg
           class="icon field-note__icon"
@@ -502,18 +767,45 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
         </svg>
         Longer Field Description
       </div>
-      <div
-        class="input-field__character-counter"
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InputField /> WithText story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":r2:"
       >
-        <span
-          class="input-field--invalid-length"
-        >
-          17
-        </span>
-         
-        / 
-        15
-      </div>
+        Default input field
+      </label>
+    </div>
+    <div
+      class="input-field__body input-field--has-fieldNote"
+    >
+      <input
+        aria-describedby=":r3:"
+        aria-invalid="false"
+        class="input"
+        id=":r2:"
+        type="text"
+        value="Text value"
+      />
+    </div>
+    <div
+      class="field-note"
+      id=":r3:"
+    >
+      This is a fieldnote.
     </div>
   </div>
 </div>
diff --git a/src/components/InputField/index.ts b/src/components/InputField/index.ts
index 0a2cb9176..2b9fcf92e 100644
--- a/src/components/InputField/index.ts
+++ b/src/components/InputField/index.ts
@@ -1,2 +1 @@
 export { InputField as default } from './InputField';
-export { InputField as InputFieldV2 } from './InputField-v2';
diff --git a/src/components/InputLabel/InputLabel.module.css b/src/components/InputLabel/InputLabel.module.css
deleted file mode 100644
index d520ad9fd..000000000
--- a/src/components/InputLabel/InputLabel.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # INPUT LABEL
-\*------------------------------------*/
-
-/**
- * Text labeling the input component.
- */
-.label {
-  color: var(--eds-theme-color-text-neutral-strong);
-}
-
-/**
- * Disabled variant of the input label.
- */
-.label--disabled {
-  color: var(--eds-theme-color-text-disabled);
-}
-
-/**
- * Input label size variants.
- */
-.label--md {
-  font: var(--eds-theme-typography-body-sm);
-}
-.label--lg {
-  font: var(--eds-theme-typography-body-md);
-}
diff --git a/src/components/InputLabel/InputLabel.stories.ts b/src/components/InputLabel/InputLabel.stories.ts
deleted file mode 100644
index 2631d9a79..000000000
--- a/src/components/InputLabel/InputLabel.stories.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { InputLabel } from './InputLabel';
-
-export default {
-  title: 'Components/InputLabel',
-  component: InputLabel,
-  args: {
-    children: 'Label',
-  },
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0'],
-  },
-} as Meta<Args>;
-
-type Args = ComponentProps<typeof InputLabel>;
-
-export const Default: StoryObj<Args> = {};
-
-export const Medium: StoryObj<Args> = {
-  args: {
-    size: 'md',
-  },
-};
-
-export const LargeDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-  },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
-};
-
-export const MediumDisabled: StoryObj<Args> = {
-  args: {
-    disabled: true,
-    size: 'md',
-  },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
-};
-
-export const LongCopy: StoryObj<Args> = {
-  args: {
-    children:
-      'Long label lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac id velit ut egestas arcu. Atmaecenas urna, risus donec praesent eu consectetur.',
-  },
-};
diff --git a/src/components/InputLabel/InputLabel.test.ts b/src/components/InputLabel/InputLabel.test.ts
deleted file mode 100644
index b077ebef4..000000000
--- a/src/components/InputLabel/InputLabel.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 './InputLabel.stories';
-
-describe('<InputLabel />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/InputLabel/InputLabel.tsx b/src/components/InputLabel/InputLabel.tsx
deleted file mode 100644
index 952875936..000000000
--- a/src/components/InputLabel/InputLabel.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { Size } from '../../util/variant-types';
-import styles from './InputLabel.module.css';
-
-export type InputLabelProps = {
-  /**
-   * Text to render in label.
-   */
-  children: ReactNode;
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * ID of input that label is associated with.
-   */
-  htmlFor: string;
-  /**
-   * Size of the label.
-   *
-   * **Default is `"lg"`**.
-   */
-  size?: Extract<Size, 'md' | 'lg'>;
-  /**
-   * Indicates disabled state of the input.
-   */
-  disabled?: boolean;
-};
-
-/**
- * BETA: This component is still a work in progress and is subject to change.
- *
- * `import {InputLabel} from "@chanzuckerberg/eds";`
- *
- * Label associated with an input element such as a radio or checkbox.
- */
-export const InputLabel = ({
-  children,
-  className,
-  htmlFor,
-  size = 'lg',
-  disabled,
-}: InputLabelProps) => {
-  const componentClassName = clsx(
-    styles['label'],
-    size === 'md' && styles['label--md'],
-    size === 'lg' && styles['label--lg'],
-    disabled && styles['label--disabled'],
-    className,
-  );
-  return (
-    <label className={componentClassName} htmlFor={htmlFor}>
-      {children}
-    </label>
-  );
-};
-
-InputLabel.displayName = 'InputLabel';
diff --git a/src/components/InputLabel/__snapshots__/InputLabel.test.ts.snap b/src/components/InputLabel/__snapshots__/InputLabel.test.ts.snap
deleted file mode 100644
index 46b2a07b0..000000000
--- a/src/components/InputLabel/__snapshots__/InputLabel.test.ts.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InputLabel /> Default story renders snapshot 1`] = `
-<label
-  class="label label--lg"
->
-  Label
-</label>
-`;
-
-exports[`<InputLabel /> LargeDisabled story renders snapshot 1`] = `
-<label
-  class="label label--lg label--disabled"
->
-  Label
-</label>
-`;
-
-exports[`<InputLabel /> LongCopy story renders snapshot 1`] = `
-<label
-  class="label label--lg"
->
-  Long label lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac id velit ut egestas arcu. Atmaecenas urna, risus donec praesent eu consectetur.
-</label>
-`;
-
-exports[`<InputLabel /> Medium story renders snapshot 1`] = `
-<label
-  class="label label--md"
->
-  Label
-</label>
-`;
-
-exports[`<InputLabel /> MediumDisabled story renders snapshot 1`] = `
-<label
-  class="label label--md label--disabled"
->
-  Label
-</label>
-`;
diff --git a/src/components/InputLabel/index.ts b/src/components/InputLabel/index.ts
deleted file mode 100644
index dbb01e30d..000000000
--- a/src/components/InputLabel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { InputLabel as default } from './InputLabel';
diff --git a/src/components/Link/Link-v2.module.css b/src/components/Link/Link-v2.module.css
deleted file mode 100644
index f1b5ac444..000000000
--- a/src/components/Link/Link-v2.module.css
+++ /dev/null
@@ -1,114 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # LINK
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-.link {
-  display: inline;
-
-  /* TODO: verify the way to sync type tokens and one-off treatments */
-  font-weight: 500;
-  text-decoration-line: underline;
-}
-
-/**
- * Sub-components (only should apply to standalone links
- */
-.link__icon {
-  padding-left: 0.25rem;
-
-  /* Sub-component spacing */
-  &.link--size-xl,
-  &.link--size-lg { padding-left: 0.5rem; }
-
-  &.link--size-md,
-  &.link--size-sm, 
-  &.link--size-xs { padding-left: 0.25rem; }
-}
-
-/**
- * Contexts
- */
-.link--context-standalone {
-  display: inline-flex;
-  align-items: center;
-
-  &.link--emphasis-default {
-    color: var(--eds-theme-color-text-utility-default-primary);
-  }
-
-  &.link--emphasis-low {
-    color: var(--eds-theme-color-text-utility-default-primary);
-    text-decoration: none;
-  }
-
-  /**
-   * Sizes - using the presets for type ramp matching body-*
-   */
-  &.link--size-xl {
-    font: var(--eds-theme-typography-body-xl);
-  }
-
-  &.link--size-lg {
-    font: var(--eds-theme-typography-body-lg);
-  }
-
-  &.link--size-md {
-    font: var(--eds-theme-typography-body-md);
-  }
-
-  &.link--size-sm {
-    font: var(--eds-theme-typography-body-sm);
-  }
-
-  &.link--size-xs {
-    font: var(--eds-theme-typography-body-xs);
-  }
-}
-
-/**
- * Emphasis
- */
-.link--emphasis-default {
-  color: inherit;
-}
-
-.link--emphasis-high {
-  color: var(--eds-theme-color-text-utility-interactive-secondary);
-}
-
-/**
- * Inverse variant
- */
-.link.link--variant-inverse:hover,
-.link.link--variant-inverse:active {
-  color: var(--eds-theme-color-text-utility-inverse);
-}
-
-.link.link--variant-inverse:visited {
-  color: var(--eds-theme-color-text-utility-inverse-interactive-visited);
-}
-
-/**
- * States
- */
-.link:hover {
-  color: var(--eds-theme-color-text-utility-interactive-secondary-hover);
-}
-
-.link:active {
-  color: var(--eds-theme-color-text-utility-interactive-secondary-active);
-}
-
-.link:visited {
-  color: var(--eds-theme-color-text-utility-interactive-visited);
-}
-
-.link:focus-visible {
-  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-  outline-offset: 0.125rem;
-}
\ No newline at end of file
diff --git a/src/components/Link/Link-v2.stories.tsx b/src/components/Link/Link-v2.stories.tsx
deleted file mode 100644
index f582487f7..000000000
--- a/src/components/Link/Link-v2.stories.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-import { Link, type LinkV2Props } from './Link-v2';
-
-export default {
-  title: 'Components/V2/Link',
-  component: Link,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  args: {
-    children: 'Link',
-    size: 'lg',
-    href: 'http://example.org/',
-    // stop link from navigating to another page so we can click the link for testing
-    onClick: (event: any) => event.preventDefault(),
-  },
-  decorators: [
-    (Story) => <div className="text-utility-default-primary">{Story()}</div>,
-  ],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Link>;
-
-export const Default: StoryObj<Args> = {};
-
-/**
- * When using context, you can specify a trailing icon for the link.
- */
-export const LinkWithChevron: StoryObj<Args> = {
-  args: {
-    children: 'Default',
-    context: 'standalone',
-    icon: 'chevron-right',
-  },
-};
-
-/**
- * When using context, you can specify a trailing icon for the link. When using the open icon, make sure that a new tab/window is opened.
- */
-export const LinkWithOpenIcon: StoryObj<Args> = {
-  args: {
-    children: 'Default',
-    context: 'standalone',
-    icon: 'open-in-new',
-  },
-};
-
-/**
- * You can add formatting to the link if needed.
- */
-export const LinkWithFormattedChildren: StoryObj<Args> = {
-  args: {
-    children: <em>emphasized link</em>,
-    context: 'standalone',
-    icon: 'open-in-new',
-  },
-};
-
-/**
- * Standalone links can have additional emphasis or minimized emphasis applied.
- */
-export const Emphasis: StoryObj<Args> = {
-  args: {
-    size: 'md',
-    context: 'standalone',
-  },
-  render: (args) => {
-    return (
-      <div>
-        <Link {...args} emphasis="default">
-          Default Emphasis
-        </Link>
-        <Link {...args} emphasis="high">
-          High Emphasis
-        </Link>
-        <Link {...args} emphasis="low">
-          Low Emphasis
-        </Link>
-      </div>
-    );
-  },
-};
-
-/**
- * We also include an inverse variant, for use on dark backgrounds.
- */
-export const InverseVariant: StoryObj<Args> = {
-  args: {
-    variant: 'inverse',
-  },
-  parameters: {
-    backgrounds: { default: 'background-utility-default-high-emphasis' },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-96 p-1 text-center text-utility-inverse">{Story()}</div>
-    ),
-  ],
-};
-
-export const LinkInParagraphContext: StoryObj<ExtendArgs> = {
-  render: (args) => (
-    <div>
-      Lorem ipsum dolor sit amet,{' '}
-      <Link {...args} href="https://example.com/">
-        consectetur adipiscing elit
-      </Link>
-      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
-      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
-      <Link {...args} href="https://example.org">
-        Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est.
-        Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non
-        dui dignissim fermentum.
-      </Link>{' '}
-      Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce
-      vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas.
-      Sed sed quam id nisl bibendum convallis. Proin suscipit, odio{' '}
-      <Link {...args} href="https://example.edu">
-        vel pulvinar
-      </Link>{' '}
-      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
-    </div>
-  ),
-};
-
-/**
- * Links will inherit the color from the surrounding text color definition (default emphasis, inline links)
- */
-export const InheritColor: StoryObj<Args> = {
-  args: {
-    children: 'Inheriting',
-  },
-  render: (args) => (
-    <div>
-      Lorem ipsum dolor sit amet,{' '}
-      <Link {...args} href="https://example.com/">
-        consectetur adipiscing elit
-      </Link>
-      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
-      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
-      <Link {...args} href="https://example.org">
-        Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est.
-        Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non
-        dui dignissim fermentum.
-      </Link>{' '}
-      Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce
-      vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas.
-      Sed sed quam id nisl bibendum convallis. Proin suscipit, odio{' '}
-      <Link {...args} href="https://example.edu">
-        vel pulvinar
-      </Link>{' '}
-      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
-    </div>
-  ),
-  decorators: [
-    (Story) => <div className="text-utility-critical">{Story()}</div>,
-  ],
-};
-
-/**
- * Here, we introduce a special type extension to LinkProps, then use it in a
- * composed component, to demonstrate the ability to offer custom props to a component
- */
-type ExtendArgs = LinkV2Props<{ to: string }>;
-function ExtendedLink(args: ExtendArgs) {
-  return (
-    // eslint-disable-next-line no-alert
-    <Link {...args} onClick={() => alert(`handle to value: ${args.to}`)} />
-  );
-}
-
-/**
- * You can extend a component's props for use with libraries that aid navigation, e.g., react-dom-router, et al.
- *
- * Steps to use:
- *
- * * import `LinkProps`
- * * use the type param. to augment the types for `Link` with the libraries type, e.g., `type ExtendedProps = LinkProps<typeof CustomLink>;`
- * * Now export a new function component that uses the new prop type and returns a composed function
- *
- * When using this pattern, you likely want to also specify the library's Link component using `as`
- *
- * ```tsx
- * type ExtendedProps = LinkProps<typeof CustomLink>;
- *
- * export default function Link({children, ...other}: ExtendedProps) {
- *   return (
- *    <Link as={CustomLink} {...other}>
- *      {children}
- *    </Link>
- *   );
- * }
- * ```
- */
-export const UsingExtendedLink: StoryObj<ExtendArgs> = {
-  render: (args) => (
-    <div>
-      Lorem ipsum dolor sit amet,{' '}
-      <ExtendedLink
-        {...args}
-        href="https://example.org/extended-link/"
-        to="test"
-      >
-        consectetur adipiscing elit
-      </ExtendedLink>
-      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
-      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
-    </div>
-  ),
-};
diff --git a/src/components/Link/Link-v2.test.tsx b/src/components/Link/Link-v2.test.tsx
deleted file mode 100644
index eed27a220..000000000
--- a/src/components/Link/Link-v2.test.tsx
+++ /dev/null
@@ -1,66 +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 { Link } from './Link-v2';
-import * as stories from './Link-v2.stories';
-
-describe('<Link />', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('renders the text in the link', () => {
-    render(<Link href="/">Click</Link>);
-
-    expect(screen.getByRole('link')).toHaveTextContent('Click');
-  });
-
-  it('fires callback on click', async () => {
-    const user = userEvent.setup();
-    const onClick = jest.fn();
-    render(
-      <Link href="/" onClick={onClick}>
-        Click
-      </Link>,
-    );
-
-    await user.click(screen.getByRole('link'));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('passes test ids down properly', () => {
-    render(
-      <Link data-testid="example-test-id" href="/">
-        Click
-      </Link>,
-    );
-    expect(screen.getByTestId('example-test-id')).toMatchSnapshot();
-  });
-
-  it('passes class names down properly', () => {
-    render(
-      <Link
-        className="exampleClassName"
-        data-testid="example-class-name"
-        href="/"
-      >
-        Click
-      </Link>,
-    );
-    expect(screen.getByTestId('example-class-name')).toMatchSnapshot();
-  });
-
-  it('forwards refs', () => {
-    const ref = React.createRef<HTMLAnchorElement>();
-    render(
-      <Link href="/" ref={ref}>
-        Click
-      </Link>,
-    );
-
-    ref.current!.focus();
-
-    const link = screen.getByRole('link');
-    expect(link).toHaveFocus();
-  });
-});
diff --git a/src/components/Link/Link-v2.tsx b/src/components/Link/Link-v2.tsx
deleted file mode 100644
index d78f52506..000000000
--- a/src/components/Link/Link-v2.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import type { Size } from '../../util/variant-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-
-import styles from './Link-v2.module.css';
-
-export type LinkV2Props<ExtendedElement = unknown> =
-  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    // Component API
-    /**
-     * Component used to render the element. Meant to support interaction with framework navigation libraries.
-     *
-     * **Default is `"a"`**.
-     */
-    as?: string | React.ElementType;
-    /**
-     * The link contents or label. Using ReactNode to support customized text treatments
-     */
-    children: React.ReactNode;
-    // Design API
-    /**
-     * Where `Link` sits alongside other text and content:
-     *
-     * * **inline** - Inline link inherits the text size established within the `<p>` paragraph they are embedded in.
-     * * **standalone** - Users can choose from the available sizes.
-     *
-     * **Default is `"inline"`**.
-     *
-     * Note: Icons will only be visible when `"standalone"` is used
-     */
-    context?: 'inline' | 'standalone';
-    /**
-     * (trailing) icon to use with the link
-     */
-    icon?: Extract<IconName, 'chevron-right' | 'open-in-new'>;
-    /**
-     * Extra or lowered colors added to a link
-     */
-    emphasis?: 'default' | 'high' | 'low';
-    /**
-     * Link size inherits from the surrounding text.
-     */
-    size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-    /**
-     * The variant treatment for links (use "inverse" on dark backgrounds).
-     *
-     * **Default is `"default"`**.
-     */
-    variant?: 'default' | 'inverse';
-  } & ExtendedElement;
-
-/**
- * `import {Link} from "@chanzuckerberg/eds";`
- *
- * Component for making styled anchor tags. Links allow users to navigate within or between a web page(s) or app(s).
- *
- */
-export const Link = forwardRef<HTMLAnchorElement, LinkV2Props>(
-  (
-    {
-      as: Component = 'a',
-      children,
-      className,
-      context,
-      emphasis = 'default',
-      icon,
-      size = 'md',
-      variant = 'default',
-      ...other
-    },
-    ref,
-  ) => {
-    const componentClassName = clsx(
-      className,
-      styles['link'],
-      context && styles[`link--context-${context}`],
-      emphasis && styles[`link--emphasis-${emphasis}`],
-      icon && styles['link--has-right-icon'],
-      size && styles[`link--size-${size}`],
-      variant === 'inverse' && styles[`link--variant-${variant}`],
-    );
-
-    const iconSize = size && (['xl', 'lg'].includes(size) ? '1.5rem' : '1rem');
-
-    // TODO-AH: Inline links cannot be lowEmphasis (add runtime warning)
-    // TODO-AH: Inline links won't show icons (add runtime warning)
-    // TODO-AH: chevron-right only allowr when lowEmphasis is used (add runtime warning)
-    return (
-      <Component className={componentClassName} ref={ref} {...other}>
-        {children}
-        {icon && context === 'standalone' && (
-          <Icon
-            className={styles['link__icon']}
-            name={icon}
-            purpose="decorative"
-            size={iconSize}
-          />
-        )}
-      </Component>
-    );
-  },
-);
-
-Link.displayName = 'Link';
diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
index fe05a85c0..6701b5499 100644
--- a/src/components/Link/Link.module.css
+++ b/src/components/Link/Link.module.css
@@ -3,525 +3,112 @@
 /*------------------------------------*\
     # LINK
 \*------------------------------------*/
-
-/**
- * Styled clickable element that should look like a button or link.
- */
-.link {
-  font: var(--eds-theme-typography-button-label);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  /* Adds a gap between children to automatically handle spacing between icons and text. */
-  gap: 0.75rem;
-  border-width: calc(var(--eds-theme-border-width) * 1px);
-  border-style: solid;
-  border-radius: calc(var(--eds-theme-box-button-border-radius) * 1px);
-  cursor: pointer;
-  /* Removes the underline in the case that the rendered element is an <a> tag. */
-  text-decoration: none;
-  transition-property: color, background-color, border-color;
-  transition-duration: calc(var(--eds-anim-fade-quick) * 1s);
-  transition-timing-function: var(--eds-anim-ease);
-
-  :where(svg) {
-    /* Adds default size for icons passed in for consistency. */
-    --icon-size-default: 2em;
-    transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
-
-    @media screen and (prefers-reduced-motion) {
-      transition: none;
-    }
-  }
-
-  &:focus-visible {
-    @mixin focus;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      @mixin focus;
-    }
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
 /**
- * Margin 0 added becuase Safari has margin on buttons.
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- *    for margin can happen where used.
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
  */
-:where(.link) {
-  margin: 0;
-}
-
-
-/**
- * Link button styles
- */
- .link--link {
-  @mixin textLink;
 
+.link {
   display: inline;
-  /**
-   * Override default Clickable styles
-   */
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  /**
-   * Smaller gap between text and icon in link button style
-   */
-  gap: 0.25em;
-}
-
-/**
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- * for margin can happen where used, but needs to be specific enough to override preflight.
- */
-a:where(.link--link),
-button:where(.link--link) {
-  /* 2px padding gives the text breathing room in the focus state */
-  padding: 2px;
-  /**
-   * -2px margin compensates for the padding so the link doesn't have too much space between it
-   *  and surrounding text
-   */
-  margin: -2px;
-}
-
-/**
- * Link neutral clickable style
- */
-:where(.link--link).link--neutral {
-  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
-
-  &:hover {
-    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
-  }
-
-  &:focus-visible {
-    background-color: var(--eds-theme-color-link-neutral-background-focus);
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      background-color: var(--eds-theme-color-link-neutral-background-focus);
-    }
-  }
-}
-
-/** TODO: Remove the below styles at the next major version, so links only have link-like look/feel */
-
-/**
- * Primary brand clickable style
- */
-:where(.link--primary).link--brand {
-  border-color: var(--eds-theme-color-button-primary-brand-border);
-  background-color: var(--eds-theme-color-button-primary-brand-background);
-  color: var(--eds-theme-color-button-primary-brand-text);
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-primary-brand-border-hover);
-    background-color: var(--eds-theme-color-button-primary-brand-background-hover);
-    color: var(--eds-theme-color-button-primary-brand-text-hover);
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-primary-brand-border-active);
-    background-color: var(--eds-theme-color-button-primary-brand-background-active);
-    color: var(--eds-theme-color-button-primary-brand-text-active);
-  }
-}
-
-/**
- * Primary error clickable style
- */
-:where(.link--primary).link--error {
-  border-color: var(--eds-theme-color-button-primary-error-border);
-  background-color: var(--eds-theme-color-button-primary-error-background);
-  color: var(--eds-theme-color-button-primary-error-text);
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-primary-error-border-hover);
-    background-color: var(--eds-theme-color-button-primary-error-background-hover);
-    color: var(--eds-theme-color-button-primary-error-text-hover);
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-primary-error-border-active);
-    background-color: var(--eds-theme-color-button-primary-error-background-active);
-    color: var(--eds-theme-color-button-primary-error-text-active);
-  }
-}
-
-/**
- * Secondary brand clickable style
- */
-:where(.link--secondary).link--brand {
-  border-color: var(--eds-theme-color-button-secondary-brand-border);
-  background-color: var(--eds-theme-color-button-secondary-brand-background);
-  color: var(--eds-theme-color-button-secondary-brand-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-brand-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
-    color: var(--eds-theme-color-button-secondary-brand-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-brand-icon-hover);
-    }
-  }
 
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-brand-border-active);
-    background-color: var(--eds-theme-color-button-secondary-brand-background-active);
-    color: var(--eds-theme-color-button-secondary-brand-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-brand-icon-focus);
-    }
-  }
+  /* TODO: verify the way to sync type tokens and one-off treatments */
+  font-weight: 500;
+  text-decoration-line: underline;
 }
 
 /**
- * Secondary neutral clickable style
+ * Sub-components (only should apply to standalone links
  */
-:where(.link--secondary).link--neutral {
-  border-color: var(--eds-theme-color-button-secondary-neutral-border);
-  background-color: var(--eds-theme-color-button-secondary-neutral-background);
-  color: var(--eds-theme-color-button-secondary-neutral-text);
+.link__icon {
+  padding-left: calc(var(--eds-size-half) / 16 * 1rem);
 
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-neutral-icon);
-  }
+  /* Sub-component spacing */
+  &.link--size-xl,
+  &.link--size-lg { padding-left: calc(var(--eds-size-1) / 16 * 1rem); }
 
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
-    color: var(--eds-theme-color-button-secondary-neutral-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
-    background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
-    color: var(--eds-theme-color-button-secondary-neutral-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-neutral-icon-active);
-    }
-  }
+  &.link--size-md,
+  &.link--size-sm, 
+  &.link--size-xs { padding-left: calc(var(--eds-size-half) / 16 * 1rem); }
 }
 
 /**
- * Secondary success clickable style
+ * Contexts
  */
-:where(.link--secondary).link--success {
-  border-color: var(--eds-theme-color-button-secondary-success-border);
-  background-color: var(--eds-theme-color-button-secondary-success-background);
-  color: var(--eds-theme-color-button-secondary-success-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-success-icon);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-success-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-success-background-hover);
-    color: var(--eds-theme-color-button-secondary-success-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-success-icon-hover);
-    }
-  }
+.link--context-standalone {
+  display: inline-flex;
+  align-items: center;
 
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-success-border-active);
-    background-color: var(--eds-theme-color-button-secondary-success-background-active);
-    color: var(--eds-theme-color-button-secondary-success-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-success-icon-active);
-    }
+  &.link--emphasis-default {
+    color: var(--eds-theme-color-text-utility-default-primary);
   }
-}
-
-/**
- * Secondary warning clickable style
- */
-:where(.link--secondary).link--warning {
-  border-color: var(--eds-theme-color-button-secondary-warning-border);
-  background-color: var(--eds-theme-color-button-secondary-warning-background);
-  color: var(--eds-theme-color-button-secondary-warning-text);
 
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-warning-icon);
+  &.link--emphasis-low {
+    color: var(--eds-theme-color-text-utility-default-primary);
+    text-decoration: none;
   }
 
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
-    color: var(--eds-theme-color-button-secondary-warning-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-warning-icon-hover);
-    }
+  /**
+   * Sizes - using the presets for type ramp matching body-*
+   */
+  &.link--size-xl {
+    font: var(--eds-theme-typography-body-xl);
   }
 
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-warning-border-active);
-    background-color: var(--eds-theme-color-button-secondary-warning-background-active);
-    color: var(--eds-theme-color-button-secondary-warning-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-warning-icon-active);
-    }
+  &.link--size-lg {
+    font: var(--eds-theme-typography-body-lg);
   }
-}
 
-/**
- * Secondary error clickable style
- */
-:where(.link--secondary).link--error {
-  border-color: var(--eds-theme-color-button-secondary-error-border);
-  background-color: var(--eds-theme-color-button-secondary-error-background);
-  color: var(--eds-theme-color-button-secondary-error-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-secondary-error-icon);
+  &.link--size-md {
+    font: var(--eds-theme-typography-body-md);
   }
 
-  &:hover {
-    border-color: var(--eds-theme-color-button-secondary-error-border-hover);
-    background-color: var(--eds-theme-color-button-secondary-error-background-hover);
-    color: var(--eds-theme-color-button-secondary-error-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-error-icon-hover);
-    }
+  &.link--size-sm {
+    font: var(--eds-theme-typography-body-sm);
   }
 
-  &:active {
-    border-color: var(--eds-theme-color-button-secondary-error-border-active);
-    background-color: var(--eds-theme-color-button-secondary-error-background-active);
-    color: var(--eds-theme-color-button-secondary-error-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-secondary-error-icon-active);
-    }
+  &.link--size-xs {
+    font: var(--eds-theme-typography-body-xs);
   }
 }
 
 /**
- * Icon brand clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
+ * Emphasis
  */
-:where(.link--icon).link--brand {
-  border-color: var(--eds-theme-color-button-icon-brand-border);
-  background-color: var(--eds-theme-color-button-icon-brand-background);
-  color: var(--eds-theme-color-button-icon-brand-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-brand);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-brand-border-hover);
-    background-color: var(--eds-theme-color-button-icon-brand-background-hover);
-    color: var(--eds-theme-color-button-icon-brand-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-brand-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-brand-border-active);
-    background-color: var(--eds-theme-color-button-icon-brand-background-active);
-    color: var(--eds-theme-color-button-icon-brand-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-brand-active);
-    }
-  }
+.link--emphasis-default {
+  color: inherit;
 }
 
-/**
- * Icon neutral clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.link--icon).link--neutral {
-  border-color: var(--eds-theme-color-button-icon-neutral-border);
-  background-color: var(--eds-theme-color-button-icon-neutral-background);
-  color: var(--eds-theme-color-button-icon-neutral-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-neutral);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
-    background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
-    color: var(--eds-theme-color-button-icon-neutral-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-neutral-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-neutral-border-active);
-    background-color: var(--eds-theme-color-button-icon-neutral-background-active);
-    color: var(--eds-theme-color-button-icon-neutral-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-neutral-active);
-    }
-  }
+.link--emphasis-high {
+  color: var(--eds-theme-color-text-utility-interactive-secondary);
 }
 
 /**
- * Icon success clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
+ * Inverse variant
  */
-:where(.link--icon).link--success {
-  border-color: var(--eds-theme-color-button-icon-success-border);
-  background-color: var(--eds-theme-color-button-icon-success-background);
-  color: var(--eds-theme-color-button-icon-success-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-success);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-success-border-hover);
-    background-color: var(--eds-theme-color-button-icon-success-background-hover);
-    color: var(--eds-theme-color-button-icon-success-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-success-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-success-border-active);
-    background-color: var(--eds-theme-color-button-icon-success-background-active);
-    color: var(--eds-theme-color-button-icon-success-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-success-active);
-    }
-  }
+.link.link--variant-inverse:hover,
+.link.link--variant-inverse:active {
+  color: var(--eds-theme-color-text-utility-inverse);
 }
 
-/**
- * Icon warning clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
- */
-:where(.link--icon).link--warning {
-  border-color: var(--eds-theme-color-button-icon-warning-border);
-  background-color: var(--eds-theme-color-button-icon-warning-background);
-  color: var(--eds-theme-color-button-icon-warning-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-warning);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-warning-border-hover);
-    background-color: var(--eds-theme-color-button-icon-warning-background-hover);
-    color: var(--eds-theme-color-button-icon-warning-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-warning-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-warning-border-active);
-    background-color: var(--eds-theme-color-button-icon-warning-background-active);
-    color: var(--eds-theme-color-button-icon-warning-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-warning-active);
-    }
-  }
+.link.link--variant-inverse:visited {
+  color: var(--eds-theme-color-text-utility-inverse-interactive-visited);
 }
 
 /**
- * Icon error clickable style
- * 
- * A clickable style that strips out borders, backgrounds, etc.
- *
- * Use for Close "X" buttons, tooltip icons, and other.
+ * States
  */
-:where(.link--icon).link--error {
-  border-color: var(--eds-theme-color-button-icon-error-border);
-  background-color: var(--eds-theme-color-button-icon-error-background);
-  color: var(--eds-theme-color-button-icon-error-text);
-
-  :where(svg) {
-    color: var(--eds-theme-color-button-icon-error);
-  }
-
-  &:hover {
-    border-color: var(--eds-theme-color-button-icon-error-border-hover);
-    background-color: var(--eds-theme-color-button-icon-error-background-hover);
-    color: var(--eds-theme-color-button-icon-error-text-hover);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-error-hover);
-    }
-  }
-
-  &:active {
-    border-color: var(--eds-theme-color-button-icon-error-border-active);
-    background-color: var(--eds-theme-color-button-icon-error-background-active);
-    color: var(--eds-theme-color-button-icon-error-text-active);
-    :where(svg) {
-      color: var(--eds-theme-color-button-icon-error-active);
-    }
-  }
+.link:hover {
+  color: var(--eds-theme-color-text-utility-interactive-secondary-hover);
 }
 
-/**
- * Small link 
- */
- .link--sm {
-  font: var(--eds-theme-typography-button-label-sm);
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-3) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
+.link:active {
+  color: var(--eds-theme-color-text-utility-interactive-secondary-active);
 }
 
-/**
- * Medium link style
- */
-.link--md {
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-4) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-1) / 16 * 1rem);
+.link:visited {
+  color: var(--eds-theme-color-text-utility-interactive-visited);
 }
 
-/**
- * Large link style
- */
-.link--lg {
-  /**
-   * Height is used instead of vertical padding because the icon size we use would
-   * cause the height to expand
-   */
-  height: calc(var(--eds-size-5) / 16 * 1rem);
-  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
+.link:focus-visible {
+  outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+  outline-offset: calc(var(--eds-size-quarter) / 16 * 1rem);
 }
-
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index b5d493d2c..95a87fc75 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -2,93 +2,114 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Link, type LinkProps } from './Link';
 
-import Icon from '../Icon';
-
 export default {
   title: 'Components/Link',
   component: Link,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   args: {
     children: 'Link',
-    variant: 'link',
-    status: 'brand',
     size: 'lg',
-    href: 'https://go.czi.team/eds',
+    href: 'http://example.org/',
     // stop link from navigating to another page so we can click the link for testing
     onClick: (event: any) => event.preventDefault(),
   },
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['link'],
-    },
-    status: {
-      control: {
-        type: 'select',
-      },
-      options: ['brand', 'neutral'],
-    },
-    size: {
-      table: {
-        disable: true,
-      },
-    },
-    onClick: {
-      table: {
-        disable: true,
-      },
-    },
-    href: {
-      table: {
-        disable: true,
-      },
-    },
-  },
+  decorators: [
+    (Story) => <div className="text-utility-default-primary">{Story()}</div>,
+  ],
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof Link>;
 
 export const Default: StoryObj<Args> = {};
 
-export const LinkRightIcon: StoryObj<Args> = {
+/**
+ * When using context, you can specify a trailing icon for the link.
+ */
+export const LinkWithChevron: StoryObj<Args> = {
   args: {
-    children: (
-      <>
-        Link
-        <Icon
-          name="open-in-new"
-          purpose="informative"
-          title="opens in a new tab"
-        />
-      </>
-    ),
+    children: 'Default',
+    context: 'standalone',
+    icon: 'chevron-right',
+  },
+};
+
+/**
+ * When using context, you can specify a trailing icon for the link. When using the open icon, make sure that a new tab/window is opened.
+ */
+export const LinkWithOpenIcon: StoryObj<Args> = {
+  args: {
+    children: 'Default',
+    context: 'standalone',
+    icon: 'open-in-new',
+  },
+};
+
+/**
+ * You can add formatting to the link if needed.
+ */
+export const LinkWithFormattedChildren: StoryObj<Args> = {
+  args: {
+    children: <em>emphasized link</em>,
+    context: 'standalone',
+    icon: 'open-in-new',
+  },
+};
+
+/**
+ * Standalone links can have additional emphasis or minimized emphasis applied.
+ */
+export const Emphasis: StoryObj<Args> = {
+  args: {
+    size: 'md',
+    context: 'standalone',
+  },
+  render: (args) => {
+    return (
+      <div>
+        <Link {...args} emphasis="default">
+          Default Emphasis
+        </Link>
+        <Link {...args} emphasis="high">
+          High Emphasis
+        </Link>
+        <Link {...args} emphasis="low">
+          Low Emphasis
+        </Link>
+      </div>
+    );
   },
 };
 
-export const LinkNeutral: StoryObj<Args> = {
+/**
+ * We also include an inverse variant, for use on dark backgrounds.
+ */
+export const InverseVariant: StoryObj<Args> = {
   args: {
-    status: 'neutral',
+    variant: 'inverse',
   },
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96 p-1 text-center text-utility-inverse">{Story()}</div>
+    ),
+  ],
 };
 
-export const LinkInParagraphContext: StoryObj<Args> = {
-  render: (
-    args: React.JSX.IntrinsicAttributes &
-      (LinkProps & React.RefAttributes<HTMLAnchorElement>),
-  ) => (
+export const LinkInParagraphContext: StoryObj<ExtendArgs> = {
+  render: (args) => (
     <div>
       Lorem ipsum dolor sit amet,{' '}
-      <Link {...args} href="https://go.czi.team/eds">
+      <Link {...args} href="https://example.com/">
         consectetur adipiscing elit
       </Link>
       . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
       Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
-      <Link {...args} href="https://go.czi.team/eds">
+      <Link {...args} href="https://example.org">
         Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est.
         Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non
         dui dignissim fermentum.
@@ -96,10 +117,97 @@ export const LinkInParagraphContext: StoryObj<Args> = {
       Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce
       vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas.
       Sed sed quam id nisl bibendum convallis. Proin suscipit, odio{' '}
-      <Link {...args} href="https://go.czi.team/eds">
+      <Link {...args} href="https://example.edu">
         vel pulvinar
       </Link>{' '}
       euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
     </div>
   ),
 };
+
+/**
+ * Links will inherit the color from the surrounding text color definition (default emphasis, inline links)
+ */
+export const InheritColor: StoryObj<Args> = {
+  args: {
+    children: 'Inheriting',
+  },
+  render: (args) => (
+    <div>
+      Lorem ipsum dolor sit amet,{' '}
+      <Link {...args} href="https://example.com/">
+        consectetur adipiscing elit
+      </Link>
+      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
+      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
+      <Link {...args} href="https://example.org">
+        Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est.
+        Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non
+        dui dignissim fermentum.
+      </Link>{' '}
+      Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce
+      vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas.
+      Sed sed quam id nisl bibendum convallis. Proin suscipit, odio{' '}
+      <Link {...args} href="https://example.edu">
+        vel pulvinar
+      </Link>{' '}
+      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
+    </div>
+  ),
+  decorators: [
+    (Story) => <div className="text-utility-critical">{Story()}</div>,
+  ],
+};
+
+/**
+ * Here, we introduce a special type extension to LinkProps, then use it in a
+ * composed component, to demonstrate the ability to offer custom props to a component
+ */
+type ExtendArgs = LinkProps<{ to: string }>;
+function ExtendedLink(args: ExtendArgs) {
+  return (
+    // eslint-disable-next-line no-alert
+    <Link {...args} onClick={() => alert(`handle to value: ${args.to}`)} />
+  );
+}
+
+/**
+ * You can extend a component's props for use with libraries that aid navigation, e.g., react-dom-router, et al.
+ *
+ * Steps to use:
+ *
+ * * import `LinkProps`
+ * * use the type param. to augment the types for `Link` with the library's type
+ * * Now export a new function component that uses the new prop type and returns a composed function
+ *
+ * When using this pattern, you likely want to also specify the library's Link component using `as`
+ *
+ * ```tsx
+ * type CustomLinkProps = React.ComponentProps<typeof CustomLink>;
+ * type ExtendedProps = LinkProps<CustomLinkProps>;
+ * *
+ * export default function Link({children, ...other}: ExtendedProps) {
+ *   return (
+ *    <Link as={CustomLink} {...other}>
+ *      {children}
+ *    </Link>
+ *   );
+ * }
+ * ```
+ */
+export const UsingExtendedLink: StoryObj<ExtendArgs> = {
+  render: (args) => (
+    <div>
+      Lorem ipsum dolor sit amet,{' '}
+      <ExtendedLink
+        {...args}
+        href="https://example.org/extended-link/"
+        to="test"
+      >
+        consectetur adipiscing elit
+      </ExtendedLink>
+      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
+      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
+    </div>
+  ),
+};
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index b8629ee47..55fbba83b 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,76 +1,100 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import type { Size } from '../../util/variant-types';
-import type { VariantStatus } from '../ClickableStyle';
-import styles from './Link.module.css';
+import Icon, { type IconName } from '../Icon';
 
-type LinkHTMLElementProps = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  'disabled'
->;
+import styles from './Link.module.css';
 
-export type LinkProps = LinkHTMLElementProps & {
-  /**
-   * The link contents or label.
-   */
-  children: ReactNode;
-  'data-testid'?: string;
-  /**
-   * Link size inherits from the surrounding text.
-   */
-  size?: Extract<Size, 'sm' | 'md' | 'lg'>;
-} & VariantStatus;
+export type LinkProps<ExtendedElement = unknown> =
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    // Component API
+    /**
+     * Component used to render the element. Meant to support interaction with framework navigation libraries.
+     *
+     * **Default is `"a"`**.
+     */
+    as?: string | React.ElementType;
+    /**
+     * The link contents or label. Using ReactNode to support customized text treatments
+     */
+    children: React.ReactNode;
+    // Design API
+    /**
+     * Where `Link` sits alongside other text and content:
+     *
+     * * **inline** - Inline link inherits the text size established within the `<p>` paragraph they are embedded in.
+     * * **standalone** - Users can choose from the available sizes.
+     *
+     * **Default is `"inline"`**.
+     *
+     * Note: Icons will only be visible when `"standalone"` is used
+     */
+    context?: 'inline' | 'standalone';
+    /**
+     * (trailing) icon to use with the link
+     */
+    icon?: Extract<IconName, 'chevron-right' | 'open-in-new'>;
+    /**
+     * Extra or lowered colors added to a link
+     */
+    emphasis?: 'default' | 'high' | 'low';
+    /**
+     * Link size inherits from the surrounding text.
+     */
+    size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+    /**
+     * The variant treatment for links (use "inverse" on dark backgrounds).
+     *
+     * **Default is `"default"`**.
+     */
+    variant?: 'default' | 'inverse';
+  } & ExtendedElement;
 
 /**
  * `import {Link} from "@chanzuckerberg/eds";`
  *
- * Component for making styled anchor tags. It supports neutral and brand statuses (all other variant/status combinations will be removed in a future release).
- *
- * This component is called Link because it should be used to make `<a>` elements.
+ * Component for making styled anchor tags. Links allow users to navigate within or between a web page(s) or app(s).
  *
- * - If you need to style a `<button>` element to look like a link, please use the `Button` component.
- * - If you need to style a different element or component like a button or link, you can use the `ClickableStyle` component.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
     {
+      as: Component = 'a',
       children,
       className,
-      variant = 'link',
-      status = 'brand',
-      size = 'lg',
-      ...rest
+      context,
+      emphasis = 'default',
+      icon,
+      size = 'md',
+      variant = 'default',
+      ...other
     },
     ref,
   ) => {
     const componentClassName = clsx(
-      // Base styles
-      styles['link'],
-      // Sizes
-      variant !== 'link' && [
-        size === 'sm' && styles['link--sm'],
-        size === 'md' && styles['link--md'],
-        size === 'lg' && styles['link--lg'],
-      ],
-      // Variants
-      variant === 'primary' && styles['link--primary'],
-      variant === 'secondary' && styles['link--secondary'],
-      variant === 'icon' && styles['link--icon'],
-      variant === 'link' && styles['link--link'],
-      // Colors
-      status === 'brand' && styles['link--brand'],
-      status === 'neutral' && styles['link--neutral'],
-      status === 'success' && styles['link--success'],
-      status === 'warning' && styles['link--warning'],
-      status === 'error' && styles['link--error'],
       className,
+      styles['link'],
+      context && styles[`link--context-${context}`],
+      emphasis && styles[`link--emphasis-${emphasis}`],
+      icon && styles['link--has-right-icon'],
+      size && styles[`link--size-${size}`],
+      variant === 'inverse' && styles[`link--variant-${variant}`],
     );
 
+    const iconSize = size && (['xl', 'lg'].includes(size) ? '1.5rem' : '1rem');
+
     return (
-      <a className={componentClassName} ref={ref} {...rest}>
+      <Component className={componentClassName} ref={ref} {...other}>
         {children}
-      </a>
+        {icon && context === 'standalone' && (
+          <Icon
+            className={styles['link__icon']}
+            name={icon}
+            purpose="decorative"
+            size={iconSize}
+          />
+        )}
+      </Component>
     );
   },
 );
diff --git a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap b/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
deleted file mode 100644
index 372e29a80..000000000
--- a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
+++ /dev/null
@@ -1,257 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Link /> Default story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <a
-    class="link link--emphasis-default link--size-lg"
-    href="http://example.org/"
-  >
-    Link
-  </a>
-</div>
-`;
-
-exports[`<Link /> Emphasis story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <div>
-    <a
-      class="link link--context-standalone link--emphasis-default link--size-md"
-      href="http://example.org/"
-    >
-      Default Emphasis
-    </a>
-    <a
-      class="link link--context-standalone link--emphasis-high link--size-md"
-      href="http://example.org/"
-    >
-      High Emphasis
-    </a>
-    <a
-      class="link link--context-standalone link--emphasis-low link--size-md"
-      href="http://example.org/"
-    >
-      Low Emphasis
-    </a>
-  </div>
-</div>
-`;
-
-exports[`<Link /> InheritColor story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <div
-    class="text-utility-critical"
-  >
-    <div>
-      Lorem ipsum dolor sit amet,
-       
-      <a
-        class="link link--emphasis-default link--size-lg"
-        href="https://example.com/"
-      >
-        consectetur adipiscing elit
-      </a>
-      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-       
-      <a
-        class="link link--emphasis-default link--size-lg"
-        href="https://example.org"
-      >
-        Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
-      </a>
-       
-      Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
-       
-      <a
-        class="link link--emphasis-default link--size-lg"
-        href="https://example.edu"
-      >
-        vel pulvinar
-      </a>
-       
-      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Link /> InverseVariant story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <div
-    class="w-96 p-1 text-center text-utility-inverse"
-  >
-    <a
-      class="link link--emphasis-default link--size-lg link--variant-inverse"
-      href="http://example.org/"
-    >
-      Link
-    </a>
-  </div>
-</div>
-`;
-
-exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <div>
-    Lorem ipsum dolor sit amet,
-     
-    <a
-      class="link link--emphasis-default link--size-lg"
-      href="https://example.com/"
-    >
-      consectetur adipiscing elit
-    </a>
-    . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-     
-    <a
-      class="link link--emphasis-default link--size-lg"
-      href="https://example.org"
-    >
-      Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
-    </a>
-     
-    Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
-     
-    <a
-      class="link link--emphasis-default link--size-lg"
-      href="https://example.edu"
-    >
-      vel pulvinar
-    </a>
-     
-    euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
-  </div>
-</div>
-`;
-
-exports[`<Link /> LinkWithChevron story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <a
-    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
-    href="http://example.org/"
-  >
-    Default
-    <svg
-      aria-hidden="true"
-      class="icon link__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="M7.14999 21.1C6.89999 20.85 6.77499 20.5542 6.77499 20.2125C6.77499 19.8708 6.89999 19.575 7.14999 19.325L14.475 12L7.12499 4.65C6.89166 4.41667 6.77499 4.125 6.77499 3.775C6.77499 3.425 6.89999 3.125 7.14999 2.875C7.39999 2.625 7.69583 2.5 8.03749 2.5C8.37916 2.5 8.67499 2.625 8.92499 2.875L17.325 11.3C17.425 11.4 17.4958 11.5083 17.5375 11.625C17.5792 11.7417 17.6 11.8667 17.6 12C17.6 12.1333 17.5792 12.2583 17.5375 12.375C17.4958 12.4917 17.425 12.6 17.325 12.7L8.89999 21.125C8.66666 21.3583 8.37916 21.475 8.03749 21.475C7.69583 21.475 7.39999 21.35 7.14999 21.1Z"
-      />
-    </svg>
-  </a>
-</div>
-`;
-
-exports[`<Link /> LinkWithFormattedChildren story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <a
-    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
-    href="http://example.org/"
-  >
-    <em>
-      emphasized link
-    </em>
-    <svg
-      aria-hidden="true"
-      class="icon link__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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-      />
-    </svg>
-  </a>
-</div>
-`;
-
-exports[`<Link /> LinkWithOpenIcon story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <a
-    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
-    href="http://example.org/"
-  >
-    Default
-    <svg
-      aria-hidden="true"
-      class="icon link__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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-      />
-    </svg>
-  </a>
-</div>
-`;
-
-exports[`<Link /> UsingExtendedLink story renders snapshot 1`] = `
-<div
-  class="text-utility-default-primary"
->
-  <div>
-    Lorem ipsum dolor sit amet,
-     
-    <a
-      class="link link--emphasis-default link--size-lg"
-      href="https://example.org/extended-link/"
-      to="test"
-    >
-      consectetur adipiscing elit
-    </a>
-    . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-     
-  </div>
-</div>
-`;
-
-exports[`<Link /> passes class names down properly 1`] = `
-<a
-  class="exampleClassName link link--emphasis-default link--size-md"
-  data-testid="example-class-name"
-  href="/"
->
-  Click
-</a>
-`;
-
-exports[`<Link /> passes test ids down properly 1`] = `
-<a
-  class="link link--emphasis-default link--size-md"
-  data-testid="example-test-id"
-  href="/"
->
-  Click
-</a>
-`;
diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap
index e2fb7c818..372e29a80 100644
--- a/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -1,81 +1,244 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Link /> Default story renders snapshot 1`] = `
-<a
-  class="link link--link link--brand"
-  href="https://go.czi.team/eds"
+<div
+  class="text-utility-default-primary"
 >
-  Link
-</a>
-`;
-
-exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
-<div>
-  Lorem ipsum dolor sit amet,
-   
   <a
-    class="link link--link link--brand"
-    href="https://go.czi.team/eds"
+    class="link link--emphasis-default link--size-lg"
+    href="http://example.org/"
   >
-    consectetur adipiscing elit
+    Link
   </a>
-  . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-   
+</div>
+`;
+
+exports[`<Link /> Emphasis story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
+  <div>
+    <a
+      class="link link--context-standalone link--emphasis-default link--size-md"
+      href="http://example.org/"
+    >
+      Default Emphasis
+    </a>
+    <a
+      class="link link--context-standalone link--emphasis-high link--size-md"
+      href="http://example.org/"
+    >
+      High Emphasis
+    </a>
+    <a
+      class="link link--context-standalone link--emphasis-low link--size-md"
+      href="http://example.org/"
+    >
+      Low Emphasis
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<Link /> InheritColor story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
+  <div
+    class="text-utility-critical"
+  >
+    <div>
+      Lorem ipsum dolor sit amet,
+       
+      <a
+        class="link link--emphasis-default link--size-lg"
+        href="https://example.com/"
+      >
+        consectetur adipiscing elit
+      </a>
+      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
+       
+      <a
+        class="link link--emphasis-default link--size-lg"
+        href="https://example.org"
+      >
+        Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
+      </a>
+       
+      Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
+       
+      <a
+        class="link link--emphasis-default link--size-lg"
+        href="https://example.edu"
+      >
+        vel pulvinar
+      </a>
+       
+      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Link /> InverseVariant story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
+  <div
+    class="w-96 p-1 text-center text-utility-inverse"
+  >
+    <a
+      class="link link--emphasis-default link--size-lg link--variant-inverse"
+      href="http://example.org/"
+    >
+      Link
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
+  <div>
+    Lorem ipsum dolor sit amet,
+     
+    <a
+      class="link link--emphasis-default link--size-lg"
+      href="https://example.com/"
+    >
+      consectetur adipiscing elit
+    </a>
+    . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
+     
+    <a
+      class="link link--emphasis-default link--size-lg"
+      href="https://example.org"
+    >
+      Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
+    </a>
+     
+    Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
+     
+    <a
+      class="link link--emphasis-default link--size-lg"
+      href="https://example.edu"
+    >
+      vel pulvinar
+    </a>
+     
+    euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
+  </div>
+</div>
+`;
+
+exports[`<Link /> LinkWithChevron story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
   <a
-    class="link link--link link--brand"
-    href="https://go.czi.team/eds"
+    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
+    href="http://example.org/"
   >
-    Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
+    Default
+    <svg
+      aria-hidden="true"
+      class="icon link__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="M7.14999 21.1C6.89999 20.85 6.77499 20.5542 6.77499 20.2125C6.77499 19.8708 6.89999 19.575 7.14999 19.325L14.475 12L7.12499 4.65C6.89166 4.41667 6.77499 4.125 6.77499 3.775C6.77499 3.425 6.89999 3.125 7.14999 2.875C7.39999 2.625 7.69583 2.5 8.03749 2.5C8.37916 2.5 8.67499 2.625 8.92499 2.875L17.325 11.3C17.425 11.4 17.4958 11.5083 17.5375 11.625C17.5792 11.7417 17.6 11.8667 17.6 12C17.6 12.1333 17.5792 12.2583 17.5375 12.375C17.4958 12.4917 17.425 12.6 17.325 12.7L8.89999 21.125C8.66666 21.3583 8.37916 21.475 8.03749 21.475C7.69583 21.475 7.39999 21.35 7.14999 21.1Z"
+      />
+    </svg>
   </a>
-   
-  Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
-   
+</div>
+`;
+
+exports[`<Link /> LinkWithFormattedChildren story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
+>
   <a
-    class="link link--link link--brand"
-    href="https://go.czi.team/eds"
+    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
+    href="http://example.org/"
   >
-    vel pulvinar
+    <em>
+      emphasized link
+    </em>
+    <svg
+      aria-hidden="true"
+      class="icon link__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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+      />
+    </svg>
   </a>
-   
-  euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
 </div>
 `;
 
-exports[`<Link /> LinkNeutral story renders snapshot 1`] = `
-<a
-  class="link link--link link--neutral"
-  href="https://go.czi.team/eds"
+exports[`<Link /> LinkWithOpenIcon story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
 >
-  Link
-</a>
+  <a
+    class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
+    href="http://example.org/"
+  >
+    Default
+    <svg
+      aria-hidden="true"
+      class="icon link__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="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+      />
+    </svg>
+  </a>
+</div>
 `;
 
-exports[`<Link /> LinkRightIcon story renders snapshot 1`] = `
-<a
-  class="link link--link link--brand"
-  href="https://go.czi.team/eds"
+exports[`<Link /> UsingExtendedLink story renders snapshot 1`] = `
+<div
+  class="text-utility-default-primary"
 >
-  Link
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      opens in a new tab
-    </title>
-    <path
-      d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-    />
-  </svg>
-</a>
+  <div>
+    Lorem ipsum dolor sit amet,
+     
+    <a
+      class="link link--emphasis-default link--size-lg"
+      href="https://example.org/extended-link/"
+      to="test"
+    >
+      consectetur adipiscing elit
+    </a>
+    . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
+     
+  </div>
+</div>
 `;
 
 exports[`<Link /> passes class names down properly 1`] = `
 <a
-  class="link link--link link--brand exampleClassName"
+  class="exampleClassName link link--emphasis-default link--size-md"
   data-testid="example-class-name"
   href="/"
 >
@@ -85,7 +248,7 @@ exports[`<Link /> passes class names down properly 1`] = `
 
 exports[`<Link /> passes test ids down properly 1`] = `
 <a
-  class="link link--link link--brand"
+  class="link link--emphasis-default link--size-md"
   data-testid="example-test-id"
   href="/"
 >
diff --git a/src/components/Link/index.ts b/src/components/Link/index.ts
index 9f3b1c419..9ca843623 100644
--- a/src/components/Link/index.ts
+++ b/src/components/Link/index.ts
@@ -1,4 +1,2 @@
 export { Link as default } from './Link';
 export type { LinkProps } from './Link';
-export { Link as LinkV2 } from './Link-v2';
-export type { LinkV2Props } from './Link-v2';
diff --git a/src/components/LoadingIndicator/LoadingIndicator-v2.module.css b/src/components/LoadingIndicator/LoadingIndicator-v2.module.css
deleted file mode 100644
index 50fb16991..000000000
--- a/src/components/LoadingIndicator/LoadingIndicator-v2.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*------------------------------------*\
-    # LOADINGINDICATOR
-\*------------------------------------*/
-
-/**
- * LoadingIndicator
- */
-.loading-indicator {
-  background-color: transparent;
-  padding: 3px; /* ported from react-loader-spinner */
-  display: flex;
-}
-
-.loading-indicator--invisible {
-  display: none;
-}
-
-/* override for `color` */
-.loading-indicator > svg path {
-  stroke: var(--eds-theme-color-border-utility-informational);
-}
-
-/* override for `secondaryColor` */
-.loading-indicator > svg circle {
-  stroke: var(--eds-theme-color-border-utility-default-low-emphasis);
-  stroke-opacity: 1;
-}
-
-@media screen and (prefers-reduced-motion: reduce) {
-  /* if reducing motion, don't show the moving portion */
-  .loading-indicator > svg path {
-    stroke: none;
-  }
-}
diff --git a/src/components/LoadingIndicator/LoadingIndicator-v2.stories.ts b/src/components/LoadingIndicator/LoadingIndicator-v2.stories.ts
deleted file mode 100644
index 270e7256a..000000000
--- a/src/components/LoadingIndicator/LoadingIndicator-v2.stories.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type React from 'react';
-
-import { LoadingIndicator } from './LoadingIndicator-v2';
-
-export default {
-  title: 'Components/V2/LoadingIndicator',
-  component: LoadingIndicator,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.2', 'current-2.0'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof LoadingIndicator>;
-
-export const Default: StoryObj<Args> = {};
-
-export const ExtraSmall: StoryObj<Args> = {
-  args: {
-    size: 'xs',
-  },
-};
-
-export const Small: StoryObj<Args> = {
-  args: {
-    size: 'sm',
-  },
-};
-
-export const Medium: StoryObj<Args> = {
-  args: {
-    size: 'md',
-  },
-};
-
-export const Large: StoryObj<Args> = {
-  args: {
-    size: 'lg',
-  },
-};
-
-export const Invisible: StoryObj<Args> = {
-  args: {
-    isVisible: false,
-  },
-};
-
-export const WithAriaLabel: StoryObj<Args> = {
-  args: {
-    ariaLabel: 'Loading, Please Wait',
-  },
-};
diff --git a/src/components/LoadingIndicator/LoadingIndicator-v2.test.ts b/src/components/LoadingIndicator/LoadingIndicator-v2.test.ts
deleted file mode 100644
index ff6173f89..000000000
--- a/src/components/LoadingIndicator/LoadingIndicator-v2.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './LoadingIndicator-v2.stories';
-
-describe('<LoadingIndicator /> (v2)', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/LoadingIndicator/LoadingIndicator-v2.tsx b/src/components/LoadingIndicator/LoadingIndicator-v2.tsx
deleted file mode 100644
index 1b641578a..000000000
--- a/src/components/LoadingIndicator/LoadingIndicator-v2.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import type { Size } from '../../util/variant-types';
-
-import styles from './LoadingIndicator-v2.module.css';
-
-export type LoadingIndicatorProps = {
-  // Component API
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Aria label of the oval. Default is "loading". Will be overridden if ariaLabel is passed in props
-   */
-  ariaLabel?: string;
-  // Design API
-  /**
-   * Layout size of the loader. This affects the overall size and associated
-   * stroke width.
-   */
-  size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
-  /**
-   * Whether the oval is visible. Default is true.
-   */
-  isVisible?: boolean;
-};
-
-// Pixel sizes corresponding to EDS size units
-const loaderSize = {
-  xs: 16, // --eds-size-1
-  sm: 24, // --eds-size-2-and-half
-  md: 40, // --eds-size-5
-  lg: 56, // --eds-size-7
-};
-
-// Given a loader size, the stroke widths can change
-const loaderStrokeSize = {
-  xs: 4,
-  sm: 4,
-  md: 4,
-  lg: 4,
-};
-
-// The viewport changes based on adjustments to handle the stroke width
-const loaderViewportSize = {
-  xs: '-22 -22 46 46',
-  sm: '-22 -22 46 46',
-  md: '-22 -22 46 46',
-  lg: '-22 -22 46 46',
-};
-
-/**
- * `import {LoadingIndicator} from "@chanzuckerberg/eds";`
- *
- * Loading indicators inform users about the wait time, reason, and status of ongoing processes when the layout is unknown
- *
- * For screen readers, add a custom `aria-label` to describe what is loading.
- */
-export const LoadingIndicator = ({
-  ariaLabel = 'loading',
-  className,
-  size = 'md',
-  isVisible: visible = true,
-  ...other
-}: LoadingIndicatorProps) => {
-  const componentClassName = clsx(
-    styles['loading-indicator'],
-    !visible && styles['loading-indicator--invisible'],
-    className,
-  );
-
-  // setting the colors to be transparent since we override in CSS
-  // (and have a lint rule prevent token variable use in components)
-  return (
-    <div
-      aria-busy="true"
-      aria-label={ariaLabel}
-      className={componentClassName}
-      data-testid="oval-loading"
-      role="status"
-      {...other}
-    >
-      <svg
-        data-testid="oval-svg"
-        height={loaderSize[size]}
-        stroke="transparent"
-        viewBox={loaderViewportSize[size]}
-        width={loaderSize[size]}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g fill="none" fillRule="evenodd">
-          <g
-            data-testid="oval-secondary-group"
-            strokeWidth={loaderStrokeSize[size]}
-            transform="translate(1 1)"
-          >
-            <circle
-              cx="0"
-              cy="0"
-              r="20"
-              stroke="transparent"
-              strokeOpacity=".5"
-              strokeWidth={loaderStrokeSize[size]}
-            ></circle>
-            <path d="M20 0c0-9.94-8.06-20-20-20">
-              <animateTransform
-                attributeName="transform"
-                dur="1s"
-                from="0 0 0"
-                repeatCount="indefinite"
-                to="360 0 0"
-                type="rotate"
-              ></animateTransform>
-            </path>
-          </g>
-        </g>
-      </svg>
-    </div>
-  );
-};
-
-LoadingIndicator.displayName = 'LoadingIndicator';
diff --git a/src/components/LoadingIndicator/LoadingIndicator.module.css b/src/components/LoadingIndicator/LoadingIndicator.module.css
index e53820ccf..50fb16991 100644
--- a/src/components/LoadingIndicator/LoadingIndicator.module.css
+++ b/src/components/LoadingIndicator/LoadingIndicator.module.css
@@ -17,12 +17,12 @@
 
 /* override for `color` */
 .loading-indicator > svg path {
-  stroke: var(--eds-theme-color-background-brand-primary-strong);
+  stroke: var(--eds-theme-color-border-utility-informational);
 }
 
 /* override for `secondaryColor` */
 .loading-indicator > svg circle {
-  stroke: var(--eds-theme-color-background-neutral-medium);
+  stroke: var(--eds-theme-color-border-utility-default-low-emphasis);
   stroke-opacity: 1;
 }
 
diff --git a/src/components/LoadingIndicator/LoadingIndicator.stories.ts b/src/components/LoadingIndicator/LoadingIndicator.stories.ts
index 10ecc43bd..3805adaa1 100644
--- a/src/components/LoadingIndicator/LoadingIndicator.stories.ts
+++ b/src/components/LoadingIndicator/LoadingIndicator.stories.ts
@@ -8,7 +8,7 @@ export default {
   component: LoadingIndicator,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
   },
 } as Meta<Args>;
 
@@ -16,6 +16,12 @@ type Args = React.ComponentProps<typeof LoadingIndicator>;
 
 export const Default: StoryObj<Args> = {};
 
+export const ExtraSmall: StoryObj<Args> = {
+  args: {
+    size: 'xs',
+  },
+};
+
 export const Small: StoryObj<Args> = {
   args: {
     size: 'sm',
@@ -36,7 +42,7 @@ export const Large: StoryObj<Args> = {
 
 export const Invisible: StoryObj<Args> = {
   args: {
-    visible: false,
+    isVisible: false,
   },
 };
 
diff --git a/src/components/LoadingIndicator/LoadingIndicator.tsx b/src/components/LoadingIndicator/LoadingIndicator.tsx
index cc24a9b4b..1cf9ef43d 100644
--- a/src/components/LoadingIndicator/LoadingIndicator.tsx
+++ b/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -1,33 +1,35 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import type { Size } from '../../util/variant-types';
+
 import styles from './LoadingIndicator.module.css';
 
-export type Props = {
+export type LoadingIndicatorProps = {
+  // Component API
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
-
-  /**
-   * Layout size of the loader. This affects the overall size and associated
-   * stroke width.
-   */
-  size?: 'sm' | 'md' | 'lg';
-
   /**
    * Aria label of the oval. Default is "loading". Will be overridden if ariaLabel is passed in props
    */
   ariaLabel?: string;
-
+  // Design API
+  /**
+   * Layout size of the loader. This affects the overall size and associated
+   * stroke width.
+   */
+  size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
   /**
    * Whether the oval is visible. Default is true.
    */
-  visible?: boolean;
+  isVisible?: boolean;
 };
 
 // Pixel sizes corresponding to EDS size units
 const loaderSize = {
+  xs: 16, // --eds-size-1
   sm: 24, // --eds-size-2-and-half
   md: 40, // --eds-size-5
   lg: 56, // --eds-size-7
@@ -35,16 +37,18 @@ const loaderSize = {
 
 // Given a loader size, the stroke widths can change
 const loaderStrokeSize = {
-  sm: 2,
-  md: 3,
+  xs: 4,
+  sm: 4,
+  md: 4,
   lg: 4,
 };
 
 // The viewport changes based on adjustments to handle the stroke width
 const loaderViewportSize = {
-  sm: '-20 -20 42 42',
-  md: '-20.5 -20.5 43 43',
-  lg: '-21 -21 44 44',
+  xs: '-22 -22 46 46',
+  sm: '-22 -22 46 46',
+  md: '-22 -22 46 46',
+  lg: '-22 -22 46 46',
 };
 
 /**
@@ -58,9 +62,9 @@ export const LoadingIndicator = ({
   ariaLabel = 'loading',
   className,
   size = 'md',
-  visible = true,
+  isVisible: visible = true,
   ...other
-}: Props) => {
+}: LoadingIndicatorProps) => {
   const componentClassName = clsx(
     styles['loading-indicator'],
     !visible && styles['loading-indicator--invisible'],
diff --git a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator-v2.test.ts.snap b/src/components/LoadingIndicator/__snapshots__/LoadingIndicator-v2.test.ts.snap
deleted file mode 100644
index dd421c528..000000000
--- a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator-v2.test.ts.snap
+++ /dev/null
@@ -1,358 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LoadingIndicator /> (v2) Default story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="40"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="40"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) ExtraSmall story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="16"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) Invisible story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator loading-indicator--invisible"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="40"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="40"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) Large story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="56"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="56"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) Medium story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="40"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="40"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) Small story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="loading"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="24"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
-
-exports[`<LoadingIndicator /> (v2) WithAriaLabel story renders snapshot 1`] = `
-<div
-  aria-busy="true"
-  aria-label="Loading, Please Wait"
-  class="loading-indicator"
-  data-testid="oval-loading"
-  role="status"
->
-  <svg
-    data-testid="oval-svg"
-    height="40"
-    stroke="transparent"
-    viewBox="-22 -22 46 46"
-    width="40"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g
-        data-testid="oval-secondary-group"
-        stroke-width="4"
-        transform="translate(1 1)"
-      >
-        <circle
-          cx="0"
-          cy="0"
-          r="20"
-          stroke="transparent"
-          stroke-opacity=".5"
-          stroke-width="4"
-        />
-        <path
-          d="M20 0c0-9.94-8.06-20-20-20"
-        >
-          <animatetransform
-            attributeName="transform"
-            dur="1s"
-            from="0 0 0"
-            repeatCount="indefinite"
-            to="360 0 0"
-            type="rotate"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</div>
-`;
diff --git a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap b/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap
index 031bae074..a824b6a08 100644
--- a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap
+++ b/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap
@@ -12,7 +12,7 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -22,7 +22,7 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -31,7 +31,58 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
+        />
+        <path
+          d="M20 0c0-9.94-8.06-20-20-20"
+        >
+          <animatetransform
+            attributeName="transform"
+            dur="1s"
+            from="0 0 0"
+            repeatCount="indefinite"
+            to="360 0 0"
+            type="rotate"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`<LoadingIndicator /> ExtraSmall story renders snapshot 1`] = `
+<div
+  aria-busy="true"
+  aria-label="loading"
+  class="loading-indicator"
+  data-testid="oval-loading"
+  role="status"
+>
+  <svg
+    data-testid="oval-svg"
+    height="16"
+    stroke="transparent"
+    viewBox="-22 -22 46 46"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        data-testid="oval-secondary-group"
+        stroke-width="4"
+        transform="translate(1 1)"
+      >
+        <circle
+          cx="0"
+          cy="0"
+          r="20"
+          stroke="transparent"
+          stroke-opacity=".5"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -63,7 +114,7 @@ exports[`<LoadingIndicator /> Invisible story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -73,7 +124,7 @@ exports[`<LoadingIndicator /> Invisible story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -82,7 +133,7 @@ exports[`<LoadingIndicator /> Invisible story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -114,7 +165,7 @@ exports[`<LoadingIndicator /> Large story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="56"
     stroke="transparent"
-    viewBox="-21 -21 44 44"
+    viewBox="-22 -22 46 46"
     width="56"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -165,7 +216,7 @@ exports[`<LoadingIndicator /> Medium story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -175,7 +226,7 @@ exports[`<LoadingIndicator /> Medium story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -184,7 +235,7 @@ exports[`<LoadingIndicator /> Medium story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -216,7 +267,7 @@ exports[`<LoadingIndicator /> Small story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="24"
     stroke="transparent"
-    viewBox="-20 -20 42 42"
+    viewBox="-22 -22 46 46"
     width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -226,7 +277,7 @@ exports[`<LoadingIndicator /> Small story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="2"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -235,7 +286,7 @@ exports[`<LoadingIndicator /> Small story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="2"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -267,7 +318,7 @@ exports[`<LoadingIndicator /> WithAriaLabel story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -277,7 +328,7 @@ exports[`<LoadingIndicator /> WithAriaLabel story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -286,7 +337,7 @@ exports[`<LoadingIndicator /> WithAriaLabel story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
diff --git a/src/components/LoadingIndicator/index.ts b/src/components/LoadingIndicator/index.ts
index 45d81075c..c25a88164 100644
--- a/src/components/LoadingIndicator/index.ts
+++ b/src/components/LoadingIndicator/index.ts
@@ -1,2 +1 @@
 export { LoadingIndicator as default } from './LoadingIndicator';
-export { LoadingIndicator as LoadingIndicatorV2 } from './LoadingIndicator-v2';
diff --git a/src/components/Menu/Menu-v2.module.css b/src/components/Menu/Menu-v2.module.css
deleted file mode 100644
index 77c3edf52..000000000
--- a/src/components/Menu/Menu-v2.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # MENU
-\*------------------------------------*/
-
-/**
- * Menu
- */
-.menu {
-  position: relative;
-}
-
-.menu__button {
-  font: var(--eds-theme-typography-body-md);
-
-  color: var(--eds-theme-color-text-neutral-subtle);
-  background-color: var(--eds-theme-color-form-background);
-  border-color: var(--eds-theme-color-form-border);
-  font-weight: var(--eds-font-weight-light);
-}
-
-.menu__button--with-chevron {
-  color: var(--eds-theme-color-icon-neutral-default);
-}
-
-.menu__item {
-  display: block;
-  text-decoration: none;
-  color: inherit;
-}
-
-/* Unset the hover on the menu item, as this is handled by the PopoverListItem */
-.menu__item:hover {
-  color: unset;
-}
\ No newline at end of file
diff --git a/src/components/Menu/Menu-v2.stories.tsx b/src/components/Menu/Menu-v2.stories.tsx
deleted file mode 100644
index aa961d0bf..000000000
--- a/src/components/Menu/Menu-v2.stories.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { userEvent } from '@storybook/testing-library';
-import React from 'react';
-
-import { Menu } from './Menu-v2';
-import type { MenuProps } from './Menu-v2';
-import icons from '../../icons/spritemap';
-import type { IconName } from '../../icons/spritemap';
-import { Avatar } from '../Avatar/Avatar';
-
-import { Icon } from '../Icon/Icon';
-export default {
-  title: 'Components/V2/Menu',
-  component: Menu,
-  parameters: {
-    badges: ['intro-1.2', 'current-2.0'],
-    layout: 'centered',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="p-8">
-        <Story />
-      </div>
-    ),
-  ],
-} as Meta<MenuProps>;
-
-export const Default: StoryObj<MenuProps> = {
-  args: {
-    children: (
-      <>
-        <Menu.Button>Documentation Links</Menu.Button>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </>
-    ),
-  },
-};
-
-/**
- * Be careful when using a lot of text for a menu trigger. The UI will force the text out of the button container. Use brief text for menu triggers.
- */
-export const WithLongButtonText: StoryObj<MenuProps> = {
-  args: {
-    children: (
-      <>
-        <Menu.Button>
-          Long Trigger Button Text to Demonstrate Popover Matching
-        </Menu.Button>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </>
-    ),
-  },
-};
-
-export const WithShortButtonText: StoryObj<MenuProps> = {
-  args: {
-    children: (
-      <>
-        <Menu.Button>Menu</Menu.Button>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </>
-    ),
-  },
-};
-
-export const WithCustomButton: StoryObj<MenuProps> = {
-  args: {
-    children: (
-      <>
-        <Menu.PlainButton>
-          <div className="fpo">Menu Button</div>
-        </Menu.PlainButton>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </>
-    ),
-  },
-};
-
-export const MenuWithAvatarButton: StoryObj<MenuProps> = {
-  parameters: {
-    badges: ['intro-1.3', 'implementationExample'],
-  },
-  args: {
-    children: (
-      <>
-        <Menu.PlainButton>
-          <Avatar user={{ fullName: 'Josie Sandberg' }} />
-        </Menu.PlainButton>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </>
-    ),
-  },
-};
-
-export const Opened: StoryObj<MenuProps> = {
-  ...Default,
-  parameters: {
-    ...Default.parameters,
-    // Sets the delay (in milliseconds) for a specific story.
-    chromatic: { delay: 300 },
-  },
-  play: async () => {
-    await userEvent.tab();
-    await userEvent.keyboard(' ', { delay: 300 });
-  },
-};
-
-export const MenuWithIconButton: StoryObj<MenuProps & { iconName: IconName }> =
-  {
-    argTypes: {
-      iconName: {
-        control: 'radio',
-        options: Object.keys(icons),
-      },
-    },
-    args: {
-      iconName: 'dots-vertical',
-    },
-    parameters: {
-      badges: ['intro-1.2', 'implementationExample'],
-    },
-    render: ({ iconName }) => (
-      <Menu>
-        <Menu.PlainButton>
-          <Icon
-            name={iconName}
-            purpose="informative"
-            size="2rem"
-            title="show more"
-          />
-        </Menu.PlainButton>
-        <Menu.Items data-testid="menu-content">
-          <Menu.Item
-            href="https://headlessui.com/react/menu#menu-button"
-            icon="link"
-          >
-            Headless UI Docs
-          </Menu.Item>
-          <Menu.Item
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"
-            icon="link"
-          >
-            MDN: Menu
-          </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
-            Trigger Action
-          </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
-            Not Possible (disabled)
-          </Menu.Item>
-        </Menu.Items>
-      </Menu>
-    ),
-  };
diff --git a/src/components/Menu/Menu-v2.test.tsx b/src/components/Menu/Menu-v2.test.tsx
deleted file mode 100644
index 619adf04f..000000000
--- a/src/components/Menu/Menu-v2.test.tsx
+++ /dev/null
@@ -1,96 +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 { Menu } from './Menu-v2';
-import * as stories from './Menu-v2.stories';
-
-const { Default } = composeStories(stories);
-
-// Remove the tests with `play` in, b/c it causes the test runner to be unhappy
-const { Opened, ...staticStories } = stories;
-
-describe('<Menu />', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-  generateSnapshots(staticStories, {
-    getElement: async () => {
-      const user = userEvent.setup();
-      const triggerButton = await screen.findByRole('button');
-      await user.click(triggerButton);
-      return triggerButton.parentElement; // eslint-disable-line testing-library/no-node-access
-    },
-  });
-
-  it('should allow for keyboard navigation to enabled menu items', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const triggerButton = await screen.findByRole('button');
-    await user.click(triggerButton);
-    const menuContainer = await screen.findByRole('menu');
-
-    // a11y requires attaching the control dynamically, so confirm
-    expect(triggerButton.getAttribute('aria-controls')).toEqual(
-      menuContainer.getAttribute('id'),
-    );
-
-    expect(menuContainer.getAttribute('aria-activedescendant')).toBeNull();
-    await user.keyboard('{arrowdown}');
-
-    expect(menuContainer.getAttribute('aria-activedescendant')).not.toBeNull();
-  });
-
-  it('handles onclick events when there is an href present', async () => {
-    // create a spy on the `log` method, and avoid calling it by setting the mock implementation to nothing
-    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
-    const user = userEvent.setup();
-    render(<Default />);
-    const triggerButton = await screen.findByRole('button');
-
-    await user.click(triggerButton);
-    await user.keyboard('{arrowdown}{arrowdown}{arrowdown}');
-    await user.keyboard('{enter}');
-
-    expect(consoleSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should close menu on keyboard escape key', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const triggerButton = await screen.findByRole('button');
-    await user.click(triggerButton);
-    const menuContainer = await screen.findByRole('menu');
-
-    // a11y attaches the control dynamically, so confirm
-    expect(triggerButton.getAttribute('aria-controls')).toEqual(
-      menuContainer.getAttribute('id'),
-    );
-
-    await user.keyboard('{Escape}');
-    expect(screen.queryByTestId('menu-content')).not.toBeInTheDocument();
-  });
-
-  it('should allow render prop usage', async () => {
-    const user = userEvent.setup();
-    render(
-      <Menu>
-        {({ open }) => (
-          <>
-            <Menu.Button>{open ? 'open' : 'closed'}</Menu.Button>
-            <Menu.Items>
-              <Menu.Item>Menu item 1</Menu.Item>
-              <Menu.Item>Menu item 2</Menu.Item>
-            </Menu.Items>
-          </>
-        )}
-      </Menu>,
-    );
-    const triggerButton = await screen.findByRole('button');
-    expect(triggerButton).toHaveAccessibleName('closed');
-    await user.click(triggerButton);
-    expect(triggerButton).toHaveAccessibleName('open');
-  });
-});
diff --git a/src/components/Menu/Menu-v2.tsx b/src/components/Menu/Menu-v2.tsx
deleted file mode 100644
index ff3f743ba..000000000
--- a/src/components/Menu/Menu-v2.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Menu as HeadlessMenu } from '@headlessui/react';
-import clsx from 'clsx';
-import type { ReactNode, MouseEventHandler } from 'react';
-import React, { useContext, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { usePopper } from 'react-popper';
-
-import type { ExtractProps } from '../../util/utility-types';
-
-import { ButtonV2 as Button } from '../Button';
-import { type IconNameV2 as IconName } from '../Icon';
-
-import {
-  PopoverContainerV2 as PopoverContainer,
-  defaultPopoverModifiers,
-} from '../PopoverContainer';
-import type { PopoverContext, PopoverOptions } from '../PopoverContainer';
-
-import { PopoverListItemV2 as PopoverListItem } from '../PopoverListItem';
-import styles from './Menu-v2.module.css';
-
-// Note: added className here to prevent private interface collision within HeadlessUI
-export type MenuProps = ExtractProps<typeof HeadlessMenu> &
-  PopoverOptions & {
-    /**
-     * Allow custom classes to be applied to the menu container.
-     */
-    className?: string;
-  };
-
-export type MenuItemProps = ExtractProps<typeof HeadlessMenu.Item> & {
-  // Component API
-  /**
-   * Allow custom classes to be applied to the menu container.
-   */
-  className?: string;
-  /**
-   * Target URL for the menu item action
-   */
-  href?: string;
-  /**
-   * Icons are able to appear next to each Option in the Options list if it is relevant; before using any icons, please refer to the appropriate icon usage guidelines
-   */
-  icon?: IconName;
-  /**
-   * Configurable action for the menu item upon click
-   */
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-};
-
-export type MenuButtonProps = {
-  // Component API
-  /**
-   * The button contents placed left of the chevron icon.
-   */
-  children: string;
-  /**
-   * Allow custom classes to be applied to the menu button.
-   */
-  className?: string;
-  /**
-   * Icon override for component. Default is 'chevron-down'
-   */
-  icon?: Extract<IconName, 'chevron-down'>;
-};
-
-export type MenuPlainButtonProps = ExtractProps<typeof HeadlessMenu.Button>;
-
-export type MenuItemsProps = ExtractProps<typeof HeadlessMenu.Items>;
-
-type MenuContextType = PopoverContext;
-
-const MenuContext = React.createContext<MenuContextType>({});
-
-/**
- * `import {Menu} from "@chanzuckerberg/eds";`
- *
- * A dropdown that reveals or hides a list of actions.
- */
-export const Menu = ({
-  className,
-  placement = 'bottom-start',
-  modifiers = defaultPopoverModifiers,
-  strategy,
-  onFirstUpdate,
-  ...other
-}: MenuProps) => {
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const { styles: popperStyles, attributes: popperAttributes } = usePopper(
-    referenceElement,
-    popperElement,
-    { placement, modifiers, strategy, onFirstUpdate },
-  );
-  const menuClassNames = clsx(className, styles['menu']);
-  return (
-    <MenuContext.Provider
-      value={{
-        setReferenceElement: setReferenceElement as React.Dispatch<
-          React.SetStateAction<Element | null | undefined>
-        >,
-        setPopperElement: setPopperElement as React.Dispatch<
-          React.SetStateAction<HTMLElement | null | undefined>
-        >,
-        popperStyles: popperStyles.popper,
-        popperAttributes: popperAttributes.popper,
-      }}
-    >
-      <HeadlessMenu as="div" className={menuClassNames} {...other} />
-    </MenuContext.Provider>
-  );
-};
-
-/**
- * A styled button that when clicked, shows or hides the Options.
- */
-const MenuButton = ({
-  children,
-  className,
-  icon = 'chevron-down',
-  ...other
-}: MenuButtonProps) => {
-  const buttonClassNames = clsx(styles['menu__button'], className);
-  const { setReferenceElement } = useContext(MenuContext);
-
-  return (
-    <HeadlessMenu.Button as={React.Fragment} ref={setReferenceElement}>
-      <Button
-        className={buttonClassNames}
-        icon={icon}
-        iconLayout="right"
-        rank="primary"
-        {...other}
-      >
-        {children}
-      </Button>
-    </HeadlessMenu.Button>
-  );
-};
-
-/**
- * A minimally styled button that when clicked, shows or hides the Options.
- */
-const MenuPlainButton = ({ className, ...other }: MenuPlainButtonProps) => {
-  const buttonClassNames = clsx(className);
-  const { setReferenceElement } = useContext(MenuContext);
-
-  return (
-    <HeadlessMenu.Button
-      className={buttonClassNames}
-      ref={setReferenceElement}
-      {...other}
-    />
-  );
-};
-
-/**
- * A list of actions that are revealed in the menu
- *
- * @param props Props used on the set of menu items
- * @see https://headlessui.com/react/menu#menu-items
- */
-const MenuItems = (props: MenuItemsProps) => {
-  const { setPopperElement, popperStyles, popperAttributes } =
-    useContext(MenuContext);
-  const optionProps = {
-    as: PopoverContainer,
-    ref: setPopperElement,
-    style: popperStyles,
-    ...props,
-    ...popperAttributes,
-  };
-  if (typeof document !== 'undefined') {
-    return (
-      <>
-        {createPortal(<HeadlessMenu.Items {...optionProps} />, document.body)}
-      </>
-    );
-  }
-  return null;
-};
-
-/**
- * An individual option that represent an action in the menu
- */
-const MenuItem = ({
-  children,
-  className,
-  href,
-  icon,
-  onClick,
-  ...other
-}: MenuItemProps) => {
-  return (
-    <HeadlessMenu.Item {...other}>
-      {({ active, disabled }) => {
-        const listItemView = (
-          <PopoverListItem
-            className={className}
-            icon={icon}
-            isDisabled={disabled}
-            isFocused={active}
-          >
-            {children as ReactNode}
-          </PopoverListItem>
-        );
-        return disabled ? (
-          listItemView
-        ) : (
-          <a
-            className={clsx(styles['menu__item'])}
-            href={href}
-            onClick={onClick}
-          >
-            {listItemView}
-          </a>
-        );
-      }}
-    </HeadlessMenu.Item>
-  );
-};
-
-Menu.displayName = 'Menu';
-MenuButton.displayName = 'Menu.Button';
-MenuPlainButton.displayName = 'Menu.PlainButton';
-MenuItems.displayName = 'Menu.Items';
-MenuItem.displayName = 'Menu.Item';
-
-Menu.Button = MenuButton;
-Menu.PlainButton = MenuPlainButton;
-Menu.Items = MenuItems;
-Menu.Item = MenuItem;
diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
index 2dc643791..77c3edf52 100644
--- a/src/components/Menu/Menu.module.css
+++ b/src/components/Menu/Menu.module.css
@@ -20,34 +20,12 @@
   font-weight: var(--eds-font-weight-light);
 }
 
-.menu__plain-button {
-  /* These min sizes are for target size accessibility */
-  min-height: 44px;
-  min-width: 44px;
-
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-
-  border-radius: calc(var(--eds-border-radius-md) * 1px);
-}
-.menu__plain-button:hover {
-  background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
-}
-.menu__plain-button:focus-visible {
-  @mixin focus;
-}
-@supports not selector(:focus-visible) {
-  .menu__plain-button:focus {
-    @mixin focus;
-  }
-}
-
 .menu__button--with-chevron {
   color: var(--eds-theme-color-icon-neutral-default);
 }
 
 .menu__item {
+  display: block;
   text-decoration: none;
   color: inherit;
 }
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 7e2ee1d7e..ee0462818 100644
--- a/src/components/Menu/Menu.stories.tsx
+++ b/src/components/Menu/Menu.stories.tsx
@@ -5,20 +5,15 @@ import React from 'react';
 import { Menu } from './Menu';
 import type { MenuProps } from './Menu';
 import icons from '../../icons/spritemap';
-import type { IconName } from '../../icons/spritemap';
+import type { IconName } from '../../icons/spritemap-v2';
 import { Avatar } from '../Avatar/Avatar';
 
 import { Icon } from '../Icon/Icon';
 export default {
   title: 'Components/Menu',
   component: Menu,
-  subcomponents: {
-    'Menu.Button': Menu.Button,
-    'Menu.Items': Menu.Items,
-    'Menu.Item': Menu.Item,
-  },
   parameters: {
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
     layout: 'centered',
   },
   argTypes: {
@@ -58,7 +53,7 @@ export const Default: StoryObj<MenuProps> = {
           <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
@@ -67,6 +62,9 @@ export const Default: StoryObj<MenuProps> = {
   },
 };
 
+/**
+ * Be careful when using a lot of text for a menu trigger. The UI will force the text out of the button container. Use brief text for menu triggers.
+ */
 export const WithLongButtonText: StoryObj<MenuProps> = {
   args: {
     children: (
@@ -91,7 +89,7 @@ export const WithLongButtonText: StoryObj<MenuProps> = {
           <Menu.Item onClick={() => alert('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
@@ -122,7 +120,7 @@ export const WithShortButtonText: StoryObj<MenuProps> = {
           <Menu.Item onClick={() => alert('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
@@ -155,7 +153,7 @@ export const WithCustomButton: StoryObj<MenuProps> = {
           <Menu.Item onClick={() => alert('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
@@ -191,7 +189,7 @@ export const MenuWithAvatarButton: StoryObj<MenuProps> = {
           <Menu.Item onClick={() => alert('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
@@ -254,7 +252,7 @@ export const MenuWithIconButton: StoryObj<MenuProps & { iconName: IconName }> =
           <Menu.Item onClick={() => alert('Item clicked')}>
             Trigger Action
           </Menu.Item>
-          <Menu.Item disabled href="https://example.org/" icon="warning">
+          <Menu.Item disabled href="https://example.org/" icon="warning-filled">
             Not Possible (disabled)
           </Menu.Item>
         </Menu.Items>
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index e465969c8..b61f7e3d4 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,8 +1,7 @@
 import { Menu as HeadlessMenu } from '@headlessui/react';
 import clsx from 'clsx';
 import type { ReactNode, MouseEventHandler } from 'react';
-import { useContext, useState } from 'react';
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { usePopper } from 'react-popper';
@@ -10,10 +9,12 @@ import { usePopper } from 'react-popper';
 import type { ExtractProps } from '../../util/utility-types';
 
 import Button from '../Button';
-import Icon from '../Icon';
-import type { IconName } from '../Icon';
+import { type IconName } from '../Icon';
 
-import PopoverContainer, { defaultPopoverModifiers } from '../PopoverContainer';
+import {
+  PopoverContainerV2 as PopoverContainer,
+  defaultPopoverModifiers,
+} from '../PopoverContainer';
 import type { PopoverContext, PopoverOptions } from '../PopoverContainer';
 
 import PopoverListItem from '../PopoverListItem';
@@ -29,6 +30,7 @@ export type MenuProps = ExtractProps<typeof HeadlessMenu> &
   };
 
 export type MenuItemProps = ExtractProps<typeof HeadlessMenu.Item> & {
+  // Component API
   /**
    * Allow custom classes to be applied to the menu container.
    */
@@ -48,18 +50,19 @@ export type MenuItemProps = ExtractProps<typeof HeadlessMenu.Item> & {
 };
 
 export type MenuButtonProps = {
+  // Component API
   /**
    * The button contents placed left of the chevron icon.
    */
-  children: ReactNode;
+  children: string;
   /**
    * Allow custom classes to be applied to the menu button.
    */
   className?: string;
   /**
-   * Icon override for component. Default is 'expand-more'
+   * Icon override for component. Default is 'chevron-down'
    */
-  icon?: Extract<IconName, 'expand-more'>;
+  icon?: Extract<IconName, 'chevron-down'>;
 };
 
 export type MenuPlainButtonProps = ExtractProps<typeof HeadlessMenu.Button>;
@@ -115,7 +118,7 @@ export const Menu = ({
 const MenuButton = ({
   children,
   className,
-  icon = 'expand-more',
+  icon = 'chevron-down',
   ...other
 }: MenuButtonProps) => {
   const buttonClassNames = clsx(styles['menu__button'], className);
@@ -123,14 +126,14 @@ const MenuButton = ({
 
   return (
     <HeadlessMenu.Button as={React.Fragment} ref={setReferenceElement}>
-      <Button className={buttonClassNames} status="neutral" {...other}>
+      <Button
+        className={buttonClassNames}
+        icon={icon}
+        iconLayout="right"
+        rank="primary"
+        {...other}
+      >
         {children}
-        <Icon
-          className={styles['menu__button--with-chevron']}
-          name={icon}
-          purpose="decorative"
-          size="1.25rem"
-        />
       </Button>
     </HeadlessMenu.Button>
   );
@@ -140,7 +143,7 @@ const MenuButton = ({
  * A minimally styled button that when clicked, shows or hides the Options.
  */
 const MenuPlainButton = ({ className, ...other }: MenuPlainButtonProps) => {
-  const buttonClassNames = clsx(styles['menu__plain-button'], className);
+  const buttonClassNames = clsx(className);
   const { setReferenceElement } = useContext(MenuContext);
 
   return (
@@ -194,10 +197,10 @@ const MenuItem = ({
       {({ active, disabled }) => {
         const listItemView = (
           <PopoverListItem
-            active={active}
             className={className}
-            disabled={disabled}
             icon={icon}
+            isDisabled={disabled}
+            isFocused={active}
           >
             {children as ReactNode}
           </PopoverListItem>
diff --git a/src/components/Menu/__snapshots__/Menu-v2.test.tsx.snap b/src/components/Menu/__snapshots__/Menu-v2.test.tsx.snap
deleted file mode 100644
index 293a2a833..000000000
--- a/src/components/Menu/__snapshots__/Menu-v2.test.tsx.snap
+++ /dev/null
@@ -1,195 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Menu /> Default story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:r1:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:r0:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Documentation Links
-      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Menu /> MenuWithAvatarButton story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:rp:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class=""
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:ro:"
-    type="button"
-  >
-    <div
-      aria-label="Avatar for user Josie Sandberg"
-      class="avatar avatar--circle avatar--md avatar--initials"
-      role="img"
-    >
-      JS
-    </div>
-  </button>
-</div>
-`;
-
-exports[`<Menu /> MenuWithIconButton story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:rv:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class=""
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:ru:"
-    type="button"
-  >
-    <svg
-      class="icon"
-      fill="currentColor"
-      height="2rem"
-      role="img"
-      style="--icon-size: 2rem;"
-      viewBox="0 0 24 24"
-      width="2rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        show more
-      </title>
-      <path
-        d="M12 20C11.45 20 10.9793 19.8043 10.588 19.413C10.196 19.021 10 18.55 10 18C10 17.45 10.196 16.979 10.588 16.587C10.9793 16.1957 11.45 16 12 16C12.55 16 13.021 16.1957 13.413 16.587C13.8043 16.979 14 17.45 14 18C14 18.55 13.8043 19.021 13.413 19.413C13.021 19.8043 12.55 20 12 20ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM12 8C11.45 8 10.9793 7.804 10.588 7.412C10.196 7.02067 10 6.55 10 6C10 5.45 10.196 4.97933 10.588 4.588C10.9793 4.196 11.45 4 12 4C12.55 4 13.021 4.196 13.413 4.588C13.8043 4.97933 14 5.45 14 6C14 6.55 13.8043 7.02067 13.413 7.412C13.021 7.804 12.55 8 12 8Z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Menu /> WithCustomButton story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:rj:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class=""
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:ri:"
-    type="button"
-  >
-    <div
-      class="fpo"
-    >
-      Menu Button
-    </div>
-  </button>
-</div>
-`;
-
-exports[`<Menu /> WithLongButtonText story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:r7:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:r6:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Long Trigger Button Text to Demonstrate Popover Matching
-      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<Menu /> WithShortButtonText story renders snapshot 1`] = `
-<div
-  class="menu"
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-menu-items-:rd:"
-    aria-expanded="true"
-    aria-haspopup="menu"
-    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
-    data-headlessui-state="open"
-    id="headlessui-menu-button-:rc:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Menu
-      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
diff --git a/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/src/components/Menu/__snapshots__/Menu.test.tsx.snap
index b4768e53d..293a2a833 100644
--- a/src/components/Menu/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -9,26 +9,30 @@ exports[`<Menu /> Default story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:r1:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="button button--lg button--secondary button--neutral menu__button"
+    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:r0:"
     type="button"
   >
-    Documentation Links
-    <svg
-      aria-hidden="true"
-      class="icon menu__button--with-chevron"
-      fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
-      viewBox="0 0 24 24"
-      width="1.25rem"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="button__text"
     >
-      <path
-        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
+      Documentation Links
+      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+        />
+      </svg>
+    </span>
   </button>
 </div>
 `;
@@ -42,7 +46,7 @@ exports[`<Menu /> MenuWithAvatarButton story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:rp:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="menu__plain-button"
+    class=""
     data-headlessui-state="open"
     id="headlessui-menu-button-:ro:"
     type="button"
@@ -67,7 +71,7 @@ exports[`<Menu /> MenuWithIconButton story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:rv:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="menu__plain-button"
+    class=""
     data-headlessui-state="open"
     id="headlessui-menu-button-:ru:"
     type="button"
@@ -102,7 +106,7 @@ exports[`<Menu /> WithCustomButton story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:rj:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="menu__plain-button"
+    class=""
     data-headlessui-state="open"
     id="headlessui-menu-button-:ri:"
     type="button"
@@ -125,26 +129,30 @@ exports[`<Menu /> WithLongButtonText story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:r7:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="button button--lg button--secondary button--neutral menu__button"
+    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:r6:"
     type="button"
   >
-    Long Trigger Button Text to Demonstrate Popover Matching
-    <svg
-      aria-hidden="true"
-      class="icon menu__button--with-chevron"
-      fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
-      viewBox="0 0 24 24"
-      width="1.25rem"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="button__text"
     >
-      <path
-        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
+      Long Trigger Button Text to Demonstrate Popover Matching
+      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+        />
+      </svg>
+    </span>
   </button>
 </div>
 `;
@@ -158,26 +166,30 @@ exports[`<Menu /> WithShortButtonText story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:rd:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="button button--lg button--secondary button--neutral menu__button"
+    class="button button--layout-right button--primary button--lg button--variant-default menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:rc:"
     type="button"
   >
-    Menu
-    <svg
-      aria-hidden="true"
-      class="icon menu__button--with-chevron"
-      fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
-      viewBox="0 0 24 24"
-      width="1.25rem"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="button__text"
     >
-      <path
-        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
+      Menu
+      <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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+        />
+      </svg>
+    </span>
   </button>
 </div>
 `;
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index adddd5db0..5577958b0 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1,2 +1 @@
 export { Menu as default } from './Menu';
-export { Menu as MenuV2 } from './Menu-v2';
diff --git a/src/components/Modal/Modal-v2.module.css b/src/components/Modal/Modal-v2.module.css
deleted file mode 100755
index 1700a56de..000000000
--- a/src/components/Modal/Modal-v2.module.css
+++ /dev/null
@@ -1,230 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # MODAL
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * The modal wrapper and overlay which takes up the entire screen.
- */
-.modal,
-.modal__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100%;
-}
-
-/**
- * The inverted background of the modal to provide contrast with the actual modal.
- */
-.modal__overlay {
-  &.modal__overlay--emphasis-high {
-    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-high-emphasis) r g b / 0.8);
-  }
-  
-  &.modal__overlay--emphasis-low {
-    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-low-emphasis) r g b / 0.5);
-  }
-}
-
-/**
- * The modal container which positions the modal in the center of the screen.
- */
-.modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-
-  /**
-   * Ensures modal is above other components. This is not a design token for now since we need to align on 
-   * z-indeces across the system
-   */
-  z-index: 1050;
-}
-
-/**
- * Modal transition animations.
- */
-.modal__transition--enter {
-  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.modal__transition--enterFrom {
-  opacity: 0;
-}
-
-.modal__transition--enterTo {
-  opacity: 1;
-}
-
-.modal__transition--leave {
-  transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.modal__transition--leaveFrom {
-  opacity: 1;
-}
-
-.modal__transition--leaveTo {
-  opacity: 0;
-}
-
-/**
- * The content of the modal, which can wrap header, body, and footer.
- */
-.modal__content {
-  position: relative;
-  overflow: hidden;
-  
-  /** 
-  * This transparent border is for Window High Contrast Mode, which removes all
-  * background colors but makes borders 100% opacity black. Without this, the
-  * modal would have no clear boundary. 
-  */
-  border: var(--eds-theme-form-border-width) transparent var(--eds-theme-color-background-utility-container);
-  
-  display: flex;
-  flex-direction: column;
-  
-  background-color: var(--eds-theme-color-background-utility-container);
-}
-
-/**
- * The large modal size used for the lg/default modal.
- */
-.modal__content--lg {
-  @media all and (min-width: $eds-bp-xs) {
-    width: 100%;
-    height: 100%;
-  }
-
-  @media all and (min-width: $eds-bp-sm) {
-    max-height: 40rem;
-    max-width: 50rem;
-  }
-
-  @media all and (min-width: $eds-bp-md) {
-    max-height: 40rem;
-    max-width: 50rem;
-  }
-
-  @media all and (min-width: $eds-bp-lg) {
-    max-height: 40rem;
-    max-width: 60rem;
-  }
-
-  @media all and (min-width: $eds-bp-xl) {
-    max-height: 40rem;
-    max-width: 60rem;
-    --modal-horizontal-padding: 4rem;
-  }
-}
-
-/**
- * The small modal size used for the modal.
- */
- .modal__content--sm {
-  @media all and (min-width: $eds-bp-xs) {
-    max-height: 30rem;
-    max-width: 35rem;
-  }
-
-  @media all and (min-width: $eds-bp-sm) {
-    max-height: 30rem;
-    max-width: 25rem;
-  }
-
-  @media all and (min-width: $eds-bp-md) {
-    max-height: 30rem;
-    max-width: 25rem;
-  }
-
-  @media all and (min-width: $eds-bp-xl) {
-    max-height: 30rem;
-    max-width: 35rem;
-    --modal-horizontal-padding: 4rem;
-  }
-}
-
-
-/**
- * Allows scrolling of the modal content except for sticky footer.
- * This functionality is our intended scroll behavior but consuming teams can 
- * style the body content as they wish to handle overflow in various ways.
- */
-.modal__content--scrollable {
-  overflow: auto;
-}
-
-/**
- * The modal close button.
- */
-.modal__close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-/*------------------------------------*\
-    # MODAL BODY
-\*------------------------------------*/
-
-/**
- * The body of the modal
- */
- .modal-body {
-  flex: 1;
-  padding: 0 2rem;
-}
-
-/*------------------------------------*\
-    # MODAL FOOTER
-\*------------------------------------*/
-
-/**
- * Footer for the modal.
- */
- .modal-footer {
-  width: 100%;
-  z-index: 1000;
-
-  padding: 1.5rem 2rem;
-
-  background-color: var(--eds-theme-color-background-utility-container);
-}
-
-.modal-footer--sticky {
-  position: sticky;
-  bottom: 0;
-
-  box-shadow: var(--eds-box-shadow-xl);
-}
-
-/*------------------------------------*\
-    # MODAL HEADER
-\*------------------------------------*/
-
-/**
- * Header for the modal.
- */
- .modal-header {
-  width: 100%;
-
-  padding: 1.5rem 2rem;
-}
-
-.modal-sub-title {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
\ No newline at end of file
diff --git a/src/components/Modal/Modal-v2.stories.tsx b/src/components/Modal/Modal-v2.stories.tsx
deleted file mode 100644
index 03b57ace9..000000000
--- a/src/components/Modal/Modal-v2.stories.tsx
+++ /dev/null
@@ -1,477 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-import { useState } from 'react';
-
-import { Modal, ModalContent } from './Modal-v2';
-import { Heading, Text } from '../../';
-import { chromaticViewports, storybookViewports } from '../../util/viewports';
-import { ButtonV2 as Button } from '../Button';
-import { ButtonGroupV2 as ButtonGroup } from '../ButtonGroup';
-
-export default {
-  title: 'Components/V2/Modal',
-  component: Modal,
-  parameters: {
-    // The modal is initially closed for most of these stories,
-    // which renders testing it for visual regressions unhelpful.
-    chromatic: { disableSnapshot: true },
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    // For some reason, storybook is not able to pick up the doc.s automatically. Adding manually.
-    children: {
-      control: {
-        type: null,
-      },
-      description:
-        'Contains the sub-components for a Modal, including `.Header` , `.Title` , `.Body` , `.Footer` , `.Stepper`',
-    },
-    open: {
-      type: 'boolean',
-      description: 'Whether or not the modal is visible.',
-    },
-    hideCloseButton: {
-      description:
-        'Hides the close button in the top right of the modal. **Default is `false`**.',
-      type: 'boolean',
-    },
-    isScrollable: {
-      description:
-        'Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.',
-      type: 'boolean',
-    },
-    size: {
-      description: 'Max size of the modal, which responds to the viewport',
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'lg'],
-      defaultValue: 'lg',
-    },
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<typeof Modal>;
-
-type Args = React.ComponentProps<typeof Modal>;
-type Story = StoryObj<typeof Modal>;
-type InteractiveArgs = Omit<Args, 'onClose' | 'open'>;
-
-/**
- * Wrapper for triggering `Modal` with a button
- * @param args
- * @returns
- */
-function InteractiveExample(args: InteractiveArgs) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} rank="primary">
-        Open the modal
-      </Button>
-
-      <Modal {...args} onClose={() => setOpen(false)} open={open} />
-    </>
-  );
-}
-
-/**
- * Clicking on a trigger item (in this case `Button`) will cause a modal to open.
- *
- * **Note**: this only works from certain screens in Storybook. If it doesn't work as expected, view from the
- * "docs" sub-page.
- */
-export const Default: StoryObj<Args> = {
-  render: (args) => (
-    <InteractiveExample {...args}>
-      <Modal.Header>
-        <Modal.Title>Modal Title</Modal.Title>
-        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-      </Modal.Header>
-      <Modal.Body>
-        <div className="fpo h-full w-full">Modal Content</div>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup>
-          <Button onClick={() => {}} rank="primary">
-            Primary Action
-          </Button>
-          <Button onClick={() => {}} rank="secondary">
-            Secondary
-          </Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </InteractiveExample>
-  ),
-};
-
-/**
- * Modals can also have a more emphasized backdrop overlay
- */
-export const HighEmphasis: StoryObj<Args> = {
-  args: {
-    overlayEmphasis: 'high',
-  },
-  render: Default.render,
-};
-
-/**
- * Modals can contain long, scrollable text. This is not recommended, however.
- */
-export const WithLongTextScrollable: StoryObj<InteractiveArgs> = {
-  args: {
-    isScrollable: true,
-  },
-  render: (args) => (
-    <InteractiveExample {...args}>
-      <Modal.Header>
-        <Modal.Title>Modal Title</Modal.Title>
-        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-      </Modal.Header>
-      <Modal.Body>
-        <Heading as="h3">Title text</Heading>
-        <Text as="p" preset="body-lg">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam
-          diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac
-          vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec,
-          elementum turpis. Orci varius natoque penatibus et magnis dis
-          parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo.
-          Phasellus convallis ante at augue iaculis, quis consectetur dolor
-          placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies
-          tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem
-          facilisis tristique nec et ligula. Vivamus id feugiat sapien.
-        </Text>
-        <Heading as="h3">Title text</Heading>
-        <Text as="p" preset="body-lg">
-          Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel
-          venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin
-          aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit.
-          Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi
-          consectetur, dapibus tellus ut, finibus metus. Integer tristique est
-          vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra
-          facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue.
-          Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis
-          quam molestie, faucibus condimentum ante sagittis. Suspendisse sit
-          amet luctus tellus. Suspendisse a sapien hendrerit eros dictum
-          faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis
-          pellentesque nunc ac pellentesque.
-        </Text>
-        <Heading as="h3">Title text</Heading>
-        <Text as="p" preset="body-lg">
-          Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis
-          urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum
-          suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus,
-          sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam.
-          Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl
-          ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam
-          vehicula euismod enim quis finibus. Fusce ornare tortor malesuada,
-          consequat magna quis, porta dolor. Donec quis nisl ac sem dictum
-          semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a
-          eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum
-          dolor sit amet, consectetur adipiscing elit.
-        </Text>
-        <Heading as="h3">Title text</Heading>
-        <Text as="p" preset="body-lg">
-          Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis
-          id, blandit turpis. Fusce augue quam, pellentesque et suscipit
-          consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer
-          dignissim condimentum sem ac porta. Vivamus viverra congue massa,
-          vitae fermentum est scelerisque et. Duis a urna vitae odio semper
-          dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu
-          tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo
-          sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique
-          rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus.
-          Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies
-          egestas.
-        </Text>
-        <Heading as="h3">Title text</Heading>
-        <Text as="p" className="mb-0" preset="body-lg">
-          Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales
-          enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non
-          ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat
-          ante ultricies id. Morbi varius dolor ac ante posuere, sit amet
-          tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel
-          feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio.
-          Praesent quis pretium sapien, quis posuere lectus. Proin eleifend
-          purus nec massa aliquam commodo. Quisque auctor suscipit ex sed
-          tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at
-          eros ac, rutrum vestibulum est.
-        </Text>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup>
-          <Button onClick={() => {}} rank="primary">
-            Primary Action
-          </Button>
-          <Button onClick={() => {}} rank="secondary">
-            Secondary
-          </Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </InteractiveExample>
-  ),
-};
-
-/**
- * The default modal experience's Content area (the modal itself). The following stories show how the modal
- * will render in various contexts and with various props set.
- *
- * When viewing code, This will use `<Header>` directly, to demonstrate composition. When building `Modal`s, use
- * `Modal.Title` instead.
- *
- * **NOTE**: The order of the buttons puts the primary to the far bottom and right of the modal, per
- * macOS conventions and style guide.
- */
-export const ContentDefault: Story = {
-  render: (args) => (
-    <div className="flex items-center justify-center">
-      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
-      <ModalContent
-        {...args}
-        data-testid="non-interactive"
-        onClose={() => {}}
-      />
-    </div>
-  ),
-  args: {
-    children: (
-      <>
-        <Modal.Header>
-          <Heading as="h2">Modal Title</Heading>
-          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="fpo h-full w-full">Modal Content</div>
-        </Modal.Body>
-        <Modal.Footer>
-          <ButtonGroup>
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-            <Button onClick={() => {}} rank="secondary">
-              Secondary
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </>
-    ),
-    hideCloseButton: false,
-    open: true,
-  },
-  parameters: {
-    // This story shows the modal content by default, for visual regression testing purposes.
-    chromatic: { disableSnapshot: false },
-  },
-};
-
-/**
- * `Modal` provides `size`, which allows control over the natural width of the modal. This does not affect the contents
- * of the modal except to wrap text.
- */
-export const Large: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    size: 'lg',
-  },
-};
-
-/**
- * `Modal` also allows for `small`.
- */
-export const Small: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    size: 'sm',
-  },
-};
-
-/**
- * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
- * Make sure to match the Button width style by using `isFullWidth`.
- */
-export const LayoutVertical: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    size: 'lg',
-    children: (
-      <>
-        <Modal.Header>
-          <Heading as="h2">Modal Title</Heading>
-          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="fpo h-full w-full">Modal Content</div>
-        </Modal.Body>
-        <Modal.Footer>
-          <ButtonGroup buttonLayout="vertical">
-            <Button isFullWidth onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-            <Button isFullWidth onClick={() => {}} rank="secondary">
-              Secondary
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </>
-    ),
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center">
-      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
-      <ModalContent
-        {...args}
-        data-testid="non-interactive"
-        onClose={() => {}}
-      />
-    </div>
-  ),
-};
-
-/**
- * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
- * Make sure to match the Button width style by using `isFullWidth`.
- */
-export const LayoutVerticalWithTertiary: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    size: 'lg',
-    children: (
-      <>
-        <Modal.Header>
-          <Heading as="h2">Modal Title</Heading>
-          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="fpo h-full w-full">Modal Content</div>
-        </Modal.Body>
-        <Modal.Footer>
-          <ButtonGroup buttonLayout="vertical">
-            <Button isFullWidth onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-            <Button isFullWidth onClick={() => {}} rank="tertiary">
-              Tertiary
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </>
-    ),
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center">
-      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
-      <ModalContent
-        {...args}
-        data-testid="non-interactive"
-        onClose={() => {}}
-      />
-    </div>
-  ),
-};
-
-/**
- * Modals can have destructive behavior. Use the 'critical' button variant.
- */
-export const WithCriticalButton: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    size: 'lg',
-    children: (
-      <>
-        <Modal.Header>
-          <Heading as="h2">Modal Title</Heading>
-          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="fpo h-full w-full">Modal Content</div>
-        </Modal.Body>
-        <Modal.Footer>
-          <ButtonGroup>
-            <Button onClick={() => {}} rank="primary" variant="critical">
-              Critical Action
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </>
-    ),
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center">
-      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
-      <ModalContent
-        {...args}
-        data-testid="non-interactive"
-        onClose={() => {}}
-      />
-    </div>
-  ),
-};
-
-/**
- * This shows the responsive layout in a mobile viewport
- */
-export const Mobile: Story = {
-  ...ContentDefault,
-  parameters: {
-    ...ContentDefault.parameters,
-    viewport: {
-      defaultViewport: 'googlePixel2',
-    },
-    chromatic: {
-      disableSnapshot: false,
-      viewports: [chromaticViewports.googlePixel2],
-    },
-  },
-};
-
-/**
- * This shows the responsive layout in a mobile (landscape) viewport
- */
-export const MobileLandscape: Story = {
-  ...ContentDefault,
-  parameters: {
-    ...ContentDefault.parameters,
-    viewport: {
-      defaultViewport: 'mobilelandscape',
-      viewports: {
-        mobilelandscape: {
-          name: 'Mobile Landscape',
-          styles: {
-            width: '896px',
-            height: '414px',
-          },
-        },
-      },
-      /**
-       * Chromatic sets viewport height to 900px, hence won't snap as necessary
-       */
-      chromatic: { disableSnapshot: true },
-    },
-  },
-};
-
-/**
- * This shows the responsive layout in a tablet viewport
- */
-export const Tablet: Story = {
-  ...ContentDefault,
-  parameters: {
-    ...ContentDefault.parameters,
-    viewport: {
-      defaultViewport: 'ipadMini',
-      viewports: {
-        mobilelandscape: storybookViewports.ipadMini,
-      },
-    },
-    chromatic: {
-      disableSnapshot: false,
-      viewports: [chromaticViewports.ipadMini],
-    },
-  },
-};
diff --git a/src/components/Modal/Modal-v2.test.tsx b/src/components/Modal/Modal-v2.test.tsx
deleted file mode 100644
index a9db9bf49..000000000
--- a/src/components/Modal/Modal-v2.test.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { generateSnapshots, wait } from '@chanzuckerberg/story-utils';
-import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { Modal } from './Modal-v2';
-import * as stories from './Modal-v2.stories';
-import '../../../jest/helpers/removeModalTransitionStylesJestSerializer';
-
-const { Default } = composeStories(stories);
-
-window.ResizeObserver = class FakeResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
-describe('Modal', () => {
-  generateSnapshots(stories as StoryFile, {
-    getElement: async () => {
-      const user = userEvent.setup();
-      const nonInteractiveModal = screen.queryByTestId('non-interactive');
-      if (nonInteractiveModal) return nonInteractiveModal;
-
-      const openModalButton = await screen.findByRole('button', {
-        name: 'Open the modal',
-      });
-      await user.click(openModalButton);
-      const modal = await screen.findByRole('dialog');
-
-      // Give Headless UI's transition/style classes time to settle.
-      await wait(50);
-
-      return modal;
-    },
-  });
-
-  it('is initially closed', () => {
-    render(<Default />);
-    expect(screen.queryByRole('dialog')).toBeFalsy();
-  });
-
-  it('shows the modal when the open modal button is clicked', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const openModalButton = await screen.findByRole('button', {
-      name: 'Open the modal',
-    });
-    await user.click(openModalButton);
-    const modal = await screen.findByRole('dialog');
-    expect(modal).toBeTruthy();
-  });
-
-  it('closes the modal on close button click', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const openModalButton = await screen.findByRole('button', {
-      name: 'Open the modal',
-    });
-    await user.click(openModalButton);
-    const closeButton = await screen.findByRole('button', {
-      name: 'close',
-    });
-    await user.click(closeButton);
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).toBeFalsy();
-    });
-  });
-
-  it('closes the modal on ESC key press', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const openModalButton = await screen.findByRole('button', {
-      name: 'Open the modal',
-    });
-    await user.click(openModalButton);
-    await user.keyboard('{Escape}');
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).toBeFalsy();
-    });
-  });
-
-  it('does not throw an error if modal uses <Modal.Title>', () => {
-    const modalWithTitle = (
-      <Modal onClose={() => {}} open>
-        <Modal.Header>
-          <Modal.Title>Modal Title</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>Modal body content.</Modal.Body>
-        <Modal.Footer>Modal footer content.</Modal.Footer>
-      </Modal>
-    );
-    const renderMethod = () => {
-      render(modalWithTitle);
-    };
-
-    expect(renderMethod).not.toThrow(Error);
-  });
-
-  it('does not throw an error if modal uses aria-label', () => {
-    const modalWithAriaLabel = (
-      <Modal aria-label="aria label" onClose={() => {}} open>
-        <Modal.Header>Modal Title</Modal.Header>
-        <Modal.Body>Modal body content.</Modal.Body>
-        <Modal.Footer>Modal footer content.</Modal.Footer>
-      </Modal>
-    );
-    const renderMethod = () => {
-      render(modalWithAriaLabel);
-    };
-
-    expect(renderMethod).not.toThrow(Error);
-  });
-
-  it('does throw an error if modal does not use <Modal.Title> or aria-label', () => {
-    const modalWithoutTitleOrAriaLabel = (
-      <Modal onClose={() => {}} open>
-        <Modal.Header>Modal Title</Modal.Header>
-        <Modal.Body>Modal body content.</Modal.Body>
-        <Modal.Footer>Modal footer content.</Modal.Footer>
-      </Modal>
-    );
-    const renderMethod = () => {
-      render(modalWithoutTitleOrAriaLabel);
-    };
-
-    // expect console error from react, suppressed.
-    const consoleErrorMock = jest.spyOn(console, 'error');
-    consoleErrorMock.mockImplementation();
-    expect(renderMethod).toThrow(Error);
-    consoleErrorMock.mockRestore();
-  });
-});
diff --git a/src/components/Modal/Modal-v2.tsx b/src/components/Modal/Modal-v2.tsx
deleted file mode 100644
index df4247563..000000000
--- a/src/components/Modal/Modal-v2.tsx
+++ /dev/null
@@ -1,446 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react';
-import clsx from 'clsx';
-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 { ButtonV2 as Button } from '../Button';
-import Heading from '../Heading';
-import Text from '../Text';
-
-import styles from './Modal-v2.module.css';
-
-type ModalContentProps = {
-  // Component API
-  /**
-   * Optional aria-label for the modal.
-   *
-   * If undefined, the headingText of the Modal.Header will be used.
-   * If there is no Modal.Header, an aria-label is required.
-   */
-  'aria-label'?: string;
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * Contents of the modal.
-   */
-  children: ReactNode;
-  /**
-   * Hides the close button in the top right of the modal.
-   *
-   * **Default is `false`**.
-   */
-  hideCloseButton?: boolean;
-  /**
-   * A ref to an element that should receive focus when the modal first opens.
-   *
-   * If undefined, the first focusable element (usually the close button) will be used.
-   *
-   * ```
-   * const inputFieldRef = useRef();
-   *
-   * <Modal initialFocus={inputFieldRef}>
-   *   ...
-   *   <InputField ref={inputFieldRef} />
-   * </Modal>
-   * ```
-   */
-  initialFocus?: MutableRefObject<HTMLElement | null>;
-  /**
-   * Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.
-   * Also adds border and shadow to the footer indicate sticky status and tabindex to body for keyboard scrolling.
-   * Prop should be dependent on whether content overflows at the mobile level.
-   * Tabindex for keyboard scroll is on the body, however, due to focus outline
-   * not having high contrast on the brand header and being overlapped by the footer.
-   *
-   * **Default is `false`**.
-   */
-  isScrollable?: boolean;
-  /**
-   * Method called when the close button is clicked. Use this to hide the modal.
-   * This should be used to also reset the `open` state.
-   * @see https://headlessui.com/react/dialog
-   *
-   * This is required even if you don't have a close button so the ESC key can close the modal.
-   *
-   * ```
-   * const [isOpen, setIsOpen] = useState(true);
-   * // ....
-   *
-   * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-   *  ...
-   * </Modal>
-   * ```
-   */
-  onClose: () => void;
-  // Design API
-  /**
-   * Max size of the modal, which responds to the viewport
-   *
-   * **Default is `"lg"`**.
-   */
-  size?: Extract<Size, 'sm' | 'lg'>;
-  /**
-   * Emphasis used on the backgound overlay (behind the modal)
-   *
-   * **Default is `"low"`**.
-   */
-  overlayEmphasis?: 'low' | 'high';
-};
-
-type ModalProps = ModalContentProps & {
-  /**
-   * Whether or not the modal is visible. Recommend using `useState` to set this
-   * variable instead of a boolean literal, to avoid component control issues.
-   * @see https://headlessui.com/react/dialog
-   *
-   * ```
-   * const [isOpen, setIsOpen] = useState(true);
-   * // ....
-   *
-   * <Modal open={isOpen}>
-   *  ...
-   * </Modal>
-   * ```
-   */
-  open: boolean;
-  /**
-   * Additional classnames passed in for the modal container.
-   */
-  modalContainerClassName?: string;
-};
-
-type ModalTitleProps = ExtractProps<typeof Heading> & {
-  // Component API
-  /**
-   * Contents for the modal title.
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-};
-
-type ModalSubTitleProps = ExtractProps<typeof Text> & {
-  // Component API
-  /**
-   * Contents for the modal title.
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-};
-
-type ModalBodyProps = {
-  // Component API
-  /**
-   * Child node(s) that can be nested inside component. `Modal.Header`,
-   * `Modal.Body`, and `Model.Footer` are the only permissible children of the Modal.
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Toggles focusable variant of the modal. Used to attach a tabIndex for keyboard scrolling
-   * and focus indicator outline.
-   * Scrolling functionality exists on Modal since the header also needs to scroll.
-   * Defaults to false since modal default is not scrollable.
-   */
-  isFocusable?: boolean;
-};
-
-type ModalHeaderProps = {
-  // Component API
-  /**
-   * Child node(s) to place inside the Modal header.
-   * Should include the <Modal.Title>
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-};
-
-type ModalFooterProps = {
-  // Component API
-  /**
-   * Child node(s) to place inside the Modal footer.
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Toggles sticky variant of the footer. If modal is scrollable, footer is sticky.
-   * Also adds border and shadow to indicate sticky status.
-   * Defaults to false since modal default is not scrollable.
-   */
-  isSticky?: boolean;
-};
-
-type Context = {
-  isScrollable?: boolean;
-};
-
-const ModalContext = React.createContext<Context>({});
-
-function childrenHaveModalTitle(children?: ReactNode): boolean {
-  const childrenArray = React.Children.toArray(children);
-  return childrenArray.some((child) => {
-    if (typeof child === 'string' || typeof child === 'number') {
-      return false;
-    } else if (
-      'props' in child &&
-      child.type &&
-      typeof child.type !== 'string' &&
-      (child.type?.name === 'ModalTitle' || child.type?.name === 'Modal.Title')
-    ) {
-      return true;
-    } else if ('props' in child && child.props.children) {
-      return childrenHaveModalTitle(child.props.children);
-    }
-    return false;
-  });
-}
-
-/**
- * The actual modal, without the dark overlay behind it.
- *
- * This is only exported for testing purposes; please do not import and use this directly.
- */
-export const ModalContent = (props: ModalContentProps) => {
-  const {
-    children,
-    className,
-    hideCloseButton = false,
-    isScrollable,
-    onClose,
-    size = 'lg',
-    ...other
-  } = props;
-
-  const componentClassName = clsx(
-    styles['modal__content'],
-    isScrollable && styles['modal__content--scrollable'],
-    size && styles[`modal__content--${size}`],
-    className,
-  );
-
-  return (
-    <ModalContext.Provider value={{ isScrollable }}>
-      <div className={componentClassName} {...other}>
-        {!hideCloseButton && (
-          <Button
-            aria-label="close"
-            className={styles['modal__close-button']}
-            context="default"
-            icon="close"
-            iconLayout="icon-only"
-            onClick={onClose}
-            rank="tertiary"
-            variant="neutral"
-          >
-            Close
-          </Button>
-        )}
-        {children}
-      </div>
-    </ModalContext.Provider>
-  );
-};
-
-/**
- * `import {Modal} from "@chanzuckerberg/eds";`
- *
- * EDS Wrapper for the HeadlessUI Dialog component
- * @see https://headlessui.dev/react/dialog
- *
- * NOTE: You must have at least one focusable element in the modal contents, for keyboard
- * accessibility reasons. (The close button counts as a focusable element.) Use `initialFocus`
- * to choose a different element.
- *
- */
-export const Modal = (props: ModalProps) => {
-  const {
-    'aria-label': ariaLabel,
-    initialFocus,
-    modalContainerClassName,
-    onClose,
-    open,
-    overlayEmphasis = 'low',
-    ...rest
-  } = props;
-  const { children } = rest;
-
-  if (process.env.NODE_ENV !== 'production') {
-    const hasModalTitle = childrenHaveModalTitle(children);
-    if (!hasModalTitle && !ariaLabel) {
-      throw new Error(
-        "You must use the Modal.Title helper component or pass in an aria-label when using the Modal. The Modal uses the Modal.Title to describe the modal to screen readers using aria-labelledby. If you're not using the Modal.Title component, you can pass in an aria-label instead.",
-      );
-    }
-  }
-
-  const componentClassName = clsx(styles['modal'], modalContainerClassName);
-
-  return (
-    <Transition
-      as={React.Fragment}
-      enter={styles['modal__transition--enter']}
-      enterFrom={styles['modal__transition--enterFrom']}
-      enterTo={styles['modal__transition--enterTo']}
-      leave={styles['modal__transition--leave']}
-      leaveFrom={styles['modal__transition--leaveFrom']}
-      leaveTo={styles['modal__transition--leaveTo']}
-      show={open}
-    >
-      <Dialog
-        aria-label={ariaLabel}
-        className={componentClassName}
-        initialFocus={initialFocus}
-        // Passing onClose to the Dialog allows it to close the modal when the ESC key is triggered.
-        onClose={onClose}
-      >
-        <Dialog.Overlay
-          className={clsx(
-            styles['modal__overlay'],
-            overlayEmphasis &&
-              styles[`modal__overlay--emphasis-${overlayEmphasis}`],
-          )}
-        />
-
-        <ModalContent onClose={onClose} {...rest} />
-      </Dialog>
-    </Transition>
-  );
-};
-
-/**
- * Component defines the body of the modal.
- */
-const ModalBody = ({
-  children,
-  className,
-  isFocusable,
-  ...other
-}: ModalBodyProps) => (
-  <div
-    className={clsx(styles['modal-body'], className)}
-    // This element is tabbable to allow keyboard users to scroll long content.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    tabIndex={isFocusable ? 0 : undefined}
-    {...other}
-  >
-    {children}
-  </div>
-);
-
-/**
- * Component defines the Footer section of the modal.
- */
-const ModalFooter = ({
-  children,
-  className,
-  isSticky = false,
-  ...other
-}: ModalFooterProps) => {
-  return (
-    <div
-      className={clsx(
-        styles['modal-footer'],
-        isSticky && styles['modal-footer--sticky'],
-        className,
-      )}
-      {...other}
-    >
-      {children}
-    </div>
-  );
-};
-
-/**
- * Component defines the Header section of the modal.
- */
-const ModalHeader = ({ children, className, ...other }: ModalHeaderProps) => {
-  const componentClassName = clsx(styles['modal-header'], className);
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
-
-/**
- * Component defines the Title section of the modal.
- */
-const ModalTitle = ({
-  children,
-  className,
-  preset = 'headline-md',
-  ...other
-}: ModalTitleProps) => (
-  <Dialog.Title as={React.Fragment}>
-    <Heading as="h2" className={className} preset={preset} {...other}>
-      {children}
-    </Heading>
-  </Dialog.Title>
-);
-
-const ModalSubTitle = ({
-  children,
-  className,
-  preset = 'headline-sm',
-  ...other
-}: ModalSubTitleProps) => {
-  const componentClassName = clsx(styles['modal-sub-title'], className);
-  return (
-    <Text as="div" className={componentClassName} preset={preset} {...other}>
-      {children}
-    </Text>
-  );
-};
-
-/**
- * Variations of the subcomponent to pass props from parent Modal component.
- * Same prop passed directly to subcomponent has priority over prop passed from Modal component.
- */
-const VariantModalHeader = (props: ModalHeaderProps) => {
-  return <ModalHeader {...props} />;
-};
-
-const FocusableModalBody = (props: ModalBodyProps) => {
-  const { isScrollable } = React.useContext(ModalContext);
-  return <ModalBody isFocusable={isScrollable} {...props} />;
-};
-
-const StickyModalFooter = (props: ModalFooterProps) => {
-  const { isScrollable } = React.useContext(ModalContext);
-  return <ModalFooter isSticky={isScrollable} {...props} />;
-};
-
-Modal.displayName = 'Modal';
-VariantModalHeader.displayName = 'Modal.Header';
-ModalTitle.displayName = 'Modal.Title';
-ModalSubTitle.displayName = 'Modal.SubTitle';
-FocusableModalBody.displayName = 'Modal.Body';
-StickyModalFooter.displayName = 'Modal.Footer';
-
-Modal.Header = VariantModalHeader;
-Modal.Title = ModalTitle;
-Modal.SubTitle = ModalSubTitle;
-Modal.Body = FocusableModalBody;
-Modal.Footer = StickyModalFooter;
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
index 04c37ef0e..247adefb8 100755
--- a/src/components/Modal/Modal.module.css
+++ b/src/components/Modal/Modal.module.css
@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # MODAL
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * The modal wrapper and overlay which takes up the entire screen.
@@ -20,8 +23,13 @@
  * The inverted background of the modal to provide contrast with the actual modal.
  */
 .modal__overlay {
-  background-color: var(--eds-theme-color-body-background-inverted);
-  opacity: 0.5;
+  &.modal__overlay--emphasis-high {
+    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-high-emphasis) r g b / 0.8);
+  }
+  
+  &.modal__overlay--emphasis-low {
+    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-low-emphasis) r g b / 0.5);
+  }
 }
 
 /**
@@ -32,9 +40,10 @@
   align-items: center;
   justify-content: center;
   padding: calc(var(--eds-size-2) / 16 * 1rem);
+
   /**
    * Ensures modal is above other components. This is not a design token for now since we need to align on 
-   * z-indeces across the app and in the platform. https://app.shortcut.com/czi-edu/story/203871.
+   * z-indeces across the system
    */
   z-index: 1050;
 }
@@ -48,21 +57,26 @@
     transition: none;
   }
 }
+
 .modal__transition--enterFrom {
   opacity: 0;
 }
+
 .modal__transition--enterTo {
   opacity: 1;
 }
+
 .modal__transition--leave {
   transition: opacity calc(var(--eds-anim-fade-long) * 1s) var(--eds-anim-ease);
   @media (prefers-reduced-motion) {
     transition: none;
   }
 }
+
 .modal__transition--leaveFrom {
   opacity: 1;
 }
+
 .modal__transition--leaveTo {
   opacity: 0;
 }
@@ -72,51 +86,79 @@
  */
 .modal__content {
   position: relative;
-  height: 43.125rem;
-  max-height: 90vh;
   overflow: hidden;
-  border-radius: calc(var(--eds-border-radius-lg) * 1px);
-  background-color: var(--eds-theme-color-background-neutral-default);
+  
   /** 
   * This transparent border is for Window High Contrast Mode, which removes all
   * background colors but makes borders 100% opacity black. Without this, the
   * modal would have no clear boundary. 
   */
-  border: var(--eds-theme-form-border-width) transparent
-    var(--eds-theme-color-background-neutral-default);
-  /** 
-  * We use flexbox to handle height and width automatically. 
-  * The body can scroll when content goes beyond the component,
-  * while the footer remains static (if scrollable).
-  */
+  border: var(--eds-theme-form-border-width) transparent var(--eds-theme-color-background-utility-container);
+  
   display: flex;
   flex-direction: column;
-
-  width: 22.5rem;
-  --modal-horizontal-padding: calc(var(--eds-size-4) / 16 * 1rem);
+  
+  background-color: var(--eds-theme-color-background-utility-container);
 }
 
 /**
- * The medium modal size used for the md modal.
- * Also used for the lg modal size for when the screen size is smaller than 75rem.
+ * The large modal size used for the lg/default modal.
  */
-.modal__content--md {
+.modal__content--lg {
+  @media all and (min-width: $eds-bp-xs) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @media all and (min-width: $eds-bp-sm) {
+    max-height: 40rem;
+    max-width: 50rem;
+  }
+
   @media all and (min-width: $eds-bp-md) {
-    width: 42rem;
-    --modal-horizontal-padding: calc(var(--eds-size-6) / 16 * 1rem);
+    max-height: 40rem;
+    max-width: 50rem;
+  }
+
+  @media all and (min-width: $eds-bp-lg) {
+    max-height: 40rem;
+    max-width: 60rem;
+  }
+
+  @media all and (min-width: $eds-bp-xl) {
+    max-height: 40rem;
+    max-width: 60rem;
+    --modal-horizontal-padding: calc(var(--eds-size-8) / 16 * 1rem);
   }
 }
 
 /**
- * The large modal size used for the lg/default modal.
+ * The small modal size used for the modal.
  */
-.modal__content--lg {
+ .modal__content--sm {
+  @media all and (min-width: $eds-bp-xs) {
+    max-height: 30rem;
+    max-width: 35rem;
+  }
+
+  @media all and (min-width: $eds-bp-sm) {
+    max-height: 30rem;
+    max-width: 25rem;
+  }
+
+  @media all and (min-width: $eds-bp-md) {
+    max-height: 30rem;
+    max-width: 25rem;
+  }
+
   @media all and (min-width: $eds-bp-xl) {
-    width: 64rem;
+    max-height: 30rem;
+    max-width: 35rem;
     --modal-horizontal-padding: calc(var(--eds-size-8) / 16 * 1rem);
   }
 }
 
+
 /**
  * Allows scrolling of the modal content except for sticky footer.
  * This functionality is our intended scroll behavior but consuming teams can 
@@ -130,37 +172,9 @@
  * The modal close button.
  */
 .modal__close-button {
-  border: 0;
-  background-color: transparent;
-
   position: absolute;
   top: 0;
   right: 0;
-
-  /* Minimum button target size is 44px, but 3rem (48px) is next closest ramp size. */
-  width: calc(var(--eds-size-6) / 16 * 1rem);
-  height: calc(var(--eds-size-6) / 16 * 1rem);
-
-  cursor: pointer;
-
-  z-index: 1;
-}
-
-/**
- * The modal close icon that resides in the close button.
- */
-.modal__close-icon {
-  position: absolute;
-  top: calc(var(--eds-size-1) / 16 * 1rem);
-  right: calc(var(--eds-size-1) / 16 * 1rem);
-  color: var(--eds-theme-color-icon-neutral-subtle);
-}
-
-/**
- * White variant of the close icon in a brand variant of the modal.
- */
-.modal__close-icon--brand {
-  color: var(--eds-theme-color-icon-neutral-default-inverse);
 }
 
 /*------------------------------------*\
@@ -171,18 +185,8 @@
  * The body of the modal
  */
  .modal-body {
-  padding: calc(var(--eds-size-4) / 16 * 1rem) var(--modal-horizontal-padding);
   flex: 1;
-}
-
-.modal-body:focus-visible {
-  @mixin focusInside;
-}
-
-@supports not selector(:focus-visible) {
-  .modal-body:focus {
-    @mixin focusInside;
-  }
+  padding: 0 calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 /*------------------------------------*\
@@ -193,27 +197,18 @@
  * Footer for the modal.
  */
  .modal-footer {
-  padding-top: calc(var(--eds-size-2-and-half) / 16 * 1rem);
-  padding-bottom: calc(var(--eds-size-2-and-half) / 16 * 1rem);
-  padding-left: var(--modal-horizontal-padding);
-  padding-right: calc(var(--eds-size-3) / 16 * 1rem);
-
   width: 100%;
-  background-color: var(--eds-theme-color-background-neutral-default);
+  z-index: 1000;
 
-  border-bottom-left-radius: calc(var(--eds-border-radius-lg) * 1px);
-  border-bottom-right-radius: calc(var(--eds-border-radius-lg) * 1px);
+  padding: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
 
-  z-index: 100;
+  background-color: var(--eds-theme-color-background-utility-container);
 }
 
-/**
- * Sticky variant of the footer.
- * Used when the modal variant is scrollable.
- */
 .modal-footer--sticky {
   position: sticky;
   bottom: 0;
+
   box-shadow: var(--eds-box-shadow-xl);
 }
 
@@ -226,89 +221,10 @@
  */
  .modal-header {
   width: 100%;
-  background-color: var(--eds-theme-color-background-neutral-default);
-  padding-top: calc(var(--eds-size-7) / 16 * 1rem);
-  padding-left: var(--modal-horizontal-padding);
-  padding-right: var(--modal-horizontal-padding);
-}
-
-/**
- * Brand variant for the header.
- */
-.modal-header--brand {
-  display: flex;
-  flex-direction: column;
-
-  min-height: 10.75rem;
-
-  @media all and (min-height: $eds-bp-sm) {
-    min-height: 19.75rem;
-  }
-  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm) {
-    flex-direction: row;
-  }
 
-  flex-shrink: 0;
-
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  background-color: var(--eds-theme-color-modal-brand-header-background);
-  h2 {
-    /**
-     * Brand specific font for the title.
-     */
-    flex: 1;
-    font: var(--eds-theme-typography-headline-secondary-lg);
-    
-    @media all and (min-width: $eds-bp-sm) {
-      margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
-    }
-    @media all and (min-width: $eds-bp-xl) {
-      font: var(--eds-theme-typography-headline-secondary-md);
-   
-    }
-  }
-}
-
-/**
- * Specific asset placement for brand.
- */
-.modal-header__brand-asset {
-  align-self: flex-end;
-  position: relative;
-  top: calc(var(--eds-size-2) / 16 * 1rem);
-  left: calc(var(--eds-size-2) / 16 * 1rem);
-
-  width: 8.5rem;
-  height: 8.5rem;
-
-  /* For mobile landscape orientation. */
-  @media all and (min-width: $eds-bp-sm) {
-    display: none;
-  }
-
-  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm) {
-    display: block;
-    width: 14rem;
-    height: 14rem;
-    left: calc(var(--eds-size-3) / 16 * 1rem);
-  }
-
-  @media all and (min-width: $eds-bp-xl) {
-    width: 16.5rem;
-    height: 16.5rem;
-    left: 0;
-  }
+  padding: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
 }
 
-/*------------------------------------*\
-    # MODAL STEPPER
-\*------------------------------------*/
-
-/**
- * Stepper that resides in the modal footer.
- */
- .modal-stepper {
-  color: var(--eds-theme-color-icon-neutral-default);
-  display: flex;
-  gap: calc(var(--eds-size-1-and-half) / 16 * 1rem);
-}
+.modal-sub-title {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
\ No newline at end of file
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index a4c03963f..71930660b 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,11 +1,12 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
 import React from 'react';
 import { useState } from 'react';
+
 import { Modal, ModalContent } from './Modal';
-import { Button, ButtonGroup, Heading, Tooltip } from '../../';
+import { Heading, Text } from '../../';
 import { chromaticViewports, storybookViewports } from '../../util/viewports';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
 
 export default {
   title: 'Components/Modal',
@@ -14,8 +15,7 @@ export default {
     // The modal is initially closed for most of these stories,
     // which renders testing it for visual regressions unhelpful.
     chromatic: { disableSnapshot: true },
-    layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   tags: ['autodocs'],
   argTypes: {
@@ -41,55 +41,33 @@ export default {
         'Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.',
       type: 'boolean',
     },
+    size: {
+      description: 'Max size of the modal, which responds to the viewport',
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'lg'],
+      defaultValue: 'lg',
+    },
   },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<typeof Modal>;
 
 type Args = React.ComponentProps<typeof Modal>;
 type Story = StoryObj<typeof Modal>;
 type InteractiveArgs = Omit<Args, 'onClose' | 'open'>;
 
-const getChildren = (
-  inDialogComponent = true,
-  bodyContent: ReactNode = 'Modal content.',
-  showStepper = false,
-) => (
-  <>
-    <Modal.Header
-      brandAsset={<div className="fpo h-full w-full">Brand Asset</div>}
-    >
-      {inDialogComponent ? (
-        <Modal.Title>Modal Title</Modal.Title>
-      ) : (
-        /* Not using Modal.Title here because it can't exist outside of the Dialog component. */
-        <Heading as="h2">Modal Title</Heading>
-      )}
-    </Modal.Header>
-    <Modal.Body>{bodyContent}</Modal.Body>
-    <Modal.Footer
-      className={clsx(showStepper && 'flex items-center justify-between')}
-    >
-      {showStepper && <Modal.Stepper activeStep={2} totalSteps={5} />}
-      <ButtonGroup className="flex w-full justify-end">
-        {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-        <Button onClick={() => {}} status="neutral">
-          Button 2
-        </Button>
-        <Tooltip text="Tooltip should spawn on top of modal">
-          <Button onClick={() => {}} variant="primary">
-            Button 1
-          </Button>
-        </Tooltip>
-      </ButtonGroup>
-    </Modal.Footer>
-  </>
-);
-
+/**
+ * Wrapper for triggering `Modal` with a button
+ * @param args
+ * @returns
+ */
 function InteractiveExample(args: InteractiveArgs) {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} variant="primary">
+      <Button onClick={() => setOpen(true)} rank="primary">
         Open the modal
       </Button>
 
@@ -106,119 +84,38 @@ function InteractiveExample(args: InteractiveArgs) {
  */
 export const Default: StoryObj<Args> = {
   render: (args) => (
-    <InteractiveExample {...args}>{getChildren()}</InteractiveExample>
-  ),
-};
-
-type HeadingArgs = React.ComponentProps<typeof Heading>;
-/**
- * Clicking on a trigger item (in this case `Button`) will cause a modal to open.
- *
- * **Note**: this only works from certain screens in Storybook. If it doesn't work as expected, view from the
- * "docs" sub-page.
- */
-export const ControlHeadingInteractive: StoryObj<HeadingArgs> = {
-  argTypes: {
-    as: {
-      control: 'select',
-      name: 'title "as" prop',
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-    },
-  },
-  render: ({ as, ...args }) => (
     <InteractiveExample {...args}>
       <Modal.Header>
-        <Modal.Title as={as}>Modal Title</Modal.Title>
+        <Modal.Title>Modal Title</Modal.Title>
+        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
       </Modal.Header>
-      <Modal.Body>Modal Content</Modal.Body>
+      <Modal.Body>
+        <div className="fpo h-full w-full">Modal Content</div>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup>
+          <Button onClick={() => {}} rank="primary">
+            Primary Action
+          </Button>
+          <Button onClick={() => {}} rank="secondary">
+            Secondary
+          </Button>
+        </ButtonGroup>
+      </Modal.Footer>
     </InteractiveExample>
   ),
-  parameters: {
-    /**
-     * Purpose of this story is to have different controls for the Modal.Title but defaults to what all the other stories are.
-     * Hence will snap similarly to the other stories has no value in snapping both unit and Chromatic.
-     */
-    snapshot: { skip: true },
-  },
 };
 
 /**
- * You can disable the close button on the modal. This will require users to either click out of the modal, or hit escape to close.
- *
- * **NOTE**: this is less discoverable and should be avoided when possible.
+ * Modals can also have a more emphasized backdrop overlay
  */
-export const WithoutCloseButton: StoryObj<InteractiveArgs> = {
-  render: (args) => (
-    <InteractiveExample {...args} hideCloseButton>
-      {getChildren()}
-    </InteractiveExample>
-  ),
+export const HighEmphasis: StoryObj<Args> = {
+  args: {
+    overlayEmphasis: 'high',
+  },
+  render: Default.render,
 };
 
-const reallyLongText = (
-  <div>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam diam
-      quis dolor maximus, non tincidunt lacus facilisis. Praesent ac vestibulum
-      diam. Sed ac orci fringilla, ullamcorper quam nec, elementum turpis. Orci
-      varius natoque penatibus et magnis dis parturient montes, nascetur
-      ridiculus mus. Curabitur et vulputate leo. Phasellus convallis ante at
-      augue iaculis, quis consectetur dolor placerat. Nulla ornare malesuada
-      elit eu faucibus. Mauris ultricies tincidunt eleifend. Aliquam erat
-      volutpat. Morbi nec ipsum sed sem facilisis tristique nec et ligula.
-      Vivamus id feugiat sapien.
-    </p>
-    <p>
-      Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel
-      venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin aliquam,
-      orci ex pretium ipsum, congue rhoncus dui orci sed velit. Cras ac leo vel
-      massa rutrum auctor eget sed orci. Aenean id nisi consectetur, dapibus
-      tellus ut, finibus metus. Integer tristique est vitae lectus suscipit, ut
-      vulputate est fringilla. Donec pharetra facilisis erat at venenatis. Etiam
-      faucibus dignissim leo eget congue. Sed vehicula imperdiet neque id
-      gravida. Proin volutpat tortor quis quam molestie, faucibus condimentum
-      ante sagittis. Suspendisse sit amet luctus tellus. Suspendisse a sapien
-      hendrerit eros dictum faucibus. Vivamus pretium vel sem faucibus
-      tristique. Integer iaculis pellentesque nunc ac pellentesque.
-    </p>
-    <p>
-      Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis urna,
-      ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum suscipit ac
-      ligula venenatis scelerisque. Fusce rutrum nulla lectus, sed dignissim
-      ipsum faucibus sodales. Suspendisse id aliquet quam. Maecenas facilisis
-      mauris dolor, id accumsan ex vehicula in. In nisl ligula, fringilla in
-      enim nec, lobortis sollicitudin purus. Aliquam vehicula euismod enim quis
-      finibus. Fusce ornare tortor malesuada, consequat magna quis, porta dolor.
-      Donec quis nisl ac sem dictum semper quis vel turpis. Proin sed leo in
-      ante rhoncus pellentesque a eu urna. Phasellus consequat lectus et
-      hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </p>
-    <p>
-      Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis id,
-      blandit turpis. Fusce augue quam, pellentesque et suscipit consectetur,
-      pharetra in mi. Suspendisse non ultricies purus. Integer dignissim
-      condimentum sem ac porta. Vivamus viverra congue massa, vitae fermentum
-      est scelerisque et. Duis a urna vitae odio semper dictum a sed nisl. In
-      fringilla hendrerit massa, at luctus arcu tincidunt nec. Donec gravida,
-      mauris sit amet porta lobortis, justo sem vehicula ipsum, at pretium sem
-      leo sed libero. Morbi tristique rhoncus suscipit. Nullam at malesuada
-      sapien. Nam in egestas tellus. Nulla quis metus dui. Suspendisse sit amet
-      nisi at lectus ultricies egestas.
-    </p>
-    <p className="mb-0">
-      Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales enim
-      mi, varius feugiat sapien congue eget. Morbi vitae ipsum non ligula
-      eleifend molestie. Aenean bibendum tortor sapien, quis volutpat ante
-      ultricies id. Morbi varius dolor ac ante posuere, sit amet tincidunt
-      lectus pulvinar. Proin id efficitur neque. Nullam vel feugiat dui.
-      Curabitur imperdiet lacinia eros, ac iaculis odio. Praesent quis pretium
-      sapien, quis posuere lectus. Proin eleifend purus nec massa aliquam
-      commodo. Quisque auctor suscipit ex sed tristique. Sed eget ultrices est.
-      Suspendisse nunc justo, dapibus at eros ac, rutrum vestibulum est.
-    </p>
-  </div>
-);
-
 /**
  * Modals can contain long, scrollable text. This is not recommended, however.
  */
@@ -228,52 +125,108 @@ export const WithLongTextScrollable: StoryObj<InteractiveArgs> = {
   },
   render: (args) => (
     <InteractiveExample {...args}>
-      {getChildren(true, reallyLongText)}
-    </InteractiveExample>
-  ),
-};
-
-/**
- * You can avoid rendering the header and footer in a modal
- */
-export const WithoutHeaderAndFooter: StoryObj<InteractiveArgs> = {
-  args: {
-    isScrollable: true,
-  },
-  render: (args) => (
-    <InteractiveExample
-      {...args}
-      aria-label="The Modal Amazing Modal You've Ever Seen"
-    >
-      <Modal.Body>{reallyLongText}</Modal.Body>
+      <Modal.Header>
+        <Modal.Title>Modal Title</Modal.Title>
+        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+      </Modal.Header>
+      <Modal.Body>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam
+          diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac
+          vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec,
+          elementum turpis. Orci varius natoque penatibus et magnis dis
+          parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo.
+          Phasellus convallis ante at augue iaculis, quis consectetur dolor
+          placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies
+          tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem
+          facilisis tristique nec et ligula. Vivamus id feugiat sapien.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel
+          venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin
+          aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit.
+          Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi
+          consectetur, dapibus tellus ut, finibus metus. Integer tristique est
+          vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra
+          facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue.
+          Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis
+          quam molestie, faucibus condimentum ante sagittis. Suspendisse sit
+          amet luctus tellus. Suspendisse a sapien hendrerit eros dictum
+          faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis
+          pellentesque nunc ac pellentesque.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis
+          urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum
+          suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus,
+          sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam.
+          Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl
+          ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam
+          vehicula euismod enim quis finibus. Fusce ornare tortor malesuada,
+          consequat magna quis, porta dolor. Donec quis nisl ac sem dictum
+          semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a
+          eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum
+          dolor sit amet, consectetur adipiscing elit.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis
+          id, blandit turpis. Fusce augue quam, pellentesque et suscipit
+          consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer
+          dignissim condimentum sem ac porta. Vivamus viverra congue massa,
+          vitae fermentum est scelerisque et. Duis a urna vitae odio semper
+          dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu
+          tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo
+          sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique
+          rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus.
+          Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies
+          egestas.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" className="mb-0" preset="body-lg">
+          Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales
+          enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non
+          ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat
+          ante ultricies id. Morbi varius dolor ac ante posuere, sit amet
+          tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel
+          feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio.
+          Praesent quis pretium sapien, quis posuere lectus. Proin eleifend
+          purus nec massa aliquam commodo. Quisque auctor suscipit ex sed
+          tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at
+          eros ac, rutrum vestibulum est.
+        </Text>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup>
+          <Button onClick={() => {}} rank="primary">
+            Primary Action
+          </Button>
+          <Button onClick={() => {}} rank="secondary">
+            Secondary
+          </Button>
+        </ButtonGroup>
+      </Modal.Footer>
     </InteractiveExample>
   ),
 };
 
-export const ModalStepper: StoryObj<
-  React.ComponentProps<typeof Modal.Stepper>
-> = {
-  args: {
-    activeStep: 1,
-    totalSteps: 3,
-  },
-  render: (args) => <Modal.Stepper {...args} data-testid="non-interactive" />,
-  decorators: [(Story) => <div className="p-2">{Story()}</div>],
-  parameters: {
-    chromatic: { disableSnapshot: false },
-  },
-};
 /**
  * The default modal experience's Content area (the modal itself). The following stories show how the modal
  * will render in various contexts and with various props set.
  *
+ * When viewing code, This will use `<Header>` directly, to demonstrate composition. When building `Modal`s, use
+ * `Modal.Title` instead.
+ *
  * **NOTE**: The order of the buttons puts the primary to the far bottom and right of the modal, per
  * macOS conventions and style guide.
  */
 export const ContentDefault: Story = {
   render: (args) => (
     <div className="flex items-center justify-center">
-      <div className="absolute h-full w-full bg-body-background-inverted opacity-50" />
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
       <ModalContent
         {...args}
         data-testid="non-interactive"
@@ -282,7 +235,27 @@ export const ContentDefault: Story = {
     </div>
   ),
   args: {
-    children: getChildren(false),
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup>
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+            <Button onClick={() => {}} rank="secondary">
+              Secondary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
     hideCloseButton: false,
     open: true,
   },
@@ -294,13 +267,13 @@ export const ContentDefault: Story = {
 
 /**
  * `Modal` provides `size`, which allows control over the natural width of the modal. This does not affect the contents
- * of the modal.
+ * of the modal except to wrap text.
  */
-export const Medium: Story = {
+export const Large: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    size: 'md',
+    size: 'lg',
   },
 };
 
@@ -316,16 +289,133 @@ export const Small: Story = {
 };
 
 /**
- * The brand variant offers a catered experience with a slot for a hero image to be attached to the modal.
+ * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
+ * Make sure to match the Button width style by using `isFullWidth`.
  */
-export const Brand: Story = {
+export const LayoutVertical: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    variant: 'brand',
+    size: 'lg',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup buttonLayout="vertical">
+            <Button isFullWidth onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+            <Button isFullWidth onClick={() => {}} rank="secondary">
+              Secondary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
   },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
+ * Make sure to match the Button width style by using `isFullWidth`.
+ */
+export const LayoutVerticalWithTertiary: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'lg',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup buttonLayout="vertical">
+            <Button isFullWidth onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+            <Button isFullWidth onClick={() => {}} rank="tertiary">
+              Tertiary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Modals can have destructive behavior. Use the 'critical' button variant.
+ */
+export const WithCriticalButton: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'lg',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup>
+            <Button onClick={() => {}} rank="primary" variant="critical">
+              Critical Action
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
 };
 
+/**
+ * This shows the responsive layout in a mobile viewport
+ */
 export const Mobile: Story = {
   ...ContentDefault,
   parameters: {
@@ -340,6 +430,9 @@ export const Mobile: Story = {
   },
 };
 
+/**
+ * This shows the responsive layout in a mobile (landscape) viewport
+ */
 export const MobileLandscape: Story = {
   ...ContentDefault,
   parameters: {
@@ -363,22 +456,9 @@ export const MobileLandscape: Story = {
   },
 };
 
-export const MobileBrand: Story = {
-  ...Mobile,
-  args: {
-    ...Mobile.args,
-    variant: 'brand',
-  },
-};
-
-export const MobileLandscapeBrand: Story = {
-  ...MobileLandscape,
-  args: {
-    ...MobileLandscape.args,
-    variant: 'brand',
-  },
-};
-
+/**
+ * This shows the responsive layout in a tablet viewport
+ */
 export const Tablet: Story = {
   ...ContentDefault,
   parameters: {
@@ -395,26 +475,3 @@ export const Tablet: Story = {
     },
   },
 };
-
-export const TabletBrand: Story = {
-  ...Tablet,
-  args: {
-    ...Tablet.args,
-    variant: 'brand',
-  },
-};
-
-/**
- * `Modal` can make use of the embedded `.Stepper` sub-component, to implement wizard behavior.
- */
-export const WithStepper: Story = {
-  ...ContentDefault,
-  args: {
-    ...ContentDefault.args,
-    children: getChildren(
-      false,
-      'Modal body content. This is an example use case with the stepper in the footer.',
-      true,
-    ),
-  },
-};
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index c4e762b54..fac6bff53 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -60,7 +60,7 @@ describe('Modal', () => {
     });
     await user.click(openModalButton);
     const closeButton = await screen.findByRole('button', {
-      name: 'close modal',
+      name: 'close',
     });
     await user.click(closeButton);
     await waitFor(() => {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index d660b801b..c7a4ba4ff 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -2,15 +2,18 @@ import { Dialog, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 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 Button from '../Button';
 import Heading from '../Heading';
-import { Icon, type IconName } from '../Icon/Icon';
-import styles from './Modal.module.css';
+import Text from '../Text';
 
-type Variant = 'brand';
+import styles from './Modal.module.css';
 
 type ModalContentProps = {
+  // Component API
   /**
    * Optional aria-label for the modal.
    *
@@ -74,17 +77,19 @@ type ModalContentProps = {
    * ```
    */
   onClose: () => void;
+  // Design API
   /**
-   * Max size of the modal. Defaults to 'lg'.
-   * Will still break responsively.
+   * Max size of the modal, which responds to the viewport
    *
    * **Default is `"lg"`**.
    */
-  size?: Extract<Size, 'sm' | 'md' | 'lg'>;
+  size?: Extract<Size, 'sm' | 'lg'>;
   /**
-   * Color variants of the modal.
+   * Emphasis used on the backgound overlay (behind the modal)
+   *
+   * **Default is `"low"`**.
    */
-  variant?: Variant;
+  overlayEmphasis?: 'low' | 'high';
 };
 
 type ModalProps = ModalContentProps & {
@@ -110,6 +115,19 @@ type ModalProps = ModalContentProps & {
 };
 
 type ModalTitleProps = ExtractProps<typeof Heading> & {
+  // Component API
+  /**
+   * Contents for the modal title.
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+};
+
+type ModalSubTitleProps = ExtractProps<typeof Text> & {
+  // Component API
   /**
    * Contents for the modal title.
    */
@@ -121,6 +139,7 @@ type ModalTitleProps = ExtractProps<typeof Heading> & {
 };
 
 type ModalBodyProps = {
+  // Component API
   /**
    * Child node(s) that can be nested inside component. `Modal.Header`,
    * `Modal.Body`, and `Model.Footer` are the only permissible children of the Modal.
@@ -130,6 +149,7 @@ type ModalBodyProps = {
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
   /**
    * Toggles focusable variant of the modal. Used to attach a tabIndex for keyboard scrolling
    * and focus indicator outline.
@@ -140,6 +160,7 @@ type ModalBodyProps = {
 };
 
 type ModalHeaderProps = {
+  // Component API
   /**
    * Child node(s) to place inside the Modal header.
    * Should include the <Modal.Title>
@@ -149,21 +170,11 @@ type ModalHeaderProps = {
    * CSS class names that can be appended to the component.
    */
   className?: string;
-  /**
-   * Adjusts height, color, and text of the header.
-   */
-  variant?: Variant;
-  /**
-   * Placeholder for brand asset.
-   */
-  brandAsset?: ReactNode;
-  /**
-   * CSS class names that can be appended to the brand asset.
-   */
-  assetClassName?: string;
+  // Design API
 };
 
 type ModalFooterProps = {
+  // Component API
   /**
    * Child node(s) to place inside the Modal footer.
    */
@@ -172,6 +183,7 @@ type ModalFooterProps = {
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
   /**
    * Toggles sticky variant of the footer. If modal is scrollable, footer is sticky.
    * Also adds border and shadow to indicate sticky status.
@@ -180,25 +192,8 @@ type ModalFooterProps = {
   isSticky?: boolean;
 };
 
-type ModalStepperProps = {
-  /**
-   * Indicates which step is the active step. Must be one or more.
-   */
-  activeStep: number;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Indicates how many steps to represent. Must be one or more and
-   * greater than or equal to activeStep.
-   */
-  totalSteps: number;
-};
-
 type Context = {
   isScrollable?: boolean;
-  variant?: Variant;
 };
 
 const ModalContext = React.createContext<Context>({});
@@ -225,7 +220,7 @@ function childrenHaveModalTitle(children?: ReactNode): boolean {
 /**
  * The actual modal, without the dark overlay behind it.
  *
- * This is only for testing purposes; please do not import and use this directly.
+ * This is only exported for testing purposes; please do not import and use this directly.
  */
 export const ModalContent = (props: ModalContentProps) => {
   const {
@@ -235,38 +230,33 @@ export const ModalContent = (props: ModalContentProps) => {
     isScrollable,
     onClose,
     size = 'lg',
-    variant,
     ...other
   } = props;
 
   const componentClassName = clsx(
     styles['modal__content'],
     isScrollable && styles['modal__content--scrollable'],
-    (size === 'md' || size === 'lg') && styles['modal__content--md'],
-    size === 'lg' && styles['modal__content--lg'],
+    size && styles[`modal__content--${size}`],
     className,
   );
 
-  const closeIconClassName = clsx(
-    styles['modal__close-icon'],
-    variant === 'brand' && styles['modal__close-icon--brand'],
-  );
-
   return (
-    <ModalContext.Provider value={{ isScrollable, variant }}>
+    <ModalContext.Provider value={{ isScrollable }}>
       <div className={componentClassName} {...other}>
         {!hideCloseButton && (
-          <button className={styles['modal__close-button']} onClick={onClose}>
-            <Icon
-              className={closeIconClassName}
-              name="close"
-              purpose="informative"
-              size="1.5rem"
-              title="close modal"
-            />
-          </button>
+          <Button
+            aria-label="close"
+            className={styles['modal__close-button']}
+            context="default"
+            icon="close"
+            iconLayout="icon-only"
+            onClick={onClose}
+            rank="tertiary"
+            variant="neutral"
+          >
+            Close
+          </Button>
         )}
-
         {children}
       </div>
     </ModalContext.Provider>
@@ -291,6 +281,7 @@ export const Modal = (props: ModalProps) => {
     modalContainerClassName,
     onClose,
     open,
+    overlayEmphasis = 'low',
     ...rest
   } = props;
   const { children } = rest;
@@ -324,7 +315,13 @@ export const Modal = (props: ModalProps) => {
         // Passing onClose to the Dialog allows it to close the modal when the ESC key is triggered.
         onClose={onClose}
       >
-        <Dialog.Overlay className={styles['modal__overlay']} />
+        <Dialog.Overlay
+          className={clsx(
+            styles['modal__overlay'],
+            overlayEmphasis &&
+              styles[`modal__overlay--emphasis-${overlayEmphasis}`],
+          )}
+        />
 
         <ModalContent onClose={onClose} {...rest} />
       </Dialog>
@@ -378,74 +375,11 @@ const ModalFooter = ({
 /**
  * Component defines the Header section of the modal.
  */
-const ModalHeader = ({
-  assetClassName,
-  brandAsset,
-  children,
-  className,
-  variant,
-  ...other
-}: ModalHeaderProps) => {
-  const componentClassName = clsx(
-    styles['modal-header'],
-    variant === 'brand' && styles['modal-header--brand'],
-    className,
-  );
-  const brandAssetClassName = clsx(
-    styles['modal-header__brand-asset'],
-    assetClassName,
-  );
+const ModalHeader = ({ children, className, ...other }: ModalHeaderProps) => {
+  const componentClassName = clsx(styles['modal-header'], className);
   return (
     <div className={componentClassName} {...other}>
       {children}
-      {variant === 'brand' && brandAsset && (
-        <div className={brandAssetClassName}>{brandAsset}</div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Stepper for the modal to indicate page status.
- * TODO: Separate the stepper from the modal, and make into a standalone component.
- */
-const ModalStepper = ({
-  activeStep,
-  className,
-  totalSteps,
-  ...other
-}: ModalStepperProps) => {
-  const componentClassName = clsx(styles['modal-stepper'], className);
-  if (process.env.NODE_ENV !== 'production') {
-    if (totalSteps < 1) {
-      throw new Error('Must have more than one step in totalSteps.');
-    }
-    if (activeStep < 1) {
-      throw new Error('activeStep must be one or more.');
-    }
-    if (totalSteps < activeStep) {
-      throw new Error('activeStep cannot exceed totalSteps');
-    }
-  }
-
-  const stepIcons = [];
-  for (let i = 0; i < totalSteps; i++) {
-    const isActivestep = i + 1 === activeStep;
-    const icon: IconName = isActivestep ? 'circle' : 'empty-circle';
-    const title = isActivestep ? `Active Step ${i + 1}` : `Step ${i + 1}`;
-    stepIcons.push(
-      <Icon
-        key={i}
-        name={icon}
-        purpose="informative"
-        size="0.5rem"
-        title={title}
-      />,
-    );
-  }
-  return (
-    <div className={componentClassName} {...other}>
-      {stepIcons}
     </div>
   );
 };
@@ -466,13 +400,26 @@ const ModalTitle = ({
   </Dialog.Title>
 );
 
+const ModalSubTitle = ({
+  children,
+  className,
+  preset = 'headline-sm',
+  ...other
+}: ModalSubTitleProps) => {
+  const componentClassName = clsx(styles['modal-sub-title'], className);
+  return (
+    <Text as="div" className={componentClassName} preset={preset} {...other}>
+      {children}
+    </Text>
+  );
+};
+
 /**
  * Variations of the subcomponent to pass props from parent Modal component.
  * Same prop passed directly to subcomponent has priority over prop passed from Modal component.
  */
 const VariantModalHeader = (props: ModalHeaderProps) => {
-  const { variant } = React.useContext(ModalContext);
-  return <ModalHeader variant={variant} {...props} />;
+  return <ModalHeader {...props} />;
 };
 
 const FocusableModalBody = (props: ModalBodyProps) => {
@@ -488,12 +435,12 @@ const StickyModalFooter = (props: ModalFooterProps) => {
 Modal.displayName = 'Modal';
 VariantModalHeader.displayName = 'Modal.Header';
 ModalTitle.displayName = 'Modal.Title';
+ModalSubTitle.displayName = 'Modal.SubTitle';
 FocusableModalBody.displayName = 'Modal.Body';
 StickyModalFooter.displayName = 'Modal.Footer';
-ModalStepper.displayName = 'Modal.Stepper';
 
 Modal.Header = VariantModalHeader;
 Modal.Title = ModalTitle;
+Modal.SubTitle = ModalSubTitle;
 Modal.Body = FocusableModalBody;
 Modal.Footer = StickyModalFooter;
-Modal.Stepper = ModalStepper;
diff --git a/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap b/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap
deleted file mode 100644
index 1bf94df45..000000000
--- a/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap
+++ /dev/null
@@ -1,1090 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal ContentDefault story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal Default story renders snapshot 1`] = `
-<div
-  aria-labelledby="headlessui-dialog-title-:r2:"
-  aria-modal="true"
-  class="modal"
-  data-headlessui-state="open"
-  id="headlessui-dialog-:r0:"
-  role="dialog"
->
-  <div
-    aria-hidden="true"
-    class="modal__overlay modal__overlay--emphasis-low"
-    data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r1:"
-  />
-  <div
-    class="modal__content modal__content--lg"
-  >
-    <button
-      aria-label="close"
-      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        <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="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>
-      </span>
-    </button>
-    <div
-      class="modal-header"
-    >
-      <h2
-        class="heading heading--headline-md"
-        data-headlessui-state="open"
-        id="headlessui-dialog-title-:r2:"
-      >
-        Modal Title
-      </h2>
-      <div
-        class="text text--headline-sm modal-sub-title"
-      >
-        Modal Sub-title
-      </div>
-    </div>
-    <div
-      class="modal-body"
-    >
-      <div
-        class="fpo h-full w-full"
-      >
-        Modal Content
-      </div>
-    </div>
-    <div
-      class="modal-footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-        <button
-          class="button button--layout-none button--secondary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Secondary
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal HighEmphasis story renders snapshot 1`] = `
-<div
-  aria-labelledby="headlessui-dialog-title-:r5:"
-  aria-modal="true"
-  class="modal"
-  data-headlessui-state="open"
-  id="headlessui-dialog-:r3:"
-  role="dialog"
->
-  <div
-    aria-hidden="true"
-    class="modal__overlay modal__overlay--emphasis-high"
-    data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r4:"
-  />
-  <div
-    class="modal__content modal__content--lg"
-  >
-    <button
-      aria-label="close"
-      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        <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="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>
-      </span>
-    </button>
-    <div
-      class="modal-header"
-    >
-      <h2
-        class="heading heading--headline-md"
-        data-headlessui-state="open"
-        id="headlessui-dialog-title-:r5:"
-      >
-        Modal Title
-      </h2>
-      <div
-        class="text text--headline-sm modal-sub-title"
-      >
-        Modal Sub-title
-      </div>
-    </div>
-    <div
-      class="modal-body"
-    >
-      <div
-        class="fpo h-full w-full"
-      >
-        Modal Content
-      </div>
-    </div>
-    <div
-      class="modal-footer"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-        <button
-          class="button button--layout-none button--secondary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Secondary
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal Large story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal LayoutVertical story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--vertical"
-    >
-      <button
-        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--full-width button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--vertical"
-    >
-      <button
-        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--full-width button--tertiary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Tertiary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal Mobile story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal MobileLandscape story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal Small story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--sm"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal Tablet story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Primary Action
-        </span>
-      </button>
-      <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Secondary
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal WithCriticalButton story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    aria-label="close"
-    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      <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="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>
-    </span>
-  </button>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-    <div
-      class="text text--headline-sm modal-sub-title"
-    >
-      Modal Sub-title
-    </div>
-  </div>
-  <div
-    class="modal-body"
-  >
-    <div
-      class="fpo h-full w-full"
-    >
-      Modal Content
-    </div>
-  </div>
-  <div
-    class="modal-footer"
-  >
-    <div
-      class="button-group button-group--horizontal"
-    >
-      <button
-        class="button button--layout-none button--primary button--lg button--variant-critical"
-        type="button"
-      >
-        <span
-          class="button__text"
-        >
-          Critical Action
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
-<div
-  aria-labelledby="headlessui-dialog-title-:r8:"
-  aria-modal="true"
-  class="modal"
-  data-headlessui-state="open"
-  id="headlessui-dialog-:r6:"
-  role="dialog"
->
-  <div
-    aria-hidden="true"
-    class="modal__overlay modal__overlay--emphasis-low"
-    data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r7:"
-  />
-  <div
-    class="modal__content modal__content--scrollable modal__content--lg"
-  >
-    <button
-      aria-label="close"
-      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        <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="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>
-      </span>
-    </button>
-    <div
-      class="modal-header"
-    >
-      <h2
-        class="heading heading--headline-md"
-        data-headlessui-state="open"
-        id="headlessui-dialog-title-:r8:"
-      >
-        Modal Title
-      </h2>
-      <div
-        class="text text--headline-sm modal-sub-title"
-      >
-        Modal Sub-title
-      </div>
-    </div>
-    <div
-      class="modal-body"
-      tabindex="0"
-    >
-      <h3
-        class="heading heading--headline-sm"
-      >
-        Title text
-      </h3>
-      <p
-        class="text text--body-lg"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec, elementum turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo. Phasellus convallis ante at augue iaculis, quis consectetur dolor placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem facilisis tristique nec et ligula. Vivamus id feugiat sapien.
-      </p>
-      <h3
-        class="heading heading--headline-sm"
-      >
-        Title text
-      </h3>
-      <p
-        class="text text--body-lg"
-      >
-        Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit. Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi consectetur, dapibus tellus ut, finibus metus. Integer tristique est vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue. Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis quam molestie, faucibus condimentum ante sagittis. Suspendisse sit amet luctus tellus. Suspendisse a sapien hendrerit eros dictum faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis pellentesque nunc ac pellentesque.
-      </p>
-      <h3
-        class="heading heading--headline-sm"
-      >
-        Title text
-      </h3>
-      <p
-        class="text text--body-lg"
-      >
-        Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus, sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam. Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam vehicula euismod enim quis finibus. Fusce ornare tortor malesuada, consequat magna quis, porta dolor. Donec quis nisl ac sem dictum semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      </p>
-      <h3
-        class="heading heading--headline-sm"
-      >
-        Title text
-      </h3>
-      <p
-        class="text text--body-lg"
-      >
-        Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis id, blandit turpis. Fusce augue quam, pellentesque et suscipit consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer dignissim condimentum sem ac porta. Vivamus viverra congue massa, vitae fermentum est scelerisque et. Duis a urna vitae odio semper dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus. Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies egestas.
-      </p>
-      <h3
-        class="heading heading--headline-sm"
-      >
-        Title text
-      </h3>
-      <p
-        class="text text--body-lg mb-0"
-      >
-        Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat ante ultricies id. Morbi varius dolor ac ante posuere, sit amet tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio. Praesent quis pretium sapien, quis posuere lectus. Proin eleifend purus nec massa aliquam commodo. Quisque auctor suscipit ex sed tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at eros ac, rutrum vestibulum est.
-      </p>
-    </div>
-    <div
-      class="modal-footer modal-footer--sticky"
-    >
-      <div
-        class="button-group button-group--horizontal"
-      >
-        <button
-          class="button button--layout-none button--primary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Primary Action
-          </span>
-        </button>
-        <button
-          class="button button--layout-none button--secondary button--lg button--variant-default"
-          type="button"
-        >
-          <span
-            class="button__text"
-          >
-            Secondary
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 7fc970554..1bf94df45 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -1,34 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Modal Brand story renders snapshot 1`] = `
+exports[`Modal ContentDefault story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-icon modal__close-icon--brand"
-      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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
-    class="modal-header modal-header--brand"
+    class="modal-header"
   >
     <h2
       class="heading heading--headline-md"
@@ -36,145 +39,191 @@ exports[`Modal Brand story renders snapshot 1`] = `
       Modal Title
     </h2>
     <div
-      class="modal-header__brand-asset"
+      class="text text--headline-sm modal-sub-title"
     >
-      <div
-        class="fpo h-full w-full"
-      >
-        Brand Asset
-      </div>
+      Modal Sub-title
     </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal ContentDefault story renders snapshot 1`] = `
+exports[`Modal Default story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
-  data-testid="non-interactive"
-  open=""
+  aria-labelledby="headlessui-dialog-title-:r2:"
+  aria-modal="true"
+  class="modal"
+  data-headlessui-state="open"
+  id="headlessui-dialog-:r0:"
+  role="dialog"
 >
-  <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-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 modal
-      </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>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-  </div>
   <div
-    class="modal-body"
-  >
-    Modal content.
-  </div>
+    aria-hidden="true"
+    class="modal__overlay modal__overlay--emphasis-low"
+    data-headlessui-state="open"
+    id="headlessui-dialog-overlay-:r1:"
+  />
   <div
-    class="modal-footer"
+    class="modal__content modal__content--lg"
   >
+    <button
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        <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="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>
+      </span>
+    </button>
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="modal-header"
     >
-      <button
-        class="button button--lg button--secondary button--neutral"
-        type="button"
+      <h2
+        class="heading heading--headline-md"
+        data-headlessui-state="open"
+        id="headlessui-dialog-title-:r2:"
       >
-        Button 2
-      </button>
-      <button
-        class="button button--lg button--primary button--brand"
-        type="button"
+        Modal Title
+      </h2>
+      <div
+        class="text text--headline-sm modal-sub-title"
       >
-        Button 1
-      </button>
+        Modal Sub-title
+      </div>
+    </div>
+    <div
+      class="modal-body"
+    >
+      <div
+        class="fpo h-full w-full"
+      >
+        Modal Content
+      </div>
+    </div>
+    <div
+      class="modal-footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+        <button
+          class="button button--layout-none button--secondary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Secondary
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal Default story renders snapshot 1`] = `
+exports[`Modal HighEmphasis story renders snapshot 1`] = `
 <div
-  aria-labelledby="headlessui-dialog-title-:r2:"
+  aria-labelledby="headlessui-dialog-title-:r5:"
   aria-modal="true"
   class="modal"
   data-headlessui-state="open"
-  id="headlessui-dialog-:r0:"
+  id="headlessui-dialog-:r3:"
   role="dialog"
 >
   <div
     aria-hidden="true"
-    class="modal__overlay"
+    class="modal__overlay modal__overlay--emphasis-high"
     data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r1:"
+    id="headlessui-dialog-overlay-:r4:"
   />
   <div
-    class="modal__content modal__content--md modal__content--lg"
+    class="modal__content modal__content--lg"
   >
     <button
-      class="modal__close-button"
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
     >
-      <svg
-        class="icon modal__close-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"
+      <span
+        class="button__text"
       >
-        <title>
-          close modal
-        </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>
+        <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="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>
+      </span>
     </button>
     <div
       class="modal-header"
@@ -182,33 +231,50 @@ exports[`Modal Default story renders snapshot 1`] = `
       <h2
         class="heading heading--headline-md"
         data-headlessui-state="open"
-        id="headlessui-dialog-title-:r2:"
+        id="headlessui-dialog-title-:r5:"
       >
         Modal Title
       </h2>
+      <div
+        class="text text--headline-sm modal-sub-title"
+      >
+        Modal Sub-title
+      </div>
     </div>
     <div
       class="modal-body"
     >
-      Modal content.
+      <div
+        class="fpo h-full w-full"
+      >
+        Modal Content
+      </div>
     </div>
     <div
       class="modal-footer"
     >
       <div
-        class="button-group button-group--spacing-1x flex w-full justify-end"
+        class="button-group button-group--horizontal"
       >
         <button
-          class="button button--lg button--secondary button--neutral"
+          class="button button--layout-none button--primary button--lg button--variant-default"
           type="button"
         >
-          Button 2
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
         </button>
         <button
-          class="button button--lg button--primary button--brand"
+          class="button button--layout-none button--secondary button--lg button--variant-default"
           type="button"
         >
-          Button 1
+          <span
+            class="button__text"
+          >
+            Secondary
+          </span>
         </button>
       </div>
     </div>
@@ -216,32 +282,35 @@ exports[`Modal Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`Modal Medium story renders snapshot 1`] = `
+exports[`Modal Large story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -251,61 +320,81 @@ exports[`Modal Medium story renders snapshot 1`] = `
     >
       Modal Title
     </h2>
+    <div
+      class="text text--headline-sm modal-sub-title"
+    >
+      Modal Sub-title
+    </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal Mobile story renders snapshot 1`] = `
+exports[`Modal LayoutVertical story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -315,64 +404,84 @@ exports[`Modal Mobile story renders snapshot 1`] = `
     >
       Modal Title
     </h2>
+    <div
+      class="text text--headline-sm modal-sub-title"
+    >
+      Modal Sub-title
+    </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--vertical"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--full-width button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal MobileBrand story renders snapshot 1`] = `
+exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-icon modal__close-icon--brand"
-      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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
-    class="modal-header modal-header--brand"
+    class="modal-header"
   >
     <h2
       class="heading heading--headline-md"
@@ -380,69 +489,80 @@ exports[`Modal MobileBrand story renders snapshot 1`] = `
       Modal Title
     </h2>
     <div
-      class="modal-header__brand-asset"
+      class="text text--headline-sm modal-sub-title"
     >
-      <div
-        class="fpo h-full w-full"
-      >
-        Brand Asset
-      </div>
+      Modal Sub-title
     </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--vertical"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--full-width button--tertiary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Tertiary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal MobileLandscape story renders snapshot 1`] = `
+exports[`Modal Mobile story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -452,64 +572,84 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
     >
       Modal Title
     </h2>
+    <div
+      class="text text--headline-sm modal-sub-title"
+    >
+      Modal Sub-title
+    </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal MobileLandscapeBrand story renders snapshot 1`] = `
+exports[`Modal MobileLandscape story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-icon modal__close-icon--brand"
-      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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
-    class="modal-header modal-header--brand"
+    class="modal-header"
   >
     <h2
       class="heading heading--headline-md"
@@ -517,144 +657,80 @@ exports[`Modal MobileLandscapeBrand story renders snapshot 1`] = `
       Modal Title
     </h2>
     <div
-      class="modal-header__brand-asset"
+      class="text text--headline-sm modal-sub-title"
     >
-      <div
-        class="fpo h-full w-full"
-      >
-        Brand Asset
-      </div>
+      Modal Sub-title
     </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal ModalStepper story renders snapshot 1`] = `
-<div
-  class="modal-stepper"
-  data-testid="non-interactive"
->
-  <svg
-    class="icon"
-    fill="currentColor"
-    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>
-      Active Step 1
-    </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>
-  <svg
-    class="icon"
-    fill="currentColor"
-    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>
-      Step 2
-    </title>
-    <circle
-      cx="12"
-      cy="12"
-      r="8"
-    />
-    <circle
-      cx="12"
-      cy="12"
-      fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-      r="6"
-    />
-  </svg>
-  <svg
-    class="icon"
-    fill="currentColor"
-    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>
-      Step 3
-    </title>
-    <circle
-      cx="12"
-      cy="12"
-      r="8"
-    />
-    <circle
-      cx="12"
-      cy="12"
-      fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-      r="6"
-    />
-  </svg>
-</div>
-`;
-
 exports[`Modal Small story renders snapshot 1`] = `
 <div
-  class="modal__content"
+  class="modal__content modal__content--sm"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -664,29 +740,46 @@ exports[`Modal Small story renders snapshot 1`] = `
     >
       Modal Title
     </h2>
+    <div
+      class="text text--headline-sm modal-sub-title"
+    >
+      Modal Sub-title
+    </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
@@ -695,30 +788,33 @@ exports[`Modal Small story renders snapshot 1`] = `
 
 exports[`Modal Tablet story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -728,64 +824,84 @@ exports[`Modal Tablet story renders snapshot 1`] = `
     >
       Modal Title
     </h2>
+    <div
+      class="text text--headline-sm modal-sub-title"
+    >
+      Modal Sub-title
+    </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
-        Button 2
+        <span
+          class="button__text"
+        >
+          Primary Action
+        </span>
       </button>
       <button
-        class="button button--lg button--primary button--brand"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
       </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Modal TabletBrand story renders snapshot 1`] = `
+exports[`Modal WithCriticalButton story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
   >
-    <svg
-      class="icon modal__close-icon modal__close-icon--brand"
-      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"
+    <span
+      class="button__text"
     >
-      <title>
-        close modal
-      </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>
+      <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="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>
+    </span>
   </button>
   <div
-    class="modal-header modal-header--brand"
+    class="modal-header"
   >
     <h2
       class="heading heading--headline-md"
@@ -793,37 +909,35 @@ exports[`Modal TabletBrand story renders snapshot 1`] = `
       Modal Title
     </h2>
     <div
-      class="modal-header__brand-asset"
+      class="text text--headline-sm modal-sub-title"
     >
-      <div
-        class="fpo h-full w-full"
-      >
-        Brand Asset
-      </div>
+      Modal Sub-title
     </div>
   </div>
   <div
     class="modal-body"
   >
-    Modal content.
+    <div
+      class="fpo h-full w-full"
+    >
+      Modal Content
+    </div>
   </div>
   <div
     class="modal-footer"
   >
     <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--lg button--secondary button--neutral"
+        class="button button--layout-none button--primary button--lg button--variant-critical"
         type="button"
       >
-        Button 2
-      </button>
-      <button
-        class="button button--lg button--primary button--brand"
-        type="button"
-      >
-        Button 1
+        <span
+          class="button__text"
+        >
+          Critical Action
+        </span>
       </button>
     </div>
   </div>
@@ -841,33 +955,36 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
 >
   <div
     aria-hidden="true"
-    class="modal__overlay"
+    class="modal__overlay modal__overlay--emphasis-low"
     data-headlessui-state="open"
     id="headlessui-dialog-overlay-:r7:"
   />
   <div
-    class="modal__content modal__content--scrollable modal__content--md modal__content--lg"
+    class="modal__content modal__content--scrollable modal__content--lg"
   >
     <button
-      class="modal__close-button"
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
     >
-      <svg
-        class="icon modal__close-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"
+      <span
+        class="button__text"
       >
-        <title>
-          close modal
-        </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>
+        <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="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>
+      </span>
     </button>
     <div
       class="modal-header"
@@ -879,361 +996,95 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
       >
         Modal Title
       </h2>
-    </div>
-    <div
-      class="modal-body"
-      tabindex="0"
-    >
-      <div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec, elementum turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo. Phasellus convallis ante at augue iaculis, quis consectetur dolor placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem facilisis tristique nec et ligula. Vivamus id feugiat sapien.
-        </p>
-        <p>
-          Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit. Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi consectetur, dapibus tellus ut, finibus metus. Integer tristique est vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue. Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis quam molestie, faucibus condimentum ante sagittis. Suspendisse sit amet luctus tellus. Suspendisse a sapien hendrerit eros dictum faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis pellentesque nunc ac pellentesque.
-        </p>
-        <p>
-          Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus, sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam. Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam vehicula euismod enim quis finibus. Fusce ornare tortor malesuada, consequat magna quis, porta dolor. Donec quis nisl ac sem dictum semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        </p>
-        <p>
-          Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis id, blandit turpis. Fusce augue quam, pellentesque et suscipit consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer dignissim condimentum sem ac porta. Vivamus viverra congue massa, vitae fermentum est scelerisque et. Duis a urna vitae odio semper dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus. Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies egestas.
-        </p>
-        <p
-          class="mb-0"
-        >
-          Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat ante ultricies id. Morbi varius dolor ac ante posuere, sit amet tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio. Praesent quis pretium sapien, quis posuere lectus. Proin eleifend purus nec massa aliquam commodo. Quisque auctor suscipit ex sed tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at eros ac, rutrum vestibulum est.
-        </p>
-      </div>
-    </div>
-    <div
-      class="modal-footer modal-footer--sticky"
-    >
       <div
-        class="button-group button-group--spacing-1x flex w-full justify-end"
+        class="text text--headline-sm modal-sub-title"
       >
-        <button
-          class="button button--lg button--secondary button--neutral"
-          type="button"
-        >
-          Button 2
-        </button>
-        <button
-          class="button button--lg button--primary button--brand"
-          type="button"
-        >
-          Button 1
-        </button>
+        Modal Sub-title
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`Modal WithStepper story renders snapshot 1`] = `
-<div
-  class="modal__content modal__content--md modal__content--lg"
-  data-testid="non-interactive"
-  open=""
->
-  <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-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 modal
-      </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>
-  <div
-    class="modal-header"
-  >
-    <h2
-      class="heading heading--headline-md"
-    >
-      Modal Title
-    </h2>
-  </div>
-  <div
-    class="modal-body"
-  >
-    Modal body content. This is an example use case with the stepper in the footer.
-  </div>
-  <div
-    class="modal-footer flex items-center justify-between"
-  >
     <div
-      class="modal-stepper"
+      class="modal-body"
+      tabindex="0"
     >
-      <svg
-        class="icon"
-        fill="currentColor"
-        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"
+      <h3
+        class="heading heading--headline-sm"
       >
-        <title>
-          Step 1
-        </title>
-        <circle
-          cx="12"
-          cy="12"
-          r="8"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-          r="6"
-        />
-      </svg>
-      <svg
-        class="icon"
-        fill="currentColor"
-        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 text
+      </h3>
+      <p
+        class="text text--body-lg"
       >
-        <title>
-          Active Step 2
-        </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>
-      <svg
-        class="icon"
-        fill="currentColor"
-        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"
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec, elementum turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo. Phasellus convallis ante at augue iaculis, quis consectetur dolor placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem facilisis tristique nec et ligula. Vivamus id feugiat sapien.
+      </p>
+      <h3
+        class="heading heading--headline-sm"
       >
-        <title>
-          Step 3
-        </title>
-        <circle
-          cx="12"
-          cy="12"
-          r="8"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-          r="6"
-        />
-      </svg>
-      <svg
-        class="icon"
-        fill="currentColor"
-        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 text
+      </h3>
+      <p
+        class="text text--body-lg"
       >
-        <title>
-          Step 4
-        </title>
-        <circle
-          cx="12"
-          cy="12"
-          r="8"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-          r="6"
-        />
-      </svg>
-      <svg
-        class="icon"
-        fill="currentColor"
-        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"
+        Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit. Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi consectetur, dapibus tellus ut, finibus metus. Integer tristique est vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue. Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis quam molestie, faucibus condimentum ante sagittis. Suspendisse sit amet luctus tellus. Suspendisse a sapien hendrerit eros dictum faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis pellentesque nunc ac pellentesque.
+      </p>
+      <h3
+        class="heading heading--headline-sm"
       >
-        <title>
-          Step 5
-        </title>
-        <circle
-          cx="12"
-          cy="12"
-          r="8"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="var(--eds-theme-color-icon-neutral-default-inverse)"
-          r="6"
-        />
-      </svg>
-    </div>
-    <div
-      class="button-group button-group--spacing-1x flex w-full justify-end"
-    >
-      <button
-        class="button button--lg button--secondary button--neutral"
-        type="button"
+        Title text
+      </h3>
+      <p
+        class="text text--body-lg"
       >
-        Button 2
-      </button>
-      <button
-        class="button button--lg button--primary button--brand"
-        type="button"
+        Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus, sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam. Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam vehicula euismod enim quis finibus. Fusce ornare tortor malesuada, consequat magna quis, porta dolor. Donec quis nisl ac sem dictum semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </p>
+      <h3
+        class="heading heading--headline-sm"
       >
-        Button 1
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Modal WithoutCloseButton story renders snapshot 1`] = `
-<div
-  aria-labelledby="headlessui-dialog-title-:r5:"
-  aria-modal="true"
-  class="modal"
-  data-headlessui-state="open"
-  id="headlessui-dialog-:r3:"
-  role="dialog"
->
-  <div
-    aria-hidden="true"
-    class="modal__overlay"
-    data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r4:"
-  />
-  <div
-    class="modal__content modal__content--md modal__content--lg"
-  >
-    <div
-      class="modal-header"
-    >
-      <h2
-        class="heading heading--headline-md"
-        data-headlessui-state="open"
-        id="headlessui-dialog-title-:r5:"
+        Title text
+      </h3>
+      <p
+        class="text text--body-lg"
       >
-        Modal Title
-      </h2>
-    </div>
-    <div
-      class="modal-body"
-    >
-      Modal content.
+        Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis id, blandit turpis. Fusce augue quam, pellentesque et suscipit consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer dignissim condimentum sem ac porta. Vivamus viverra congue massa, vitae fermentum est scelerisque et. Duis a urna vitae odio semper dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus. Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies egestas.
+      </p>
+      <h3
+        class="heading heading--headline-sm"
+      >
+        Title text
+      </h3>
+      <p
+        class="text text--body-lg mb-0"
+      >
+        Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat ante ultricies id. Morbi varius dolor ac ante posuere, sit amet tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio. Praesent quis pretium sapien, quis posuere lectus. Proin eleifend purus nec massa aliquam commodo. Quisque auctor suscipit ex sed tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at eros ac, rutrum vestibulum est.
+      </p>
     </div>
     <div
-      class="modal-footer"
+      class="modal-footer modal-footer--sticky"
     >
       <div
-        class="button-group button-group--spacing-1x flex w-full justify-end"
+        class="button-group button-group--horizontal"
       >
         <button
-          class="button button--lg button--secondary button--neutral"
+          class="button button--layout-none button--primary button--lg button--variant-default"
           type="button"
         >
-          Button 2
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
         </button>
         <button
-          class="button button--lg button--primary button--brand"
+          class="button button--layout-none button--secondary button--lg button--variant-default"
           type="button"
         >
-          Button 1
+          <span
+            class="button__text"
+          >
+            Secondary
+          </span>
         </button>
       </div>
     </div>
   </div>
 </div>
 `;
-
-exports[`Modal WithoutHeaderAndFooter story renders snapshot 1`] = `
-<div
-  aria-label="The Modal Amazing Modal You've Ever Seen"
-  aria-modal="true"
-  class="modal"
-  data-headlessui-state="open"
-  id="headlessui-dialog-:r9:"
-  role="dialog"
->
-  <div
-    aria-hidden="true"
-    class="modal__overlay"
-    data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:ra:"
-  />
-  <div
-    class="modal__content modal__content--scrollable modal__content--md modal__content--lg"
-  >
-    <button
-      class="modal__close-button"
-    >
-      <svg
-        class="icon modal__close-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 modal
-        </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>
-    <div
-      class="modal-body"
-      tabindex="0"
-    >
-      <div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec, elementum turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo. Phasellus convallis ante at augue iaculis, quis consectetur dolor placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem facilisis tristique nec et ligula. Vivamus id feugiat sapien.
-        </p>
-        <p>
-          Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit. Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi consectetur, dapibus tellus ut, finibus metus. Integer tristique est vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue. Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis quam molestie, faucibus condimentum ante sagittis. Suspendisse sit amet luctus tellus. Suspendisse a sapien hendrerit eros dictum faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis pellentesque nunc ac pellentesque.
-        </p>
-        <p>
-          Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus, sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam. Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam vehicula euismod enim quis finibus. Fusce ornare tortor malesuada, consequat magna quis, porta dolor. Donec quis nisl ac sem dictum semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        </p>
-        <p>
-          Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis id, blandit turpis. Fusce augue quam, pellentesque et suscipit consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer dignissim condimentum sem ac porta. Vivamus viverra congue massa, vitae fermentum est scelerisque et. Duis a urna vitae odio semper dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus. Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies egestas.
-        </p>
-        <p
-          class="mb-0"
-        >
-          Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat ante ultricies id. Morbi varius dolor ac ante posuere, sit amet tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio. Praesent quis pretium sapien, quis posuere lectus. Proin eleifend purus nec massa aliquam commodo. Quisque auctor suscipit ex sed tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at eros ac, rutrum vestibulum est.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 2736f369c..48f35c717 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,2 +1 @@
 export { Modal as default } from './Modal';
-export { Modal as ModalV2 } from './Modal-v2';
diff --git a/src/components/NumberIcon/NumberIcon-v2.module.css b/src/components/NumberIcon/NumberIcon-v2.module.css
deleted file mode 100644
index 9b996fe0b..000000000
--- a/src/components/NumberIcon/NumberIcon-v2.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '../../design-tokens/mixins.css';
-/*------------------------------------*\
-    # NUMBER ICON
-\*------------------------------------*/
-
-/**
- * Number Icon displays a number enclosed in a circle.
- * 
- * Centers the number text in the circle.
- */
-.number-icon {
-  /* Line height set to 1 here since this should only ever be on 1 line and it evens out padding in circle. */
-  line-height: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  /* The circle part of the icon, made with borders. */
-  border: calc(var(--eds-border-width-sm) * 1px) solid;
-  border-color: inherit;
-  border-radius: calc(var(--eds-border-radius-full) * 1px);
-
-  &.number-icon--is-interactive {
-    cursor: pointer;
-  }
-}
-
-/**
- * Size Variants.
- */
-.number-icon--size-md {
-  height: 1.5rem;
-  width: 1.5rem;
-  min-width: 1.5rem;
-}
-
-.number-icon--size-lg {
-  height: 2rem;
-  width: 2rem;
-  min-width: 2rem;
-}
-
-/* Colors & Theme */
-
-/**
- * Interactive States
- */
-.number-icon--status-default {
-  color: var(--eds-theme-color-text-utility-interactive-primary);
-  border-color: var(--eds-theme-color-border-utility-interactive);
-  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
-
-  &.number-icon--is-interactive {
-    &:hover {
-      border-color: var(--eds-theme-color-border-utility-interactive-hover);
-      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-    }
-
-    &:active {
-      border-color: var(--eds-theme-color-border-utility-interactive-active);
-      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
-    }
-  }
-}
-
-.number-icon--status-completed {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
-
-  &.number-icon--is-interactive {
-    &:hover {
-      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-    }
-
-    &:active {
-      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
-      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
-    }
-  }
-}
-
-.number-icon--status-incomplete {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-  border-color: var(--eds-theme-color-border-utility-default-medium-emphasis);
-
-  border-style: dashed;
-  pointer-events: none;
-}
\ No newline at end of file
diff --git a/src/components/NumberIcon/NumberIcon-v2.stories.tsx b/src/components/NumberIcon/NumberIcon-v2.stories.tsx
deleted file mode 100644
index fce1505a6..000000000
--- a/src/components/NumberIcon/NumberIcon-v2.stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { NumberIcon } from './NumberIcon-v2';
-
-export default {
-  title: 'Components/V2/NumberIcon',
-  component: NumberIcon,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  args: {
-    'aria-label': 'number icon example',
-    number: 1,
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof NumberIcon>;
-type Story = StoryObj<Args>;
-
-export const Default: Story = {};
-
-export const Sizes: Story = {
-  args: {
-    status: 'default',
-  },
-  render: (args) => {
-    return (
-      <>
-        <NumberIcon number={2} size="md" {...args} />
-        <NumberIcon number={3} size="lg" {...args} />
-      </>
-    );
-  },
-  decorators: [
-    (Story) => <div className="flex flex-wrap gap-1">{Story()}</div>,
-  ],
-};
-
-/**
- * `NumberIcon` can be used in interactive contexts, when wrapped by a navigable or interactive element.
- */
-export const IsInteractive: Story = {
-  args: {
-    ...Sizes.args,
-    isInteractive: true,
-  },
-  render: Sizes.render,
-};
-
-export const Completed: Story = {
-  args: {
-    ...Sizes.args,
-    status: 'completed',
-  },
-  render: Sizes.render,
-  decorators: Sizes.decorators,
-};
-
-export const Incomplete: Story = {
-  args: {
-    ...Sizes.args,
-    status: 'incomplete',
-  },
-  render: Sizes.render,
-  decorators: Sizes.decorators,
-};
-
-/**
- * `NumberIcon` supports individual digits, with a maximum of two digits. By default,
- * they are positioned as block-level elements. use `flex` or `display` to update positioning.
- */
-export const DifferentNumbers: Story = {
-  /**
-   * Disables controls for args that have no affect on this story
-   */
-  argTypes: {
-    number: {
-      table: {
-        disable: true,
-      },
-    },
-    'aria-label': {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 21, 32, 43, 54, 65, 76, 87, 98].map(
-        (number) => (
-          <NumberIcon
-            key={number}
-            {...args}
-            aria-label={`Step ${number}`}
-            number={number}
-          />
-        ),
-      )}
-    </div>
-  ),
-};
-
-/**
- * This Implementation example shows how to use Number Icon to build a stepper-like component.
- *
- * - incomplete rows are aligned with each number icon to show progress
- */
-export const NumberIconList: Story = {
-  parameters: {
-    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
-  },
-  render: () => (
-    <div className="flex flex-wrap gap-1">
-      <NumberIcon aria-label="Item 1" number={1} size="md" />
-      <NumberIcon aria-label="Item 2" number={2} size="md" />
-      <NumberIcon aria-label="Item 3" number={3} size="md" />
-      <NumberIcon aria-label="Item 4" number={4} size="md" />
-      <NumberIcon aria-label="Item 5" number={5} size="md" />
-      <NumberIcon aria-label="Item 6" number={6} size="md" />
-    </div>
-  ),
-};
diff --git a/src/components/NumberIcon/NumberIcon-v2.tsx b/src/components/NumberIcon/NumberIcon-v2.tsx
deleted file mode 100644
index 03352224c..000000000
--- a/src/components/NumberIcon/NumberIcon-v2.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import type { Size } from '../../util/variant-types';
-
-import Text from '../Text';
-import styles from './NumberIcon-v2.module.css';
-
-export interface Props {
-  // Component API
-  /**
-   * (Required) Screen-reader text for the number icon.
-   */
-  'aria-label': string;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Whether `NumberIcon` can be focused on, clicked, etc.
-   */
-  isInteractive?: boolean;
-  /**
-   * Number to be shown as the icon. Maximum of two digits.
-   */
-  number?: number;
-  /**
-   * The size of the icon.
-   *
-   * **Default is `"lg"`**.
-   */
-  size?: Extract<Size, 'md' | 'lg'>;
-  /**
-   * Indication of the status of the referenced item
-   */
-  status?: 'completed' | 'incomplete' | 'default';
-}
-
-/**
- * `import {NumberIcon} from "@chanzuckerberg/eds";`
- *
- * Treats a numeral as an icon by wrapping it in a container and adding color/spacing.
- *
- */
-export const NumberIcon = ({
-  className,
-  isInteractive = false,
-  number,
-  status = 'default',
-  size = 'lg',
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    className,
-    styles['number-icon'],
-    isInteractive && styles['number-icon--is-interactive'],
-    size && styles[`number-icon--size-${size}`],
-    status && styles[`number-icon--status-${status}`],
-  );
-
-  return (
-    <Text
-      as="span"
-      className={componentClassName}
-      preset={size === 'md' ? 'label-md-subtle' : 'label-lg-subtle'}
-      role="img"
-      tabIndex={isInteractive ? 0 : -1}
-      {...other}
-    >
-      {number}
-    </Text>
-  );
-};
-
-NumberIcon.displayName = 'NumberIcon';
diff --git a/src/components/NumberIcon/NumberIcon.module.css b/src/components/NumberIcon/NumberIcon.module.css
index b06811b12..99ccb69c2 100644
--- a/src/components/NumberIcon/NumberIcon.module.css
+++ b/src/components/NumberIcon/NumberIcon.module.css
@@ -19,42 +19,72 @@
   border: calc(var(--eds-border-width-sm) * 1px) solid;
   border-color: inherit;
   border-radius: calc(var(--eds-border-radius-full) * 1px);
-}
 
-.number-icon--incomplete {
-  border: none;
-  fill: var(--number-icon-incomplete-fill, var(--eds-theme-color-icon-neutral-subtle));
+  &.number-icon--is-interactive {
+    cursor: pointer;
+  }
 }
 
 /**
  * Size Variants.
  */
-.number-icon--sm {
-  /* Line height set to 1 here since this should only ever be on 1 line and it evens out padding in circle. */
-  line-height: 1;
-  /* Height and width should be the same to make the icon a circle and not oblong. */
-  height: calc(var(--eds-size-2-and-half) / 16 * 1rem);
-  width: calc(var(--eds-size-2-and-half) / 16 * 1rem);
-  min-width: calc(var(--eds-size-2-and-half) / 16 * 1rem);
-}
-
-.number-icon--lg {
+.number-icon--size-md {
   height: calc(var(--eds-size-3) / 16 * 1rem);
   width: calc(var(--eds-size-3) / 16 * 1rem);
   min-width: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
+.number-icon--size-lg {
+  height: calc(var(--eds-size-4) / 16 * 1rem);
+  width: calc(var(--eds-size-4) / 16 * 1rem);
+  min-width: calc(var(--eds-size-4) / 16 * 1rem);
+}
+
+/* Colors & Theme */
+
 /**
- * Color Variants.
+ * Interactive States
  */
-.number-icon--base {
-  color: var(--eds-theme-color-text-neutral-default);
+.number-icon--status-default {
+  color: var(--eds-theme-color-text-utility-interactive-primary);
+  border-color: var(--eds-theme-color-border-utility-interactive);
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
+
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-border-utility-interactive-hover);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+    }
 
-  background-color: transparent;
+    &:active {
+      border-color: var(--eds-theme-color-border-utility-interactive-active);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    }
+  }
 }
 
-.number-icon--success {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  background-color: var(--eds-theme-color-icon-utility-success);
-  border-color: var(--eds-theme-color-icon-utility-success);
+.number-icon--status-completed {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
+
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+    }
+
+    &:active {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+    }
+  }
 }
+
+.number-icon--status-incomplete {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+  border-color: var(--eds-theme-color-border-utility-default-medium-emphasis);
+
+  border-style: dashed;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/components/NumberIcon/NumberIcon.stories.tsx b/src/components/NumberIcon/NumberIcon.stories.tsx
index 1294826fd..80100e18e 100644
--- a/src/components/NumberIcon/NumberIcon.stories.tsx
+++ b/src/components/NumberIcon/NumberIcon.stories.tsx
@@ -8,10 +8,10 @@ export default {
   component: NumberIcon,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
   args: {
-    'aria-label': 'Step 1',
+    'aria-label': 'number icon example',
     number: 1,
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
@@ -22,36 +22,50 @@ type Story = StoryObj<Args>;
 
 export const Default: Story = {};
 
-export const Small: Story = {
+export const Sizes: Story = {
   args: {
-    size: 'sm',
+    status: 'default',
   },
+  render: (args) => {
+    return (
+      <>
+        <NumberIcon number={2} size="md" {...args} />
+        <NumberIcon number={3} size="lg" {...args} />
+      </>
+    );
+  },
+  decorators: [
+    (Story) => <div className="flex flex-wrap gap-1">{Story()}</div>,
+  ],
 };
 
-export const Success: Story = {
+/**
+ * `NumberIcon` can be used in interactive contexts, when wrapped by a navigable or interactive element.
+ */
+export const IsInteractive: Story = {
   args: {
-    variant: 'success',
+    ...Sizes.args,
+    isInteractive: true,
   },
+  render: Sizes.render,
 };
 
-export const SuccessSmall: Story = {
+export const Completed: Story = {
   args: {
-    size: 'sm',
-    variant: 'success',
+    ...Sizes.args,
+    status: 'completed',
   },
+  render: Sizes.render,
+  decorators: Sizes.decorators,
 };
 
-/**
- * When `incomplete` is defined and there is a `numberIconTitle` on the circle icon, then this will render
- * the proper icon with the incomplete text provided foro that component instance.
- */
 export const Incomplete: Story = {
   args: {
-    size: 'sm',
-    incomplete: true,
-    number: undefined,
-    numberIconTitle: 'Incomplete',
+    ...Sizes.args,
+    status: 'incomplete',
   },
+  render: Sizes.render,
+  decorators: Sizes.decorators,
 };
 
 /**
@@ -97,40 +111,16 @@ export const DifferentNumbers: Story = {
  */
 export const NumberIconList: Story = {
   parameters: {
-    badges: ['intro-1.0', 'implementationExample'],
+    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
   },
   render: () => (
     <div className="flex flex-wrap gap-1">
-      <NumberIcon aria-label="Item 1" number={1} size="sm" />
-      <NumberIcon
-        aria-label="Item 2"
-        incomplete
-        number={2}
-        numberIconTitle="incomplete step 2"
-        size="sm"
-      />
-      <NumberIcon aria-label="Item 3" number={3} size="sm" />
-      <NumberIcon
-        aria-label="Item 4"
-        incomplete
-        number={4}
-        numberIconTitle="incomplete step 4"
-        size="sm"
-      />
-      <NumberIcon
-        aria-label="Item 5"
-        incomplete
-        number={5}
-        numberIconTitle="incomplete step 5"
-        size="sm"
-      />
-      <NumberIcon
-        aria-label="Item 6"
-        incomplete
-        number={6}
-        numberIconTitle="incomplete step 6"
-        size="sm"
-      />
+      <NumberIcon aria-label="Item 1" number={1} size="md" />
+      <NumberIcon aria-label="Item 2" number={2} size="md" />
+      <NumberIcon aria-label="Item 3" number={3} size="md" />
+      <NumberIcon aria-label="Item 4" number={4} size="md" />
+      <NumberIcon aria-label="Item 5" number={5} size="md" />
+      <NumberIcon aria-label="Item 6" number={6} size="md" />
     </div>
   ),
 };
diff --git a/src/components/NumberIcon/NumberIcon.test.ts b/src/components/NumberIcon/NumberIcon.test.ts
deleted file mode 100644
index ceb1888a9..000000000
--- a/src/components/NumberIcon/NumberIcon.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 './NumberIcon.stories';
-
-describe('<NumberIcon />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/NumberIcon/NumberIcon.tsx b/src/components/NumberIcon/NumberIcon.tsx
index 9a2bf903b..9a82d8ea9 100644
--- a/src/components/NumberIcon/NumberIcon.tsx
+++ b/src/components/NumberIcon/NumberIcon.tsx
@@ -3,30 +3,27 @@ import React from 'react';
 
 import type { Size } from '../../util/variant-types';
 
-import Icon, { type IconName } from '../Icon';
 import Text from '../Text';
+
 import styles from './NumberIcon.module.css';
 
 export interface Props {
+  // Component API
   /**
-   * Screen-reader text for the number icon.
+   * (Required) Screen-reader text for the number icon.
    */
   'aria-label': string;
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
   /**
-   * Icon override for component.
-   */
-  icon?: Extract<IconName, 'circle'>;
-
-  /**
-   * Incomplete prop to show incomplete state
+   * Whether `NumberIcon` can be focused on, clicked, etc.
    */
-  incomplete?: boolean;
+  isInteractive?: boolean;
   /**
-   * Number to be shown as the icon.
+   * Number to be shown as the icon. Maximum of two digits.
    */
   number?: number;
   /**
@@ -34,21 +31,11 @@ export interface Props {
    *
    * **Default is `"lg"`**.
    */
-  size?: Extract<Size, 'sm' | 'lg'>;
+  size?: Extract<Size, 'md' | 'lg'>;
   /**
-   * The variant of the icon.
-   *
-   * **Default is `"base"`**.
-   *
-   * Variant `success` will use a symbol to mark success, along with different color tokens
+   * Indication of the status of the referenced item
    */
-  variant?: 'base' | 'success';
-  /**
-   * Number icon title
-   *
-   * When using `incomplete` this is required.
-   */
-  numberIconTitle?: string;
+  status?: 'completed' | 'incomplete' | 'default';
 }
 
 /**
@@ -59,45 +46,30 @@ export interface Props {
  */
 export const NumberIcon = ({
   className,
+  isInteractive = false,
   number,
+  status = 'default',
   size = 'lg',
-  variant = 'base',
-  icon = 'circle',
-  incomplete,
-  numberIconTitle,
   ...other
 }: Props) => {
   const componentClassName = clsx(
-    styles['number-icon'],
-    styles[`number-icon--${variant}`],
-    size && styles[`number-icon--${size}`],
-    incomplete && styles['number-icon--incomplete'],
     className,
+    styles['number-icon'],
+    isInteractive && styles['number-icon--is-interactive'],
+    size && styles[`number-icon--size-${size}`],
+    status && styles[`number-icon--status-${status}`],
   );
 
   return (
     <Text
       as="span"
       className={componentClassName}
-      preset={size === 'sm' ? 'body-xs' : 'body-sm'}
+      preset={size === 'md' ? 'label-md-subtle' : 'label-lg-subtle'}
       role="img"
+      tabIndex={isInteractive ? 0 : -1}
       {...other}
     >
-      {incomplete && numberIconTitle ? (
-        <Icon
-          className={styles['number-icon__icon']}
-          color="inherit"
-          name={icon}
-          purpose="informative"
-          size={size === 'sm' ? '0.25rem' : '0.5rem'}
-          title={numberIconTitle}
-        />
-      ) : (
-        /**
-         * If this is not incomplete, then the number prop provided will show within the border.
-         */
-        number
-      )}
+      {number}
     </Text>
   );
 };
diff --git a/src/components/NumberIcon/__snapshots__/NumberIcon.test.ts.snap b/src/components/NumberIcon/__snapshots__/NumberIcon.test.ts.snap
deleted file mode 100644
index fa9f3b034..000000000
--- a/src/components/NumberIcon/__snapshots__/NumberIcon.test.ts.snap
+++ /dev/null
@@ -1,346 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NumberIcon /> Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <span
-    aria-label="Step 1"
-    class="text text--body-sm number-icon number-icon--base number-icon--lg"
-    role="img"
-  >
-    1
-  </span>
-</div>
-`;
-
-exports[`<NumberIcon /> DifferentNumbers story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div>
-    <span
-      aria-label="Step 0"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      0
-    </span>
-    <span
-      aria-label="Step 1"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      1
-    </span>
-    <span
-      aria-label="Step 2"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      2
-    </span>
-    <span
-      aria-label="Step 3"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      3
-    </span>
-    <span
-      aria-label="Step 4"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      4
-    </span>
-    <span
-      aria-label="Step 5"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      5
-    </span>
-    <span
-      aria-label="Step 6"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      6
-    </span>
-    <span
-      aria-label="Step 7"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      7
-    </span>
-    <span
-      aria-label="Step 8"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      8
-    </span>
-    <span
-      aria-label="Step 9"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      9
-    </span>
-    <span
-      aria-label="Step 10"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      10
-    </span>
-    <span
-      aria-label="Step 21"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      21
-    </span>
-    <span
-      aria-label="Step 32"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      32
-    </span>
-    <span
-      aria-label="Step 43"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      43
-    </span>
-    <span
-      aria-label="Step 54"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      54
-    </span>
-    <span
-      aria-label="Step 65"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      65
-    </span>
-    <span
-      aria-label="Step 76"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      76
-    </span>
-    <span
-      aria-label="Step 87"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      87
-    </span>
-    <span
-      aria-label="Step 98"
-      class="text text--body-sm number-icon number-icon--base number-icon--lg"
-      role="img"
-    >
-      98
-    </span>
-  </div>
-</div>
-`;
-
-exports[`<NumberIcon /> Incomplete story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <span
-    aria-label="Step 1"
-    class="text text--body-xs number-icon number-icon--base number-icon--sm number-icon--incomplete"
-    role="img"
-  >
-    <svg
-      class="icon number-icon__icon"
-      fill="inherit"
-      height="0.25rem"
-      role="img"
-      style="--icon-size: 0.25rem;"
-      viewBox="0 0 24 24"
-      width="0.25rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        Incomplete
-      </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>
-`;
-
-exports[`<NumberIcon /> NumberIconList story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="flex flex-wrap gap-1"
-  >
-    <span
-      aria-label="Item 1"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm"
-      role="img"
-    >
-      1
-    </span>
-    <span
-      aria-label="Item 2"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm number-icon--incomplete"
-      role="img"
-    >
-      <svg
-        class="icon number-icon__icon"
-        fill="inherit"
-        height="0.25rem"
-        role="img"
-        style="--icon-size: 0.25rem;"
-        viewBox="0 0 24 24"
-        width="0.25rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          incomplete step 2
-        </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>
-    <span
-      aria-label="Item 3"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm"
-      role="img"
-    >
-      3
-    </span>
-    <span
-      aria-label="Item 4"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm number-icon--incomplete"
-      role="img"
-    >
-      <svg
-        class="icon number-icon__icon"
-        fill="inherit"
-        height="0.25rem"
-        role="img"
-        style="--icon-size: 0.25rem;"
-        viewBox="0 0 24 24"
-        width="0.25rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          incomplete step 4
-        </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>
-    <span
-      aria-label="Item 5"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm number-icon--incomplete"
-      role="img"
-    >
-      <svg
-        class="icon number-icon__icon"
-        fill="inherit"
-        height="0.25rem"
-        role="img"
-        style="--icon-size: 0.25rem;"
-        viewBox="0 0 24 24"
-        width="0.25rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          incomplete step 5
-        </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>
-    <span
-      aria-label="Item 6"
-      class="text text--body-xs number-icon number-icon--base number-icon--sm number-icon--incomplete"
-      role="img"
-    >
-      <svg
-        class="icon number-icon__icon"
-        fill="inherit"
-        height="0.25rem"
-        role="img"
-        style="--icon-size: 0.25rem;"
-        viewBox="0 0 24 24"
-        width="0.25rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          incomplete step 6
-        </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>
-`;
-
-exports[`<NumberIcon /> Small story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <span
-    aria-label="Step 1"
-    class="text text--body-xs number-icon number-icon--base number-icon--sm"
-    role="img"
-  >
-    1
-  </span>
-</div>
-`;
-
-exports[`<NumberIcon /> Success story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <span
-    aria-label="Step 1"
-    class="text text--body-sm number-icon number-icon--success number-icon--lg"
-    role="img"
-  >
-    1
-  </span>
-</div>
-`;
-
-exports[`<NumberIcon /> SuccessSmall story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <span
-    aria-label="Step 1"
-    class="text text--body-xs number-icon number-icon--success number-icon--sm"
-    role="img"
-  >
-    1
-  </span>
-</div>
-`;
diff --git a/src/components/NumberIcon/index.ts b/src/components/NumberIcon/index.ts
index 096c360ce..27abe5f81 100644
--- a/src/components/NumberIcon/index.ts
+++ b/src/components/NumberIcon/index.ts
@@ -1,2 +1 @@
 export { NumberIcon as default } from './NumberIcon';
-export { NumberIcon as NumberIconV2 } from './NumberIcon-v2';
diff --git a/src/components/PageLevelBanner/PageLevelBanner.module.css b/src/components/PageLevelBanner/PageLevelBanner.module.css
deleted file mode 100644
index bf971e611..000000000
--- a/src/components/PageLevelBanner/PageLevelBanner.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # PAGE LEVEL BANNER
-\*------------------------------------*/
-
-/**
- * Message of information, success, caution, or warning to the user.
- */
-.banner {
-  /* Position is relative to allow for absolute-positioned close button. */
-  position: relative;
-  /* Grid is used to separate the icon from the text with correct spacing. */
-  display: grid;
-  gap: calc(var(--eds-size-2) / 16 * 1rem);
-  grid-template-columns: min-content 1fr;
-  padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
-  background-color: var(--eds-theme-color-neutral-subtle-background);
-  border-bottom: calc(var(--eds-border-width-md) * 1px) solid var(--messaging-border-color);
-}
-
-/**
- * PageLevelBanner informational icon
- *
- * Icon color matches the thick bottom border.
- */
-.banner__icon {
-  color: var(--messaging-icon-color);
-  --icon-size-default: calc(var(--eds-size-3) / 16 * 1rem);
-}
-
-/**
- * PageLevelBanner close button
- *
- * Button used to dismiss dismissable banners.
- */
-.banner__close-btn.banner__close-btn {
-  position: absolute;
-  top: calc(var(--eds-size-half) / 16 * 1rem);
-  right: calc(var(--eds-size-half) / 16 * 1rem);
-}
-
-.banner__description {
-  color: var(--eds-theme-color-text-neutral-default);
-}
-
-/**
- * Dismissable banner
- *
- * Add extra right padding to account for close button.
- */
-.banner--dismissable {
-  padding-right: calc(var(--eds-size-9) / 16 * 1rem);
-}
-
-/*------------------------------------*\
-    # VARIANTS
-\*------------------------------------*/
-
-/**
- * PageLevelBanner success
- */
-.banner--success {
-  @mixin messagingSuccess;
-  border-color: var(--eds-theme-color-border-utility-success-strong);
-}
-
-/**
- * PageLevelBanner warning
- */
-.banner--warning {
-  @mixin messagingWarning;
-  border-color: var(--eds-theme-color-border-utility-warning-strong);
-}
-
-/**
- * PageLevelBanner error
- */
-.banner--error {
-  @mixin messagingError;
-  border-color: var(--eds-theme-color-border-utility-error-strong);
-}
-
-/**
- * PageLevelBanner brand
- */
-.banner--brand {
-  @mixin messagingBrand;
-  border-color: var(--eds-theme-color-border-brand-primary-strong);
-}
diff --git a/src/components/PageLevelBanner/PageLevelBanner.stories.tsx b/src/components/PageLevelBanner/PageLevelBanner.stories.tsx
deleted file mode 100644
index 22d196058..000000000
--- a/src/components/PageLevelBanner/PageLevelBanner.stories.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { PageLevelBanner } from './PageLevelBanner';
-import Button from '../Button';
-
-export default {
-  title: 'Components/PageLevelBanner',
-  component: PageLevelBanner,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0'],
-  },
-  args: {
-    title:
-      'New curriculum updates are available for one or more of your courses.',
-    description: (
-      <>
-        Summit Learning has a full-time team dedicated to constantly improving
-        our curriculum. To see the updates,{' '}
-        <Button
-          onClick={(event: any) => event.preventDefault()}
-          status="neutral"
-          variant="link"
-        >
-          click into the course.
-        </Button>
-      </>
-    ),
-  },
-  argTypes: {
-    description: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof PageLevelBanner>;
-
-const dismissMethod = () => {
-  console.log('dismissing~');
-};
-
-export const Brand: StoryObj<Args> = {};
-
-export const Success: StoryObj<Args> = {
-  args: {
-    variant: 'success',
-  },
-};
-
-export const Warning: StoryObj<Args> = {
-  args: {
-    variant: 'warning',
-  },
-};
-
-export const Error: StoryObj<Args> = {
-  args: {
-    variant: 'error',
-  },
-};
-
-export const NoDescription: StoryObj<Args> = {
-  args: {
-    description: undefined,
-  },
-};
-
-export const NoTitle: StoryObj<Args> = {
-  args: {
-    title: undefined,
-  },
-};
-
-export const BrandDismissable: StoryObj<Args> = {
-  args: {
-    onDismiss: dismissMethod,
-  },
-};
-
-export const SuccessDismissable: StoryObj<Args> = {
-  args: {
-    variant: 'success',
-    onDismiss: dismissMethod,
-  },
-};
-
-export const WarningDismissable: StoryObj<Args> = {
-  args: {
-    variant: 'warning',
-    onDismiss: dismissMethod,
-  },
-};
-
-export const ErrorDismissable: StoryObj<Args> = {
-  args: {
-    variant: 'error',
-    onDismiss: dismissMethod,
-  },
-};
diff --git a/src/components/PageLevelBanner/PageLevelBanner.test.ts b/src/components/PageLevelBanner/PageLevelBanner.test.ts
deleted file mode 100644
index 99d75a749..000000000
--- a/src/components/PageLevelBanner/PageLevelBanner.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './PageLevelBanner.stories';
-
-describe('<PageLevelBanner />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/PageLevelBanner/PageLevelBanner.tsx b/src/components/PageLevelBanner/PageLevelBanner.tsx
deleted file mode 100644
index 8bf7913c8..000000000
--- a/src/components/PageLevelBanner/PageLevelBanner.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import Button from '../Button';
-import type { HeadingElement } from '../Heading';
-import Heading from '../Heading';
-import Icon, { type IconName } from '../Icon';
-import Text from '../Text';
-import styles from './PageLevelBanner.module.css';
-
-export type Variant = 'brand' | 'success' | 'warning' | 'error';
-
-export type PageLevelBannerProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * The description/body text of the banner
-   */
-  description?: ReactNode;
-  /**
-   * The element the description renders as
-   */
-  descriptionAs?: 'p' | 'span';
-  /**
-   * Callback when banner is dismissed. When passed in, renders banner with a close icon in the top right.
-   */
-  onDismiss?: () => void;
-  /**
-   * The title/heading of the banner
-   */
-  title?: ReactNode;
-  /**
-   * The element the title renders as
-   */
-  titleAs?: HeadingElement;
-  /**
-   * Stylistic variations for the banner type.
-   * - **brand** - results in a purple banner
-   * - **success** - results in a green banner
-   * - **warning** - results in a yellow banner
-   * - **error** - results in a red banner
-   */
-  variant?: Variant;
-};
-
-const variantToIconAssetsMap: {
-  [key: string]: {
-    icon: Extract<
-      IconName,
-      'notifications' | 'forum' | 'check-circle' | 'warning' | 'dangerous'
-    >;
-    title: string;
-  };
-} = {
-  brand: {
-    icon: 'notifications',
-    title: 'attention',
-  },
-  success: {
-    icon: 'check-circle',
-    title: 'success',
-  },
-  warning: {
-    icon: 'warning',
-    title: 'warning',
-  },
-  error: {
-    icon: 'dangerous',
-    title: 'error',
-  },
-};
-
-/**
- * `import {PageLevelBanner} from "@chanzuckerberg/eds";`
- *
- * A banner placed at the top of the page with important information.
- *
- * Example usage:
- *
- * ```tsx
- * <PageLevelBanner
- *   onDismiss={handleDismiss}
- *   title="Some Title"
- *   description={<>Some description, possibly with a <Link href="https://go.czi.team/eds">link to some other resource</Link>.</>}
- * />
- * ```
- */
-export const PageLevelBanner = ({
-  className,
-  description,
-  descriptionAs = 'p',
-  onDismiss,
-  variant = 'brand',
-  title,
-  titleAs = 'h3',
-}: PageLevelBannerProps) => {
-  const componentClassName = clsx(
-    // Base styles
-    styles['banner'],
-    // Variants
-    variant === 'brand' && styles['banner--brand'],
-    variant === 'error' && styles['banner--error'],
-    variant === 'warning' && styles['banner--warning'],
-    variant === 'success' && styles['banner--success'],
-    // Other options
-    onDismiss && styles['banner--dismissable'],
-    className,
-  );
-
-  return (
-    <aside className={componentClassName}>
-      <Icon
-        className={styles['banner__icon']}
-        name={variantToIconAssetsMap[variant].icon}
-        purpose="informative"
-        title={variantToIconAssetsMap[variant].title}
-      />
-
-      <div>
-        {title && (
-          <Heading as={titleAs} preset="title-md">
-            {title}
-          </Heading>
-        )}
-        {description && (
-          <Text
-            as={descriptionAs}
-            className={styles['banner__description']}
-            preset="body-sm"
-          >
-            {description}
-          </Text>
-        )}
-      </div>
-
-      {onDismiss && (
-        <Button
-          className={styles['banner__close-btn']}
-          onClick={onDismiss}
-          status="neutral"
-          variant="icon"
-        >
-          <Icon
-            name="close"
-            purpose="informative"
-            title="dismiss notification"
-          />
-        </Button>
-      )}
-    </aside>
-  );
-};
-
-PageLevelBanner.displayName = 'PageLevelBanner';
diff --git a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
deleted file mode 100644
index b590c0353..000000000
--- a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
+++ /dev/null
@@ -1,460 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<PageLevelBanner /> Brand story renders snapshot 1`] = `
-<aside
-  class="banner banner--brand"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      attention
-    </title>
-    <path
-      d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
-<aside
-  class="banner banner--brand banner--dismissable"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      attention
-    </title>
-    <path
-      d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-  <button
-    class="button button--lg button--icon button--neutral banner__close-btn"
-    type="button"
-  >
-    <svg
-      class="icon"
-      fill="currentColor"
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        dismiss notification
-      </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>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> Error story renders snapshot 1`] = `
-<aside
-  class="banner banner--error"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      error
-    </title>
-    <path
-      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
-<aside
-  class="banner banner--error banner--dismissable"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      error
-    </title>
-    <path
-      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-  <button
-    class="button button--lg button--icon button--neutral banner__close-btn"
-    type="button"
-  >
-    <svg
-      class="icon"
-      fill="currentColor"
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        dismiss notification
-      </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>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> NoDescription story renders snapshot 1`] = `
-<aside
-  class="banner banner--brand"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      attention
-    </title>
-    <path
-      d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> NoTitle story renders snapshot 1`] = `
-<aside
-  class="banner banner--brand"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      attention
-    </title>
-    <path
-      d="M5 19C4.71667 19 4.47917 18.9042 4.2875 18.7125C4.09583 18.5208 4 18.2833 4 18C4 17.7167 4.09583 17.4792 4.2875 17.2875C4.47917 17.0958 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5208 17.0958 19.7125 17.2875C19.9042 17.4792 20 17.7167 20 18C20 18.2833 19.9042 18.5208 19.7125 18.7125C19.5208 18.9042 19.2833 19 19 19H5ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
-    />
-  </svg>
-  <div>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> Success story renders snapshot 1`] = `
-<aside
-  class="banner banner--success"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
-<aside
-  class="banner banner--success banner--dismissable"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      success
-    </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-  <button
-    class="button button--lg button--icon button--neutral banner__close-btn"
-    type="button"
-  >
-    <svg
-      class="icon"
-      fill="currentColor"
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        dismiss notification
-      </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>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> Warning story renders snapshot 1`] = `
-<aside
-  class="banner banner--warning"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      warning
-    </title>
-    <path
-      d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
-<aside
-  class="banner banner--warning banner--dismissable"
->
-  <svg
-    class="icon banner__icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      warning
-    </title>
-    <path
-      d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-    />
-  </svg>
-  <div>
-    <h3
-      class="heading heading--title-md"
-    >
-      New curriculum updates are available for one or more of your courses.
-    </h3>
-    <p
-      class="text text--body-sm banner__description"
-    >
-      Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
-       
-      <button
-        class="button button--link button--neutral"
-        type="button"
-      >
-        click into the course.
-      </button>
-    </p>
-  </div>
-  <button
-    class="button button--lg button--icon button--neutral banner__close-btn"
-    type="button"
-  >
-    <svg
-      class="icon"
-      fill="currentColor"
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        dismiss notification
-      </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>
-</aside>
-`;
diff --git a/src/components/PageLevelBanner/index.ts b/src/components/PageLevelBanner/index.ts
deleted file mode 100644
index 09cbfc479..000000000
--- a/src/components/PageLevelBanner/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PageLevelBanner as default } from './PageLevelBanner';
-export type { Variant, PageLevelBannerProps } from './PageLevelBanner';
diff --git a/src/components/PageNotification/PageNotification.stories.tsx b/src/components/PageNotification/PageNotification.stories.tsx
index e097707e5..d82f50b9f 100644
--- a/src/components/PageNotification/PageNotification.stories.tsx
+++ b/src/components/PageNotification/PageNotification.stories.tsx
@@ -2,10 +2,10 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
 import { PageNotification } from './PageNotification';
-import { ButtonV2 as Button } from '../Button';
+import Button from '../Button';
 
 export default {
-  title: 'Components/V2/PageNotification',
+  title: 'Components/PageNotification',
   component: PageNotification,
   parameters: {
     layout: 'centered',
diff --git a/src/components/PageNotification/PageNotification.test.ts b/src/components/PageNotification/PageNotification.test.ts
index f132c95cd..174e1de72 100644
--- a/src/components/PageNotification/PageNotification.test.ts
+++ b/src/components/PageNotification/PageNotification.test.ts
@@ -1,6 +1,6 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import * as stories from './PageNotification.stories';
 
-describe('<PageNotification /> (v2)', () => {
+describe('<PageNotification />', () => {
   generateSnapshots(stories);
 });
diff --git a/src/components/PageNotification/PageNotification.tsx b/src/components/PageNotification/PageNotification.tsx
index c03efc504..92c5b2d80 100644
--- a/src/components/PageNotification/PageNotification.tsx
+++ b/src/components/PageNotification/PageNotification.tsx
@@ -4,9 +4,9 @@ import React, { type ReactNode } from 'react';
 import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
 import type { Status } from '../../util/variant-types';
 
-import { ButtonV2 as Button } from '../Button';
+import Button from '../Button';
 import Heading from '../Heading';
-import { IconV2 as Icon } from '../Icon';
+import Icon from '../Icon';
 import Text from '../Text';
 
 import styles from './PageNotification.module.css';
diff --git a/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap b/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap
index 585b58544..2a9c4287a 100644
--- a/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap
+++ b/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PageNotification /> (v2) Critical story renders snapshot 1`] = `
+exports[`<PageNotification /> Critical story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-critical w-96"
 >
@@ -53,7 +53,7 @@ exports[`<PageNotification /> (v2) Critical story renders snapshot 1`] = `
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) CriticalHorizontal story renders snapshot 1`] = `
+exports[`<PageNotification /> CriticalHorizontal story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-critical w-96"
 >
@@ -106,7 +106,7 @@ exports[`<PageNotification /> (v2) CriticalHorizontal story renders snapshot 1`]
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) Default story renders snapshot 1`] = `
+exports[`<PageNotification /> Default story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-informational w-96"
 >
@@ -159,7 +159,7 @@ exports[`<PageNotification /> (v2) Default story renders snapshot 1`] = `
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) Dismissable story renders snapshot 1`] = `
+exports[`<PageNotification /> Dismissable story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-informational page-notification--dismissable w-96"
 >
@@ -236,7 +236,7 @@ exports[`<PageNotification /> (v2) Dismissable story renders snapshot 1`] = `
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) Favorable story renders snapshot 1`] = `
+exports[`<PageNotification /> Favorable story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-favorable w-96"
 >
@@ -289,7 +289,7 @@ exports[`<PageNotification /> (v2) Favorable story renders snapshot 1`] = `
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) HorizontalDismissable story renders snapshot 1`] = `
+exports[`<PageNotification /> HorizontalDismissable story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-critical page-notification--dismissable w-96"
 >
@@ -366,7 +366,7 @@ exports[`<PageNotification /> (v2) HorizontalDismissable story renders snapshot
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) Warning story renders snapshot 1`] = `
+exports[`<PageNotification /> Warning story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-warning w-96"
 >
@@ -419,7 +419,7 @@ exports[`<PageNotification /> (v2) Warning story renders snapshot 1`] = `
 </aside>
 `;
 
-exports[`<PageNotification /> (v2) WarningWithSubtitle story renders snapshot 1`] = `
+exports[`<PageNotification /> WarningWithSubtitle story renders snapshot 1`] = `
 <aside
   class="page-notification page-notification--status-warning w-96"
 >
diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
index 23093c7cb..0e94e57a7 100644
--- a/src/components/Popover/__snapshots__/Popover.test.tsx.snap
+++ b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -7,13 +7,17 @@ exports[`<Popover /> Bottom story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rh:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rf:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -32,13 +36,17 @@ exports[`<Popover /> BottomEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1a:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r18:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -57,13 +65,17 @@ exports[`<Popover /> BottomStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r15:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r13:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -82,13 +94,17 @@ exports[`<Popover /> Default story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r2:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r0:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -107,13 +123,17 @@ exports[`<Popover /> FocusClickableElement story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r23:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r21:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -132,13 +152,17 @@ exports[`<Popover /> Left story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rm:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rk:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -157,13 +181,17 @@ exports[`<Popover /> LeftEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1u:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1s:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -182,13 +210,17 @@ exports[`<Popover /> LeftStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1p:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1n:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -207,13 +239,17 @@ exports[`<Popover /> Right story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rc:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:ra:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -232,13 +268,17 @@ exports[`<Popover /> RightEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1k:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1i:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -257,13 +297,17 @@ exports[`<Popover /> RightStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1f:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1d:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -282,13 +326,17 @@ exports[`<Popover /> Top story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r7:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r5:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -307,13 +355,17 @@ exports[`<Popover /> TopEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r10:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:ru:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
@@ -332,13 +384,17 @@ exports[`<Popover /> TopStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rr:"
     aria-expanded="true"
-    class="button button--lg button--secondary button--brand"
+    class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rp:"
     type="button"
   >
-    Open Popover
+    <span
+      class="button__text"
+    >
+      Open Popover
+    </span>
   </button>
   <button
     aria-hidden="true"
diff --git a/src/components/PopoverContainer/PopoverContainer-v2.module.css b/src/components/PopoverContainer/PopoverContainer-v2.module.css
deleted file mode 100644
index f9cc9a316..000000000
--- a/src/components/PopoverContainer/PopoverContainer-v2.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
- # POPOVER CONTAINER
-\*------------------------------------*/
-
-/**
- * Popover container
- */
-.popover-container {
-  border-radius: var(--eds-theme-border-radius-objects-md);
-  overflow: auto;
-  padding: 0.25rem 0;
-  z-index: 1150;
-
-  box-shadow: var(--eds-box-shadow-md);
-  background-color: var(--eds-theme-color-background-utility-container);
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.popover-container > *[role=none] + *[role=none] {
-  /* create dividers by looking for groups under the component that wrap using the "none" role */
-  border-top: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
-}
\ No newline at end of file
diff --git a/src/components/PopoverContainer/PopoverContainer-v2.stories.tsx b/src/components/PopoverContainer/PopoverContainer-v2.stories.tsx
deleted file mode 100644
index 8fdd6b2f0..000000000
--- a/src/components/PopoverContainer/PopoverContainer-v2.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { PopoverContainer } from './PopoverContainer-v2';
-import { PopoverListItemV2 as PopoverListItem } from '../PopoverListItem';
-
-export default {
-  title: 'Components/V2/PopoverContainer',
-  component: PopoverContainer,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.2', 'curent-2.0'],
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof PopoverContainer>;
-
-export const Default: StoryObj<Args> = {
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  args: {
-    children: (
-      <>
-        <div role="none">
-          <PopoverListItem icon="arrow-down">test 1</PopoverListItem>
-          <PopoverListItem icon="arrow-left-narrow">test 2</PopoverListItem>
-          <PopoverListItem icon="arrow-up">test 3</PopoverListItem>
-        </div>
-        <div role="none">
-          <PopoverListItem icon="arrow-right-narrow" isDestructiveAction>
-            test 4
-          </PopoverListItem>
-        </div>
-      </>
-    ),
-  },
-};
diff --git a/src/components/PopoverContainer/PopoverContainer-v2.tsx b/src/components/PopoverContainer/PopoverContainer-v2.tsx
deleted file mode 100644
index 81ee26d01..000000000
--- a/src/components/PopoverContainer/PopoverContainer-v2.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { Options } from '@popperjs/core';
-import clsx from 'clsx';
-import React from 'react';
-import type { ReactNode } from 'react';
-import styles from './PopoverContainer-v2.module.css';
-
-export interface Props {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  children: ReactNode;
-}
-
-// Default modifiers for any popover container using PopperJS
-export const defaultPopoverModifiers: Options['modifiers'] = [
-  {
-    name: 'offset',
-    options: {
-      offset: [0, 12], // spaces the popover from the trigger element
-    },
-  },
-  {
-    name: 'preventOverflow',
-    options: {
-      mainAxis: false, // prevents popover from offsetting to prevent overflow. Turned off due to resulting misalignment of popover arrow.
-    },
-  },
-  {
-    name: 'computeStyles',
-    options: {
-      roundOffsets: false, // This is to prevent off-by-one rendering glitches, but may add some sub-pixel fuzziness
-    },
-  },
-  {
-    name: 'minWidth',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['computeStyles'],
-    fn: ({ state }) => {
-      state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-    },
-    effect: ({ state }) => {
-      state.elements.popper.style.minWidth = `${
-        state.elements.reference.getBoundingClientRect().width
-      }px`;
-    },
-  },
-];
-
-export type PopoverOptions = {
-  // TODO: switch to PopperJS's full placement type
-  /**
-   * Popover placement options relative to the trigger element.
-   */
-  placement?:
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right-start'
-    | 'right-end'
-    | 'left-start'
-    | 'left-end'
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right';
-
-  /**
-   * Object to customize how your popover will behave.
-   *
-   * For a full list of what is available, refer to https://popper.js.org/docs/v2/modifiers/.
-   */
-  modifiers?: Options['modifiers'];
-  /**
-   * Describes the positioning strategy to use. By default, it is 'absolute', which in the simplest cases does not require repositioning of the popper.
-   * If your trigger element is in a fixed container, use the fixed strategy.
-   */
-  strategy?: Options['strategy'];
-  /**
-   * Callback ran after Popper positions the element the first time.
-   *
-   * Refer to https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle.
-   */
-  onFirstUpdate?: Options['onFirstUpdate'];
-};
-
-export type PopoverContext = {
-  placement?: PopoverOptions['placement'];
-  popperStyles?: React.CSSProperties;
-  popperAttributes?: { [key: string]: string };
-  popperElement?: Element;
-  setPopperElement?: React.Dispatch<
-    React.SetStateAction<HTMLElement | null | undefined>
-  >;
-  setReferenceElement?: React.Dispatch<
-    React.SetStateAction<Element | null | undefined>
-  >;
-};
-
-export const PopoverContainer = React.forwardRef<HTMLDivElement, Props>(
-  ({ className, children, ...other }, ref) => {
-    const componentClassName = clsx(styles['popover-container'], className);
-
-    return (
-      <div className={componentClassName} {...other} ref={ref}>
-        {children}
-      </div>
-    );
-  },
-);
-
-PopoverContainer.displayName = 'PopoverContainer';
diff --git a/src/components/PopoverContainer/PopoverContainer.module.css b/src/components/PopoverContainer/PopoverContainer.module.css
index 799ad6939..03ace9a82 100644
--- a/src/components/PopoverContainer/PopoverContainer.module.css
+++ b/src/components/PopoverContainer/PopoverContainer.module.css
@@ -8,13 +8,20 @@
  * Popover container
  */
 .popover-container {
-  border-radius: calc(var(--eds-border-radius-md) * 1px);
+  border-radius: var(--eds-theme-border-radius-objects-md);
   overflow: auto;
+  padding: calc(var(--eds-size-half) / 16 * 1rem) 0;
+  z-index: 1150;
+
   box-shadow: var(--eds-box-shadow-md);
-  background-color: var(--eds-theme-color-background-neutral-default);
-  z-index: 100;
+  background-color: var(--eds-theme-color-background-utility-container);
 
   &:focus-visible {
-    @mixin focus;
+    outline: none;
   }
 }
+
+.popover-container > *[role=none] + *[role=none] {
+  /* create dividers by looking for groups under the component that wrap using the "none" role */
+  border-top: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
+}
\ No newline at end of file
diff --git a/src/components/PopoverContainer/PopoverContainer.stories.tsx b/src/components/PopoverContainer/PopoverContainer.stories.tsx
index 2cbd32aca..f8843a83f 100644
--- a/src/components/PopoverContainer/PopoverContainer.stories.tsx
+++ b/src/components/PopoverContainer/PopoverContainer.stories.tsx
@@ -9,7 +9,7 @@ export default {
   component: PopoverContainer,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'curent-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<Args>;
@@ -17,18 +17,27 @@ export default {
 type Args = React.ComponentProps<typeof PopoverContainer>;
 
 export const Default: StoryObj<Args> = {
+  argTypes: {
+    children: {
+      control: {
+        type: null,
+      },
+    },
+  },
   args: {
-    children: 'Default container',
+    children: (
+      <>
+        <div role="none">
+          <PopoverListItem icon="arrow-down">test 1</PopoverListItem>
+          <PopoverListItem icon="arrow-left-narrow">test 2</PopoverListItem>
+          <PopoverListItem icon="arrow-up">test 3</PopoverListItem>
+        </div>
+        <div role="none">
+          <PopoverListItem icon="arrow-right-narrow" isDestructiveAction>
+            test 4
+          </PopoverListItem>
+        </div>
+      </>
+    ),
   },
 };
-
-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/PopoverContainer/PopoverContainer.test.ts b/src/components/PopoverContainer/PopoverContainer.test.ts
deleted file mode 100644
index 666ac66f8..000000000
--- a/src/components/PopoverContainer/PopoverContainer.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 './PopoverContainer.stories';
-
-describe('<PopoverContainer />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/PopoverContainer/PopoverContainer.tsx b/src/components/PopoverContainer/PopoverContainer.tsx
index 0d1a05cd2..175e462f7 100644
--- a/src/components/PopoverContainer/PopoverContainer.tsx
+++ b/src/components/PopoverContainer/PopoverContainer.tsx
@@ -2,6 +2,7 @@ import type { Options } from '@popperjs/core';
 import clsx from 'clsx';
 import React from 'react';
 import type { ReactNode } from 'react';
+
 import styles from './PopoverContainer.module.css';
 
 export interface Props {
@@ -17,7 +18,7 @@ export const defaultPopoverModifiers: Options['modifiers'] = [
   {
     name: 'offset',
     options: {
-      offset: [0, 10], // spaces the popover from the trigger element
+      offset: [0, 12], // spaces the popover from the trigger element
     },
   },
   {
diff --git a/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap b/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap
deleted file mode 100644
index f86f3172a..000000000
--- a/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap
+++ /dev/null
@@ -1,116 +0,0 @@
-// 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/PopoverContainer/index.ts b/src/components/PopoverContainer/index.ts
index c194d9ee6..e641b2eeb 100644
--- a/src/components/PopoverContainer/index.ts
+++ b/src/components/PopoverContainer/index.ts
@@ -5,5 +5,5 @@ export {
 export {
   PopoverContainer as PopoverContainerV2,
   defaultPopoverModifiers as defaultPopoverModifiersV2,
-} from './PopoverContainer-v2';
-export type { PopoverOptions, PopoverContext } from './PopoverContainer-v2';
+} from './PopoverContainer';
+export type { PopoverOptions, PopoverContext } from './PopoverContainer';
diff --git a/src/components/PopoverListItem/PopoverListItem-v2.module.css b/src/components/PopoverListItem/PopoverListItem-v2.module.css
deleted file mode 100644
index f960d9b8a..000000000
--- a/src/components/PopoverListItem/PopoverListItem-v2.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/*------------------------------------*\
-    # POPOVER LIST ITEM
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * PopoverListItem
- */
-.popover-list-item {
-  display: flex;
-  padding: 0.25rem 0.75rem;
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-
-  color: var(--eds-theme-color-text-utility-default-primary);
-  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-  &:hover {
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-  }
-
-  &:active {
-    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
-  }
-}
-
-.popover-list-item--focused {
-  background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
-}
-
-.popover-list-item--disabled {
-  pointer-events: none;
-
-  color: var(--eds-theme-color-text-utility-disabled-secondary, red);
-  background-color: var(--eds-theme-color-background-utility-disabled-no-emphasis, red)
-}
-
-.popover-list-item__icon {
-  padding-right: 0.5rem;
-}
-
-.popover-list-item__no-icon {
-  /* right padding applies space for the icon itself and the padding for that icon container */
-  padding-right: 1.5rem;
-}
-
-.popover-list-item__sub-label {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.popover-list-item--destructive-action {
-  color: var(--eds-theme-color-text-utility-critical);
-
-  &:hover {
-    color: var(--eds-theme-color-text-utility-critical-hover);
-    background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
-  }
-
-  &:active {
-    color: var(--eds-theme-color-text-utility-critical-active);
-    background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
-  }
-}
\ No newline at end of file
diff --git a/src/components/PopoverListItem/PopoverListItem-v2.tsx b/src/components/PopoverListItem/PopoverListItem-v2.tsx
deleted file mode 100644
index 68018b8fb..000000000
--- a/src/components/PopoverListItem/PopoverListItem-v2.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import clsx from 'clsx';
-import React, { type ReactNode } from 'react';
-
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import Text from '../Text';
-import styles from './PopoverListItem-v2.module.css';
-
-export interface PopoverListItemProps {
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Icon from the set of defined EDS icon set
-   */
-  icon?: IconName;
-  /**
-   * Handling behavior for whether the marked menu item is destructive or not (deletes, removes, etc.)
-   */
-  isDestructiveAction?: boolean;
-  /**
-   * Whether the component is in focus (programmatically or otherwise)
-   */
-  isFocused?: boolean;
-  /**
-   * Whether the list item is treated as disabled
-   */
-  isDisabled?: boolean;
-  /**
-   * Text below the main menu item call-to-action, briefly describing the menu item's function
-   */
-  subLabel?: string;
-}
-
-/**
- * `import {PopoverListItem} from "@chanzuckerberg/eds";`
- *
- * This abstracts the structure of an item in a popover, when the popover contains a
- * list of items (e.g., Menus and Selects)
- * - Contains styles for when active/disabled or not
- * - contains styles for when there is an icon on the left
- *
- * Given headless implements listbox options as a renderProp, this can work for both
- * Listbox and Menu examples, in the latter case not specifying an icon
- */
-export const PopoverListItem = React.forwardRef<
-  HTMLDivElement,
-  PopoverListItemProps
->(
-  (
-    {
-      className,
-      isDestructiveAction = false,
-      isDisabled = false,
-      isFocused = false,
-      children,
-      icon,
-      subLabel,
-      ...other
-    },
-    ref,
-  ) => {
-    const componentClassName = clsx(
-      styles['popover-list-item'],
-      isDisabled && styles['popover-list-item--disabled'],
-      isDestructiveAction && styles['popover-list-item--destructive-action'],
-      isFocused && styles['popover-list-item--focused'],
-      className,
-    );
-
-    const ariaIsDisabled = isDisabled
-      ? {
-          'aria-disabled': true,
-        }
-      : {};
-
-    return (
-      <div
-        className={componentClassName}
-        {...other}
-        {...ariaIsDisabled}
-        ref={ref}
-      >
-        {icon ? (
-          <div className={styles['popover-list-item__icon']}>
-            <Icon name={icon} purpose="decorative" size="1rem" />
-          </div>
-        ) : (
-          <div className={styles['popover-list-item__no-icon']}></div>
-        )}
-        <div className={styles['popover-list-item__menu-labels']}>
-          <Text as="div" preset="body-md">
-            {children}
-          </Text>
-          {subLabel && (
-            <Text
-              as="div"
-              className={styles['popover-list-item__sub-label']}
-              preset="body-sm"
-            >
-              {subLabel}
-            </Text>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-PopoverListItem.displayName = 'PopoverListItem';
diff --git a/src/components/PopoverListItem/PopoverListItem.module.css b/src/components/PopoverListItem/PopoverListItem.module.css
index ae3c81ed1..99096ca85 100644
--- a/src/components/PopoverListItem/PopoverListItem.module.css
+++ b/src/components/PopoverListItem/PopoverListItem.module.css
@@ -1,35 +1,66 @@
 /*------------------------------------*\
     # POPOVER LIST ITEM
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * PopoverListItem
  */
 .popover-list-item {
   display: flex;
-  font-size: 0.875rem;
-  padding: calc(var(--eds-size-1) / 16 * 1rem) calc(var(--eds-size-2) / 16 * 1rem);
-  background-color: var(--eds-theme-color-form-background);
+  padding: calc(var(--eds-size-half) / 16 * 1rem) 0.75rem;
   cursor: pointer;
+  width: 100%;
+  text-align: left;
+
+  color: var(--eds-theme-color-text-utility-default-primary);
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  &:hover {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:active {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
 }
 
-.popover-list-item--active {
-  color: var(--eds-theme-color-text-neutral-default);
-  background-color: var(--eds-theme-color-background-neutral-default-hover);
+.popover-list-item--focused {
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
 }
 
 .popover-list-item--disabled {
-  color: var(--eds-theme-color-text-disabled);
-  cursor: not-allowed;
+  pointer-events: none;
+
+  color: var(--eds-theme-color-text-utility-disabled-secondary, red);
+  background-color: var(--eds-theme-color-background-utility-disabled-no-emphasis, red)
 }
 
 .popover-list-item__icon {
-  padding-right: calc(var(--eds-size-1-and-half) / 16 * 1rem);
-  /* This var. matches the height set in the icon, but makes sure it is locked to only that height */
-  height: calc(var(--eds-size-1-and-half) / 16 * 1rem);
+  padding-right: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
 .popover-list-item__no-icon {
   /* right padding applies space for the icon itself and the padding for that icon container */
-  padding-right: calc(calc(var(--eds-size-3) / 16 * 1rem) + calc(var(--eds-size-1-and-half) / 16 * 1rem));
+  padding-right: calc(var(--eds-size-3) / 16 * 1rem);
 }
+
+.popover-list-item__sub-label {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.popover-list-item--destructive-action {
+  color: var(--eds-theme-color-text-utility-critical);
+
+  &:hover {
+    color: var(--eds-theme-color-text-utility-critical-hover);
+    background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
+  }
+
+  &:active {
+    color: var(--eds-theme-color-text-utility-critical-active);
+    background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active);
+  }
+}
\ No newline at end of file
diff --git a/src/components/PopoverListItem/PopoverListItem-v2.stories.ts b/src/components/PopoverListItem/PopoverListItem.stories.ts
similarity index 91%
rename from src/components/PopoverListItem/PopoverListItem-v2.stories.ts
rename to src/components/PopoverListItem/PopoverListItem.stories.ts
index c63734262..b2fa598c9 100644
--- a/src/components/PopoverListItem/PopoverListItem-v2.stories.ts
+++ b/src/components/PopoverListItem/PopoverListItem.stories.ts
@@ -1,8 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { PopoverListItem } from './PopoverListItem-v2';
+import { PopoverListItem } from './PopoverListItem';
 
 export default {
-  title: 'Components/V2/PopoverListItem',
+  title: 'Components/PopoverListItem',
   component: PopoverListItem,
   parameters: {
     layout: 'centered',
diff --git a/src/components/PopoverListItem/PopoverListItem.stories.tsx b/src/components/PopoverListItem/PopoverListItem.stories.tsx
deleted file mode 100644
index 0f480abd6..000000000
--- a/src/components/PopoverListItem/PopoverListItem.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { PopoverListItem } from './PopoverListItem';
-
-export default {
-  title: 'Components/PopoverListItem',
-  component: PopoverListItem,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.2'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof PopoverListItem>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    children: 'Default list item',
-  },
-};
-
-export const WithAnIcon: StoryObj<Args> = {
-  render: () => (
-    <PopoverListItem icon="add-circle">Test with Icon</PopoverListItem>
-  ),
-};
-
-export const Disabled: StoryObj<Args> = {
-  render: () => <PopoverListItem disabled>Disabled</PopoverListItem>,
-};
-
-export const Active: StoryObj<Args> = {
-  render: () => (
-    <PopoverListItem active icon="check">
-      Active Row with Icon
-    </PopoverListItem>
-  ),
-};
diff --git a/src/components/PopoverListItem/PopoverListItem.test.ts b/src/components/PopoverListItem/PopoverListItem.test.ts
deleted file mode 100644
index 1f0ac7a07..000000000
--- a/src/components/PopoverListItem/PopoverListItem.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 './PopoverListItem.stories';
-
-describe('<PopoverListItem />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/PopoverListItem/PopoverListItem.tsx b/src/components/PopoverListItem/PopoverListItem.tsx
index 90f6a135b..a8c73bc1c 100644
--- a/src/components/PopoverListItem/PopoverListItem.tsx
+++ b/src/components/PopoverListItem/PopoverListItem.tsx
@@ -1,32 +1,40 @@
 import clsx from 'clsx';
-import React from 'react';
-import type { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
-import Icon from '../Icon';
-import type { IconName } from '../Icon';
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
 import styles from './PopoverListItem.module.css';
 
-export interface Props {
-  /**
-   * Whether the list item is treated as highlighted in its container
-   */
-  active?: boolean;
+export interface PopoverListItemProps {
   /**
    * Child node(s) that can be nested inside component
    */
   children: ReactNode;
-  /**
-   * Whether the list item is treated as disabled
-   */
-  disabled?: boolean;
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
   /**
    * Icon from the set of defined EDS icon set
    */
   icon?: IconName;
+  /**
+   * Handling behavior for whether the marked menu item is destructive or not (deletes, removes, etc.)
+   */
+  isDestructiveAction?: boolean;
+  /**
+   * Whether the component is in focus (programmatically or otherwise)
+   */
+  isFocused?: boolean;
+  /**
+   * Whether the list item is treated as disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Text below the main menu item call-to-action, briefly describing the menu item's function
+   */
+  subLabel?: string;
 }
 
 /**
@@ -40,16 +48,32 @@ export interface Props {
  * Given headless implements listbox options as a renderProp, this can work for both
  * Listbox and Menu examples, in the latter case not specifying an icon
  */
-export const PopoverListItem = React.forwardRef<HTMLDivElement, Props>(
-  ({ active, className, disabled, children, icon, ...other }, ref) => {
+export const PopoverListItem = React.forwardRef<
+  HTMLDivElement,
+  PopoverListItemProps
+>(
+  (
+    {
+      className,
+      isDestructiveAction = false,
+      isDisabled = false,
+      isFocused = false,
+      children,
+      icon,
+      subLabel,
+      ...other
+    },
+    ref,
+  ) => {
     const componentClassName = clsx(
       styles['popover-list-item'],
-      active && styles['popover-list-item--active'],
-      disabled && styles['popover-list-item--disabled'],
+      isDisabled && styles['popover-list-item--disabled'],
+      isDestructiveAction && styles['popover-list-item--destructive-action'],
+      isFocused && styles['popover-list-item--focused'],
       className,
     );
 
-    const ariaIsDisabled = disabled
+    const ariaIsDisabled = isDisabled
       ? {
           'aria-disabled': true,
         }
@@ -64,13 +88,25 @@ export const PopoverListItem = React.forwardRef<HTMLDivElement, Props>(
       >
         {icon ? (
           <div className={styles['popover-list-item__icon']}>
-            {/* TODO: can link to CSS Var? calc(var(--eds-size-1-and-half) / 16 * 1rem) */}
-            <Icon name={icon} purpose="decorative" size="1.5rem" />
+            <Icon name={icon} purpose="decorative" size="1rem" />
           </div>
         ) : (
           <div className={styles['popover-list-item__no-icon']}></div>
         )}
-        {children}
+        <div className={styles['popover-list-item__menu-labels']}>
+          <Text as="div" preset="body-md">
+            {children}
+          </Text>
+          {subLabel && (
+            <Text
+              as="div"
+              className={styles['popover-list-item__sub-label']}
+              preset="body-sm"
+            >
+              {subLabel}
+            </Text>
+          )}
+        </div>
       </div>
     );
   },
diff --git a/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap b/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap
deleted file mode 100644
index 0d77a0e7a..000000000
--- a/src/components/PopoverListItem/__snapshots__/PopoverListItem.test.ts.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<PopoverListItem /> Active story renders snapshot 1`] = `
-<div
-  class="popover-list-item popover-list-item--active"
->
-  <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 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"
-      />
-    </svg>
-  </div>
-  Active Row with Icon
-</div>
-`;
-
-exports[`<PopoverListItem /> Default story renders snapshot 1`] = `
-<div
-  class="popover-list-item"
->
-  <div
-    class="popover-list-item__no-icon"
-  />
-  Default list item
-</div>
-`;
-
-exports[`<PopoverListItem /> Disabled story renders snapshot 1`] = `
-<div
-  aria-disabled="true"
-  class="popover-list-item popover-list-item--disabled"
->
-  <div
-    class="popover-list-item__no-icon"
-  />
-  Disabled
-</div>
-`;
-
-exports[`<PopoverListItem /> WithAnIcon story renders snapshot 1`] = `
-<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="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-      />
-    </svg>
-  </div>
-  Test with Icon
-</div>
-`;
diff --git a/src/components/PopoverListItem/index.ts b/src/components/PopoverListItem/index.ts
index 1d38710dd..a226d4531 100644
--- a/src/components/PopoverListItem/index.ts
+++ b/src/components/PopoverListItem/index.ts
@@ -1,2 +1 @@
 export { PopoverListItem as default } from './PopoverListItem';
-export { PopoverListItem as PopoverListItemV2 } from './PopoverListItem-v2';
diff --git a/src/components/Radio/Radio-v2.module.css b/src/components/Radio/Radio-v2.module.css
deleted file mode 100755
index bd2d2e0cb..000000000
--- a/src/components/Radio/Radio-v2.module.css
+++ /dev/null
@@ -1,220 +0,0 @@
-/*------------------------------------*\
-    # RADIO BUTTON
-\*------------------------------------*/
-
-/**
- * A custom individual radio control
- */
-.radio {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/**
- * Wraps the visually hidden radio input element and the visible sibling container element.
- */
-.input__wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  align-self: flex-start;
-  flex-shrink: 0;
-
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.radio__container,
-.radio__selected {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.radio__container {
-  border: 0.125rem solid currentColor;
-  border-radius: 50%;
-  content: '';
-
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.radio__selected {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
-  background-color: transparent;
-
-  content: '';
-  pointer-events: none;
-}
-
-/**
- * The visually hidden input element for the radio. The visual radio is provided by an svg element.
- */
-.radio__input {
-  /* Removes default margins placed by browser for radios. */
-  margin: 0;
-  /* Remove the radio from the page flow, positioning it on top of the SVG. */
-  position: absolute;
-  /* Set same dimensions as the RadioSvg element. */
-  height: 1.5rem;
-  width: 1.5rem;
-
-  /**
-   * Hide the input element visually.
-   * This ensures the radio is still "physically" present so that all users,
-   * especially on touch screen readers, still interact with the real radio element
-   * where it would naturally be present.
-   */
-  display: block;
-  opacity: 0;
-}
-
-/**
- * The disabled status of the visually hidden input element.
- */
-.radio__input:disabled {
-  /* Needed since the input element overlays the visible svg icon for user input and cursor. */
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.radio__labels {
-  position: relative;
-}
-
-.radio__sub-label {
-  display: block;
-
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.radio__input:not(:checked) {
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis);
-  }
-}
-
-.radio__input:not(:checked):hover {
-  & ~ .radio__container {
-    border-color: var(
-      --eds-theme-color-border-utility-default-medium-emphasis-hover
-    );
-  }
-}
-
-.radio__input:not(:checked):active {
-  & ~ .radio__container {
-    border-color: var(
-      --eds-theme-color-border-utility-default-medium-emphasis-active
-    );
-  }
-}
-
-.radio__input:not(:checked):disabled {
-  pointer-events: none;
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-disabled);
-    background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
-  }
-}
-
-.radio__input:checked {
-  & ~ .radio__container {
-    border-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis
-    );
-  }
-
-  & ~ .radio__selected {
-    background-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis
-    );
-  }
-}
-
-.radio__input:checked:hover {
-  & ~ .radio__container {
-    border-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis-hover
-    );
-  }
-
-  & ~ .radio__selected {
-    background-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis-hover
-    );
-  }
-}
-
-.radio__input:checked:active {
-  & ~ .radio__container {
-    border-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis-active
-    );
-  }
-
-  & ~ .radio__selected {
-    background-color: var(
-      --eds-theme-color-background-utility-interactive-high-emphasis-active
-    );
-  }
-}
-
-.radio__input:checked:disabled {
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-disabled);
-  }
-
-  & ~ .radio__selected {
-    background-color: var(--eds-theme-color-border-utility-disabled);
-  }
-}
-
-.radio__input.radio--error {
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-critical);
-  }
-
-  & ~ .radio__selected {
-    background-color: var(--eds-theme-color-border-utility-critical);
-  }
-}
-
-.radio__input.radio--error:hover {
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-critical-hover);
-  }
-
-  & ~ .radio__selected {
-    background-color: var(--eds-theme-color-border-utility-critical-hover);
-  }
-}
-
-.radio__input.radio--error:active {
-  & ~ .radio__container {
-    border-color: var(--eds-theme-color-border-utility-critical-active);
-  }
-
-  & ~ .radio__selected {
-    background-color: var(--eds-theme-color-border-utility-critical-active);
-  }
-}
-
-.radio__input:focus-visible + .radio__container {
-  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-  outline-offset: 0.125rem;
-  border-radius: calc(var(--eds-border-radius-full) * 1px);
-}
-
-@supports not selector(:focus-visible) {
-  .radio__input:focus + .radio__container {
-    outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
-    outline-offset: 0.125rem;
-    border-radius: calc(var(--eds-border-radius-full) * 1px);
-  }
-}
diff --git a/src/components/Radio/Radio-v2.stories.tsx b/src/components/Radio/Radio-v2.stories.tsx
deleted file mode 100644
index e7116f266..000000000
--- a/src/components/Radio/Radio-v2.stories.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Radio } from './Radio-v2';
-
-export default {
-  title: 'Components/V2/Radio',
-  component: Radio,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Radio>;
-type Story = StoryObj<Args>;
-
-export const Default: Story = {
-  args: {
-    name: 'option-1',
-    label: 'Option 1',
-    checked: false,
-    readOnly: true,
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    ...Default.args,
-    name: 'option-checked',
-    checked: true,
-    readOnly: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    name: 'option-disabled',
-    disabled: true,
-  },
-};
-
-export const DisabledAndChecked: Story = {
-  args: {
-    ...Disabled.args,
-    checked: true,
-    readOnly: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Default.args,
-    name: 'option-error',
-    isError: true,
-  },
-};
-
-export const ErrorAndChecked: Story = {
-  args: {
-    ...Error.args,
-    name: 'option-error',
-    checked: true,
-    readOnly: true,
-  },
-};
-
-export const WithSublabel: Story = {
-  args: {
-    ...Default.args,
-    subLabel: 'Some additional label text',
-  },
-};
-
-export const WithoutVisibleLabel: Story = {
-  args: {
-    ...Default.args,
-    label: undefined,
-    'aria-label': 'unchecked radio button',
-  },
-};
-
-export const LongLabels = {
-  render: () => {
-    const label = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
-
-    return (
-      <div
-        style={{
-          display: 'grid',
-          width: '20rem',
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-          gap: '1rem',
-        }}
-      >
-        <Radio checked label={label} name="option-long-label" readOnly />
-      </div>
-    );
-  },
-};
diff --git a/src/components/Radio/Radio-v2.test.tsx b/src/components/Radio/Radio-v2.test.tsx
deleted file mode 100644
index 4fd5b148f..000000000
--- a/src/components/Radio/Radio-v2.test.tsx
+++ /dev/null
@@ -1,41 +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 { Radio } from './Radio-v2';
-import * as stories from './Radio-v2.stories';
-
-describe('<Radio /> (v2)', () => {
-  generateSnapshots(stories as StoryFile);
-
-  test('should toggle the radio with space', async () => {
-    const user = userEvent.setup();
-    const onChange = jest.fn();
-
-    function ControlledRadio() {
-      const [checked, setChecked] = React.useState(false);
-      const handleChange = () => {
-        setChecked(!checked);
-        onChange();
-      };
-
-      return (
-        <Radio
-          aria-label="test-radio"
-          checked={checked}
-          onChange={handleChange}
-        />
-      );
-    }
-
-    render(<ControlledRadio />);
-    const radio = screen.getByRole('radio');
-    radio.focus();
-
-    await user.keyboard(' ');
-
-    expect(radio).toBeChecked();
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/components/Radio/Radio-v2.tsx b/src/components/Radio/Radio-v2.tsx
deleted file mode 100644
index e826f7d47..000000000
--- a/src/components/Radio/Radio-v2.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import type { ReactNode } from 'react';
-
-import { useId } from '../../util/useId';
-import type { EitherInclusive } from '../../util/utility-types';
-
-import FieldLabel from '../FieldLabel';
-import Text from '../Text';
-
-import styles from './Radio-v2.module.css';
-
-type RadioHTMLElementProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'id' | 'name'
->;
-
-type RadioInputProps = RadioHTMLElementProps & {
-  /**
-   * Whether checkbox is checked.
-   */
-  checked?: boolean;
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * Radio ID. Used to connect the input with a label for accessibility purposes.
-   */
-  id?: string;
-  /**
-   * Whether the radio button is in an error state
-   */
-  isError?: boolean;
-};
-
-type RadioProps = RadioInputProps & {
-  // Component API
-  /**
-   * HTML id attribute. If not passed, this component
-   * will generate an id to use for accessibility.
-   */
-  id?: string;
-  /**
-   * The field name to use in a form
-   */
-  name?: string;
-  // Design API
-  /**
-   * Whether the radio button is in an error state
-   */
-  isError?: boolean;
-  /**
-   * Additional descriptive text below the primary label, adding additional detail
-   */
-  subLabel?: string;
-} & EitherInclusive<
-    {
-      /**
-       * Visible text label for the component.
-       */
-      label: ReactNode;
-    },
-    {
-      /**
-       * Aria-label to provide an accesible name for the text input if no visible label is provided.
-       */
-      'aria-label': string;
-    }
-  >;
-
-/**
- * Radio input element, exported for greater flexibility.
- * You must provide an `id` prop and connect it to a visible label.
- */
-const RadioInput = ({
-  checked,
-  className,
-  disabled,
-  isError,
-  ...other
-}: RadioInputProps) => {
-  return (
-    <span
-      className={clsx(
-        styles['input__wrapper'],
-        disabled && styles['input__wrapper--disabled'],
-      )}
-    >
-      <input
-        checked={checked}
-        className={clsx(
-          className,
-          isError && styles['radio--error'],
-          styles['radio__input'],
-        )}
-        disabled={disabled}
-        type="radio"
-        {...other}
-      />
-      <span className={styles['radio__container']}></span>
-      <span className={styles['radio__selected']}></span>
-    </span>
-  );
-};
-
-/**
- * `import {Radio} from "@chanzuckerberg/eds";`
- *
- * Radio control indicating if one item is selected or unselected from a set of other options. Uncontrolled by default, it can be used in place of a select field in form data.
- *
- * NOTE: This component requires `label` or `aria-label` prop
- */
-export const Radio = ({
-  className,
-  disabled,
-  label,
-  id,
-  isError = false,
-  subLabel,
-  ...other
-}: RadioProps) => {
-  const generatedId = useId();
-  const radioId = id || generatedId;
-
-  const componentClassName = clsx(
-    styles['radio'],
-    isError && styles['radio--error'],
-    className,
-  );
-
-  return (
-    <div className={componentClassName}>
-      <RadioInput
-        disabled={disabled}
-        id={radioId}
-        isError={isError}
-        {...other}
-      />
-      <div className={styles['radio__labels']}>
-        <FieldLabel disabled={disabled} htmlFor={radioId}>
-          {label}
-        </FieldLabel>
-        {subLabel && (
-          <Text
-            as="span"
-            className={styles['radio__sub-label']}
-            preset="body-sm"
-          >
-            {subLabel}
-          </Text>
-        )}
-      </div>
-    </div>
-  );
-};
-
-Radio.displayName = 'Radio';
-RadioInput.displayName = 'Radio.Input';
-
-Radio.Input = RadioInput;
-Radio.Label = FieldLabel;
diff --git a/src/components/Radio/Radio.module.css b/src/components/Radio/Radio.module.css
index 51a213c36..7c74c821c 100755
--- a/src/components/Radio/Radio.module.css
+++ b/src/components/Radio/Radio.module.css
@@ -11,87 +11,210 @@
 }
 
 /**
- * Wraps the visually hidden radio input element and the visible sibling svg element.
+ * Wraps the visually hidden radio input element and the visible sibling container element.
  */
 .input__wrapper {
   position: relative;
-  /* Centers the radio icon in the wrapper. */
   display: inline-flex;
   align-items: center;
-  /* Aligns the radio with the first line of the label. */
   align-self: flex-start;
+  flex-shrink: 0;
+
+  width: calc(var(--eds-size-3) / 16 * 1rem);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+}
+
+.radio__container,
+.radio__selected {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.radio__container {
+  border: calc(var(--eds-size-quarter) / 16 * 1rem) solid currentColor;
+  border-radius: 50%;
+  content: '';
+
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.radio__selected {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background-color: transparent;
+
+  content: '';
+  pointer-events: none;
 }
+
 /**
  * The visually hidden input element for the radio. The visual radio is provided by an svg element.
  */
 .radio__input {
-  /* Removes default margins placed by browser for radioes. */
+  /* Removes default margins placed by browser for radios. */
   margin: 0;
   /* Remove the radio from the page flow, positioning it on top of the SVG. */
   position: absolute;
-  left: calc(var(--eds-size-half) / 16 * 1rem);
   /* Set same dimensions as the RadioSvg element. */
-  height: calc(var(--eds-size-2) / 16 * 1rem);
-  width: calc(var(--eds-size-2) / 16 * 1rem);
+  height: calc(var(--eds-size-3) / 16 * 1rem);
+  width: calc(var(--eds-size-3) / 16 * 1rem);
+
   /**
    * Hide the input element visually.
    * This ensures the radio is still "physically" present so that all users,
    * especially on touch screen readers, still interact with the real radio element
    * where it would naturally be present.
    */
+  display: block;
   opacity: 0;
 }
 
 /**
- * The visible radio svg icon element.
+ * The disabled status of the visually hidden input element.
  */
-.radio__icon {
-  color: var(--eds-theme-color-radio-brand-background);
-  /* Creates space for the border so that there's no jitter when the focus border is visible. */
-  border: calc(var(--eds-border-width-sm) * 1px) solid transparent;
+.radio__input:disabled {
+  /* Needed since the input element overlays the visible svg icon for user input and cursor. */
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.radio__input:focus-visible + .radio__icon {
-  border: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-focus-ring);
-  border-radius: calc(var(--eds-border-radius-full) * 1px);
+
+.radio__labels {
+  position: relative;
 }
 
-@supports not selector(:focus-visible) {
-  .radio__input:focus + .radio__icon {
-    border: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-focus-ring);
-    border-radius: calc(var(--eds-border-radius-full) * 1px);
+.radio__sub-label {
+  display: block;
+
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.radio__input:not(:checked) {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis);
   }
 }
 
-/**
- * The disabled variant of the visible radio svg icon.
- */
-.radio__icon--disabled {
-  color: var(--eds-theme-color-icon-disabled);
+.radio__input:not(:checked):hover {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-border-utility-default-medium-emphasis-hover
+    );
+  }
 }
 
-/**
- * The disabled status of the visually hidden input element.
- */
-.radio__input:disabled {
-  /* Needed since the input element overlays the visible svg icon for user input and cursor. */
-  cursor: not-allowed;
+.radio__input:not(:checked):active {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-border-utility-default-medium-emphasis-active
+    );
+  }
 }
 
-/**
- * Text that labels a radio input.
- */
-.radio__label {
-  position: relative;
+.radio__input:not(:checked):disabled {
+  pointer-events: none;
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-disabled);
+    background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
+  }
 }
 
-/**
- * Radio label size variants.
- * Used for centering the label with the radio input button.
- */
-.radio__label--md {
-  top: calc(var(--eds-size-quarter) / 16 * 1rem);
+.radio__input:checked {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis
+    );
+  }
+
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis
+    );
+  }
+}
+
+.radio__input:checked:hover {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-hover
+    );
+  }
+
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-hover
+    );
+  }
+}
+
+.radio__input:checked:active {
+  & ~ .radio__container {
+    border-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-active
+    );
+  }
+
+  & ~ .radio__selected {
+    background-color: var(
+      --eds-theme-color-background-utility-interactive-high-emphasis-active
+    );
+  }
+}
+
+.radio__input:checked:disabled {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-disabled);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-disabled);
+  }
+}
+
+.radio__input.radio--error {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical);
+  }
+}
+
+.radio__input.radio--error:hover {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical-hover);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical-hover);
+  }
+}
+
+.radio__input.radio--error:active {
+  & ~ .radio__container {
+    border-color: var(--eds-theme-color-border-utility-critical-active);
+  }
+
+  & ~ .radio__selected {
+    background-color: var(--eds-theme-color-border-utility-critical-active);
+  }
+}
+
+.radio__input:focus-visible + .radio__container {
+  outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+  outline-offset: calc(var(--eds-size-quarter) / 16 * 1rem);
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
 }
-.radio__label--lg {
-  /* This is a 1px increase in top spacing from the md variant. Size is too specific to have a token. */
-  top: 0.0625rem;
+
+@supports not selector(:focus-visible) {
+  .radio__input:focus + .radio__container {
+    outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+    outline-offset: calc(var(--eds-size-quarter) / 16 * 1rem);
+    border-radius: calc(var(--eds-border-radius-full) * 1px);
+  }
 }
diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx
index c8ee9682f..98b67e44d 100644
--- a/src/components/Radio/Radio.stories.tsx
+++ b/src/components/Radio/Radio.stories.tsx
@@ -3,88 +3,82 @@ import React from 'react';
 
 import { Radio } from './Radio';
 
-const meta: Meta<typeof Radio> = {
+export default {
   title: 'Components/Radio',
   component: Radio,
-  args: {
-    label: 'Option 1',
-    checked: false,
-  },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0'],
+    badges: ['intro-1.0', 'current-2.0'],
   },
-  decorators: [(Story) => <div style={{ margin: '0.25rem' }}>{Story()}</div>],
-};
-
-export default meta;
-
-/**
- * Controlled example to make checked stories interactive.
- */
-function RadioExample(args: Args) {
-  const [checked, setChecked] = React.useState(args.checked);
-  const handleChange = () => {
-    setChecked(!checked);
-  };
-
-  return <Radio {...args} checked={checked} onChange={handleChange} />;
-}
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
+} as Meta<Args>;
 
 type Args = React.ComponentProps<typeof Radio>;
-type Story = StoryObj<typeof Radio>;
+type Story = StoryObj<Args>;
 
 export const Default: Story = {
-  render: (args) => <RadioExample {...args} />,
-};
-
-export const Medium: Story = {
   args: {
-    size: 'md',
+    name: 'option-1',
+    label: 'Option 1',
+    checked: false,
+    readOnly: true,
   },
-  render: (args) => <RadioExample {...args} />,
 };
 
 export const Checked: Story = {
   args: {
+    ...Default.args,
+    name: 'option-checked',
     checked: true,
+    readOnly: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    name: 'option-disabled',
+    disabled: true,
   },
-  render: (args) => <RadioExample {...args} />,
 };
 
-export const CheckedMedium: Story = {
+export const DisabledAndChecked: Story = {
   args: {
+    ...Disabled.args,
     checked: true,
-    size: 'md',
+    readOnly: true,
   },
-  render: (args) => <RadioExample {...args} />,
 };
 
-export const Disabled: Story = {
+export const Error: Story = {
   args: {
-    disabled: true,
+    ...Default.args,
+    name: 'option-error',
+    isError: true,
   },
-  render: (args) => <RadioExample {...args} />,
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
+};
+
+export const ErrorAndChecked: Story = {
+  args: {
+    ...Error.args,
+    name: 'option-error',
+    checked: true,
+    readOnly: true,
+  },
+};
+
+export const WithSublabel: Story = {
+  args: {
+    ...Default.args,
+    subLabel: 'Some additional label text',
   },
 };
 
 export const WithoutVisibleLabel: Story = {
-  render: () => (
-    <>
-      <Radio aria-label="unchecked radio" readOnly />
-      <Radio aria-label="checked radio" checked readOnly />
-      <Radio aria-label="unchecked disabled radio" disabled />
-      <Radio aria-label="checked disabled radio" checked disabled />
-    </>
-  ),
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
+  args: {
+    ...Default.args,
+    label: undefined,
+    'aria-label': 'unchecked radio button',
   },
 };
 
@@ -101,25 +95,8 @@ export const LongLabels = {
           gap: '1rem',
         }}
       >
-        <Radio label={label} readOnly />
-        <Radio label={label} readOnly size="md" />
-        <Radio disabled label={label} />
-        <Radio disabled label={label} size="md" />
+        <Radio checked label={label} name="option-long-label" readOnly />
       </div>
     );
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
-};
-
-export const WithCustomPositioning = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Radio.Label htmlFor="test">Label on Left</Radio.Label>
-      <Radio.Input checked={false} id="test" readOnly />
-    </div>
-  ),
 };
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index c914e377e..2d935474a 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,22 +1,59 @@
 import clsx from 'clsx';
 import React from 'react';
-import type { ReactNode, InputHTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+
 import { useId } from '../../util/useId';
 import type { EitherInclusive } from '../../util/utility-types';
-import Icon, { type IconName } from '../Icon';
-import { InputLabel, type InputLabelProps } from '../InputLabel/InputLabel';
+
+import FieldLabel from '../FieldLabel';
+import Text from '../Text';
+
 import styles from './Radio.module.css';
 
+type RadioHTMLElementProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'id' | 'name'
+>;
+
+type RadioInputProps = RadioHTMLElementProps & {
+  /**
+   * Whether checkbox is checked.
+   */
+  checked?: boolean;
+  /**
+   * Additional classnames passed in for styling.
+   */
+  className?: string;
+  /**
+   * Radio ID. Used to connect the input with a label for accessibility purposes.
+   */
+  id?: string;
+  /**
+   * Whether the radio button is in an error state
+   */
+  isError?: boolean;
+};
+
 type RadioProps = RadioInputProps & {
+  // Component API
   /**
    * HTML id attribute. If not passed, this component
    * will generate an id to use for accessibility.
    */
   id?: string;
   /**
-   * Size of the radio label.
+   * The field name to use in a form
+   */
+  name?: string;
+  // Design API
+  /**
+   * Whether the radio button is in an error state
+   */
+  isError?: boolean;
+  /**
+   * Additional descriptive text below the primary label, adding additional detail
    */
-  size?: InputLabelProps['size'];
+  subLabel?: string;
 } & EitherInclusive<
     {
       /**
@@ -31,50 +68,16 @@ type RadioProps = RadioInputProps & {
       'aria-label': string;
     }
   >;
-type RadioInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'id' | 'size'
-> & {
-  /**
-   * Additional classnames passed in for styling.
-   */
-  className?: string;
-  /**
-   * Radio ID. Used to connect the input with a label for accessibility purposes.
-   */
-  id?: string;
-};
-
-const RadioSvg = ({
-  checked,
-  disabled,
-}: {
-  checked?: boolean;
-  disabled?: boolean;
-}) => {
-  const iconClassName = clsx(
-    styles['radio__icon'],
-    disabled && styles['radio__icon--disabled'],
-  );
-  const icon: IconName = checked ? 'radio-selected' : 'radio-unselected';
-  return (
-    <Icon
-      className={iconClassName}
-      name={icon}
-      purpose="decorative"
-      size="1.625rem"
-    />
-  );
-};
 
 /**
  * Radio input element, exported for greater flexibility.
  * You must provide an `id` prop and connect it to a visible label.
  */
-export const RadioInput = ({
-  checked = false,
+const RadioInput = ({
+  checked,
   className,
   disabled,
+  isError,
   ...other
 }: RadioInputProps) => {
   return (
@@ -86,37 +89,25 @@ export const RadioInput = ({
     >
       <input
         checked={checked}
-        className={clsx(className, styles['radio__input'])}
+        className={clsx(
+          className,
+          isError && styles['radio--error'],
+          styles['radio__input'],
+        )}
         disabled={disabled}
         type="radio"
         {...other}
       />
-      <RadioSvg checked={checked} disabled={disabled} />
+      <span className={styles['radio__container']}></span>
+      <span className={styles['radio__selected']}></span>
     </span>
   );
 };
 
-/**
- * Radio label element, styles and relies on the InputLabel component.
- */
-export const RadioLabel = ({
-  className,
-  size = 'lg',
-  ...other
-}: InputLabelProps) => {
-  const componentClassName = clsx(
-    styles['radio__label'],
-    styles[`radio__label--${size}`],
-    className,
-  );
-
-  return <InputLabel className={componentClassName} size={size} {...other} />;
-};
-
 /**
  * `import {Radio} from "@chanzuckerberg/eds";`
  *
- * This component provides a radio component and a label for form selection.
+ * Radio control indicating if one item is selected or unselected from a set of other options. Uncontrolled by default, it can be used in place of a select field in form data.
  *
  * NOTE: This component requires `label` or `aria-label` prop
  */
@@ -125,27 +116,47 @@ export const Radio = ({
   disabled,
   label,
   id,
-  size,
+  isError = false,
+  subLabel,
   ...other
 }: RadioProps) => {
   const generatedId = useId();
   const radioId = id || generatedId;
 
-  const componentClassName = clsx(styles['radio'], className);
+  const componentClassName = clsx(
+    styles['radio'],
+    isError && styles['radio--error'],
+    className,
+  );
 
   return (
     <div className={componentClassName}>
-      <RadioInput disabled={disabled} id={radioId} {...other} />
-      <RadioLabel disabled={disabled} htmlFor={radioId} size={size}>
-        {label}
-      </RadioLabel>
+      <RadioInput
+        disabled={disabled}
+        id={radioId}
+        isError={isError}
+        {...other}
+      />
+      <div className={styles['radio__labels']}>
+        <FieldLabel disabled={disabled} htmlFor={radioId}>
+          {label}
+        </FieldLabel>
+        {subLabel && (
+          <Text
+            as="span"
+            className={styles['radio__sub-label']}
+            preset="body-sm"
+          >
+            {subLabel}
+          </Text>
+        )}
+      </div>
     </div>
   );
 };
 
 Radio.displayName = 'Radio';
 RadioInput.displayName = 'Radio.Input';
-RadioLabel.displayName = 'Radio.Label';
 
 Radio.Input = RadioInput;
-Radio.Label = RadioLabel;
+Radio.Label = FieldLabel;
diff --git a/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap b/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap
deleted file mode 100644
index 093acb75a..000000000
--- a/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap
+++ /dev/null
@@ -1,359 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Radio /> (v2) Checked story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        checked=""
-        class="radio__input"
-        id=":r1:"
-        name="option-checked"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r1:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        class="radio__input"
-        id=":r0:"
-        name="option-1"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r0:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) Disabled story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper input__wrapper--disabled"
-    >
-      <input
-        class="radio__input"
-        disabled=""
-        id=":r2:"
-        name="option-disabled"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        aria-disabled="true"
-        class="label label--lg label--disabled"
-        for=":r2:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) DisabledAndChecked story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper input__wrapper--disabled"
-    >
-      <input
-        checked=""
-        class="radio__input"
-        disabled=""
-        id=":r3:"
-        name="option-disabled"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        aria-disabled="true"
-        class="label label--lg label--disabled"
-        for=":r3:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) Error story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio radio--error"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        class="radio--error radio__input"
-        id=":r4:"
-        name="option-error"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r4:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) ErrorAndChecked story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio radio--error"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        checked=""
-        class="radio--error radio__input"
-        id=":r5:"
-        name="option-error"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r5:"
-      >
-        Option 1
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) LongLabels story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    style="display: grid; width: 20rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;"
-  >
-    <div
-      class="radio"
-    >
-      <span
-        class="input__wrapper"
-      >
-        <input
-          checked=""
-          class="radio__input"
-          id=":r8:"
-          name="option-long-label"
-          readonly=""
-          type="radio"
-        />
-        <span
-          class="radio__container"
-        />
-        <span
-          class="radio__selected"
-        />
-      </span>
-      <div
-        class="radio__labels"
-      >
-        <label
-          class="label label--lg"
-          for=":r8:"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) WithSublabel story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        class="radio__input"
-        id=":r6:"
-        name="option-1"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r6:"
-      >
-        Option 1
-      </label>
-      <span
-        class="text text--body-sm radio__sub-label"
-      >
-        Some additional label text
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Radio /> (v2) WithoutVisibleLabel story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper"
-    >
-      <input
-        aria-label="unchecked radio button"
-        class="radio__input"
-        id=":r7:"
-        name="option-1"
-        readonly=""
-        type="radio"
-      />
-      <span
-        class="radio__container"
-      />
-      <span
-        class="radio__selected"
-      />
-    </span>
-    <div
-      class="radio__labels"
-    >
-      <label
-        class="label label--lg"
-        for=":r7:"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
index 7cf9c52e7..3c4ff72b2 100644
--- a/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Radio /> Checked story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
     class="radio"
@@ -13,37 +13,35 @@ exports[`<Radio /> Checked story renders snapshot 1`] = `
       <input
         checked=""
         class="radio__input"
-        id=":r2:"
+        id=":r1:"
+        name="option-checked"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--lg radio__label radio__label--lg"
-      for=":r2:"
+    <div
+      class="radio__labels"
     >
-      Option 1
-    </label>
+      <label
+        class="label label--lg"
+        for=":r1:"
+      >
+        Option 1
+      </label>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> CheckedMedium story renders snapshot 1`] = `
+exports[`<Radio /> Default story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
     class="radio"
@@ -52,79 +50,76 @@ exports[`<Radio /> CheckedMedium story renders snapshot 1`] = `
       class="input__wrapper"
     >
       <input
-        checked=""
         class="radio__input"
-        id=":r3:"
+        id=":r0:"
+        name="option-1"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--md radio__label radio__label--md"
-      for=":r3:"
+    <div
+      class="radio__labels"
     >
-      Option 1
-    </label>
+      <label
+        class="label label--lg"
+        for=":r0:"
+      >
+        Option 1
+      </label>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> Default story renders snapshot 1`] = `
+exports[`<Radio /> Disabled story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
     class="radio"
   >
     <span
-      class="input__wrapper"
+      class="input__wrapper input__wrapper--disabled"
     >
       <input
         class="radio__input"
-        id=":r0:"
+        disabled=""
+        id=":r2:"
+        name="option-disabled"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--lg radio__label radio__label--lg"
-      for=":r0:"
+    <div
+      class="radio__labels"
     >
-      Option 1
-    </label>
+      <label
+        aria-disabled="true"
+        class="label label--lg label--disabled"
+        for=":r2:"
+      >
+        Option 1
+      </label>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> Disabled story renders snapshot 1`] = `
+exports[`<Radio /> DisabledAndChecked story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
     class="radio"
@@ -133,267 +128,159 @@ exports[`<Radio /> Disabled story renders snapshot 1`] = `
       class="input__wrapper input__wrapper--disabled"
     >
       <input
+        checked=""
         class="radio__input"
         disabled=""
-        id=":r4:"
+        id=":r3:"
+        name="option-disabled"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon radio__icon--disabled"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--lg label--disabled radio__label radio__label--lg"
-      for=":r4:"
+    <div
+      class="radio__labels"
     >
-      Option 1
-    </label>
+      <label
+        aria-disabled="true"
+        class="label label--lg label--disabled"
+        for=":r3:"
+      >
+        Option 1
+      </label>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> LongLabels story renders snapshot 1`] = `
+exports[`<Radio /> Error story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
-    style="display: grid; width: 20rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;"
+    class="radio radio--error"
   >
-    <div
-      class="radio"
-    >
-      <span
-        class="input__wrapper"
-      >
-        <input
-          class="radio__input"
-          id=":r9:"
-          readonly=""
-          type="radio"
-        />
-        <svg
-          aria-hidden="true"
-          class="icon radio__icon"
-          fill="currentColor"
-          height="1.625rem"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-          />
-        </svg>
-      </span>
-      <label
-        class="label label--lg radio__label radio__label--lg"
-        for=":r9:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-    <div
-      class="radio"
+    <span
+      class="input__wrapper"
     >
+      <input
+        class="radio--error radio__input"
+        id=":r4:"
+        name="option-error"
+        readonly=""
+        type="radio"
+      />
       <span
-        class="input__wrapper"
-      >
-        <input
-          class="radio__input"
-          id=":ra:"
-          readonly=""
-          type="radio"
-        />
-        <svg
-          aria-hidden="true"
-          class="icon radio__icon"
-          fill="currentColor"
-          height="1.625rem"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-          />
-        </svg>
-      </span>
-      <label
-        class="label label--md radio__label radio__label--md"
-        for=":ra:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
-    <div
-      class="radio"
-    >
+        class="radio__container"
+      />
       <span
-        class="input__wrapper input__wrapper--disabled"
-      >
-        <input
-          class="radio__input"
-          disabled=""
-          id=":rb:"
-          type="radio"
-        />
-        <svg
-          aria-hidden="true"
-          class="icon radio__icon radio__icon--disabled"
-          fill="currentColor"
-          height="1.625rem"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-          />
-        </svg>
-      </span>
-      <label
-        class="label label--lg label--disabled radio__label radio__label--lg"
-        for=":rb:"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </label>
-    </div>
+        class="radio__selected"
+      />
+    </span>
     <div
-      class="radio"
+      class="radio__labels"
     >
-      <span
-        class="input__wrapper input__wrapper--disabled"
-      >
-        <input
-          class="radio__input"
-          disabled=""
-          id=":rc:"
-          type="radio"
-        />
-        <svg
-          aria-hidden="true"
-          class="icon radio__icon radio__icon--disabled"
-          fill="currentColor"
-          height="1.625rem"
-          style="--icon-size: 1.625rem;"
-          viewBox="0 0 24 24"
-          width="1.625rem"
-          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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-          />
-        </svg>
-      </span>
       <label
-        class="label label--md label--disabled radio__label radio__label--md"
-        for=":rc:"
+        class="label label--lg"
+        for=":r4:"
       >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        Option 1
       </label>
     </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> Medium story renders snapshot 1`] = `
+exports[`<Radio /> ErrorAndChecked story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
-    class="radio"
+    class="radio radio--error"
   >
     <span
       class="input__wrapper"
     >
       <input
-        class="radio__input"
-        id=":r1:"
+        checked=""
+        class="radio--error radio__input"
+        id=":r5:"
+        name="option-error"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--md radio__label radio__label--md"
-      for=":r1:"
+    <div
+      class="radio__labels"
     >
-      Option 1
-    </label>
+      <label
+        class="label label--lg"
+        for=":r5:"
+      >
+        Option 1
+      </label>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> WithCustomPositioning story renders snapshot 1`] = `
+exports[`<Radio /> LongLabels story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
-    style="display: flex; align-items: center;"
+    style="display: grid; width: 20rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;"
   >
-    <label
-      class="label label--lg radio__label radio__label--lg"
-      for="test"
-    >
-      Label on Left
-    </label>
-    <span
-      class="input__wrapper"
+    <div
+      class="radio"
     >
-      <input
-        class="radio__input"
-        id="test"
-        readonly=""
-        type="radio"
-      />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="input__wrapper"
       >
-        <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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
+        <input
+          checked=""
+          class="radio__input"
+          id=":r8:"
+          name="option-long-label"
+          readonly=""
+          type="radio"
         />
-      </svg>
-    </span>
+        <span
+          class="radio__container"
+        />
+        <span
+          class="radio__selected"
+        />
+      </span>
+      <div
+        class="radio__labels"
+      >
+        <label
+          class="label label--lg"
+          for=":r8:"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </label>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<Radio /> WithoutVisibleLabel story renders snapshot 1`] = `
+exports[`<Radio /> WithSublabel story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="p-8"
 >
   <div
     class="radio"
@@ -402,132 +289,71 @@ exports[`<Radio /> WithoutVisibleLabel story renders snapshot 1`] = `
       class="input__wrapper"
     >
       <input
-        aria-label="unchecked radio"
         class="radio__input"
-        id=":r5:"
+        id=":r6:"
+        name="option-1"
         readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--lg radio__label radio__label--lg"
-      for=":r5:"
-    />
-  </div>
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper"
+    <div
+      class="radio__labels"
     >
-      <input
-        aria-label="checked radio"
-        checked=""
-        class="radio__input"
-        id=":r6:"
-        readonly=""
-        type="radio"
-      />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        xmlns="http://www.w3.org/2000/svg"
+      <label
+        class="label label--lg"
+        for=":r6:"
       >
-        <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
-    </span>
-    <label
-      class="label label--lg radio__label radio__label--lg"
-      for=":r6:"
-    />
+        Option 1
+      </label>
+      <span
+        class="text text--body-sm radio__sub-label"
+      >
+        Some additional label text
+      </span>
+    </div>
   </div>
+</div>
+`;
+
+exports[`<Radio /> WithoutVisibleLabel story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
   <div
     class="radio"
   >
     <span
-      class="input__wrapper input__wrapper--disabled"
+      class="input__wrapper"
     >
       <input
-        aria-label="unchecked disabled radio"
+        aria-label="unchecked radio button"
         class="radio__input"
-        disabled=""
         id=":r7:"
+        name="option-1"
+        readonly=""
         type="radio"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon radio__icon--disabled"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
+      <span
+        class="radio__container"
+      />
+      <span
+        class="radio__selected"
+      />
     </span>
-    <label
-      class="label label--lg label--disabled radio__label radio__label--lg"
-      for=":r7:"
-    />
-  </div>
-  <div
-    class="radio"
-  >
-    <span
-      class="input__wrapper input__wrapper--disabled"
+    <div
+      class="radio__labels"
     >
-      <input
-        aria-label="checked disabled radio"
-        checked=""
-        class="radio__input"
-        disabled=""
-        id=":r8:"
-        type="radio"
+      <label
+        class="label label--lg"
+        for=":r7:"
       />
-      <svg
-        aria-hidden="true"
-        class="icon radio__icon radio__icon--disabled"
-        fill="currentColor"
-        height="1.625rem"
-        style="--icon-size: 1.625rem;"
-        viewBox="0 0 24 24"
-        width="1.625rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z"
-        />
-      </svg>
-    </span>
-    <label
-      class="label label--lg label--disabled radio__label radio__label--lg"
-      for=":r8:"
-    />
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index ca30cf668..715486b14 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,2 +1 @@
 export { Radio as default } from './Radio';
-export { Radio as RadioV2 } from './Radio-v2';
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 0e4728760..d01986c69 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -78,7 +78,7 @@ const SearchButton = ({ className, ...other }: SearchButtonProps) => {
   const componentClassName = clsx(styles['search-button'], className);
 
   return (
-    <Button className={componentClassName} variant="primary" {...other}>
+    <Button className={componentClassName} rank="primary" {...other}>
       Search
     </Button>
   );
diff --git a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
index 468d77776..99bd9ba5f 100644
--- a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
+++ b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
@@ -8,10 +8,14 @@ exports[`<SearchField /> Custom story renders snapshot 1`] = `
     style="margin-bottom: 1rem;"
   >
     <button
-      class="button button--lg button--primary button--brand search-button"
+      class="button button--layout-none button--primary button--lg button--variant-default search-button"
       type="button"
     >
-      Search
+      <span
+        class="button__text"
+      >
+        Search
+      </span>
     </button>
     <div
       class="search-field"
@@ -68,10 +72,14 @@ exports[`<SearchField /> Custom story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="button button--lg button--primary button--brand search-button"
+      class="button button--layout-none button--primary button--lg button--variant-default search-button"
       type="button"
     >
-      Search
+      <span
+        class="button__text"
+      >
+        Search
+      </span>
     </button>
   </div>
 </div>
@@ -111,10 +119,14 @@ exports[`<SearchField /> Default story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="button button--lg button--primary button--brand search-button"
+      class="button button--layout-none button--primary button--lg button--variant-default search-button"
       type="button"
     >
-      Search
+      <span
+        class="button__text"
+      >
+        Search
+      </span>
     </button>
   </div>
 </div>
@@ -155,12 +167,15 @@ exports[`<SearchField /> Disabled story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="button button--lg button--primary button--brand button--disabled search-button"
+      class="button button--layout-none button--primary button--lg button--variant-default search-button"
       disabled=""
-      tabindex="-1"
       type="button"
     >
-      Search
+      <span
+        class="button__text"
+      >
+        Search
+      </span>
     </button>
   </div>
 </div>
@@ -171,10 +186,14 @@ exports[`<SearchField /> SearchButton story renders snapshot 1`] = `
   class="p-8"
 >
   <button
-    class="button button--lg button--primary button--brand search-button w-96"
+    class="button button--layout-none button--primary button--lg button--variant-default search-button w-96"
     type="button"
   >
-    Search
+    <span
+      class="button__text"
+    >
+      Search
+    </span>
   </button>
 </div>
 `;
diff --git a/src/components/Section/Section.stories.tsx b/src/components/Section/Section.stories.tsx
index 863ca2b7d..d39e168f3 100644
--- a/src/components/Section/Section.stories.tsx
+++ b/src/components/Section/Section.stories.tsx
@@ -22,7 +22,12 @@ export default {
 type Args = React.ComponentProps<typeof Section>;
 
 const HelpIcon = (
-  <Icon name="help" purpose="informative" size="1.375rem" title="help" />
+  <Icon
+    name="question-mark-encircled"
+    purpose="informative"
+    size="1.375rem"
+    title="help"
+  />
 );
 
 export const Default: StoryObj<Args> = {
@@ -65,7 +70,7 @@ export const WithOverline: StoryObj<Args> = {
 export const WithRight: StoryObj<Args> = {
   args: {
     right: (
-      <Button size="md" variant="primary">
+      <Button rank="primary" size="md">
         Button
       </Button>
     ),
diff --git a/src/components/Section/__snapshots__/Section.test.ts.snap b/src/components/Section/__snapshots__/Section.test.ts.snap
index 17ea52809..fbace5bc8 100644
--- a/src/components/Section/__snapshots__/Section.test.ts.snap
+++ b/src/components/Section/__snapshots__/Section.test.ts.snap
@@ -195,10 +195,14 @@ exports[`<Section /> WithRight story renders snapshot 1`] = `
         class="section__right"
       >
         <button
-          class="button button--md button--primary button--brand"
+          class="button button--layout-none button--primary button--md button--variant-default"
           type="button"
         >
-          Button
+          <span
+            class="button__text"
+          >
+            Button
+          </span>
         </button>
       </div>
     </header>
diff --git a/src/components/Select/Select-v2.module.css b/src/components/Select/Select-v2.module.css
deleted file mode 100644
index 6e7c04ada..000000000
--- a/src/components/Select/Select-v2.module.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # SELECT
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * Select field used to select one option from a list of options.
- */
-.select {
-  position: relative;
-}
-
-/**
- * Wraps the Label and the optional/required hint.
- */
-.select__overline {
-  display: flex;
-  margin-bottom: 0.25rem;
-  gap: 0.25rem;
-}
-
-.select__overline--no-label {
-  justify-content: flex-start;
-}
-
-/**
- * The container for the individual select options. 
- */
-.select__options {
-  max-height: 25vh;
-  z-index: 100;
-}
-
-.select--label-layout-vertical {
-  flex-direction: column;
-}
-
-.select--label-layout-horizontal {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-
-  gap: 0.5rem;
-}
-
-/**
- * The button to trigger the display of the select field.
- */
-.select-button {
-  font: var(--eds-theme-typography-form-input);
-
-  width: 100%;
-  padding: 0.5rem;
-
-  border: calc(var(--eds-border-width-sm) * 1px) solid;
-  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-
-  cursor: pointer;
-
-  color: var(--eds-theme-color-text-utility-default-primary);
-  background-color: var(--eds-theme-color-form-background);
-}
-
-/**
- * The caret icon to decorate the select trigger button, animated to rotate.
- */
-.select-button__icon {
-  flex-shrink: 0;
-  transform: rotate(0);
-
-  transition: transform calc(var(--eds-anim-move-medium) * 1s) ease-out;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.select-button__text--truncated {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.select-button__icon--reversed {
-  transform: rotate(180deg);
-}
-
-.select__footer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.select--has-fieldNote {
-  margin-bottom: 0.25rem;
-}
-
-
-/**
- * Label on top of the select trigger button to label the select field.
- */
-.select__label {
-  font: var(--eds-theme-typography-form-label);
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-.select__label--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
-
-.select__option {
-  color: var(--eds-theme-color-text-utility-interactive-secondary);
-}
-
-.select__option-text {
-  color: var(--eds-theme-color-text-utility-default-primary);
-}
-
-.select__required-text {
-  color: var(--eds-theme-color-text-utility-default-secondary);
-}
-
-.select-button:disabled {
-  cursor: not-allowed;
-
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-  border-color: var(--eds-theme-color-border-utility-disabled);
-  background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
-}
-
-.select-button:focus-visible {
-  border-color: var(--eds-theme-color-border-utility-focus);
-  outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-focus);
-}
-
-.select-button--error {
-  border-color: var(--eds-theme-color-border-utility-critical);
-
-  &:hover {
-    border-color: var(--eds-theme-color-border-utility-critical-hover);
-  }
-
-  &:focus-visible {
-    border-color: var(--eds-theme-color-border-utility-critical);
-    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-critical);
-  }
-}
-
-.select-button--warning {
-  border-color: var(--eds-theme-color-border-utility-warning);
-
-  &:hover {
-    border-color: var(--eds-theme-color-border-utility-warning-hover);
-  }
-
-  &:focus-visible {
-    border-color: var(--eds-theme-color-border-utility-warning);
-    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-warning);
-  }
-}
-
-.select__required-text--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
\ No newline at end of file
diff --git a/src/components/Select/Select-v2.stories.tsx b/src/components/Select/Select-v2.stories.tsx
deleted file mode 100644
index 97e5e13e1..000000000
--- a/src/components/Select/Select-v2.stories.tsx
+++ /dev/null
@@ -1,905 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { expect } from '@storybook/test';
-import { userEvent, within } from '@storybook/testing-library';
-import React from 'react';
-import { Select } from './Select-v2';
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/V2/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.2', 'current-2.0'],
-  },
-  argTypes: {
-    multiple: {
-      description: 'Whether multiple values are allowed in this instance',
-    },
-    children: {
-      control: {
-        type: null,
-      },
-    },
-    value: {
-      table: {
-        description: 'The value of the select field (when controlled)',
-      },
-    },
-    defaultValue: {
-      description: 'The default value of the select field (when uncontrolled)',
-    },
-    onClick: {
-      description:
-        'Optional click handler. Fires after `onChange`, when a value in the dropdown popover is picked',
-      table: {
-        type: {
-          summary: 'SyntheticEvent',
-          detail:
-            'See: https://react.dev/reference/react-dom/components/common#react-event-object',
-        },
-        default: 'void',
-      },
-    },
-    onChange: {
-      description:
-        'Optional change handler. Fires when a value is selected (and passes in list of selected values)',
-    },
-  },
-};
-
-export default meta;
-
-type SelectOption = {
-  key: string;
-  label: string;
-};
-
-const exampleOptions: SelectOption[] = [
-  {
-    key: '1',
-    label: 'Dogs',
-  },
-  {
-    key: '2',
-    label: 'Cats',
-  },
-  {
-    key: '3',
-    label: 'Birds',
-  },
-];
-
-/**
- * Play function to open a menu item
- */
-const openMenu: StoryObj['play'] = async (playOptions) => {
-  const { canvasElement } = playOptions;
-  const canvas = within(canvasElement);
-
-  // Open the dropdown.
-  const selectButton = await canvas.findByRole('button');
-  await userEvent.click(selectButton);
-};
-
-/**
- * Play function to use with interactive stories
- */
-const selectCat: StoryObj['play'] = async (playOptions) => {
-  const { canvasElement } = playOptions;
-  const canvas = within(canvasElement);
-  const selectButton = await canvas.findByRole('button');
-
-  await openMenu(playOptions);
-
-  // Target the body of the iframe since we now use PopperJS
-  const popoverCanvas = within(document.body);
-
-  const bestOption = await popoverCanvas.findByText('Cats');
-  await userEvent.click(bestOption);
-
-  // Reopen the dropdown; selecting an option closed it.
-  await userEvent.click(selectButton);
-};
-
-/**
- * The simplest and default case, using the options, button, and button wrapper.
- * This shows how to reflect the value in the button upon selection, and how to generate
- * a set of options from a list.
- *
- * **NOTE**: for select value data types, `{label: string}` is required, but any other key/value pairs are allowed.
- */
-export const Default: StoryObj = {
-  args: {
-    label: 'Favorite Animal',
-    'data-testid': 'dropdown',
-    defaultValue: exampleOptions[0],
-    name: 'select',
-    className: 'w-60',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open }) => (
-            <Select.ButtonWrapper isOpen={open}>
-              {value.label}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper
-        isOpen={open}
-      >
-        {value.label}
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-    {exampleOptions.map((option) => (
-      <Select.Option key={option.key} value={option}>
-        {option.label}
-      </Select.Option>
-    ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-export const HorizontalLabel: StoryObj = {
-  args: {
-    ...Default.args,
-    className: 'w-60',
-    labelLayout: 'horizontal',
-    label: 'Animal?',
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * Instead of a render prop for `Select.Button`, you can forego the render prop for the button and use static text instead.
- * This mode is also useful if you want to use a controlled component and manage state yourself.
- */
-export const WithStandardButton: StoryObj = {
-  args: {
-    label: 'Favorite Animal',
-    'data-testid': 'dropdown',
-    defaultValue: exampleOptions[0],
-    name: 'standard-button',
-    children: (
-      <>
-        <Select.Button>- Select Option -</Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-};
-
-/**
- * `Select` allows for event handlers to be added to the component.
- *
- * * `onChange` fires when a value is selected (with value of type `SelectOption`)
- *
- * You can also add an `onClick` handler to `.ButtonWrapper` if using a render prop
- *
- * * `onClick` fires when the trigger (`.ButtonWrapper`) is clicked
- */
-export const EventHandlingOnRenderProp: StoryObj = {
-  args: {
-    ...Default.args,
-    onChange: (args: SelectOption) => console.log('changed to', args),
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open }) => (
-            <Select.ButtonWrapper
-              isOpen={open}
-              onClick={(args) => console.log('custom click')}
-            >
-              {value.label}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select onChange={...}>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper
-        isOpen={open}
-        onClick={...}
-        >
-        {value.label}
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-    {exampleOptions.map((option) => (
-      <Select.Option key={option.key} value={option}>
-        {option.label}
-      </Select.Option>
-    ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-/**
- * `Select` allows for event handlers to be added to the component.
- *
- * * `onChange` fires when a value is selected (with value of type `SelectOption`)
- *
- * If not using a render prop, you can also add an `onClick` handler to `Select.Button` directly
- *
- * * `onClick` fires when the trigger (`.ButtonWrapper`) is clicked
- *
- * **NOTE**: `onClick` has no function when using a render prop
- */
-export const EventHandlingOnStandardButton: StoryObj = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <Select.Button
-          onClick={(ev: MouseEvent) => console.log('external click')}
-        >
-          - Select Option -
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-    onChange: (args: SelectOption) => console.log('external change', args),
-  },
-};
-
-/**
- * You can select a different option to show when rendered.
- */
-export const WithSelectedOption: StoryObj<typeof Select> = {
-  args: {
-    ...Default.args,
-    'aria-label': 'Favorite Animal',
-    defaultValue: exampleOptions[1],
-  },
-};
-
-/**
- * You can add a `name` prop to generate form fields for the value object.
- *
- * In this example, the field name is `"interactive-select"`, and the value is an object storing `{label: string, key: string}`.
- *
- * This will generate hidden fields with names:
- * * `interactive-select[label]`
- * * `interactive-select[key]`
- *
- */
-export const WithFieldName: StoryObj = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open}>
-              {value.label}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select onChange={...}>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper isOpen={open}>
-        {value.label}
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {exampleOptions.map((option) => (
-    <Select.Option key={option.key} value={option}>
-      {option.label}
-    </Select.Option>
-  ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-export const WithFieldNote: StoryObj = {
-  args: {
-    ...Default.args,
-    fieldNote: 'Choose your beast',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open}>
-              {value.label}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * You can implement a `Select.Button` with a render prop. This exposes several useful values to
- * control the appearance of the rendered button. The render prop case is "Headless", in that it has
- * no styling by default.
- */
-export const UncontrolledHeadless: StoryObj = {
-  args: {
-    'aria-label': 'some label',
-    'data-testid': 'dropdown',
-    defaultValue: exampleOptions[0],
-    name: 'select',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <button className="fpo">
-              {
-                {
-                  Birds: '🐦🦆🦜',
-                  Dogs: '🐶🐕🐩',
-                  Cats: '🐈🐱🐈‍⬛',
-                }[value.label as string]
-              }
-            </button>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select onChange={...}>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <button className="fpo">
-      {
-        {
-          Birds: '🐦🦆🦜',
-          Dogs: '🐶🐕🐩',
-          Cats: '🐈🐱🐈‍⬛',
-        }[value.label as string]
-      }
-      </button>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {exampleOptions.map((option) => (
-    <Select.Option key={option.key} value={option}>
-      {option.label}
-    </Select.Option>
-  ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-/**
- * You can use `Select.ButtonWrapper` to borrow the existing style used for controlled `Select` components.
- */
-export const StyledUncontrolled: StoryObj = {
-  args: {
-    'aria-label': 'some label',
-    'data-testid': 'dropdown',
-    defaultValue: exampleOptions[0],
-    name: 'select',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open}>
-              {value.label}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select onChange={...}>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper isOpen={open}>
-        {value.label}
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {exampleOptions.map((option) => (
-    <Select.Option key={option.key} value={option}>
-      {option.label}
-    </Select.Option>
-  ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-/**
- * You can select multiple values by passing `multiple` to the parent element. When doing this,
- * make sure all props that use the value (e.g., `value` and `defaultValue`) should use an array instead
- * of an object or value for the individual `Select.Option` entries.
- *
- * When handling the button text, `value` represents the data for all options selected. This allows for a flexible
- * layout to fit the needs of the design.
- *
- * Hidden form inputs are generated for each option selected and take the following form:
- * - `name[arrayIndex][key]`
- * - `name[arrayIndex][value]`
- */
-export const Multiple: StoryObj = {
-  args: {
-    ...Default.args,
-    label: 'Favorite Animal(s)',
-    multiple: true,
-    'data-testid': 'select-field',
-    defaultValue: [exampleOptions[0]],
-    className: 'w-60',
-    name: 'standard-button',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open}>
-              {value.length > 0 ? value.length : 'none'} selected
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select multiple>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper isOpen={open}>
-        {value.length > 0 ? value.length : 'none'} selected
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {exampleOptions.map((option) => (
-    <Select.Option key={option.key} value={option}>
-      {option.label}
-    </Select.Option>
-  ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-/**
- * The component provides some basic styles to handle long text in the provided field. Use
- * `shouldTruncate` on `.ButtonWrapper` to truncate the text with an ellipsis.
- */
-export const MultipleWithTruncation: StoryObj = {
-  args: {
-    ...Default.args,
-    label: 'Favorite Animal(s)',
-    multiple: true,
-    'data-testid': 'dropdown',
-    defaultValue: [exampleOptions[0]],
-    className: 'w-60',
-    name: 'standard-button',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open} shouldTruncate>
-              {value.length > 0 ? value.length : 'none'} long selected
-              description
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Select multiple>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper isOpen={open} shouldTruncate>
-        {value.length > 0 ? value.length : 'none'} long selected
-        description
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {exampleOptions.map((option) => (
-    <Select.Option key={option.key} value={option}>
-      {option.label}
-    </Select.Option>
-  ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-};
-
-/**
- * The field trigger width can be set with utility classes. By default, dropdown popover will exppand to match the width.
- */
-export const AdjustedWidth: StoryObj = {
-  args: {
-    ...Default.args,
-    className: 'w-60',
-  },
-};
-
-/**
- * We lock the maximum height of the option list to 1/4 of the available screen height. Scrolling is allowed in the list, and
- * keyboard navigation (showing the items off the edge of the screen) is handled when used.
- */
-export const LongOptionList: StoryObj = {
-  args: {
-    ...Default.args,
-    defaultValue: 'test3',
-    className: 'w-60',
-    children: (
-      <>
-        <Select.Button>
-          {({ value, open, disabled }) => (
-            <Select.ButtonWrapper isOpen={open} shouldTruncate>
-              {value}
-            </Select.ButtonWrapper>
-          )}
-        </Select.Button>
-        <Select.Options>
-          {Array(30)
-            .fill('test')
-            .map((option, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Select.Option key={`${option}-${index}`} value={option + index}>
-                {option}
-                {index}
-              </Select.Option>
-            ))}
-        </Select.Options>
-      </>
-    ),
-  },
-  play: async (playOptions) => {
-    const canvas = within(playOptions.canvasElement);
-    const selectButton = await canvas.findByRole('button');
-
-    await openMenu(playOptions);
-    await userEvent.keyboard('{ArrowDown}{ArrowDown}{ArrowDown}{ArrowDown}');
-
-    await expect(selectButton.getAttribute('aria-expanded')).toEqual('true');
-  },
-  parameters: {
-    badges: ['intro-1.2', 'current-2.0'],
-    layout: 'centered',
-    chromatic: { delay: 450 },
-    docs: {
-      source: {
-        code: `
-<Select onChange={...}>
-  <Select.Button>
-    {({ value, open, disabled }) => (
-      <Select.ButtonWrapper isOpen={open} shouldTruncate>
-        {value}
-      </Select.ButtonWrapper>
-    )}
-  </Select.Button>
-  <Select.Options>
-  {Array(30)
-    .fill('test')
-    .map((option, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
-        {option}
-        {index}
-      </Select.Option>
-    ))}
-  </Select.Options>
-</Select>`,
-      },
-    },
-  },
-  decorators: [(Story) => <div className="p-8 pb-16">{Story()}</div>],
-};
-
-/**
- * If you want a different width for the trigger and the dropdown popover, you can control them separately.
- */
-export const SeparateButtonAndMenuWidth: StoryObj = {
-  args: {
-    ...Default.args,
-    className: 'w-40',
-    optionsClassName: 'w-96',
-  },
-  play: selectCat,
-  parameters: {
-    chromatic: {
-      diffIncludeAntiAliasing: false,
-      diffThreshold: 0.72,
-    },
-    docs: {
-      ...Default.parameters?.docs,
-    },
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-/**
- * Each Select can be marked as disabled. This will update the visual treatment to indicate the field cannot be changed (but by default
- * will show the selected value).
- */
-export const Disabled: StoryObj = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      ...Default.parameters?.docs,
-    },
-  },
-};
-
-/**
- * Select fields can be marked as required by using the `required` prop.
- */
-export const Required: StoryObj = {
-  args: {
-    ...Default.args,
-    required: true,
-    showHint: true,
-    className: 'w-96',
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * Fields can be marked as optional by using `required` as false, but `showHint` as true.
- */
-export const Optional: StoryObj = {
-  args: {
-    ...Default.args,
-    required: false,
-    showHint: true,
-    className: 'w-96',
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * You can supply a warning field note by specifing the status of "error".
- */
-export const Error: StoryObj = {
-  args: {
-    ...Required.args,
-    status: 'critical',
-    fieldNote: 'Some text describing error',
-  },
-  parameters: {
-    ...Required.parameters,
-  },
-};
-
-/**
- * You can supply a warning field note by specifing the status of "warning".
- */
-export const Warning: StoryObj = {
-  args: {
-    ...Optional.args,
-    status: 'warning',
-    fieldNote: 'Some text describing warning',
-  },
-  parameters: {
-    ...Optional.parameters,
-  },
-};
-
-/**
- * Having a visible label is not necessary. In those cases, use `aria-label` to set a accessible label for the field
- */
-export const NoVisibleLabel: StoryObj = {
-  args: {
-    ...Default.args,
-    label: undefined,
-    'aria-label': 'hidden label',
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * No visible label is required. In such cases, you must use an equivalent label for accessibility, like `aria-label`.
- */
-export const NoVisibleLabelButRequired: StoryObj = {
-  args: {
-    ...Default.args,
-    label: undefined,
-    'aria-label': 'hidden label',
-    required: true,
-    className: 'w-96',
-  },
-  parameters: {
-    ...Default.parameters,
-  },
-};
-
-/**
- * `Select` can be both disabled and required.
- */
-export const DisabledRequired: StoryObj = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    required: true,
-    showHint: true,
-    className: 'w-96',
-  },
-  parameters: {
-    docs: {
-      ...Default.parameters?.docs,
-    },
-  },
-};
-
-/**
- * Options for each `Select` can be aligned on different sides of the target button. Options for `placement` defined by
- * PopperJS.
- *
- * More information: https://popper.js.org/docs/v2/constructors/#options
- */
-export const OptionsRightAligned: StoryObj = {
-  parameters: {
-    chromatic: {
-      delay: 300,
-    },
-    docs: {
-      ...Default.parameters?.docs,
-    },
-  },
-  args: {
-    ...Default.args,
-    className: 'w-60',
-    optionsClassName: 'w-96',
-    placement: 'bottom-end',
-  },
-  play: openMenu,
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-/**
- * This shows the contents of `Select` upon render. Mostly to demonstrate it is possible, to capture a snapshot of the appearance.
- */
-export const OpenByDefault: StoryObj = {
-  ...Default,
-  parameters: {
-    badges: ['intro-1.2', 'current-2.0'],
-    layout: 'centered',
-    chromatic: { delay: 300, disableSnapshot: true },
-    docs: {
-      ...Default.parameters?.docs,
-    },
-  },
-  play: selectCat,
-};
diff --git a/src/components/Select/Select-v2.test.tsx b/src/components/Select/Select-v2.test.tsx
deleted file mode 100644
index 3b8a05f8b..000000000
--- a/src/components/Select/Select-v2.test.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import { composeStory } from '@storybook/testing-react';
-import { screen, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { Select } from './Select-v2';
-import * as stories from './Select-v2.stories';
-
-const {
-  OpenByDefault,
-  LongOptionList,
-  Disabled,
-  DisabledRequired,
-  OptionsRightAligned,
-  SeparateButtonAndMenuWidth,
-  EventHandlingOnRenderProp,
-  EventHandlingOnStandardButton,
-  Multiple,
-  ...closedStories
-} = stories;
-
-const DisabledComponent = composeStory(Disabled, stories.default);
-
-const exampleOptions = [
-  {
-    key: '1',
-    label: 'Option 1',
-  },
-  {
-    key: '2',
-    label: 'Option 2',
-  },
-  {
-    key: '3',
-    label: 'Option 3',
-  },
-];
-
-describe('<Select />', () => {
-  describe('Generated Snapshots', () => {
-    generateSnapshots(closedStories, {
-      getElement: async () => {
-        const user = userEvent.setup();
-        const openButton = await screen.findByRole('button');
-        await user.click(openButton);
-        await screen.findAllByRole('option');
-        return screen.getByTestId('dropdown');
-      },
-    });
-  });
-
-  it('does not open a list when clicked and disabled', async () => {
-    const user = userEvent.setup();
-    render(<DisabledComponent />);
-
-    const openTrigger = await screen.findByRole('button');
-
-    await user.click(openTrigger);
-
-    // see if there are any options, which there should not be
-    expect(screen.queryByRole('option')).not.toBeInTheDocument();
-  });
-
-  it('throws an error if children is used without labeling', () => {
-    const dropdownWithChildrenAndLabelText = (
-      <Select
-        name="throwing-select"
-        onChange={() => undefined}
-        value={exampleOptions[0]}
-      >
-        <Select.Button>Select</Select.Button>
-
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </Select>
-    );
-    const renderMethod = () => {
-      render(dropdownWithChildrenAndLabelText);
-    };
-
-    // expect console error from react, suppressed.
-    const consoleErrorMock = jest.spyOn(console, 'error');
-    consoleErrorMock.mockImplementation();
-    expect(renderMethod).toThrow(Error);
-    consoleErrorMock.mockRestore();
-  });
-
-  it('does not throw an error if select uses <Select.Label>', () => {
-    const dropdownWithDropdownLabel = (
-      <Select
-        name="non-throwing-select"
-        onChange={() => undefined}
-        value={exampleOptions[0]}
-      >
-        <Select.Label>Options:</Select.Label>
-        <Select.Button>Select</Select.Button>
-
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </Select>
-    );
-    const renderMethod = () => {
-      render(dropdownWithDropdownLabel);
-    };
-
-    expect(renderMethod).not.toThrow(Error);
-  });
-
-  it('[GROUP-112] generates a hidden field when used in uncontrolled mode', () => {
-    const dropdownWithChildrenAndLabelText = (
-      <Select
-        aria-label="test"
-        data-testid="dropdown"
-        name="uncontrolled-select"
-        onChange={() => undefined}
-        value={exampleOptions[0]}
-      >
-        <Select.Button>Select</Select.Button>
-
-        <Select.Options>
-          {exampleOptions.map((option) => (
-            <Select.Option key={option.key} value={option}>
-              {option.label}
-            </Select.Option>
-          ))}
-        </Select.Options>
-      </Select>
-    );
-
-    const { container } = render(dropdownWithChildrenAndLabelText);
-
-    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelector(`input`)).toBeInTheDocument();
-  });
-
-  describe('event handling', () => {
-    it('handles click on .Button', async () => {
-      const clickHandler = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <Select
-          aria-label="test"
-          data-testid="dropdown"
-          name="uncontrolled-select"
-          onChange={() => undefined}
-          value={exampleOptions[0]}
-        >
-          <Select.Button onClick={clickHandler}>Select</Select.Button>
-
-          <Select.Options>
-            {exampleOptions.map((option) => (
-              <Select.Option key={option.key} value={option}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Options>
-        </Select>,
-      );
-
-      const openTrigger = await screen.findByRole('button');
-
-      await user.click(openTrigger);
-      expect(clickHandler).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles click on .ButtonWrapper when using render prop', async () => {
-      const clickHandler = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <Select
-          aria-label="test"
-          data-testid="dropdown"
-          name="uncontrolled-select"
-          onChange={() => undefined}
-          value={exampleOptions[0]}
-        >
-          <Select.Button>
-            {({ value, open }) => (
-              <Select.ButtonWrapper isOpen={open} onClick={clickHandler}>
-                {value.label}
-              </Select.ButtonWrapper>
-            )}
-          </Select.Button>
-
-          <Select.Options>
-            {exampleOptions.map((option) => (
-              <Select.Option key={option.key} value={option}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Options>
-        </Select>,
-      );
-
-      const openTrigger = await screen.findByRole('button');
-
-      await user.click(openTrigger);
-      expect(clickHandler).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles change on <Select/>', async () => {
-      const changeHandler = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <Select
-          aria-label="test"
-          data-testid="dropdown"
-          name="uncontrolled-select"
-          onChange={changeHandler}
-          value={exampleOptions[0]}
-        >
-          <Select.Button>Select</Select.Button>
-
-          <Select.Options>
-            {exampleOptions.map((option) => (
-              <Select.Option key={option.key} value={option}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Options>
-        </Select>,
-      );
-
-      const openTrigger = await screen.findByRole('button');
-
-      // It should only fire change once, after the value is actually modified
-      await user.click(openTrigger);
-      expect(changeHandler).toHaveBeenCalledTimes(0);
-
-      // pick the second item
-      await user.keyboard('{arrowdown}');
-      await user.keyboard('{enter}');
-
-      expect(changeHandler).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call change when <Select/> is picking the same item', async () => {
-      const changeHandler = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <Select
-          aria-label="test"
-          data-testid="dropdown"
-          name="uncontrolled-select"
-          onChange={changeHandler}
-          value={exampleOptions[0]}
-        >
-          <Select.Button>Select</Select.Button>
-
-          <Select.Options>
-            {exampleOptions.map((option) => (
-              <Select.Option key={option.key} value={option}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Options>
-        </Select>,
-      );
-
-      const openTrigger = await screen.findByRole('button');
-
-      // It should only fire change once, after the value is actually modified
-      await user.click(openTrigger);
-      expect(changeHandler).toHaveBeenCalledTimes(0);
-
-      // pick the same item
-      await user.keyboard('{enter}');
-
-      expect(changeHandler).toHaveBeenCalledTimes(0);
-    });
-  });
-});
diff --git a/src/components/Select/Select-v2.tsx b/src/components/Select/Select-v2.tsx
deleted file mode 100644
index b07cc48a9..000000000
--- a/src/components/Select/Select-v2.tsx
+++ /dev/null
@@ -1,537 +0,0 @@
-import { Listbox } from '@headlessui/react';
-import clsx from 'clsx';
-
-import React, {
-  useContext,
-  useState,
-  type ReactNode,
-  type MouseEventHandler,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-
-import type { ExtractProps } from '../../util/utility-types';
-import type { Status } from '../../util/variant-types';
-import FieldLabel from '../FieldLabel';
-import { FieldNoteV2 as FieldNote } from '../FieldNote';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import {
-  defaultPopoverModifiers,
-  PopoverContainerV2 as PopoverContainer,
-} from '../PopoverContainer';
-import type { PopoverContext, PopoverOptions } from '../PopoverContainer';
-import { PopoverListItemV2 as PopoverListItem } from '../PopoverListItem';
-import Text from '../Text';
-
-import styles from './Select-v2.module.css';
-
-type SelectProps = ExtractProps<typeof Listbox> &
-  PopoverOptions & {
-    // Component API
-    /**
-     * Screen-reader text for the select's label.
-     *
-     * When possible, use a visible label by passing a <Select.Label> into `children`.
-     * In rare cases where there's no visible label, you must provide an `aria-label` for screen readers.
-     * If you pass in an `aria-label`, <Select.Label>.
-     */
-    'aria-label'?: string;
-    /**
-     * Optional className for additional styling.
-     */
-    className?: string;
-    /**
-     * Name of the form element, which triggers the generation of hidden key/value form fields (e.g. `name=$name[$key]`).
-     *
-     * See: https://headlessui.com/react/listbox#using-with-html-forms
-     */
-    name?: string;
-    /**
-     * Optional className for additional options menu styling.
-     *
-     * When not using the compact variant, if optionsClassName is provided please
-     * include the width property to define the options menu width.
-     */
-    optionsClassName?: string;
-    /**
-     * Indicates that field is required for form to be successfully submitted
-     */
-    required?: boolean;
-    // Design API
-    /**
-     * Text under the text input used to provide a description or error message to describe the input.
-     */
-    fieldNote?: ReactNode;
-    /**
-     * Visible text label for the component.
-     */
-    label?: string;
-    /**
-     * Whether the label is adjacent to the field (horizontal) or above the field (vertical)
-     *
-     * **Default is `"vertical"`**.
-     */
-    labelLayout?: 'vertical' | 'horizontal';
-    /**
-     * Whether it should show the field hint or not
-     *
-     * **Default is `"false"`**.
-     */
-    showHint?: boolean;
-    /**
-     * Status for the field state
-     *
-     * **Default is `"default"`**.
-     */
-    status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-  };
-
-type SelectLabelProps = ExtractProps<typeof Listbox.Label> & {
-  disabled?: boolean;
-  required?: boolean;
-  showHint?: boolean;
-};
-type SelectOptionsProps = ExtractProps<typeof Listbox.Options>;
-type SelectOptionProps = ExtractProps<typeof Listbox.Option> & {
-  optionClassName?: string;
-};
-type SelectButtonProps = ExtractProps<typeof Listbox.Button> & {
-  // Design API
-  /**
-   * Icon override for component. Default is 'chevron-down'
-   */
-  icon?: Extract<IconName, 'chevron-down'>;
-  /**
-   * Indicates state of the select, used to style the button.
-   */
-  isOpen?: boolean;
-};
-
-type SelectButtonWrapperProps = {
-  // Component API
-  /**
-   * Text placed inside the button to describe the field.
-   */
-  children?: ReactNode;
-  /**
-   * Optional className for additional styling.
-   */
-  className?: string;
-  // Design API
-  /**
-   * Icon override for component. Default is 'chevron-down'
-   */
-  icon?: Extract<IconName, 'chevron-down'>;
-  /**
-   * Indicates state of the select, used to style the button.
-   */
-  isOpen?: boolean;
-  /**
-   * custom click handler for the built-in or wrapper button
-   */
-  onClick?: MouseEventHandler;
-  /**
-   * Whether we should truncate the text displayed in the select field
-   */
-  shouldTruncate?: boolean;
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' & Extract<Status, 'warning' | 'critical'>;
-};
-
-type SelectContextType = PopoverContext & {
-  optionsClassName?: string;
-  status?: SelectButtonWrapperProps['status'];
-};
-
-let showNameWarning = true;
-
-function childrenHaveLabelComponent(children?: ReactNode): boolean {
-  const childrenArray = React.Children.toArray(children);
-  return childrenArray.some((child) => {
-    if (typeof child === 'string' || typeof child === 'number') {
-      return false;
-    } else if (
-      'props' in child &&
-      child.type &&
-      typeof child.type !== 'string' &&
-      child.type?.name === 'SelectLabel'
-    ) {
-      return true;
-    } else if ('props' in child && child.props.children) {
-      return childrenHaveLabelComponent(child.props.children);
-    }
-    return false;
-  });
-}
-
-const SelectContext = React.createContext<SelectContextType>({});
-
-/**
- * `import {Select} from "@chanzuckerberg/eds";`
- *
- * A popover that reveals or hides a list of options from which to select
- *
- * Supports controlled and uncontrolled behavior, using a render prop in the latter case.
- *
- */
-export function Select({
-  'aria-label': ariaLabel,
-  children,
-  className,
-  disabled,
-  fieldNote,
-  id,
-  label,
-  labelLayout = 'vertical',
-  modifiers = defaultPopoverModifiers,
-  name,
-  onFirstUpdate,
-  optionsClassName,
-  placement = 'bottom-start',
-  required,
-  showHint,
-  status,
-  strategy,
-  onChange: theirOnChange,
-  ...other
-}: SelectProps) {
-  if (process.env.NODE_ENV !== 'production') {
-    const childrenHaveLabel =
-      children && childrenHaveLabelComponent(children as ReactNode);
-    if (!ariaLabel && !label && !childrenHaveLabel) {
-      throw new Error('You must provide a visible label or `aria-label`.');
-    }
-    if (!name && showNameWarning) {
-      console.warn(
-        "%c`Select` won't render a form field unless you include a `name` prop.\n\n See https://headlessui.com/react/listbox#using-with-html-forms for more information",
-        'font-weight: bold',
-      );
-      showNameWarning = false;
-    }
-  }
-
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const { styles: popperStyles, attributes: popperAttributes } = usePopper(
-    referenceElement,
-    popperElement,
-    { placement, modifiers, strategy, onFirstUpdate },
-  );
-
-  // Create a new value to track the internal state of Listbox. Added to work around
-  // behavior inherited from HeadlessUI where it will fire onChange even if there is no change
-  // Adding to support behavior synced to how <select> tags work
-  const [selectedValue, setSelectedValue] = useState(
-    other.value !== undefined ? other.value : other.defaultValue,
-  );
-
-  const componentClassName = clsx(
-    styles['select'],
-    fieldNote && styles['select--has-fieldNote'],
-    labelLayout && styles[`select--label-layout-${labelLayout}`],
-    className,
-  );
-  const sharedProps = {
-    className: componentClassName,
-    // Provide a wrapping <div> element for the select. This is needed so that any props
-    // passed directly to this component have a corresponding DOM element to receive them.
-    // Otherwise we get an error.
-    as: 'div' as const,
-    disabled,
-    name,
-    ...other,
-  };
-
-  const contextValue = Object.assign(
-    {},
-    optionsClassName ? { optionsClassName } : null,
-    { setReferenceElement },
-    { setPopperElement },
-    { popperStyles: popperStyles.popper },
-    { popperAttributes: popperAttributes.popper },
-    { status },
-  );
-
-  if (typeof children === 'function') {
-    return (
-      <SelectContext.Provider value={contextValue}>
-        <Listbox
-          {...sharedProps}
-          // We prefer to pass the aria-label in via an invisible SelectLabel, but we can't
-          // easily pass down function children with component children, so we'll settle for
-          // using a standard aria-label in this case.
-          aria-label={ariaLabel}
-        >
-          {children}
-        </Listbox>
-      </SelectContext.Provider>
-    );
-  }
-
-  return (
-    <SelectContext.Provider value={contextValue}>
-      <Listbox
-        {...sharedProps}
-        onChange={(changedValue) => {
-          if (selectedValue !== changedValue) {
-            setSelectedValue(changedValue);
-            // Use the value from the event because updates to `useState` are queued
-            theirOnChange && theirOnChange(changedValue);
-          }
-        }}
-      >
-        {(label || required) && (
-          <Select.Label
-            disabled={disabled}
-            required={required}
-            showHint={showHint}
-          >
-            {label}
-          </Select.Label>
-        )}
-        {children}
-      </Listbox>
-      {fieldNote && (
-        <div className={styles['select__footer']}>
-          <FieldNote disabled={disabled} status={status}>
-            {fieldNote}
-          </FieldNote>
-        </div>
-      )}
-    </SelectContext.Provider>
-  );
-}
-
-const SelectLabel = ({
-  children: label,
-  required,
-  className,
-  disabled,
-  showHint,
-}: SelectLabelProps) => {
-  const componentClassName = clsx(
-    styles['select__label'],
-    disabled && clsx(styles['select__label--disabled']),
-    className,
-  );
-
-  const requiredTextClassName = clsx(
-    styles['select__required-text'],
-    disabled && styles['select__required-text--disabled'],
-  );
-
-  const overlineClassName = clsx(
-    styles['select__overline'],
-    !label && styles['select__overline--no-label'],
-  );
-
-  return (
-    <div className={overlineClassName}>
-      <Listbox.Label
-        as={FieldLabel}
-        className={componentClassName}
-        disabled={disabled}
-      >
-        {label}
-      </Listbox.Label>
-      {required && showHint && (
-        <Text
-          aria-disabled={disabled ?? undefined}
-          as="span"
-          className={requiredTextClassName}
-          preset="body-sm"
-        >
-          (Required)
-        </Text>
-      )}
-      {!required && showHint && (
-        <Text
-          aria-disabled={disabled ?? undefined}
-          as="span"
-          className={requiredTextClassName}
-          preset="body-sm"
-        >
-          (Optional)
-        </Text>
-      )}
-    </div>
-  );
-};
-
-/**
- * The trigger for the select component, which is usually a form of `Button` or some targetable/clickable component
- */
-const SelectButton = function (props: SelectButtonProps) {
-  const { children, className, onClick: theirOnClick, ...other } = props;
-  const { setReferenceElement, status } = useContext(SelectContext);
-  return (
-    <Listbox.Button
-      // Render as a fragment instead of the default element. We're rendering our own element in
-      // the render prop to control styling and positiong, and we don't want to end up with
-      // duplicate buttons.
-      as={React.Fragment}
-      ref={setReferenceElement}
-      {...other}
-    >
-      {(renderProps) => {
-        return typeof children === 'function' ? (
-          children(renderProps)
-        ) : (
-          <SelectButtonWrapper
-            className={className}
-            isOpen={renderProps.open}
-            onClick={(event) => {
-              theirOnClick && theirOnClick(event);
-            }}
-            status={status}
-          >
-            {children}
-          </SelectButtonWrapper>
-        );
-      }}
-    </Listbox.Button>
-  );
-};
-
-/**
- * The content container showing the available options when the trigger is activated
- */
-const SelectOptions = function (props: SelectOptionsProps) {
-  const { className, ...other } = props;
-  const { optionsClassName, setPopperElement, popperStyles, popperAttributes } =
-    useContext(SelectContext);
-
-  const componentClassName = clsx(
-    styles['select__options'],
-    className,
-    optionsClassName,
-  );
-
-  const optionProps = {
-    as: PopoverContainer,
-    className: componentClassName,
-    ref: setPopperElement,
-    style: popperStyles,
-    ...popperAttributes,
-    ...other,
-  };
-  if (typeof document !== 'undefined') {
-    return (
-      <>{createPortal(<Listbox.Options {...optionProps} />, document.body)}</>
-    );
-  }
-  return null;
-};
-
-/**
- * Represents one of the available options for selection
- */
-const SelectOption = function (props: SelectOptionProps) {
-  const { children, className, optionClassName, ...other } = props;
-
-  const optionItemClassName = clsx(optionClassName, styles['select__option']);
-
-  return (
-    <Listbox.Option
-      // Render as a fragment instead of the default <li>. We're rendering our own <li> in the
-      // render prop to control active/selected styling, and we don't want to end up with duplicate
-      // <li>'s.
-      as={React.Fragment}
-      {...other}
-    >
-      {typeof children === 'function'
-        ? children
-        : ({ active, disabled, selected }) => {
-            return (
-              <PopoverListItem
-                className={optionItemClassName}
-                icon={selected ? 'check' : undefined}
-                isDisabled={disabled}
-                isFocused={active}
-              >
-                <span className={styles['select__option-text']}>
-                  {children}
-                </span>
-              </PopoverListItem>
-            );
-          }}
-    </Listbox.Option>
-  );
-};
-
-/**
- * The component functioning as a styling for the trigger, selection arrow, and space to
- * show the current value.
- */
-export const SelectButtonWrapper = React.forwardRef<
-  HTMLButtonElement,
-  SelectButtonWrapperProps
->(
-  (
-    {
-      children,
-      className,
-      icon = 'chevron-down',
-      isOpen,
-      onClick: theirOnClick,
-      shouldTruncate = false,
-      ...other
-    },
-    ref,
-  ) => {
-    const { status } = useContext(SelectContext);
-
-    const componentClassName = clsx(
-      styles['select-button'],
-      status === 'warning' && styles['select-button--warning'],
-      status === 'critical' && styles['select-button--error'],
-      className,
-    );
-    const iconClassName = clsx(
-      styles['select-button__icon'],
-      isOpen && styles['select-button__icon--reversed'],
-    );
-    const textClassName = clsx(
-      shouldTruncate && styles['select-button__text--truncated'],
-    );
-
-    return (
-      <button
-        className={componentClassName}
-        onClick={(ev) => {
-          theirOnClick && theirOnClick(ev);
-        }}
-        ref={ref}
-        type="button"
-        {...other}
-      >
-        {/* Wrapping span ensures that `children` and icon will be correctly pushed to
-            either side of the button even if `children` contains more than one element. */}
-        <span className={textClassName}>{children}</span>
-        <Icon
-          className={iconClassName}
-          name={icon}
-          purpose="decorative"
-          size="1.5rem"
-        />
-      </button>
-    );
-  },
-);
-
-Select.displayName = 'Select';
-SelectButton.displayName = 'Select.Button';
-SelectButtonWrapper.displayName = 'Select.ButtonWrapper';
-SelectLabel.displayName = 'Select.Label';
-SelectOption.displayName = 'Select.Option';
-SelectOptions.displayName = 'Select.Options';
-
-Select.Button = SelectButton;
-Select.ButtonWrapper = SelectButtonWrapper;
-Select.Label = SelectLabel;
-Select.Option = SelectOption;
-Select.Options = SelectOptions;
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
index 92ee64568..3532a994f 100644
--- a/src/components/Select/Select.module.css
+++ b/src/components/Select/Select.module.css
@@ -3,6 +3,9 @@
 /*------------------------------------*\
     # SELECT
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * Select field used to select one option from a list of options.
@@ -12,29 +15,16 @@
 }
 
 /**
- * Label on top of the select trigger button to label the select field.
- */
-.select__label {
-  font: var(--eds-theme-typography-form-label);
-  display: inline-block;
-}
-
-.select__label--disabled {
-  color: var(--eds-theme-color-text-disabled);
-}
-
-/**
- * Wraps the Label and the optional/required indicator.
+ * Wraps the Label and the optional/required hint.
  */
 .select__overline {
   display: flex;
-  justify-content: space-between;
   margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
-  color: var(--eds-theme-color-form-label);
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .select__overline--no-label {
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 /**
@@ -45,62 +35,39 @@
   z-index: 100;
 }
 
-.select__option-text {
-  color: var(--eds-theme-color-text-neutral-default);
-}
-
-.select__option-item {
-  color: var(--eds-theme-color-icon-brand-primary);
+.select--label-layout-vertical {
+  flex-direction: column;
 }
 
-.select__required-text {
-  color: var(--eds-theme-color-text-neutral-subtle);
-  font: var(--eds-theme-typography-body-sm);
-}
+.select--label-layout-horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
 
-.select__required-text--disabled {
-  color: var(--eds-theme-color-text-disabled);
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 }
 
-/*------------------------------------*\
-    # SELECT BUTTON
-\*------------------------------------*/
-
 /**
  * The button to trigger the display of the select field.
  */
 .select-button {
-  font: var(--eds-theme-typography-body-md);
-  /* Allow select component font to shrink in contexts where body font size is smaller. */
-  font-size: inherit;
-  color: var(--eds-theme-color-text-neutral-subtle);
+  font: var(--eds-theme-typography-form-input);
 
-  height: calc(var(--eds-size-5) / 16 * 1rem);
   width: 100%;
-  padding: 0 calc(var(--eds-size-2) / 16 * 1rem);
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
 
-  border: calc(var(--eds-theme-border-width) * 1px) solid var(--eds-theme-color-form-border);
-  border-radius: calc(var(--eds-border-radius-md) * 1px);
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
   display: flex;
-  /* Place button text on the left and the expand more icon on the right. */
   justify-content: space-between;
   align-items: center;
-  gap: 0.75rem;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
 
   cursor: pointer;
 
+  color: var(--eds-theme-color-text-utility-default-primary);
   background-color: var(--eds-theme-color-form-background);
-
-  &:focus-visible {
-    @mixin focus;
-    border-color: var(--eds-theme-color-focus-ring);
-  }
-}
-
-.select-button:disabled {
-  cursor: not-allowed;
-  color: var(--eds-theme-color-text-disabled);
 }
 
 /**
@@ -111,8 +78,8 @@
   transform: rotate(0);
 
   transition: transform calc(var(--eds-anim-move-medium) * 1s) ease-out;
+
   @media (prefers-reduced-motion) {
-    /* Turns off animation if user prefers reduced motion. */
     transition: none;
   }
 }
@@ -126,3 +93,80 @@
 .select-button__icon--reversed {
   transform: rotate(180deg);
 }
+
+.select__footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.select--has-fieldNote {
+  margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
+}
+
+
+/**
+ * Label on top of the select trigger button to label the select field.
+ */
+.select__label {
+  font: var(--eds-theme-typography-form-label);
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.select__label--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
+}
+
+.select__option {
+  color: var(--eds-theme-color-text-utility-interactive-secondary);
+}
+
+.select__option-text {
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.select__required-text {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.select-button:disabled {
+  cursor: not-allowed;
+
+  color: var(--eds-theme-color-text-utility-disabled-primary);
+  border-color: var(--eds-theme-color-border-utility-disabled);
+  background-color: var(--eds-theme-color-background-utility-disabled-low-emphasis);
+}
+
+.select-button:focus-visible {
+  border-color: var(--eds-theme-color-border-utility-focus);
+  outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-focus);
+}
+
+.select-button--error {
+  border-color: var(--eds-theme-color-border-utility-critical);
+
+  &:hover {
+    border-color: var(--eds-theme-color-border-utility-critical-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--eds-theme-color-border-utility-critical);
+    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-critical);
+  }
+}
+
+.select-button--warning {
+  border-color: var(--eds-theme-color-border-utility-warning);
+
+  &:hover {
+    border-color: var(--eds-theme-color-border-utility-warning-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--eds-theme-color-border-utility-warning);
+    outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-warning);
+  }
+}
+
+.select__required-text--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
+}
\ No newline at end of file
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 800186c2e..2d47e364a 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -3,14 +3,13 @@ import { expect } from '@storybook/test';
 import { userEvent, within } from '@storybook/testing-library';
 import React from 'react';
 import { Select } from './Select';
-import Icon from '../Icon';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
   component: Select,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
   },
   argTypes: {
     multiple: {
@@ -115,6 +114,7 @@ export const Default: StoryObj = {
     'data-testid': 'dropdown',
     defaultValue: exampleOptions[0],
     name: 'select',
+    className: 'w-60',
     children: (
       <>
         <Select.Button>
@@ -161,6 +161,18 @@ export const Default: StoryObj = {
   },
 };
 
+export const HorizontalLabel: StoryObj = {
+  args: {
+    ...Default.args,
+    className: 'w-60',
+    labelLayout: 'horizontal',
+    label: 'Animal?',
+  },
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
 /**
  * Instead of a render prop for `Select.Button`, you can forego the render prop for the button and use static text instead.
  * This mode is also useful if you want to use a controlled component and manage state yourself.
@@ -351,6 +363,34 @@ export const WithFieldName: StoryObj = {
   },
 };
 
+export const WithFieldNote: StoryObj = {
+  args: {
+    ...Default.args,
+    fieldNote: 'Choose your beast',
+    children: (
+      <>
+        <Select.Button>
+          {({ value, open, disabled }) => (
+            <Select.ButtonWrapper isOpen={open}>
+              {value.label}
+            </Select.ButtonWrapper>
+          )}
+        </Select.Button>
+        <Select.Options>
+          {exampleOptions.map((option) => (
+            <Select.Option key={option.key} value={option}>
+              {option.label}
+            </Select.Option>
+          ))}
+        </Select.Options>
+      </>
+    ),
+  },
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
 /**
  * You can implement a `Select.Button` with a render prop. This exposes several useful values to
  * control the appearance of the rendered button. The render prop case is "Headless", in that it has
@@ -366,7 +406,15 @@ export const UncontrolledHeadless: StoryObj = {
       <>
         <Select.Button>
           {({ value, open, disabled }) => (
-            <button className="fpo">{value.label}</button>
+            <button className="fpo">
+              {
+                {
+                  Birds: '🐦🦆🦜',
+                  Dogs: '🐶🐕🐩',
+                  Cats: '🐈🐱🐈‍⬛',
+                }[value.label as string]
+              }
+            </button>
           )}
         </Select.Button>
         <Select.Options>
@@ -386,7 +434,15 @@ export const UncontrolledHeadless: StoryObj = {
 <Select onChange={...}>
   <Select.Button>
     {({ value, open, disabled }) => (
-      <button className="fpo">{value.label}</button>
+      <button className="fpo">
+      {
+        {
+          Birds: '🐦🦆🦜',
+          Dogs: '🐶🐕🐩',
+          Cats: '🐈🐱🐈‍⬛',
+        }[value.label as string]
+      }
+      </button>
     )}
   </Select.Button>
   <Select.Options>
@@ -472,7 +528,7 @@ export const Multiple: StoryObj = {
     ...Default.args,
     label: 'Favorite Animal(s)',
     multiple: true,
-    'data-testid': 'dropdown',
+    'data-testid': 'select-field',
     defaultValue: [exampleOptions[0]],
     className: 'w-60',
     name: 'standard-button',
@@ -631,7 +687,7 @@ export const LongOptionList: StoryObj = {
     await expect(selectButton.getAttribute('aria-expanded')).toEqual('true');
   },
   parameters: {
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
     layout: 'centered',
     chromatic: { delay: 450 },
     docs: {
@@ -649,6 +705,7 @@ export const LongOptionList: StoryObj = {
   {Array(30)
     .fill('test')
     .map((option, index) => (
+      // eslint-disable-next-line react/no-array-index-key
       <Select.Option key={\`$\{option}-$\{index}\`} value={option + index}>
         {option}
         {index}
@@ -677,6 +734,9 @@ export const SeparateButtonAndMenuWidth: StoryObj = {
       diffIncludeAntiAliasing: false,
       diffThreshold: 0.72,
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
@@ -691,18 +751,68 @@ export const Disabled: StoryObj = {
     disabled: true,
   },
   parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
+    docs: {
+      ...Default.parameters?.docs,
     },
   },
 };
 
+/**
+ * Select fields can be marked as required by using the `required` prop.
+ */
 export const Required: StoryObj = {
   args: {
     ...Default.args,
     required: true,
+    showHint: true,
     className: 'w-96',
   },
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
+/**
+ * Fields can be marked as optional by using `required` as false, but `showHint` as true.
+ */
+export const Optional: StoryObj = {
+  args: {
+    ...Default.args,
+    required: false,
+    showHint: true,
+    className: 'w-96',
+  },
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
+/**
+ * You can supply a warning field note by specifing the status of "error".
+ */
+export const Error: StoryObj = {
+  args: {
+    ...Required.args,
+    status: 'critical',
+    fieldNote: 'Some text describing error',
+  },
+  parameters: {
+    ...Required.parameters,
+  },
+};
+
+/**
+ * You can supply a warning field note by specifing the status of "warning".
+ */
+export const Warning: StoryObj = {
+  args: {
+    ...Optional.args,
+    status: 'warning',
+    fieldNote: 'Some text describing warning',
+  },
+  parameters: {
+    ...Optional.parameters,
+  },
 };
 
 /**
@@ -714,8 +824,14 @@ export const NoVisibleLabel: StoryObj = {
     label: undefined,
     'aria-label': 'hidden label',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * No visible label is required. In such cases, you must use an equivalent label for accessibility, like `aria-label`.
+ */
 export const NoVisibleLabelButRequired: StoryObj = {
   args: {
     ...Default.args,
@@ -724,18 +840,25 @@ export const NoVisibleLabelButRequired: StoryObj = {
     required: true,
     className: 'w-96',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * `Select` can be both disabled and required.
+ */
 export const DisabledRequired: StoryObj = {
   args: {
     ...Default.args,
     disabled: true,
     required: true,
+    showHint: true,
     className: 'w-96',
   },
   parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
+    docs: {
+      ...Default.parameters?.docs,
     },
   },
 };
@@ -751,6 +874,9 @@ export const OptionsRightAligned: StoryObj = {
     chromatic: {
       delay: 300,
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   args: {
     ...Default.args,
@@ -762,69 +888,18 @@ export const OptionsRightAligned: StoryObj = {
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
 
-/**
- * As an alternative rendering method, you can use several types of render props for fine-grained control of the button rendering, and
- * the rendering of the list itself. Here, we use a render prop to control the contents of `Select`
- *
- * For more information on `Select` render props, review: https://headlessui.com/react/listbox#using-render-props
- */
-export const UsingFunctionProps: StoryObj = {
-  render: () => {
-    const [selectedOption, setSelectedOption] =
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useState<(typeof exampleOptions)[0]>();
-
-    return (
-      <Select
-        aria-label="Favorite Animal"
-        as="div"
-        data-testid="dropdown"
-        name="interactive-with-children"
-        onChange={setSelectedOption}
-        value={selectedOption}
-      >
-        {({ open }) => (
-          <>
-            <Select.Button
-              // Because we're using a render prop to completely control the styling and icon of the
-              // button, we need to configure this component to render as a Fragment. Otherwise we'd
-              // render two, nested buttons.
-              as={React.Fragment}
-            >
-              {() => (
-                <button aria-expanded={open} className="fpo">
-                  {selectedOption?.label || 'Select'}
-                  <Icon
-                    className="ml-4"
-                    name="filter-list"
-                    purpose="decorative"
-                  />
-                </button>
-              )}
-            </Select.Button>
-            <Select.Options>
-              {exampleOptions.map((option) => (
-                <Select.Option key={option.key} value={option}>
-                  {option.label}
-                </Select.Option>
-              ))}
-            </Select.Options>
-          </>
-        )}
-      </Select>
-    );
-  },
-};
-
 /**
  * This shows the contents of `Select` upon render. Mostly to demonstrate it is possible, to capture a snapshot of the appearance.
  */
 export const OpenByDefault: StoryObj = {
   ...Default,
   parameters: {
-    badges: ['intro-1.2'],
+    badges: ['intro-1.2', 'current-2.0'],
     layout: 'centered',
     chromatic: { delay: 300, disableSnapshot: true },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   play: selectCat,
 };
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 8193f6547..6060ece64 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -15,6 +15,7 @@ const {
   SeparateButtonAndMenuWidth,
   EventHandlingOnRenderProp,
   EventHandlingOnStandardButton,
+  Multiple,
   ...closedStories
 } = stories;
 
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 33ca00494..0cbf871cb 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,24 +1,33 @@
 import { Listbox } from '@headlessui/react';
 import clsx from 'clsx';
-import type { ReactNode, MouseEventHandler } from 'react';
 
-import React, { useContext, useState } from 'react';
+import React, {
+  useContext,
+  useState,
+  type ReactNode,
+  type MouseEventHandler,
+} from 'react';
 import { createPortal } from 'react-dom';
-
 import { usePopper } from 'react-popper';
-import type { ExtractProps } from '../../util/utility-types';
 
+import type { ExtractProps } from '../../util/utility-types';
+import type { Status } from '../../util/variant-types';
+import FieldLabel from '../FieldLabel';
+import FieldNote from '../FieldNote';
 import Icon, { type IconName } from '../Icon';
-
-import PopoverContainer, { defaultPopoverModifiers } from '../PopoverContainer';
+import {
+  defaultPopoverModifiers,
+  PopoverContainerV2 as PopoverContainer,
+} from '../PopoverContainer';
 import type { PopoverContext, PopoverOptions } from '../PopoverContainer';
-
 import PopoverListItem from '../PopoverListItem';
 import Text from '../Text';
+
 import styles from './Select.module.css';
 
 type SelectProps = ExtractProps<typeof Listbox> &
   PopoverOptions & {
+    // Component API
     /**
      * Screen-reader text for the select's label.
      *
@@ -44,29 +53,54 @@ type SelectProps = ExtractProps<typeof Listbox> &
      * include the width property to define the options menu width.
      */
     optionsClassName?: string;
+    /**
+     * Indicates that field is required for form to be successfully submitted
+     */
+    required?: boolean;
+    // Design API
+    /**
+     * Text under the text input used to provide a description or error message to describe the input.
+     */
+    fieldNote?: ReactNode;
     /**
      * Visible text label for the component.
      */
     label?: string;
     /**
-     * Indicates that field is required for form to be successfully submitted
+     * Whether the label is adjacent to the field (horizontal) or above the field (vertical)
+     *
+     * **Default is `"vertical"`**.
      */
-    required?: boolean;
+    labelLayout?: 'vertical' | 'horizontal';
+    /**
+     * Whether it should show the field hint or not
+     *
+     * **Default is `"false"`**.
+     */
+    showHint?: boolean;
+    /**
+     * Status for the field state
+     *
+     * **Default is `"default"`**.
+     */
+    status?: 'default' | Extract<Status, 'warning' | 'critical'>;
   };
 
 type SelectLabelProps = ExtractProps<typeof Listbox.Label> & {
   disabled?: boolean;
   required?: boolean;
+  showHint?: boolean;
 };
 type SelectOptionsProps = ExtractProps<typeof Listbox.Options>;
 type SelectOptionProps = ExtractProps<typeof Listbox.Option> & {
   optionClassName?: string;
 };
 type SelectButtonProps = ExtractProps<typeof Listbox.Button> & {
+  // Design API
   /**
-   * Icon override for component. Default is 'expand-more'
+   * Icon override for component. Default is 'chevron-down'
    */
-  icon?: Extract<IconName, 'expand-more'>;
+  icon?: Extract<IconName, 'chevron-down'>;
   /**
    * Indicates state of the select, used to style the button.
    */
@@ -74,18 +108,20 @@ type SelectButtonProps = ExtractProps<typeof Listbox.Button> & {
 };
 
 type SelectButtonWrapperProps = {
-  /**
-   * Optional className for additional styling.
-   */
-  className?: string;
+  // Component API
   /**
    * Text placed inside the button to describe the field.
    */
   children?: ReactNode;
   /**
-   * Icon override for component. Default is 'expand-more'
+   * Optional className for additional styling.
+   */
+  className?: string;
+  // Design API
+  /**
+   * Icon override for component. Default is 'chevron-down'
    */
-  icon?: Extract<IconName, 'expand-more'>;
+  icon?: Extract<IconName, 'chevron-down'>;
   /**
    * Indicates state of the select, used to style the button.
    */
@@ -98,10 +134,17 @@ type SelectButtonWrapperProps = {
    * Whether we should truncate the text displayed in the select field
    */
   shouldTruncate?: boolean;
+  /**
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
+   */
+  status?: 'default' & Extract<Status, 'warning' | 'critical'>;
 };
 
 type SelectContextType = PopoverContext & {
   optionsClassName?: string;
+  status?: SelectButtonWrapperProps['status'];
 };
 
 let showNameWarning = true;
@@ -135,27 +178,31 @@ const SelectContext = React.createContext<SelectContextType>({});
  * Supports controlled and uncontrolled behavior, using a render prop in the latter case.
  *
  */
-export function Select(props: SelectProps) {
-  const {
-    'aria-label': ariaLabel,
-    children,
-    className,
-    label,
-    modifiers = defaultPopoverModifiers,
-    name,
-    onFirstUpdate,
-    optionsClassName,
-    placement = 'bottom-start',
-    required,
-    strategy,
-    onChange: theirOnChange,
-    ...other
-  } = props;
-
+export function Select({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  disabled,
+  fieldNote,
+  id,
+  label,
+  labelLayout = 'vertical',
+  modifiers = defaultPopoverModifiers,
+  name,
+  onFirstUpdate,
+  optionsClassName,
+  placement = 'bottom-start',
+  required,
+  showHint,
+  status,
+  strategy,
+  onChange: theirOnChange,
+  ...other
+}: SelectProps) {
   if (process.env.NODE_ENV !== 'production') {
     const childrenHaveLabel =
       children && childrenHaveLabelComponent(children as ReactNode);
-    if (!props['aria-label'] && !props.label && !childrenHaveLabel) {
+    if (!ariaLabel && !label && !childrenHaveLabel) {
       throw new Error('You must provide a visible label or `aria-label`.');
     }
     if (!name && showNameWarning) {
@@ -182,13 +229,19 @@ export function Select(props: SelectProps) {
     other.value !== undefined ? other.value : other.defaultValue,
   );
 
-  const componentClassName = clsx(styles['select'], className);
+  const componentClassName = clsx(
+    styles['select'],
+    fieldNote && styles['select--has-fieldNote'],
+    labelLayout && styles[`select--label-layout-${labelLayout}`],
+    className,
+  );
   const sharedProps = {
     className: componentClassName,
     // Provide a wrapping <div> element for the select. This is needed so that any props
     // passed directly to this component have a corresponding DOM element to receive them.
     // Otherwise we get an error.
     as: 'div' as const,
+    disabled,
     name,
     ...other,
   };
@@ -200,6 +253,7 @@ export function Select(props: SelectProps) {
     { setPopperElement },
     { popperStyles: popperStyles.popper },
     { popperAttributes: popperAttributes.popper },
+    { status },
   );
 
   if (typeof children === 'function') {
@@ -231,19 +285,34 @@ export function Select(props: SelectProps) {
         }}
       >
         {(label || required) && (
-          <Select.Label disabled={props.disabled} required={required}>
+          <Select.Label
+            disabled={disabled}
+            required={required}
+            showHint={showHint}
+          >
             {label}
           </Select.Label>
         )}
         {children}
       </Listbox>
+      {fieldNote && (
+        <div className={styles['select__footer']}>
+          <FieldNote disabled={disabled} status={status}>
+            {fieldNote}
+          </FieldNote>
+        </div>
+      )}
     </SelectContext.Provider>
   );
 }
 
-const SelectLabel = (props: SelectLabelProps) => {
-  const { children: label, required, className, disabled } = props;
-
+const SelectLabel = ({
+  children: label,
+  required,
+  className,
+  disabled,
+  showHint,
+}: SelectLabelProps) => {
   const componentClassName = clsx(
     styles['select__label'],
     disabled && clsx(styles['select__label--disabled']),
@@ -262,10 +331,31 @@ const SelectLabel = (props: SelectLabelProps) => {
 
   return (
     <div className={overlineClassName}>
-      <Listbox.Label className={componentClassName}>{label}</Listbox.Label>
-      {required && (
-        <Text as="span" className={requiredTextClassName} preset="body-sm">
-          Required
+      <Listbox.Label
+        as={FieldLabel}
+        className={componentClassName}
+        disabled={disabled}
+      >
+        {label}
+      </Listbox.Label>
+      {required && showHint && (
+        <Text
+          aria-disabled={disabled ?? undefined}
+          as="span"
+          className={requiredTextClassName}
+          preset="body-sm"
+        >
+          (Required)
+        </Text>
+      )}
+      {!required && showHint && (
+        <Text
+          aria-disabled={disabled ?? undefined}
+          as="span"
+          className={requiredTextClassName}
+          preset="body-sm"
+        >
+          (Optional)
         </Text>
       )}
     </div>
@@ -277,8 +367,7 @@ const SelectLabel = (props: SelectLabelProps) => {
  */
 const SelectButton = function (props: SelectButtonProps) {
   const { children, className, onClick: theirOnClick, ...other } = props;
-  const { setReferenceElement } = useContext(SelectContext);
-
+  const { setReferenceElement, status } = useContext(SelectContext);
   return (
     <Listbox.Button
       // Render as a fragment instead of the default element. We're rendering our own element in
@@ -298,6 +387,7 @@ const SelectButton = function (props: SelectButtonProps) {
             onClick={(event) => {
               theirOnClick && theirOnClick(event);
             }}
+            status={status}
           >
             {children}
           </SelectButtonWrapper>
@@ -342,7 +432,8 @@ const SelectOptions = function (props: SelectOptionsProps) {
  */
 const SelectOption = function (props: SelectOptionProps) {
   const { children, className, optionClassName, ...other } = props;
-  const optionClasses = clsx(styles['select__option-item'], optionClassName);
+
+  const optionItemClassName = clsx(optionClassName, styles['select__option']);
 
   return (
     <Listbox.Option
@@ -357,10 +448,10 @@ const SelectOption = function (props: SelectOptionProps) {
         : ({ active, disabled, selected }) => {
             return (
               <PopoverListItem
-                active={active}
-                className={optionClasses}
-                disabled={disabled}
+                className={optionItemClassName}
                 icon={selected ? 'check' : undefined}
+                isDisabled={disabled}
+                isFocused={active}
               >
                 <span className={styles['select__option-text']}>
                   {children}
@@ -384,15 +475,22 @@ export const SelectButtonWrapper = React.forwardRef<
     {
       children,
       className,
-      icon = 'expand-more',
+      icon = 'chevron-down',
       isOpen,
-      shouldTruncate = false,
       onClick: theirOnClick,
+      shouldTruncate = false,
       ...other
     },
     ref,
   ) => {
-    const componentClassName = clsx(styles['select-button'], className);
+    const { status } = useContext(SelectContext);
+
+    const componentClassName = clsx(
+      styles['select-button'],
+      status === 'warning' && styles['select-button--warning'],
+      status === 'critical' && styles['select-button--error'],
+      className,
+    );
     const iconClassName = clsx(
       styles['select-button__icon'],
       isOpen && styles['select-button__icon--reversed'],
@@ -418,7 +516,7 @@ export const SelectButtonWrapper = React.forwardRef<
           className={iconClassName}
           name={icon}
           purpose="decorative"
-          size="1.25rem"
+          size="1.5rem"
         />
       </button>
     );
diff --git a/src/components/Select/__snapshots__/Select-v2.test.tsx.snap b/src/components/Select/__snapshots__/Select-v2.test.tsx.snap
deleted file mode 100644
index ca6729601..000000000
--- a/src/components/Select/__snapshots__/Select-v2.test.tsx.snap
+++ /dev/null
@@ -1,766 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1k:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r1m:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1k: headlessui-listbox-button-:r1l:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1l:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r0:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r2:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r0: headlessui-listbox-button-:r1:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots Error story renders snapshot 1`] = `
-<div
-  class="select select--has-fieldNote select--label-layout-vertical w-96"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r26:"
-    >
-      Favorite Animal
-    </label>
-    <span
-      class="text text--body-sm select__required-text"
-    >
-      (Required)
-    </span>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r28:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r26: headlessui-listbox-button-:r27:"
-    class="select-button select-button--error"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r27:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots HorizontalLabel story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-horizontal w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r6:"
-    >
-      Animal?
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r8:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r6: headlessui-listbox-button-:r7:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r7:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1e:"
-    >
-      Favorite Animal(s)
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r1g:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1e: headlessui-listbox-button-:r1f:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1f:"
-    type="button"
-  >
-    <span
-      class="select-button__text--truncated"
-    >
-      1
-       long selected description
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <button
-    aria-controls="headlessui-listbox-options-:r2j:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2i:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-96"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline select__overline--no-label"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r2n:"
-    />
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r2p:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r2n: headlessui-listbox-button-:r2o:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2o:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots Optional story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-96"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r20:"
-    >
-      Favorite Animal
-    </label>
-    <span
-      class="text text--body-sm select__required-text"
-    >
-      (Optional)
-    </span>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r22:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r20: headlessui-listbox-button-:r21:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r21:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-96"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1q:"
-    >
-      Favorite Animal
-    </label>
-    <span
-      class="text text--body-sm select__required-text"
-    >
-      (Required)
-    </span>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r1s:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1q: headlessui-listbox-button-:r1r:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1r:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <button
-    aria-controls="headlessui-listbox-options-:r1a:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r19:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots UncontrolledHeadless story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <button
-    aria-controls="headlessui-listbox-options-:r15:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    class="fpo"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r14:"
-    type="button"
-  >
-    🐶🐕🐩
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots Warning story renders snapshot 1`] = `
-<div
-  class="select select--has-fieldNote select--label-layout-vertical w-96"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:r2c:"
-    >
-      Favorite Animal
-    </label>
-    <span
-      class="text text--body-sm select__required-text"
-    >
-      (Optional)
-    </span>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r2e:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r2c: headlessui-listbox-button-:r2d:"
-    class="select-button select-button--warning"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2d:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:ro:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:rq:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:ro: headlessui-listbox-button-:rp:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:rp:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots WithFieldNote story renders snapshot 1`] = `
-<div
-  class="select select--has-fieldNote select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:ru:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:r10:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:ru: headlessui-listbox-button-:rv:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:rv:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dogs
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical w-60"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:ri:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:rk:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:ri: headlessui-listbox-button-:rj:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:rj:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Cats
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots WithStandardButton story renders snapshot 1`] = `
-<div
-  class="select select--label-layout-vertical"
-  data-headlessui-state="open"
-  data-testid="dropdown"
->
-  <div
-    class="select__overline"
-  >
-    <label
-      class="label label--lg select__label"
-      data-headlessui-state="open"
-      id="headlessui-listbox-label-:rc:"
-    >
-      Favorite Animal
-    </label>
-  </div>
-  <button
-    aria-controls="headlessui-listbox-options-:re:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:rc: headlessui-listbox-button-:rd:"
-    class="select-button"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:rd:"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      - Select Option -
-    </span>
-    <svg
-      aria-hidden="true"
-      class="icon select-button__icon select-button__icon--reversed"
-      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-      />
-    </svg>
-  </button>
-</div>
-`;
diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap
index 03bf2c40c..ca6729601 100644
--- a/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`] = `
 <div
-  class="select w-60"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -10,21 +10,21 @@ exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`]
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1e:"
+      id="headlessui-listbox-label-:r1k:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r1g:"
+    aria-controls="headlessui-listbox-options-:r1m:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1e: headlessui-listbox-button-:r1f:"
+    aria-labelledby="headlessui-listbox-label-:r1k: headlessui-listbox-button-:r1l:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1f:"
+    id="headlessui-listbox-button-:r1l:"
     type="button"
   >
     <span
@@ -36,10 +36,10 @@ exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`]
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -52,7 +52,7 @@ exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`]
 
 exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -60,7 +60,7 @@ exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
       id="headlessui-listbox-label-:r0:"
     >
@@ -86,10 +86,10 @@ exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -100,9 +100,9 @@ exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Select /> Generated Snapshots Multiple story renders snapshot 1`] = `
+exports[`<Select /> Generated Snapshots Error story renders snapshot 1`] = `
 <div
-  class="select w-60"
+  class="select select--has-fieldNote select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -110,37 +110,91 @@ exports[`<Select /> Generated Snapshots Multiple story renders snapshot 1`] = `
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r12:"
+      id="headlessui-listbox-label-:r26:"
     >
-      Favorite Animal(s)
+      Favorite Animal
+    </label>
+    <span
+      class="text text--body-sm select__required-text"
+    >
+      (Required)
+    </span>
+  </div>
+  <button
+    aria-controls="headlessui-listbox-options-:r28:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-labelledby="headlessui-listbox-label-:r26: headlessui-listbox-button-:r27:"
+    class="select-button select-button--error"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:r27:"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dogs
+    </span>
+    <svg
+      aria-hidden="true"
+      class="icon select-button__icon select-button__icon--reversed"
+      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<Select /> Generated Snapshots HorizontalLabel story renders snapshot 1`] = `
+<div
+  class="select select--label-layout-horizontal w-60"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+>
+  <div
+    class="select__overline"
+  >
+    <label
+      class="label label--lg select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:r6:"
+    >
+      Animal?
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r14:"
+    aria-controls="headlessui-listbox-options-:r8:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r12: headlessui-listbox-button-:r13:"
+    aria-labelledby="headlessui-listbox-label-:r6: headlessui-listbox-button-:r7:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r13:"
+    id="headlessui-listbox-button-:r7:"
     type="button"
   >
     <span
       class=""
     >
-      1
-       selected
+      Dogs
     </span>
     <svg
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -153,7 +207,7 @@ exports[`<Select /> Generated Snapshots Multiple story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders snapshot 1`] = `
 <div
-  class="select w-60"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -161,21 +215,21 @@ exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders sna
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r18:"
+      id="headlessui-listbox-label-:r1e:"
     >
       Favorite Animal(s)
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r1a:"
+    aria-controls="headlessui-listbox-options-:r1g:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r18: headlessui-listbox-button-:r19:"
+    aria-labelledby="headlessui-listbox-label-:r1e: headlessui-listbox-button-:r1f:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r19:"
+    id="headlessui-listbox-button-:r1f:"
     type="button"
   >
     <span
@@ -188,10 +242,10 @@ exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders sna
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -204,17 +258,17 @@ exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders sna
 
 exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
   <button
-    aria-controls="headlessui-listbox-options-:r1r:"
+    aria-controls="headlessui-listbox-options-:r2j:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1q:"
+    id="headlessui-listbox-button-:r2i:"
     type="button"
   >
     <span
@@ -226,10 +280,10 @@ exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -242,7 +296,7 @@ exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`
 
 exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders snapshot 1`] = `
 <div
-  class="select w-96"
+  class="select select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -250,24 +304,74 @@ exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders
     class="select__overline select__overline--no-label"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1v:"
+      id="headlessui-listbox-label-:r2n:"
     />
+  </div>
+  <button
+    aria-controls="headlessui-listbox-options-:r2p:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-labelledby="headlessui-listbox-label-:r2n: headlessui-listbox-button-:r2o:"
+    class="select-button"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:r2o:"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dogs
+    </span>
+    <svg
+      aria-hidden="true"
+      class="icon select-button__icon select-button__icon--reversed"
+      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="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<Select /> Generated Snapshots Optional story renders snapshot 1`] = `
+<div
+  class="select select--label-layout-vertical w-96"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+>
+  <div
+    class="select__overline"
+  >
+    <label
+      class="label label--lg select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:r20:"
+    >
+      Favorite Animal
+    </label>
     <span
       class="text text--body-sm select__required-text"
     >
-      Required
+      (Optional)
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r21:"
+    aria-controls="headlessui-listbox-options-:r22:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1v: headlessui-listbox-button-:r20:"
+    aria-labelledby="headlessui-listbox-label-:r20: headlessui-listbox-button-:r21:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r20:"
+    id="headlessui-listbox-button-:r21:"
     type="button"
   >
     <span
@@ -279,10 +383,10 @@ exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -295,7 +399,7 @@ exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders
 
 exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
 <div
-  class="select w-96"
+  class="select select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -303,26 +407,26 @@ exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r1k:"
+      id="headlessui-listbox-label-:r1q:"
     >
       Favorite Animal
     </label>
     <span
       class="text text--body-sm select__required-text"
     >
-      Required
+      (Required)
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r1m:"
+    aria-controls="headlessui-listbox-options-:r1s:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1k: headlessui-listbox-button-:r1l:"
+    aria-labelledby="headlessui-listbox-label-:r1q: headlessui-listbox-button-:r1r:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1l:"
+    id="headlessui-listbox-button-:r1r:"
     type="button"
   >
     <span
@@ -334,10 +438,10 @@ exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -350,17 +454,17 @@ exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
   <button
-    aria-controls="headlessui-listbox-options-:ru:"
+    aria-controls="headlessui-listbox-options-:r1a:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:rt:"
+    id="headlessui-listbox-button-:r19:"
     type="button"
   >
     <span
@@ -372,10 +476,10 @@ exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapsho
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -388,50 +492,73 @@ exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapsho
 
 exports[`<Select /> Generated Snapshots UncontrolledHeadless story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
   <button
-    aria-controls="headlessui-listbox-options-:rp:"
+    aria-controls="headlessui-listbox-options-:r15:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="fpo"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:ro:"
+    id="headlessui-listbox-button-:r14:"
     type="button"
   >
-    Dogs
+    🐶🐕🐩
   </button>
 </div>
 `;
 
-exports[`<Select /> Generated Snapshots UsingFunctionProps story renders snapshot 1`] = `
+exports[`<Select /> Generated Snapshots Warning story renders snapshot 1`] = `
 <div
-  aria-label="Favorite Animal"
-  class="select"
+  class="select select--has-fieldNote select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
+  <div
+    class="select__overline"
+  >
+    <label
+      class="label label--lg select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:r2c:"
+    >
+      Favorite Animal
+    </label>
+    <span
+      class="text text--body-sm select__required-text"
+    >
+      (Optional)
+    </span>
+  </div>
   <button
-    aria-controls="headlessui-listbox-options-:r26:"
+    aria-controls="headlessui-listbox-options-:r2e:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    class="fpo"
+    aria-labelledby="headlessui-listbox-label-:r2c: headlessui-listbox-button-:r2d:"
+    class="select-button select-button--warning"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r25:"
+    id="headlessui-listbox-button-:r2d:"
     type="button"
   >
-    Select
+    <span
+      class=""
+    >
+      Dogs
+    </span>
     <svg
       aria-hidden="true"
-      class="icon ml-4"
+      class="icon select-button__icon select-button__icon--reversed"
       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"
+        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
       />
     </svg>
   </button>
@@ -440,7 +567,7 @@ exports[`<Select /> Generated Snapshots UsingFunctionProps story renders snapsho
 
 exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -448,21 +575,21 @@ exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`]
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:ri:"
+      id="headlessui-listbox-label-:ro:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:rk:"
+    aria-controls="headlessui-listbox-options-:rq:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:ri: headlessui-listbox-button-:rj:"
+    aria-labelledby="headlessui-listbox-label-:ro: headlessui-listbox-button-:rp:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:rj:"
+    id="headlessui-listbox-button-:rp:"
     type="button"
   >
     <span
@@ -474,10 +601,60 @@ exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`]
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<Select /> Generated Snapshots WithFieldNote story renders snapshot 1`] = `
+<div
+  class="select select--has-fieldNote select--label-layout-vertical w-60"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+>
+  <div
+    class="select__overline"
+  >
+    <label
+      class="label label--lg select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:ru:"
+    >
+      Favorite Animal
+    </label>
+  </div>
+  <button
+    aria-controls="headlessui-listbox-options-:r10:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-labelledby="headlessui-listbox-label-:ru: headlessui-listbox-button-:rv:"
+    class="select-button"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:rv:"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dogs
+    </span>
+    <svg
+      aria-hidden="true"
+      class="icon select-button__icon select-button__icon--reversed"
+      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
@@ -490,7 +667,7 @@ exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`]
 
 exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -498,21 +675,21 @@ exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapsho
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:rc:"
+      id="headlessui-listbox-label-:ri:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:re:"
+    aria-controls="headlessui-listbox-options-:rk:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:rc: headlessui-listbox-button-:rd:"
+    aria-labelledby="headlessui-listbox-label-:ri: headlessui-listbox-button-:rj:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:rd:"
+    id="headlessui-listbox-button-:rj:"
     type="button"
   >
     <span
@@ -524,10 +701,10 @@ exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapsho
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -540,7 +717,7 @@ exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapsho
 
 exports[`<Select /> Generated Snapshots WithStandardButton story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
 >
@@ -548,21 +725,21 @@ exports[`<Select /> Generated Snapshots WithStandardButton story renders snapsho
     class="select__overline"
   >
     <label
-      class="select__label"
+      class="label label--lg select__label"
       data-headlessui-state="open"
-      id="headlessui-listbox-label-:r6:"
+      id="headlessui-listbox-label-:rc:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r8:"
+    aria-controls="headlessui-listbox-options-:re:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r6: headlessui-listbox-button-:r7:"
+    aria-labelledby="headlessui-listbox-label-:rc: headlessui-listbox-button-:rd:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r7:"
+    id="headlessui-listbox-button-:rd:"
     type="button"
   >
     <span
@@ -574,10 +751,10 @@ exports[`<Select /> Generated Snapshots WithStandardButton story renders snapsho
       aria-hidden="true"
       class="icon select-button__icon select-button__icon--reversed"
       fill="currentColor"
-      height="1.25rem"
-      style="--icon-size: 1.25rem;"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
       viewBox="0 0 24 24"
-      width="1.25rem"
+      width="1.5rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 5671b425a..b7cf7418b 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,2 +1 @@
 export { Select as default } from './Select';
-export { Select as SelectV2 } from './Select-v2';
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 0337424f4..1d602ba5a 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -242,8 +242,7 @@ export const UsingControlButtons: Story = {
           aria-label="Decrement"
           disabled={sliderValue === min}
           onClick={() => setSliderValue(Math.max(min, sliderValue - 1))}
-          status="neutral"
-          variant="secondary"
+          rank="secondary"
         >
           &ndash;
         </Button>
@@ -263,8 +262,7 @@ export const UsingControlButtons: Story = {
           aria-label="Increment"
           disabled={sliderValue === max}
           onClick={() => setSliderValue(Math.min(max, sliderValue + 1))}
-          status="neutral"
-          variant="secondary"
+          rank="secondary"
         >
           +
         </Button>
diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
index db9639e34..4624ad938 100644
--- a/src/components/Slider/__snapshots__/Slider.test.tsx.snap
+++ b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -409,10 +409,14 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
   >
     <button
       aria-label="Decrement"
-      class="button button--lg button--secondary button--neutral"
+      class="button button--layout-none button--secondary button--lg button--variant-default"
       type="button"
     >
-      –
+      <span
+        class="button__text"
+      >
+        –
+      </span>
     </button>
     <p
       class="text text--body-md"
@@ -444,10 +448,14 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
     </p>
     <button
       aria-label="Increment"
-      class="button button--lg button--secondary button--neutral"
+      class="button button--layout-none button--secondary button--lg button--variant-default"
       type="button"
     >
-      +
+      <span
+        class="button__text"
+      >
+        +
+      </span>
     </button>
   </div>
 </div>
diff --git a/src/components/TabGroup/TabGroup.stories.tsx b/src/components/TabGroup/TabGroup.stories.tsx
index ad2e7f3b5..5afb36bb7 100644
--- a/src/components/TabGroup/TabGroup.stories.tsx
+++ b/src/components/TabGroup/TabGroup.stories.tsx
@@ -8,7 +8,7 @@ import Heading from '../Heading';
 import Text from '../Text';
 
 export default {
-  title: 'Components/V2/TabGroup',
+  title: 'Components/TabGroup',
   component: TabGroup,
   parameters: {
     layout: 'centered',
diff --git a/src/components/TabGroup/TabGroup.tsx b/src/components/TabGroup/TabGroup.tsx
index 7d5190546..b7555902b 100644
--- a/src/components/TabGroup/TabGroup.tsx
+++ b/src/components/TabGroup/TabGroup.tsx
@@ -20,7 +20,7 @@ import {
 import { useId } from '../../util/useId';
 import type { RenderProps } from '../../util/utility-types';
 import type { Align } from '../../util/variant-types';
-import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
+import Icon, { type IconName } from '../Icon';
 
 import styles from './TabGroup.module.css';
 
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 9d9b55195..7ba86dd6b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import Button from '../Button';
-import Icon, { type IconName } from '../Icon';
+import { type IconName } from '../Icon';
 import styles from './Table.module.css';
 
 type TableBodyProps = {
@@ -75,11 +75,11 @@ type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement> & {
    */
   className?: string;
 };
-type TableHeaderCellProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+type TableHeaderCellProps = React.HTMLAttributes<HTMLTableCellElement> & {
   /**
    * Child node(s) that can be nested inside component
    */
-  children?: ReactNode;
+  children?: string;
   /**
    * CSS class names that can be appended to the component.
    */
@@ -220,10 +220,10 @@ const TableHeaderCell = ({
 
   const icon: IconName =
     sortDirection === 'ascending'
-      ? 'arrow-narrow-up'
+      ? 'arrow-up'
       : sortDirection === 'descending'
-        ? 'arrow-narrow-down'
-        : 'unfold-more';
+        ? 'arrow-down'
+        : 'arrows-circular';
 
   const iconTitle =
     sortDirection === 'ascending'
@@ -245,16 +245,12 @@ const TableHeaderCell = ({
       {sortDirection ? (
         <Button
           className={clsx(styles['table-header-cell__sort-button'])}
+          icon={icon}
+          iconLayout="icon-only"
           onClick={onSortClick}
-          variant="link"
+          title={iconTitle}
         >
           {children}
-          <Icon
-            name={icon}
-            purpose="informative"
-            size="1rem"
-            title={iconTitle}
-          />
         </Button>
       ) : (
         children
diff --git a/src/components/Table/__snapshots__/Table.test.ts.snap b/src/components/Table/__snapshots__/Table.test.ts.snap
index e7cdae52a..e8917b32d 100644
--- a/src/components/Table/__snapshots__/Table.test.ts.snap
+++ b/src/components/Table/__snapshots__/Table.test.ts.snap
@@ -168,27 +168,28 @@ exports[`<Table /> SortableInteractive story renders snapshot 1`] = `
         class="table-header-cell"
       >
         <button
-          class="button button--link button--brand table-header-cell__sort-button"
+          class="button button--layout-icon-only button--primary button--lg button--variant-default table-header-cell__sort-button"
+          title="Sort"
           type="button"
         >
-          Sortable
-          <svg
-            class="icon"
-            fill="currentColor"
-            height="1rem"
-            role="img"
-            style="--icon-size: 1rem;"
-            viewBox="0 0 24 24"
-            width="1rem"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="button__text"
           >
-            <title>
-              Sort
-            </title>
-            <path
-              d="M12 5.83l2.46 2.46c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 3.7c-.39-.39-1.02-.39-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 5.83zm0 12.34l-2.46-2.46c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L12 18.17z"
-            />
-          </svg>
+            <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="M6 12.0498C6 12.3331 6.02083 12.6081 6.0625 12.8748C6.10417 13.1415 6.16667 13.4081 6.25 13.6748C6.33333 13.9581 6.34167 14.2456 6.275 14.5373C6.20833 14.829 6.06667 15.0831 5.85 15.2998C5.66667 15.4831 5.44583 15.5665 5.1875 15.5498C4.92917 15.5331 4.75 15.4081 4.65 15.1748C4.43333 14.6748 4.27083 14.1623 4.1625 13.6373C4.05417 13.1123 4 12.5831 4 12.0498C4 9.81647 4.775 7.91647 6.325 6.3498C7.875 4.78314 9.76667 3.9998 12 3.9998H12.175L11.275 3.0998C11.0917 2.91647 11 2.68314 11 2.3998C11 2.11647 11.0917 1.88314 11.275 1.6998C11.4583 1.51647 11.6917 1.4248 11.975 1.4248C12.2583 1.4248 12.4917 1.51647 12.675 1.6998L15.275 4.2998C15.475 4.4998 15.575 4.73314 15.575 4.9998C15.575 5.26647 15.475 5.4998 15.275 5.6998L12.675 8.2998C12.4917 8.48314 12.2583 8.5748 11.975 8.5748C11.6917 8.5748 11.4583 8.48314 11.275 8.2998C11.0917 8.11647 11 7.88314 11 7.5998C11 7.31647 11.0917 7.08314 11.275 6.8998L12.175 5.9998H12C10.3333 5.9998 8.91667 6.5873 7.75 7.7623C6.58333 8.9373 6 10.3665 6 12.0498ZM18 11.9498C18 11.6665 17.9792 11.3915 17.9375 11.1248C17.8958 10.8581 17.8333 10.5915 17.75 10.3248C17.6667 10.0415 17.6583 9.75397 17.725 9.46231C17.7917 9.17064 17.9333 8.91647 18.15 8.6998C18.3333 8.51647 18.5542 8.43314 18.8125 8.4498C19.0708 8.46647 19.25 8.59147 19.35 8.8248C19.5667 9.3248 19.7292 9.83731 19.8375 10.3623C19.9458 10.8873 20 11.4165 20 11.9498C20 14.1831 19.225 16.0831 17.675 17.6498C16.125 19.2165 14.2333 19.9998 12 19.9998H11.825L12.725 20.8998C12.9083 21.0831 13 21.3165 13 21.5998C13 21.8831 12.9083 22.1165 12.725 22.2998C12.5417 22.4831 12.3083 22.5748 12.025 22.5748C11.7417 22.5748 11.5083 22.4831 11.325 22.2998L8.725 19.6998C8.525 19.4998 8.425 19.2665 8.425 18.9998C8.425 18.7331 8.525 18.4998 8.725 18.2998L11.325 15.6998C11.5083 15.5165 11.7417 15.4248 12.025 15.4248C12.3083 15.4248 12.5417 15.5165 12.725 15.6998C12.9083 15.8831 13 16.1165 13 16.3998C13 16.6831 12.9083 16.9165 12.725 17.0998L11.825 17.9998H12C13.6667 17.9998 15.0833 17.4123 16.25 16.2373C17.4167 15.0623 18 13.6331 18 11.9498Z"
+              />
+            </svg>
+          </span>
         </button>
       </th>
       <th
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
deleted file mode 100644
index 182fef5c2..000000000
--- a/src/components/Tabs/Tabs.module.css
+++ /dev/null
@@ -1,137 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    #TABS
-\*------------------------------------*/
-
-/**
- * List of of links where each link toggles open associated information
- */
-
-/**
- * Tabs header
- *
- * Contains the tab list.
- */
-.tabs__header {
-  /* Tab overflow behavior*/
-  overflow-x: auto;
-  position: relative;
-  padding-bottom: calc(var(--eds-size-2) / 16 * 1rem);
-}
-
-/**
- * Fade scrollable indicators to display if there is scrollable area on either side.
- *
- * The color "white" is arbitrary and any non transparent color can be used here.
- */
-.tabs--scrollable-left {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white calc(var(--eds-size-8) / 16 * 1rem)
-  );
-}
-
-.tabs--scrollable-left .tabs__list--align-center,
-.tabs--scrollable-right .tabs__list--align-center {
-  justify-content: unset;
-}
-
-.tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(
-    right,
-    transparent,
-    white calc(var(--eds-size-8) / 16 * 1rem)
-  );
-}
-
-.tabs--scrollable-left.tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white calc(var(--eds-size-8) / 16 * 1rem),
-    white calc(100% - calc(var(--eds-size-8) / 16 * 1rem)),
-    transparent 100%
-  );
-}
-
-/**
- * Tabs list
- *
- * Actual unordered list of tabs.
- */
-.tabs__list {
-  list-style: none;
-  /* Set to display flex to place tabs side by side. */
-  display: flex;
-  border-bottom: calc(var(--eds-theme-border-width) * 1px) solid
-    var(--eds-theme-color-border-neutral-subtle);
-  font: var(--eds-theme-typography-tab-lg);
-  line-height: 1.429;
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-theme-typography-tab-sm);
-  }
-}
-
-/**
- * Control the positioning of the tabs: left, center, or right aligned (horizontally)
- */
-.tabs__list--align-left {
-  justify-content: left;
-}
-
-.tabs__list--align-center {
-  justify-content: center;
-}
-
-.tabs__list--align-right {
-  justify-content: right;
-}
-
-/**
- * Tabs item
- */
-.tabs__item {
-  /**
-   * Flex shrink 0 keeps tabs from expanding to fill up the space of the container.
-   */
-  flex-shrink: 0;
-}
-
-/**
- * Tabs link
- */
-.tabs__link {
-  display: block;
-  padding: calc(var(--eds-size-1-and-half) / 16 * 1rem);
-  text-decoration: none;
-  color: var(--eds-theme-color-text-neutral-default);
-  transition: color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
-    box-shadow calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
-    background-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
-
-  &:focus-visible {
-    @mixin focus;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      @mixin focus;
-    }
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  /**
-   * Tabs link within active tabs item
-   */
-  .tabs__item.eds-is-active & {
-    color: var(--eds-theme-color-text-brand-default);
-    box-shadow: inset 0 calc(calc(var(--eds-border-width-md) * 1px) * -1) 0 0
-      var(--eds-theme-color-border-brand-primary-strong);
-  }
-}
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
deleted file mode 100644
index 22bd4d327..000000000
--- a/src/components/Tabs/Tabs.stories.tsx
+++ /dev/null
@@ -1,521 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { within } from '@storybook/testing-library';
-import React from 'react';
-
-import { Tabs } from './Tabs';
-import { chromaticViewports } from '../../util/viewports';
-import Heading from '../Heading';
-import Icon, { type IconName } from '../Icon';
-import Text from '../Text';
-
-export default {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0'],
-  },
-  args: {
-    children: (
-      <>
-        <Tabs.Tab title="Tab Title 1">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 2">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 3">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 3
-            </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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 4">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 5">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 6">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 7">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 7
-            </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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 8">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 8
-            </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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 9">
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 9
-            </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>
-          </div>
-        </Tabs.Tab>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Tabs>;
-
-export const Default: StoryObj<Args> = {
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
-
-// For visual regression testing of both masks
-export const ScrollMiddle: StoryObj<Args> = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'googlePixel2',
-    },
-    // Skip these b/c test environment cannot execute "scroll" on the parent div
-    snapshot: { skip: true },
-    chromatic: { viewports: [chromaticViewports.googlePixel2] },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const tablist = await canvas.findByRole('tablist');
-    // eslint-disable-next-line testing-library/no-node-access
-    tablist?.parentElement?.scroll(50, 0);
-  },
-  decorators: [
-    (Story) => (
-      <div>
-        For Chromatic visual regression testing of the masks on both sides of
-        the Tabs. Currently does not work properly on local.
-        {Story()}
-      </div>
-    ),
-  ],
-};
-
-export const Centered: StoryObj<Args> = {
-  args: {
-    align: 'center',
-  },
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
-
-const IconTab = ({
-  isActive,
-  title,
-  icon,
-}: {
-  isActive: boolean;
-  title: string;
-  icon: IconName;
-}) => (
-  <div className="px-4">
-    <div className="p-3 text-center">
-      <Icon name={icon} purpose="decorative" size="1rem" />
-    </div>
-    <Text preset="caption-lg">{`${isActive ? '●' : '◦'} ${title}`}</Text>
-  </div>
-);
-
-export const CustomTabs: StoryObj<Args> = {
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Tabs>
-  <Tabs.Tab title="Tab Title 1">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 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>
-    </div>
-  </Tabs.Tab>
-
-  <Tabs.Tab title="Tab Title 2">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 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>
-    </div>
-  </Tabs.Tab>
-
-  <Tabs.Tab title="Tab Title 3">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 3
-      </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>
-    </div>
-  </Tabs.Tab>
-
-  <Tabs.Tab title="Tab Title 4">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 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>
-    </div>
-  </Tabs.Tab>
-
-  <Tabs.Tab title="Tab Title 5">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 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>
-    </div>
-  </Tabs.Tab>
-
-  <Tabs.Tab title="Tab Title 6">
-    <Tabs.Tab.Button>
-      {({ active, title }) => (
-        <IconTab
-          icon={active ? 'person' : 'people'}
-          isActive={active}
-          title={title}
-        />
-      )}
-    </Tabs.Tab.Button>
-    <div className="max-w-xl">
-      <Heading className="mb-6" size="h3">
-        Tab 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>
-    </div>
-  </Tabs.Tab>
-</Tabs>
-        `,
-      },
-    },
-  },
-  args: {
-    children: (
-      <>
-        <Tabs.Tab title="Tab Title 1">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 2">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 3">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 3
-            </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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 4">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 5">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-
-        <Tabs.Tab title="Tab Title 6">
-          <Tabs.Tab.Button>
-            {({ active, title }) => (
-              <IconTab
-                icon={active ? 'person' : 'people'}
-                isActive={active}
-                title={title}
-              />
-            )}
-          </Tabs.Tab.Button>
-          <div className="max-w-xl">
-            <Heading as="h3" className="mb-6">
-              Tab 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>
-          </div>
-        </Tabs.Tab>
-      </>
-    ),
-  },
-};
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
deleted file mode 100644
index 093ad712e..000000000
--- a/src/components/Tabs/Tabs.test.tsx
+++ /dev/null
@@ -1,64 +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 './Tabs.stories';
-import Tabs from '../Tabs';
-
-const { Default } = composeStories(stories);
-
-describe('<Tabs />', () => {
-  generateSnapshots(stories);
-
-  it('should focus and select with keyboard controls', async () => {
-    const user = userEvent.setup();
-    render(<Default />);
-    const firstTab = screen.getByRole('tab', { name: 'Tab Title 1' });
-    const secondTab = screen.getByRole('tab', { name: 'Tab Title 2' });
-    firstTab.focus();
-
-    await user.keyboard('{arrowright}');
-    expect(secondTab).toHaveFocus();
-
-    await user.keyboard('{arrowleft}');
-    expect(firstTab).toHaveFocus();
-
-    await user.keyboard('{arrowdown}');
-    expect(secondTab).toHaveFocus();
-
-    await user.keyboard('{arrowup}');
-    expect(firstTab).toHaveFocus();
-
-    await user.keyboard('{arrowdown}');
-    await user.keyboard('{arrowright}');
-    await user.keyboard('{enter}');
-    expect(screen.getByRole('tab', { name: 'Tab Title 3' })).toHaveAttribute(
-      'aria-selected',
-      'true',
-    );
-  });
-
-  it('changes the active tab when activeIndex changes', () => {
-    const { rerender } = render(<Default activeIndex={0} />);
-    expect(screen.getByRole('heading', { name: 'Tab 1' })).toBeInTheDocument();
-
-    rerender(<Default activeIndex={1} />);
-    expect(screen.getByRole('heading', { name: 'Tab 2' })).toBeInTheDocument();
-  });
-
-  it('does not include invalid characters in tab ids', () => {
-    render(
-      <Default id="foo">
-        <Tabs.Tab data-testid="tab-1" title="Tab Title 1">
-          Tab numero uno
-        </Tabs.Tab>
-      </Default>,
-    );
-
-    expect(screen.getByTestId('tab-1')).toHaveAttribute(
-      'aria-labelledby',
-      'foo-Tab-Title-1',
-    );
-  });
-});
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
deleted file mode 100644
index 289fe7d20..000000000
--- a/src/components/Tabs/Tabs.tsx
+++ /dev/null
@@ -1,363 +0,0 @@
-import clsx from 'clsx';
-import debounce from 'lodash/debounce';
-import React, {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from 'react';
-import { allByType, oneByType, withoutTypes } from 'react-children-by-type';
-
-import {
-  L_ARROW_KEYCODE,
-  U_ARROW_KEYCODE,
-  R_ARROW_KEYCODE,
-  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 styles from './Tabs.module.css';
-
-export interface TabsProps {
-  align?: Align;
-  /**
-   * Reference to another element that describes the purpose of the set of tabs.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * 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;
-  /**
-   * Passed down to initially set the activeIndex state
-   */
-  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;
-};
-
-/**
- * `import {Tabs} from "@chanzuckerberg/eds";`
- *
- * List of of links where each link toggles open associated information in a tab panel.
- *
- * Individual tabs allow for a simple text tab header using the `title` prop on each `<Tab>` instance.
- * For a more custom tabs, you can use an additonal `<Tab.Button>` sub-component with a render prop exposing `active` and `title`.
- *
- * @deprecated
- */
-export const Tabs = ({
-  activeIndex = 0,
-  align,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className,
-  onChange,
-  ...other
-}: TabsProps) => {
-  const activeTabPanelId = useId();
-  const headerRef = useRef<HTMLDivElement>(null);
-  const [activeIndexState, setActiveIndexState] = useState(activeIndex);
-  const [scrollableLeft, setScrollableLeft] = useState<boolean>(false);
-  const [scrollableRight, setScrollableRight] = useState<boolean>(false);
-
-  /** Children that are actually tabs. Any others are ignored. */
-  const tabs = useMemo(() => {
-    return allByType(children, Tab);
-  }, [children]);
-
-  const tabRefs = useMemo(
-    // This usage of React.createRef is intentional.
-    // eslint-disable-next-line @chanzuckerberg/edu-react/no-create-ref-in-function-component
-    () => tabs.map(() => React.createRef<HTMLAnchorElement>()),
-    [tabs],
-  );
-
-  const generatedId = useId();
-  const tabIdPrefix = other.id || generatedId;
-  const tabIds = useMemo(
-    () =>
-      tabs.map(
-        (tab) => `${tabIdPrefix}-${tab.props.title.replace(/\s/g, '-')}`,
-      ),
-    [tabs, tabIdPrefix],
-  );
-
-  // Set the active tab if the `activeIndex` prop changes.
-  const prevActiveIndex = usePrevious(activeIndex);
-  useEffect(() => {
-    if (prevActiveIndex != null && prevActiveIndex !== activeIndex) {
-      setActiveIndexState(activeIndex);
-      tabRefs[activeIndex].current?.focus();
-    }
-  }, [prevActiveIndex, activeIndex, tabRefs]);
-
-  /**
-   * Handles if scroll fade indicators should be displayed.
-   */
-  const handleTabsScroll = useCallback((headerEl: HTMLDivElement) => {
-    const scrollLeft = headerEl.scrollLeft;
-    const width = headerEl.clientWidth;
-    const scrollWidth = headerEl.scrollWidth;
-
-    if (scrollLeft > 0) {
-      setScrollableLeft(true);
-    } else {
-      setScrollableLeft(false);
-    }
-
-    if (scrollWidth > width && scrollLeft + width < scrollWidth) {
-      setScrollableRight(true);
-    } else {
-      setScrollableRight(false);
-    }
-  }, []);
-
-  /**
-   * Listens for window resize to display scroll fade indicators.
-   */
-  useEffect(() => {
-    if (headerRef && headerRef.current) {
-      const resizeHandleTabs = debounce(
-        () => {
-          if (headerRef.current) {
-            handleTabsScroll(headerRef.current);
-          }
-        },
-        100,
-        { leading: true },
-      );
-
-      /**
-       * The event listener actually calls the callback once when initiated, but the event listener
-       * is not triggered with prop changes so this line is required.
-       * This means the callback may be called twice on initial paint, which is fine, and
-       * is better than it not being called at all.
-       */
-      resizeHandleTabs();
-      window.addEventListener('resize', resizeHandleTabs);
-      return () => {
-        window.removeEventListener('resize', resizeHandleTabs);
-      };
-    }
-  }, [handleTabsScroll]);
-
-  function handleClick(index: number) {
-    setActiveIndexState(index);
-
-    if (onChange) {
-      onChange(index);
-    }
-  }
-
-  function handleKeyDown(e: KeyboardEvent<HTMLAnchorElement>) {
-    let activeTab = null;
-
-    tabRefs.map((item) => {
-      if (item.current === document.activeElement) {
-        activeTab = item;
-      }
-      return item;
-    });
-
-    if (!activeTab) return;
-
-    // Set active, next, and previous tab.
-    const index = tabRefs.indexOf(activeTab);
-    const next = index === tabRefs.length - 1 ? 0 : index + 1;
-    const prev = index === 0 ? tabRefs.length - 1 : index - 1;
-
-    if ([R_ARROW_KEYCODE, D_ARROW_KEYCODE].includes(e.key)) {
-      // Right or down arrow was pressed. Focus the next tab.
-      tabRefs[next].current?.focus();
-    } else if ([L_ARROW_KEYCODE, U_ARROW_KEYCODE].includes(e.key)) {
-      // Left or up was pressed. Focus the previous tab.
-      tabRefs[prev].current?.focus();
-    }
-  }
-
-  const componentClassName = clsx(styles['tabs'], className);
-
-  const headerClassName = clsx(
-    styles['tabs__header'],
-    scrollableLeft && styles['tabs--scrollable-left'],
-    scrollableRight && styles['tabs--scrollable-right'],
-  );
-
-  const activeTabPanel = React.cloneElement(tabs[activeIndexState], {
-    id: activeTabPanelId,
-    'aria-labelledby': tabIds[activeIndexState],
-  });
-
-  return (
-    <div className={componentClassName} {...other}>
-      <div
-        className={headerClassName}
-        onScroll={(e) => handleTabsScroll(e.target as HTMLDivElement)}
-        ref={headerRef}
-      >
-        <ul
-          aria-labelledby={ariaLabelledBy}
-          className={clsx(
-            styles['tabs__list'],
-            align && styles[`tabs__list--align-${align}`],
-          )}
-          role="tablist"
-        >
-          {tabs.map((tab, i) => {
-            const isActive = activeIndexState === i;
-            const tabButton = oneByType(tab.props.children, Tab.Button);
-            return (
-              <li
-                className={clsx(
-                  styles['tabs__item'],
-                  isActive && styles['eds-is-active'],
-                )}
-                key={tabIds[i]}
-                role="presentation"
-              >
-                <a
-                  aria-controls={activeTabPanelId}
-                  aria-selected={isActive}
-                  className={styles['tabs__link']}
-                  href={`#${activeTabPanelId}`}
-                  id={tabIds[i]}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    handleClick(i);
-                  }}
-                  onKeyDown={handleKeyDown}
-                  ref={tabRefs[i]}
-                  role="tab"
-                  tabIndex={isActive ? 0 : -1}
-                >
-                  {typeof tabButton?.props.children === 'function'
-                    ? tabButton.props.children({
-                        active: isActive,
-                        title: tab.props.title,
-                      })
-                    : tab.props.title}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-      <div>{activeTabPanel}</div>
-    </div>
-  );
-};
-
-/**
- * Get the previous value of a prop. Useful for comparing the previous to the current value.
- */
-function usePrevious<T>(prop: T) {
-  const ref = useRef<T>(prop);
-  // eslint-disable-next-line @chanzuckerberg/edu-react/use-effect-deps-presence
-  useEffect(() => {
-    ref.current = prop;
-  });
-  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
deleted file mode 100644
index 7e5e71a9b..000000000
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ /dev/null
@@ -1,665 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Tabs /> Centered story renders snapshot 1`] = `
-<div
-  class="tabs"
->
-  <div
-    class="tabs__header"
-  >
-    <ul
-      class="tabs__list tabs__list--align-center"
-      role="tablist"
-    >
-      <li
-        class="tabs__item eds-is-active"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="true"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-1"
-          role="tab"
-          tabindex="0"
-        >
-          Tab Title 1
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-2"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 2
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-3"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 3
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-4"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 4
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-5"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 5
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-6"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 6
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-7"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 7
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-8"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 8
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r2:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r2:"
-          id=":r3:-Tab-Title-9"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 9
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div>
-    <div
-      aria-hidden="false"
-      aria-labelledby=":r3:-Tab-Title-1"
-      id=":r2:"
-      role="tabpanel"
-    >
-      <div
-        class="max-w-xl"
-      >
-        <h3
-          class="heading heading--headline-sm mb-6"
-        >
-          Tab 1
-        </h3>
-        <p
-          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
-           
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Tabs /> CustomTabs story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="tabs"
-  >
-    <div
-      class="tabs__header"
-    >
-      <ul
-        class="tabs__list"
-        role="tablist"
-      >
-        <li
-          class="tabs__item eds-is-active"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="true"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-1"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ● Tab Title 1
-              </p>
-            </div>
-          </a>
-        </li>
-        <li
-          class="tabs__item"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="false"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-2"
-            role="tab"
-            tabindex="-1"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ◦ Tab Title 2
-              </p>
-            </div>
-          </a>
-        </li>
-        <li
-          class="tabs__item"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="false"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-3"
-            role="tab"
-            tabindex="-1"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ◦ Tab Title 3
-              </p>
-            </div>
-          </a>
-        </li>
-        <li
-          class="tabs__item"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="false"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-4"
-            role="tab"
-            tabindex="-1"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ◦ Tab Title 4
-              </p>
-            </div>
-          </a>
-        </li>
-        <li
-          class="tabs__item"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="false"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-5"
-            role="tab"
-            tabindex="-1"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ◦ Tab Title 5
-              </p>
-            </div>
-          </a>
-        </li>
-        <li
-          class="tabs__item"
-          role="presentation"
-        >
-          <a
-            aria-controls=":r4:"
-            aria-selected="false"
-            class="tabs__link"
-            href="#:r4:"
-            id=":r5:-Tab-Title-6"
-            role="tab"
-            tabindex="-1"
-          >
-            <div
-              class="px-4"
-            >
-              <div
-                class="p-3 text-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="icon"
-                  fill="currentColor"
-                  height="1rem"
-                  style="--icon-size: 1rem;"
-                  viewBox="0 0 24 24"
-                  width="1rem"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 20C1.71667 20 1.47917 19.9042 1.2875 19.7125C1.09583 19.5208 1 19.2833 1 19V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V19C17 19.2833 16.9042 19.5208 16.7125 19.7125C16.5208 19.9042 16.2833 20 16 20H2ZM18.525 20C18.675 19.8833 18.7917 19.7375 18.875 19.5625C18.9583 19.3875 19 19.1917 19 18.975V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V19C23 19.2833 22.9042 19.5208 22.7125 19.7125C22.5208 19.9042 22.2833 20 22 20H18.525ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
-                  />
-                </svg>
-              </div>
-              <p
-                class="text text--caption-lg"
-              >
-                ◦ Tab Title 6
-              </p>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div>
-      <div
-        aria-hidden="false"
-        aria-labelledby=":r5:-Tab-Title-1"
-        id=":r4:"
-        role="tabpanel"
-      >
-        <div
-          class="max-w-xl"
-        >
-          <h3
-            class="heading heading--headline-sm mb-6"
-          >
-            Tab 1
-          </h3>
-          <p
-            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
-             
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Tabs /> Default story renders snapshot 1`] = `
-<div
-  class="tabs"
->
-  <div
-    class="tabs__header"
-  >
-    <ul
-      class="tabs__list"
-      role="tablist"
-    >
-      <li
-        class="tabs__item eds-is-active"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="true"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-1"
-          role="tab"
-          tabindex="0"
-        >
-          Tab Title 1
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-2"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 2
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-3"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 3
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-4"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 4
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-5"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 5
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-6"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 6
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-7"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 7
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-8"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 8
-        </a>
-      </li>
-      <li
-        class="tabs__item"
-        role="presentation"
-      >
-        <a
-          aria-controls=":r0:"
-          aria-selected="false"
-          class="tabs__link"
-          href="#:r0:"
-          id=":r1:-Tab-Title-9"
-          role="tab"
-          tabindex="-1"
-        >
-          Tab Title 9
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div>
-    <div
-      aria-hidden="false"
-      aria-labelledby=":r1:-Tab-Title-1"
-      id=":r0:"
-      role="tabpanel"
-    >
-      <div
-        class="max-w-xl"
-      >
-        <h3
-          class="heading heading--headline-sm mb-6"
-        >
-          Tab 1
-        </h3>
-        <p
-          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
-           
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
deleted file mode 100644
index c0453f71e..000000000
--- a/src/components/Tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Tabs as default } from './Tabs';
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index dd7804948..99b716a92 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -77,7 +77,7 @@ export const OutlineVariants: Story = {
 export const WithIcon: Story = {
   ...Default,
   args: {
-    icon: 'favorite',
+    icon: 'star-filled',
   },
   render: (args) => (
     <div className={styles.tagList}>
diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/src/components/Tag/__snapshots__/Tag.test.ts.snap
index cd16ca3c6..db6811f5b 100644
--- a/src/components/Tag/__snapshots__/Tag.test.ts.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.ts.snap
@@ -131,7 +131,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+        d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -151,7 +151,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+        d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -171,7 +171,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+        d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -191,7 +191,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+        d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -211,7 +211,7 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
+        d="M12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -238,7 +238,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       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"
+        d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -258,7 +258,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       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"
+        d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -278,7 +278,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       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"
+        d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -298,7 +298,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       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"
+        d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
@@ -318,7 +318,7 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       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"
+        d="M8.84998 17.0732L12 15.1732L15.15 17.0982L14.325 13.4982L17.1 11.0982L13.45 10.7732L12 7.37324L10.55 10.7482L6.89998 11.0732L9.67498 13.4982L8.84998 17.0732ZM12 17.5232L7.84998 20.0232C7.66665 20.1399 7.47498 20.1899 7.27498 20.1732C7.07498 20.1566 6.89998 20.0899 6.74998 19.9732C6.59998 19.8566 6.48332 19.7107 6.39998 19.5357C6.31665 19.3607 6.29998 19.1649 6.34998 18.9482L7.44998 14.2232L3.77498 11.0482C3.60832 10.8982 3.50415 10.7274 3.46248 10.5357C3.42082 10.3441 3.43332 10.1566 3.49998 9.97324C3.56665 9.78991 3.66665 9.63991 3.79998 9.52324C3.93332 9.40658 4.11665 9.33158 4.34998 9.29824L9.19998 8.87324L11.075 4.42324C11.1583 4.22324 11.2875 4.07324 11.4625 3.97324C11.6375 3.87324 11.8167 3.82324 12 3.82324C12.1833 3.82324 12.3625 3.87324 12.5375 3.97324C12.7125 4.07324 12.8417 4.22324 12.925 4.42324L14.8 8.87324L19.65 9.29824C19.8833 9.33158 20.0667 9.40658 20.2 9.52324C20.3333 9.63991 20.4333 9.78991 20.5 9.97324C20.5667 10.1566 20.5792 10.3441 20.5375 10.5357C20.4958 10.7274 20.3917 10.8982 20.225 11.0482L16.55 14.2232L17.65 18.9482C17.7 19.1649 17.6833 19.3607 17.6 19.5357C17.5167 19.7107 17.4 19.8566 17.25 19.9732C17.1 20.0899 16.925 20.1566 16.725 20.1732C16.525 20.1899 16.3333 20.1399 16.15 20.0232L12 17.5232Z"
       />
     </svg>
     <span
diff --git a/src/components/TextareaField/TextareaField-v2.module.css b/src/components/TextareaField/TextareaField-v2.module.css
deleted file mode 100644
index 07ec52c6b..000000000
--- a/src/components/TextareaField/TextareaField-v2.module.css
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # TEXTAREA FIELD
-\*------------------------------------*/
-/**
- * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
- */
-
-/**
- * Default input styles 
- */
-.textarea {
-  @mixin inputStylesV2;
-  padding: 0.5rem 0.75rem;
-
-  &:read-only:not(:disabled) {
-    border: 0;
-    border-bottom: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
-  }
-}
-
-/**
- * Wraps the Label and the optional/required indicator.
- */
-.textarea-field__overline {
-  display: flex;
-  margin-bottom: 0.25rem;
-  gap: 0.25rem;
-}
-
-.textarea-field__overline--no-label {
-  justify-content: flex-start;
-}
-
-.textarea-field__label {
-  font: var(--eds-theme-typography-form-label);
-}
-
-.textarea-field__label--disabled {
-  color: var(--eds-theme-color-text-utility-disabled-primary);
-}
-
-.textarea-field--invalid-length {
-  color: var(--eds-theme-color-text-utility-critical);
-}
-
-.textarea-field__footer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.textarea-field__field-note {
-  flex: 1 0 50%;
-}
-
-.textarea-field__character-counter {
-  font: var(--eds-theme-typography-body-sm);
-
-  flex: 1 0 50%;
-  text-align: right;
-}
diff --git a/src/components/TextareaField/TextareaField-v2.stories.tsx b/src/components/TextareaField/TextareaField-v2.stories.tsx
deleted file mode 100644
index 775200b35..000000000
--- a/src/components/TextareaField/TextareaField-v2.stories.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { TextareaField } from './TextareaField-v2';
-
-const meta: Meta<typeof TextareaField> = {
-  title: 'Components/V2/TextareaField',
-  component: TextareaField,
-  args: {
-    className: 'w-96',
-    placeholder: 'Enter long-form text here',
-    defaultValue: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.`,
-    label: 'Textarea Field',
-    rows: 5,
-    fieldNote: 'Longer Field description',
-    spellCheck: false,
-  },
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.3', 'current-2.0'],
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-};
-
-export default meta;
-type Story = StoryObj<typeof TextareaField>;
-
-export const Default: Story = {
-  render: (args) => (
-    <TextareaField aria-label="Text Label" {...args}></TextareaField>
-  ),
-};
-
-/**
- * You can specify the content of `TextareaField` by using children. Convenient for cases where
- * specifying `value` or `defaultValue` is inconvenient.
- */
-export const WhenUsingChildren: Story = {
-  args: {
-    children: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-    dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-    praesentium, commodi eligendi asperiores quis dolorum porro.`,
-    defaultValue: '',
-  },
-};
-
-/**
- * `TextareaField` does not require any initial content.
- */
-export const WhenNoDefaultValue: Story = {
-  args: {
-    defaultValue: undefined,
-    fieldNote: undefined,
-  },
-};
-
-export const WhenDisabled: Story = {
-  args: {
-    disabled: true,
-    rows: 2,
-  },
-  parameters: {
-    axe: {
-      // Disabled input does not need to meet color contrast
-      disabledRules: ['color-contrast'],
-    },
-  },
-};
-
-export const WhenReadOnly: Story = {
-  args: {
-    readOnly: true,
-    rows: 2,
-  },
-  parameters: {
-    axe: {
-      // Disabled input does not need to meet color contrast
-      disabledRules: ['color-contrast'],
-    },
-  },
-};
-
-/**
- * The default status isn't really anything, but exists to allow a value to be set if needed. This applies
- * the neutral styles.
- */
-export const WhenDefaultStatus: Story = {
-  args: {
-    status: 'default',
-    fieldNote: 'Text should be at least 100 characters',
-  },
-};
-
-/**
- * When in an error state, this is the status to use. It matches other components which have a critical status.
- */
-export const WhenError: Story = {
-  args: {
-    status: 'critical',
-    fieldNote: 'Text should be at least 100 characters',
-  },
-};
-
-/**
- * You can also apply a warning status.
- */
-export const WhenWarning: Story = {
-  args: {
-    status: 'warning',
-    fieldNote: 'Text should be at least 100 characters',
-  },
-};
-
-/**
- * Textarea components can be set as required.
- */
-export const WhenRequired: Story = {
-  args: {
-    required: true,
-    showHint: true,
-  },
-};
-
-/**
- * ... or optional.
- */
-export const WhenOptional: Story = {
-  args: {
-    required: false,
-    showHint: true,
-  },
-};
-
-/**
- * You can size `TextareaField` by specifying `row` attribute, inherited from
- * [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
- */
-export const WithADifferentSize: Story = {
-  args: {
-    rows: 10,
-  },
-};
-
-/**
- * You can lock the maximum length of the text content of `TextareaField`. When setting `maxLength`,
- * the field will reuse the browser's [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
- * behavior (e.g., prevent further text from being typed, prevent keydown events, etc.).
- */
-export const WithAMaxLength: Story = {
-  args: {
-    rows: 10,
-    maxLength: 144,
-    required: true,
-  },
-  render: (args) => <TextareaField {...args} />,
-};
-
-/**
- * If you want to signal that a field has reached a maximum length but want to allow more text to be typed, you can use
- * `recommendedMaxLength`. This will show a similar UI to using `maxLength` but will allow more text to be typed, and
- * emit any appropriate events.
- */
-export const WithARecommendedLength: Story = {
-  args: {
-    rows: 10,
-    recommendedMaxLength: 144,
-    required: true,
-  },
-  render: (args) => <TextareaField {...args} />,
-};
-
-/**
- * Both `maxLength` and `recommendedMaxLength` can be specified at the same time. Text length between `recommendedMaxLength`
- * and `maxLength` will show the treatment warning the user about the text length being violated.
- */
-export const WithBothRecommendedAndMaxLengths: Story = {
-  args: {
-    rows: 10,
-    maxLength: 256,
-    recommendedMaxLength: 144,
-    required: true,
-  },
-  render: (args) => <TextareaField {...args} />,
-};
diff --git a/src/components/TextareaField/TextareaField-v2.test.tsx b/src/components/TextareaField/TextareaField-v2.test.tsx
deleted file mode 100644
index f893e5447..000000000
--- a/src/components/TextareaField/TextareaField-v2.test.tsx
+++ /dev/null
@@ -1,103 +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 { TextareaField } from './TextareaField-v2';
-import * as stories from './TextareaField-v2.stories';
-
-describe('<TextareaField />', () => {
-  generateSnapshots(stories as StoryFile);
-
-  it('can handle custom events when there is content', async () => {
-    const onChangeFn = jest.fn();
-    const user = userEvent.setup();
-    render(
-      <TextareaField aria-label="test" onChange={() => onChangeFn()}>
-        some content
-      </TextareaField>,
-    );
-
-    const field = screen.getByRole('textbox');
-
-    expect(field).not.toHaveFocus();
-
-    await userEvent.tab();
-
-    expect(field).toHaveFocus();
-
-    await user.keyboard('{arrowdown}{delete}');
-
-    expect(onChangeFn).toHaveBeenCalled();
-  });
-
-  it('will not fire a custom event when there is no content', async () => {
-    const onChangeFn = jest.fn();
-    const user = userEvent.setup();
-    render(<TextareaField aria-label="test" onChange={() => onChangeFn()} />);
-
-    const field = screen.getByRole('textbox');
-
-    expect(field).not.toHaveFocus();
-
-    await userEvent.tab();
-
-    expect(field).toHaveFocus();
-
-    await user.keyboard('{arrowdown}{delete}');
-
-    expect(onChangeFn).not.toHaveBeenCalled();
-  });
-
-  it('will not fire a custom event when at max length', async () => {
-    const onChangeFn = jest.fn();
-    const user = userEvent.setup();
-    render(
-      <TextareaField
-        aria-label="test"
-        defaultValue="1234567890"
-        maxLength={10}
-        onChange={() => onChangeFn()}
-      />,
-    );
-
-    const field = screen.getByRole('textbox');
-
-    expect(field).not.toHaveFocus();
-
-    await userEvent.tab();
-
-    expect(field).toHaveFocus();
-
-    await user.keyboard('abc');
-
-    expect(onChangeFn).not.toHaveBeenCalled();
-  });
-
-  it('will fire a custom event when at max recommended length', async () => {
-    const onChangeFn = jest.fn();
-    const user = userEvent.setup();
-    render(
-      <TextareaField
-        aria-label="test"
-        defaultValue="1234567890"
-        onChange={() => onChangeFn()}
-        recommendedMaxLength={10}
-      />,
-    );
-
-    const field = screen.getByRole('textbox');
-
-    expect(field).not.toHaveFocus();
-
-    await userEvent.tab();
-
-    expect(field).toHaveFocus();
-
-    await user.keyboard('abc');
-
-    expect(onChangeFn).toHaveBeenCalled();
-  });
-});
diff --git a/src/components/TextareaField/TextareaField-v2.tsx b/src/components/TextareaField/TextareaField-v2.tsx
deleted file mode 100644
index 8a2092c2e..000000000
--- a/src/components/TextareaField/TextareaField-v2.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React, { forwardRef, useState } from 'react';
-import { getMinValue } from '../../util/getMinValue';
-import { useId } from '../../util/useId';
-import type {
-  EitherInclusive,
-  ForwardedRefComponent,
-} from '../../util/utility-types';
-
-import type { Status } from '../../util/variant-types';
-import FieldLabel from '../FieldLabel';
-import { FieldNoteV2 as FieldNote } from '../FieldNote';
-import Text from '../Text';
-
-import styles from './TextareaField-v2.module.css';
-
-type TextareaFieldProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  // Component API
-  /**
-   * Text content of the field upon instantiation
-   */
-  children?: string;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Disables the field and prevents editing the contents
-   */
-  disabled?: boolean;
-  /**
-   * Text under the textarea used to provide a description or error message to describe the input.
-   */
-  fieldNote?: ReactNode;
-  /**
-   * HTML id for the component. Can be used with a custom Label component
-   */
-  id?: string;
-  // Design API
-  /**
-   * Behaves similar to `maxLength` but allows the user to continue typing more text.
-   * Should not be larger than `maxLength`, if present.
-   */
-  recommendedMaxLength?: number;
-  /**
-   * Whether it should show the field hint or not
-   *
-   * **Default is `"false"`**.
-   */
-  showHint?: boolean;
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-} & EitherInclusive<
-    {
-      /**
-       * Visible text label for the component.
-       */
-      label: string;
-    },
-    {
-      /**
-       * Aria-label to provide an accesible name for the text input if no visible label is provided.
-       */
-      'aria-label': string;
-    }
-  >;
-
-type TextareaFieldType = ForwardedRefComponent<
-  HTMLTextAreaElement,
-  TextareaFieldProps
-> & {
-  TextArea?: typeof TextArea;
-  Label?: typeof FieldLabel;
-};
-
-type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  /**
-   * CSS class names that can be appended to the component
-   */
-  className?: string;
-  /**
-   * Text default contents of the field
-   */
-  children?: string;
-  /**
-   * Whether the disabled stat is active
-   */
-  disabled?: boolean;
-  /**
-   * Status for the field state
-   *
-   * **Default is `"default"`**.
-   */
-  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
-};
-
-/**
- * Base component, applying styles to a <textarea> tag
- */
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    {
-      className,
-      children,
-      disabled,
-      defaultValue = '',
-      readOnly,
-      status = 'default',
-      ...other
-    },
-    ref,
-  ) => {
-    const componentClassName = clsx(
-      styles['textarea'],
-      status === 'critical' && styles['error'],
-      status === 'warning' && styles['warning'],
-      disabled && styles['textarea--disabled'],
-      className,
-    );
-
-    return (
-      <textarea
-        className={componentClassName}
-        defaultValue={children || defaultValue}
-        disabled={disabled}
-        readOnly={readOnly}
-        ref={ref}
-        {...other}
-      ></textarea>
-    );
-  },
-);
-
-/**
- * `import {TextareaField} from "@chanzuckerberg/eds";`
- *
- * Multi-line text input field with built-in labeling and accessory text to describe
- * the content. When a maximum text count is specified, component also shows relevant
- * text up to the maximum.
- *
- * **NOTE**: This component requires `label` or `aria-label` prop to support accessibility.
- */
-export const TextareaField: TextareaFieldType = forwardRef(
-  (
-    {
-      'aria-describedby': ariaDescribedBy,
-      children,
-      className,
-      defaultValue = '',
-      disabled,
-      fieldNote,
-      id,
-      label,
-      maxLength,
-      onChange,
-      readOnly,
-      recommendedMaxLength,
-      required,
-      showHint,
-      status = 'default',
-      ...other
-    },
-    ref,
-  ) => {
-    const [fieldText, setFieldText] = useState(defaultValue);
-    const generatedIdVar = useId();
-    const generatedAriaDescribedById = useId();
-
-    const idVar = id || generatedIdVar;
-    const shouldRenderOverline = !!(label || required);
-    const fieldLength = fieldText?.toString().length ?? 0;
-    const textExceedsMaxLength =
-      maxLength !== undefined ? fieldLength > maxLength : false;
-
-    const textExceedsRecommendedLength =
-      recommendedMaxLength !== undefined
-        ? fieldLength > recommendedMaxLength
-        : false;
-
-    const shouldRenderError =
-      status === 'critical' ||
-      textExceedsMaxLength ||
-      textExceedsRecommendedLength;
-
-    const ariaDescribedByVar = fieldNote
-      ? ariaDescribedBy || generatedAriaDescribedById
-      : undefined;
-
-    const componentClassName = clsx(styles['textarea-field'], className);
-    const overlineClassName = clsx(
-      styles['textarea-field__overline'],
-      !label && styles['textarea-field__overline--no-label'],
-      disabled && styles['textarea-field__overline--disabled'],
-    );
-    const labelClassName = clsx(
-      styles['textarea-field__label'],
-      disabled && styles['textarea-field__label--disabled'],
-    );
-
-    const requiredTextClassName = clsx(
-      disabled && styles['textarea-field__required-text--disabled'],
-    );
-    const fieldLengthCountClassName = clsx(
-      (textExceedsMaxLength || textExceedsRecommendedLength) &&
-        styles['textarea-field--invalid-length'],
-    );
-
-    const textareaClassName = clsx(
-      readOnly && styles['textarea-field__textarea--read-only'],
-    );
-
-    // Pick the smallest of the lengths to set as the maximum value allowed
-    const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);
-
-    return (
-      <div className={componentClassName}>
-        {shouldRenderOverline && (
-          <div className={overlineClassName}>
-            {label && (
-              <FieldLabel className={labelClassName} htmlFor={idVar}>
-                {label}
-              </FieldLabel>
-            )}
-            {required && showHint && (
-              <Text
-                as="span"
-                className={requiredTextClassName}
-                preset="body-sm"
-              >
-                (Required)
-              </Text>
-            )}
-            {!required && showHint && (
-              <Text
-                as="span"
-                className={requiredTextClassName}
-                preset="body-sm"
-              >
-                (Optional)
-              </Text>
-            )}
-            {maxLengthShown && (
-              <div className={styles['textarea-field__character-counter']}>
-                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
-                / {maxLengthShown}
-              </div>
-            )}
-          </div>
-        )}
-        <TextArea
-          aria-describedby={ariaDescribedByVar}
-          aria-disabled={disabled}
-          className={textareaClassName}
-          defaultValue={defaultValue}
-          disabled={disabled}
-          id={idVar}
-          maxLength={maxLength}
-          onChange={(e) => {
-            setFieldText(e.target.value);
-            onChange && onChange(e);
-          }}
-          readOnly={readOnly}
-          ref={ref}
-          required={required}
-          status={shouldRenderError ? 'critical' : status}
-          {...other}
-        >
-          {children}
-        </TextArea>
-        {(fieldNote || maxLengthShown) && (
-          <div className={styles['textarea-field__footer']}>
-            {fieldNote && (
-              <FieldNote
-                className={styles['textarea-field__field-note']}
-                disabled={disabled}
-                id={ariaDescribedByVar}
-                status={shouldRenderError ? 'critical' : status}
-              >
-                {fieldNote}
-              </FieldNote>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
-TextareaField.displayName = 'TextareaField';
-TextArea.displayName = 'TextareaField.Textarea';
-
-TextareaField.TextArea = TextArea;
-TextareaField.Label = FieldLabel;
diff --git a/src/components/TextareaField/TextareaField.module.css b/src/components/TextareaField/TextareaField.module.css
index c28361a2a..93f6c73c1 100644
--- a/src/components/TextareaField/TextareaField.module.css
+++ b/src/components/TextareaField/TextareaField.module.css
@@ -3,16 +3,21 @@
 /*------------------------------------*\
     # TEXTAREA FIELD
 \*------------------------------------*/
+/**
+ * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
+ */
 
 /**
  * Default input styles 
  */
 .textarea {
-  @mixin inputStyles;
-}
+  @mixin inputStylesV2;
+  padding: calc(var(--eds-size-1) / 16 * 1rem) 0.75rem;
 
-.textarea--disabled:focus {
-  outline: none;
+  &:read-only:not(:disabled) {
+    border: 0;
+    border-bottom: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
 }
 
 /**
@@ -20,32 +25,24 @@
  */
 .textarea-field__overline {
   display: flex;
-  justify-content: space-between;
   margin-bottom: calc(var(--eds-size-half) / 16 * 1rem);
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
 }
 
 .textarea-field__overline--no-label {
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .textarea-field__label {
-  color: var(--eds-theme-color-form-label);
   font: var(--eds-theme-typography-form-label);
 }
-.textarea-field__label--disabled {
-  color: var(--eds-theme-color-text-disabled);
-}
 
-.textarea-field__required-text {
-  color: var(--eds-theme-color-text-neutral-subtle);
-  font: var(--eds-theme-typography-body-sm);
-}
-.textarea-field__required-text--disabled {
-  color: var(--eds-theme-color-text-disabled);
+.textarea-field__label--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
 }
 
 .textarea-field--invalid-length {
-  color: var(--eds-theme-color-text-utility-error);
+  color: var(--eds-theme-color-text-utility-critical);
 }
 
 .textarea-field__footer {
@@ -60,7 +57,6 @@
 .textarea-field__character-counter {
   font: var(--eds-theme-typography-body-sm);
 
-  color: var(--eds-theme-color-text-neutral-default);
   flex: 1 0 50%;
   text-align: right;
 }
diff --git a/src/components/TextareaField/TextareaField.stories.tsx b/src/components/TextareaField/TextareaField.stories.tsx
index 78f495ba6..7dcf266a4 100644
--- a/src/components/TextareaField/TextareaField.stories.tsx
+++ b/src/components/TextareaField/TextareaField.stories.tsx
@@ -7,6 +7,7 @@ const meta: Meta<typeof TextareaField> = {
   title: 'Components/TextareaField',
   component: TextareaField,
   args: {
+    className: 'w-96',
     placeholder: 'Enter long-form text here',
     defaultValue: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
@@ -18,8 +19,9 @@ praesentium, commodi eligendi asperiores quis dolorum porro.`,
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.3'],
+    badges: ['intro-1.3', 'current-2.0'],
   },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
 
 export default meta;
@@ -67,16 +69,67 @@ export const WhenDisabled: Story = {
   },
 };
 
+export const WhenReadOnly: Story = {
+  args: {
+    readOnly: true,
+    rows: 2,
+  },
+  parameters: {
+    axe: {
+      // Disabled input does not need to meet color contrast
+      disabledRules: ['color-contrast'],
+    },
+  },
+};
+
+/**
+ * The default status isn't really anything, but exists to allow a value to be set if needed. This applies
+ * the neutral styles.
+ */
+export const WhenDefaultStatus: Story = {
+  args: {
+    status: 'default',
+    fieldNote: 'Text should be at least 100 characters',
+  },
+};
+
+/**
+ * When in an error state, this is the status to use. It matches other components which have a critical status.
+ */
 export const WhenError: Story = {
   args: {
-    isError: true,
+    status: 'critical',
+    fieldNote: 'Text should be at least 100 characters',
+  },
+};
+
+/**
+ * You can also apply a warning status.
+ */
+export const WhenWarning: Story = {
+  args: {
+    status: 'warning',
     fieldNote: 'Text should be at least 100 characters',
   },
 };
 
+/**
+ * Textarea components can be set as required.
+ */
 export const WhenRequired: Story = {
   args: {
     required: true,
+    showHint: true,
+  },
+};
+
+/**
+ * ... or optional.
+ */
+export const WhenOptional: Story = {
+  args: {
+    required: false,
+    showHint: true,
   },
 };
 
diff --git a/src/components/TextareaField/TextareaField.tsx b/src/components/TextareaField/TextareaField.tsx
index 2bc3592eb..0d30caadd 100644
--- a/src/components/TextareaField/TextareaField.tsx
+++ b/src/components/TextareaField/TextareaField.tsx
@@ -7,12 +7,16 @@ import type {
   EitherInclusive,
   ForwardedRefComponent,
 } from '../../util/utility-types';
+
+import type { Status } from '../../util/variant-types';
+import FieldLabel from '../FieldLabel';
 import FieldNote from '../FieldNote';
-import InputLabel from '../InputLabel';
 import Text from '../Text';
+
 import styles from './TextareaField.module.css';
 
 type TextareaFieldProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  // Component API
   /**
    * Text content of the field upon instantiation
    */
@@ -33,15 +37,24 @@ type TextareaFieldProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
    * HTML id for the component. Can be used with a custom Label component
    */
   id?: string;
-  /**
-   * Error state of the form field
-   */
-  isError?: boolean;
+  // Design API
   /**
    * Behaves similar to `maxLength` but allows the user to continue typing more text.
    * Should not be larger than `maxLength`, if present.
    */
   recommendedMaxLength?: number;
+  /**
+   * Whether it should show the field hint or not
+   *
+   * **Default is `"false"`**.
+   */
+  showHint?: boolean;
+  /**
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
+   */
+  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
 } & EitherInclusive<
     {
       /**
@@ -62,7 +75,7 @@ type TextareaFieldType = ForwardedRefComponent<
   TextareaFieldProps
 > & {
   TextArea?: typeof TextArea;
-  Label?: typeof InputLabel;
+  Label?: typeof FieldLabel;
 };
 
 type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -79,9 +92,11 @@ type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
    */
   disabled?: boolean;
   /**
-   * Whether the error state is active
+   * Status for the field state
+   *
+   * **Default is `"default"`**.
    */
-  isError?: boolean;
+  status?: 'default' | Extract<Status, 'warning' | 'critical'>;
 };
 
 /**
@@ -94,14 +109,16 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       children,
       disabled,
       defaultValue = '',
-      isError = false,
+      readOnly,
+      status = 'default',
       ...other
     },
     ref,
   ) => {
     const componentClassName = clsx(
       styles['textarea'],
-      isError && styles['error'],
+      status === 'critical' && styles['error'],
+      status === 'warning' && styles['warning'],
       disabled && styles['textarea--disabled'],
       className,
     );
@@ -110,6 +127,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       <textarea
         className={componentClassName}
         defaultValue={children || defaultValue}
+        disabled={disabled}
+        readOnly={readOnly}
         ref={ref}
         {...other}
       ></textarea>
@@ -136,12 +155,14 @@ export const TextareaField: TextareaFieldType = forwardRef(
       disabled,
       fieldNote,
       id,
-      isError,
       label,
       maxLength,
       onChange,
+      readOnly,
       recommendedMaxLength,
       required,
+      showHint,
+      status = 'default',
       ...other
     },
     ref,
@@ -162,7 +183,9 @@ export const TextareaField: TextareaFieldType = forwardRef(
         : false;
 
     const shouldRenderError =
-      isError || textExceedsMaxLength || textExceedsRecommendedLength;
+      status === 'critical' ||
+      textExceedsMaxLength ||
+      textExceedsRecommendedLength;
 
     const ariaDescribedByVar = fieldNote
       ? ariaDescribedBy || generatedAriaDescribedById
@@ -180,7 +203,6 @@ export const TextareaField: TextareaFieldType = forwardRef(
     );
 
     const requiredTextClassName = clsx(
-      styles['textarea-field__required-text'],
       disabled && styles['textarea-field__required-text--disabled'],
     );
     const fieldLengthCountClassName = clsx(
@@ -188,6 +210,10 @@ export const TextareaField: TextareaFieldType = forwardRef(
         styles['textarea-field--invalid-length'],
     );
 
+    const textareaClassName = clsx(
+      readOnly && styles['textarea-field__textarea--read-only'],
+    );
+
     // Pick the smallest of the lengths to set as the maximum value allowed
     const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);
 
@@ -196,32 +222,52 @@ export const TextareaField: TextareaFieldType = forwardRef(
         {shouldRenderOverline && (
           <div className={overlineClassName}>
             {label && (
-              <InputLabel className={labelClassName} htmlFor={idVar}>
+              <FieldLabel className={labelClassName} htmlFor={idVar}>
                 {label}
-              </InputLabel>
+              </FieldLabel>
+            )}
+            {required && showHint && (
+              <Text
+                as="span"
+                className={requiredTextClassName}
+                preset="body-sm"
+              >
+                (Required)
+              </Text>
             )}
-            {required && (
-              <Text as="p" className={requiredTextClassName} preset="body-sm">
-                Required
+            {!required && showHint && (
+              <Text
+                as="span"
+                className={requiredTextClassName}
+                preset="body-sm"
+              >
+                (Optional)
               </Text>
             )}
+            {maxLengthShown && (
+              <div className={styles['textarea-field__character-counter']}>
+                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
+                / {maxLengthShown}
+              </div>
+            )}
           </div>
         )}
         <TextArea
           aria-describedby={ariaDescribedByVar}
           aria-disabled={disabled}
+          className={textareaClassName}
           defaultValue={defaultValue}
           disabled={disabled}
           id={idVar}
-          isError={shouldRenderError}
           maxLength={maxLength}
           onChange={(e) => {
             setFieldText(e.target.value);
             onChange && onChange(e);
           }}
-          readOnly={disabled}
+          readOnly={readOnly}
           ref={ref}
           required={required}
+          status={shouldRenderError ? 'critical' : status}
           {...other}
         >
           {children}
@@ -233,17 +279,11 @@ export const TextareaField: TextareaFieldType = forwardRef(
                 className={styles['textarea-field__field-note']}
                 disabled={disabled}
                 id={ariaDescribedByVar}
-                isError={shouldRenderError}
+                status={shouldRenderError ? 'critical' : status}
               >
                 {fieldNote}
               </FieldNote>
             )}
-            {maxLengthShown && (
-              <div className={styles['textarea-field__character-counter']}>
-                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
-                / {maxLengthShown}
-              </div>
-            )}
           </div>
         )}
       </div>
@@ -255,4 +295,4 @@ TextareaField.displayName = 'TextareaField';
 TextArea.displayName = 'TextareaField.Textarea';
 
 TextareaField.TextArea = TextArea;
-TextareaField.Label = InputLabel;
+TextareaField.Label = FieldLabel;
diff --git a/src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap b/src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap
deleted file mode 100644
index b235c3051..000000000
--- a/src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap
+++ /dev/null
@@ -1,730 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TextareaField /> Default story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":r0:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":r1:"
-      aria-label="Text Label"
-      class="textarea"
-      id=":r0:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":r1:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenDefaultStatus story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":ra:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":rb:"
-      class="textarea"
-      id=":ra:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":rb:"
-      >
-        Text should be at least 100 characters
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenDisabled story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline textarea-field__overline--disabled"
-    >
-      <label
-        class="label label--lg textarea-field__label textarea-field__label--disabled"
-        for=":r6:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":r7:"
-      aria-disabled="true"
-      class="textarea textarea--disabled"
-      disabled=""
-      id=":r6:"
-      placeholder="Enter long-form text here"
-      rows="2"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        aria-disabled="true"
-        class="field-note field-note--disabled textarea-field__field-note"
-        id=":r7:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenError story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":rc:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":rd:"
-      class="textarea error"
-      id=":rc:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note field-note--error textarea-field__field-note"
-        id=":rd:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            error
-          </title>
-          <path
-            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-          />
-        </svg>
-        Text should be at least 100 characters
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenNoDefaultValue story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":r4:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      class="textarea"
-      id=":r4:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    />
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenOptional story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":ri:"
-      >
-        Textarea Field
-      </label>
-      <span
-        class="text text--body-sm"
-      >
-        (Optional)
-      </span>
-    </div>
-    <textarea
-      aria-describedby=":rj:"
-      class="textarea"
-      id=":ri:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":rj:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenReadOnly story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":r8:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":r9:"
-      class="textarea textarea-field__textarea--read-only"
-      id=":r8:"
-      placeholder="Enter long-form text here"
-      readonly=""
-      rows="2"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":r9:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenRequired story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":rg:"
-      >
-        Textarea Field
-      </label>
-      <span
-        class="text text--body-sm"
-      >
-        (Required)
-      </span>
-    </div>
-    <textarea
-      aria-describedby=":rh:"
-      class="textarea"
-      id=":rg:"
-      placeholder="Enter long-form text here"
-      required=""
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":rh:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenUsingChildren story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":r2:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":r3:"
-      class="textarea"
-      id=":r2:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-    dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-    praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":r3:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WhenWarning story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":re:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":rf:"
-      class="textarea warning"
-      id=":re:"
-      placeholder="Enter long-form text here"
-      rows="5"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note field-note--warning textarea-field__field-note"
-        id=":rf:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            warning
-          </title>
-          <path
-            d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
-          />
-        </svg>
-        Text should be at least 100 characters
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WithADifferentSize story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":rk:"
-      >
-        Textarea Field
-      </label>
-    </div>
-    <textarea
-      aria-describedby=":rl:"
-      class="textarea"
-      id=":rk:"
-      placeholder="Enter long-form text here"
-      rows="10"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note textarea-field__field-note"
-        id=":rl:"
-      >
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":rm:"
-      >
-        Textarea Field
-      </label>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
-    </div>
-    <textarea
-      aria-describedby=":rn:"
-      class="textarea error"
-      id=":rm:"
-      maxlength="144"
-      placeholder="Enter long-form text here"
-      required=""
-      rows="10"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note field-note--error textarea-field__field-note"
-        id=":rn:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            error
-          </title>
-          <path
-            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-          />
-        </svg>
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WithARecommendedLength story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":ro:"
-      >
-        Textarea Field
-      </label>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
-    </div>
-    <textarea
-      aria-describedby=":rp:"
-      class="textarea error"
-      id=":ro:"
-      placeholder="Enter long-form text here"
-      required=""
-      rows="10"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note field-note--error textarea-field__field-note"
-        id=":rp:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            error
-          </title>
-          <path
-            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-          />
-        </svg>
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TextareaField /> WithBothRecommendedAndMaxLengths story renders snapshot 1`] = `
-<div
-  class="p-8"
->
-  <div
-    class="textarea-field w-96"
-  >
-    <div
-      class="textarea-field__overline"
-    >
-      <label
-        class="label label--lg textarea-field__label"
-        for=":rq:"
-      >
-        Textarea Field
-      </label>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
-    </div>
-    <textarea
-      aria-describedby=":rr:"
-      class="textarea error"
-      id=":rq:"
-      maxlength="256"
-      placeholder="Enter long-form text here"
-      required=""
-      rows="10"
-      spellcheck="false"
-    >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
-dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
-praesentium, commodi eligendi asperiores quis dolorum porro.
-    </textarea>
-    <div
-      class="textarea-field__footer"
-    >
-      <div
-        class="field-note field-note--error textarea-field__field-note"
-        id=":rr:"
-      >
-        <svg
-          class="icon field-note__icon"
-          fill="currentColor"
-          height="1rem"
-          role="img"
-          style="--icon-size: 1rem;"
-          viewBox="0 0 24 24"
-          width="1rem"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            error
-          </title>
-          <path
-            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-          />
-        </svg>
-        Longer Field description
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap b/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
index 8331ecdd3..b235c3051 100644
--- a/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
+++ b/src/components/TextareaField/__snapshots__/TextareaField.test.tsx.snap
@@ -2,39 +2,86 @@
 
 exports[`<TextareaField /> Default story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":r0:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-  </div>
-  <textarea
-    aria-describedby=":r1:"
-    aria-label="Text Label"
-    class="textarea"
-    id=":r0:"
-    placeholder="Enter long-form text here"
-    rows="5"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      <label
+        class="label label--lg textarea-field__label"
+        for=":r0:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":r1:"
+      aria-label="Text Label"
+      class="textarea"
+      id=":r0:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
+    </textarea>
+    <div
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note textarea-field__field-note"
+        id=":r1:"
+      >
+        Longer Field description
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TextareaField /> WhenDefaultStatus story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
   <div
-    class="textarea-field__footer"
+    class="textarea-field w-96"
   >
     <div
-      class="field-note textarea-field__field-note"
-      id=":r1:"
+      class="textarea-field__overline"
     >
-      Longer Field description
+      <label
+        class="label label--lg textarea-field__label"
+        for=":ra:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":rb:"
+      class="textarea"
+      id=":ra:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
+praesentium, commodi eligendi asperiores quis dolorum porro.
+    </textarea>
+    <div
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note textarea-field__field-note"
+        id=":rb:"
+      >
+        Text should be at least 100 characters
+      </div>
     </div>
   </div>
 </div>
@@ -42,40 +89,45 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WhenDisabled story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline textarea-field__overline--disabled"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label textarea-field__label--disabled"
-      for=":r6:"
+    <div
+      class="textarea-field__overline textarea-field__overline--disabled"
     >
-      Textarea Field
-    </label>
-  </div>
-  <textarea
-    aria-describedby=":r7:"
-    aria-disabled="true"
-    class="textarea textarea--disabled"
-    id=":r6:"
-    placeholder="Enter long-form text here"
-    readonly=""
-    rows="2"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      <label
+        class="label label--lg textarea-field__label textarea-field__label--disabled"
+        for=":r6:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":r7:"
+      aria-disabled="true"
+      class="textarea textarea--disabled"
+      disabled=""
+      id=":r6:"
+      placeholder="Enter long-form text here"
+      rows="2"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
+    </textarea>
     <div
-      class="field-note field-note--disabled textarea-field__field-note"
-      id=":r7:"
+      class="textarea-field__footer"
     >
-      Longer Field description
+      <div
+        aria-disabled="true"
+        class="field-note field-note--disabled textarea-field__field-note"
+        id=":r7:"
+      >
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
@@ -83,55 +135,59 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WhenError story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":r8:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-  </div>
-  <textarea
-    aria-describedby=":r9:"
-    class="textarea error"
-    id=":r8:"
-    placeholder="Enter long-form text here"
-    rows="5"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      <label
+        class="label label--lg textarea-field__label"
+        for=":rc:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":rd:"
+      class="textarea error"
+      id=":rc:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
+    </textarea>
     <div
-      class="field-note field-note--error textarea-field__field-note"
-      id=":r9:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          error
-        </title>
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      Text should be at least 100 characters
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note field-note--error textarea-field__field-note"
+        id=":rd:"
+      >
+        <svg
+          class="icon field-note__icon"
+          fill="currentColor"
+          height="1rem"
+          role="img"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            error
+          </title>
+          <path
+            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+          />
+        </svg>
+        Text should be at least 100 characters
+      </div>
     </div>
   </div>
 </div>
@@ -139,68 +195,168 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WhenNoDefaultValue story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":r4:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
+      <label
+        class="label label--lg textarea-field__label"
+        for=":r4:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      class="textarea"
+      id=":r4:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    />
   </div>
-  <textarea
-    class="textarea"
-    id=":r4:"
-    placeholder="Enter long-form text here"
-    rows="5"
-    spellcheck="false"
-  />
 </div>
 `;
 
-exports[`<TextareaField /> WhenRequired story renders snapshot 1`] = `
+exports[`<TextareaField /> WhenOptional story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":ra:"
+    <div
+      class="textarea-field__overline"
+    >
+      <label
+        class="label label--lg textarea-field__label"
+        for=":ri:"
+      >
+        Textarea Field
+      </label>
+      <span
+        class="text text--body-sm"
+      >
+        (Optional)
+      </span>
+    </div>
+    <textarea
+      aria-describedby=":rj:"
+      class="textarea"
+      id=":ri:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
     >
-      Textarea Field
-    </label>
-    <p
-      class="text text--body-sm textarea-field__required-text"
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
+praesentium, commodi eligendi asperiores quis dolorum porro.
+    </textarea>
+    <div
+      class="textarea-field__footer"
     >
-      Required
-    </p>
+      <div
+        class="field-note textarea-field__field-note"
+        id=":rj:"
+      >
+        Longer Field description
+      </div>
+    </div>
   </div>
-  <textarea
-    aria-describedby=":rb:"
-    class="textarea"
-    id=":ra:"
-    placeholder="Enter long-form text here"
-    required=""
-    rows="5"
-    spellcheck="false"
+</div>
+`;
+
+exports[`<TextareaField /> WhenReadOnly story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="textarea-field w-96"
   >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+    <div
+      class="textarea-field__overline"
+    >
+      <label
+        class="label label--lg textarea-field__label"
+        for=":r8:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":r9:"
+      class="textarea textarea-field__textarea--read-only"
+      id=":r8:"
+      placeholder="Enter long-form text here"
+      readonly=""
+      rows="2"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
+    </textarea>
+    <div
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note textarea-field__field-note"
+        id=":r9:"
+      >
+        Longer Field description
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TextareaField /> WhenRequired story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
   <div
-    class="textarea-field__footer"
+    class="textarea-field w-96"
   >
     <div
-      class="field-note textarea-field__field-note"
-      id=":rb:"
+      class="textarea-field__overline"
     >
-      Longer Field description
+      <label
+        class="label label--lg textarea-field__label"
+        for=":rg:"
+      >
+        Textarea Field
+      </label>
+      <span
+        class="text text--body-sm"
+      >
+        (Required)
+      </span>
+    </div>
+    <textarea
+      aria-describedby=":rh:"
+      class="textarea"
+      id=":rg:"
+      placeholder="Enter long-form text here"
+      required=""
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
+praesentium, commodi eligendi asperiores quis dolorum porro.
+    </textarea>
+    <div
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note textarea-field__field-note"
+        id=":rh:"
+      >
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
@@ -208,152 +364,219 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WhenUsingChildren story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":r2:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-  </div>
-  <textarea
-    aria-describedby=":r3:"
-    class="textarea"
-    id=":r2:"
-    placeholder="Enter long-form text here"
-    rows="5"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      <label
+        class="label label--lg textarea-field__label"
+        for=":r2:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":r3:"
+      class="textarea"
+      id=":r2:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
     dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
     praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
+    </textarea>
     <div
-      class="field-note textarea-field__field-note"
-      id=":r3:"
+      class="textarea-field__footer"
     >
-      Longer Field description
+      <div
+        class="field-note textarea-field__field-note"
+        id=":r3:"
+      >
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<TextareaField /> WithADifferentSize story renders snapshot 1`] = `
+exports[`<TextareaField /> WhenWarning story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":rc:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-  </div>
-  <textarea
-    aria-describedby=":rd:"
-    class="textarea"
-    id=":rc:"
-    placeholder="Enter long-form text here"
-    rows="10"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      <label
+        class="label label--lg textarea-field__label"
+        for=":re:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":rf:"
+      class="textarea warning"
+      id=":re:"
+      placeholder="Enter long-form text here"
+      rows="5"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
+    </textarea>
     <div
-      class="field-note textarea-field__field-note"
-      id=":rd:"
+      class="textarea-field__footer"
     >
-      Longer Field description
+      <div
+        class="field-note field-note--warning textarea-field__field-note"
+        id=":rf:"
+      >
+        <svg
+          class="icon field-note__icon"
+          fill="currentColor"
+          height="1rem"
+          role="img"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            warning
+          </title>
+          <path
+            d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
+          />
+        </svg>
+        Text should be at least 100 characters
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
+exports[`<TextareaField /> WithADifferentSize story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":re:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-    <p
-      class="text text--body-sm textarea-field__required-text"
+      <label
+        class="label label--lg textarea-field__label"
+        for=":rk:"
+      >
+        Textarea Field
+      </label>
+    </div>
+    <textarea
+      aria-describedby=":rl:"
+      class="textarea"
+      id=":rk:"
+      placeholder="Enter long-form text here"
+      rows="10"
+      spellcheck="false"
     >
-      Required
-    </p>
-  </div>
-  <textarea
-    aria-describedby=":rf:"
-    class="textarea error"
-    id=":re:"
-    maxlength="144"
-    placeholder="Enter long-form text here"
-    required=""
-    rows="10"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
+    </textarea>
+    <div
+      class="textarea-field__footer"
+    >
+      <div
+        class="field-note textarea-field__field-note"
+        id=":rl:"
+      >
+        Longer Field description
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
   <div
-    class="textarea-field__footer"
+    class="textarea-field w-96"
   >
     <div
-      class="field-note field-note--error textarea-field__field-note"
-      id=":rf:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          error
-        </title>
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      Longer Field description
+      class="textarea-field__overline"
+    >
+      <label
+        class="label label--lg textarea-field__label"
+        for=":rm:"
+      >
+        Textarea Field
+      </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
     </div>
+    <textarea
+      aria-describedby=":rn:"
+      class="textarea error"
+      id=":rm:"
+      maxlength="144"
+      placeholder="Enter long-form text here"
+      required=""
+      rows="10"
+      spellcheck="false"
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
+praesentium, commodi eligendi asperiores quis dolorum porro.
+    </textarea>
     <div
-      class="textarea-field__character-counter"
+      class="textarea-field__footer"
     >
-      <span
-        class="textarea-field--invalid-length"
+      <div
+        class="field-note field-note--error textarea-field__field-note"
+        id=":rn:"
       >
-        202
-      </span>
-       
-      / 
-      144
+        <svg
+          class="icon field-note__icon"
+          fill="currentColor"
+          height="1rem"
+          role="img"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            error
+          </title>
+          <path
+            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+          />
+        </svg>
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
@@ -361,73 +584,72 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WithARecommendedLength story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":rg:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-    <p
-      class="text text--body-sm textarea-field__required-text"
+      <label
+        class="label label--lg textarea-field__label"
+        for=":ro:"
+      >
+        Textarea Field
+      </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
+    </div>
+    <textarea
+      aria-describedby=":rp:"
+      class="textarea error"
+      id=":ro:"
+      placeholder="Enter long-form text here"
+      required=""
+      rows="10"
+      spellcheck="false"
     >
-      Required
-    </p>
-  </div>
-  <textarea
-    aria-describedby=":rh:"
-    class="textarea error"
-    id=":rg:"
-    placeholder="Enter long-form text here"
-    required=""
-    rows="10"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
-    <div
-      class="field-note field-note--error textarea-field__field-note"
-      id=":rh:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          error
-        </title>
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      Longer Field description
-    </div>
+    </textarea>
     <div
-      class="textarea-field__character-counter"
+      class="textarea-field__footer"
     >
-      <span
-        class="textarea-field--invalid-length"
+      <div
+        class="field-note field-note--error textarea-field__field-note"
+        id=":rp:"
       >
-        202
-      </span>
-       
-      / 
-      144
+        <svg
+          class="icon field-note__icon"
+          fill="currentColor"
+          height="1rem"
+          role="img"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            error
+          </title>
+          <path
+            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+          />
+        </svg>
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
@@ -435,74 +657,73 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
 
 exports[`<TextareaField /> WithBothRecommendedAndMaxLengths story renders snapshot 1`] = `
 <div
-  class="textarea-field"
+  class="p-8"
 >
   <div
-    class="textarea-field__overline"
+    class="textarea-field w-96"
   >
-    <label
-      class="label label--lg textarea-field__label"
-      for=":ri:"
+    <div
+      class="textarea-field__overline"
     >
-      Textarea Field
-    </label>
-    <p
-      class="text text--body-sm textarea-field__required-text"
+      <label
+        class="label label--lg textarea-field__label"
+        for=":rq:"
+      >
+        Textarea Field
+      </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
+    </div>
+    <textarea
+      aria-describedby=":rr:"
+      class="textarea error"
+      id=":rq:"
+      maxlength="256"
+      placeholder="Enter long-form text here"
+      required=""
+      rows="10"
+      spellcheck="false"
     >
-      Required
-    </p>
-  </div>
-  <textarea
-    aria-describedby=":rj:"
-    class="textarea error"
-    id=":ri:"
-    maxlength="256"
-    placeholder="Enter long-form text here"
-    required=""
-    rows="10"
-    spellcheck="false"
-  >
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id neque nemo
 dicta rerum commodi et fugiat quo optio veniam! Ea odio corporis nemo
 praesentium, commodi eligendi asperiores quis dolorum porro.
-  </textarea>
-  <div
-    class="textarea-field__footer"
-  >
-    <div
-      class="field-note field-note--error textarea-field__field-note"
-      id=":rj:"
-    >
-      <svg
-        class="icon field-note__icon"
-        fill="currentColor"
-        height="1rem"
-        role="img"
-        style="--icon-size: 1rem;"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>
-          error
-        </title>
-        <path
-          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
-        />
-      </svg>
-      Longer Field description
-    </div>
+    </textarea>
     <div
-      class="textarea-field__character-counter"
+      class="textarea-field__footer"
     >
-      <span
-        class="textarea-field--invalid-length"
+      <div
+        class="field-note field-note--error textarea-field__field-note"
+        id=":rr:"
       >
-        202
-      </span>
-       
-      / 
-      144
+        <svg
+          class="icon field-note__icon"
+          fill="currentColor"
+          height="1rem"
+          role="img"
+          style="--icon-size: 1rem;"
+          viewBox="0 0 24 24"
+          width="1rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            error
+          </title>
+          <path
+            d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+          />
+        </svg>
+        Longer Field description
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/TextareaField/index.ts b/src/components/TextareaField/index.ts
index 600f526ef..41336b605 100644
--- a/src/components/TextareaField/index.ts
+++ b/src/components/TextareaField/index.ts
@@ -1,2 +1 @@
 export { TextareaField as default } from './TextareaField';
-export { TextareaField as TextareaFieldV2 } from './TextareaField-v2';
diff --git a/src/components/Toast/Toast.module.css b/src/components/Toast/Toast.module.css
deleted file mode 100644
index aee801527..000000000
--- a/src/components/Toast/Toast.module.css
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # TOAST
-\*------------------------------------*/
-
-/**
- * Message of information, success, caution, or warning to the user.
- *
- * Container for the toast content, to provide background styling.
- */
-.toast {
-  width: 100%;
-  max-width: 25rem;
-
-  padding-left: calc(var(--eds-size-2) / 16 * 1rem);
-  padding-right: calc(var(--eds-size-1) / 16 * 1rem);
-
-  display: grid;
-  gap: calc(var(--eds-size-1) / 16 * 1rem);
-  grid-template-columns: 1fr min-content;
-  align-items: center;
-
-  border-style: solid;
-  border-width: calc(var(--eds-border-width-sm) * 1px);
-  /**
-   * The thick left border operates as a foreground band of color, 
-   * so foreground rather than border is used
-   */
-  border-left-width: calc(var(--eds-border-width-lg) * 1px);
-  border-radius: calc(var(--eds-size-half) / 16 * 1rem);
-  /**
-   * The border CSS variables are defined in the messaging mixins    
-   */
-  border-color: var(--messaging-border-color);
-  border-left-color: var(--border-dark-color);
-
-  box-shadow: var(--eds-box-shadow-sm);
-}
-
-.toast--success {
-  @mixin messagingSuccess;
-}
-
-.toast--error {
-  @mixin messagingError;
-}
-
-/**
- * The toast content, usually an icon and text message. Does not include the optional close button
- */
-.toast__content {
-  padding-top: calc(var(--eds-size-2) / 16 * 1rem);
-  padding-bottom: calc(var(--eds-size-2) / 16 * 1rem);
-  /**
-   * Grid places the icon on the left and message on the right, with both vertically aligned to the center.   
-   */
-  display: grid;
-  gap: calc(var(--eds-size-2) / 16 * 1rem);
-  grid-template-columns: min-content 1fr;
-  align-items: center;
-}
-
-/**
- * The text in the toast. Styled via mixins over using Text component.
- */
-.toast__text {
-  font: var(--eds-typography-preset-007-bold);
-
-  color: inherit;
-}
diff --git a/src/components/Toast/Toast.stories.ts b/src/components/Toast/Toast.stories.ts
deleted file mode 100644
index 1915cef12..000000000
--- a/src/components/Toast/Toast.stories.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-import { Toast } from './Toast';
-
-export default {
-  title: 'Components/Toast',
-  component: Toast,
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', BADGE.DEPRECATED],
-  },
-  argTypes: { onDismiss: { action: 'dismissed' } },
-  args: {
-    children: "You've got toast!",
-  },
-} as Meta<Args>;
-
-type Args = ComponentProps<typeof Toast>;
-
-export const Success: StoryObj<Args> = {
-  args: {
-    variant: 'success',
-  },
-};
-
-export const Error: StoryObj<Args> = {
-  args: {
-    variant: 'error',
-  },
-};
-
-export const NotDismissable: StoryObj<Args> = {
-  args: {
-    variant: 'success',
-    // @ts-expect-error onDismiss is not nullable, but this is needed to remove the arg from
-    // storybook's actions addon
-    onDismiss: null,
-  },
-};
diff --git a/src/components/Toast/Toast.test.ts b/src/components/Toast/Toast.test.ts
deleted file mode 100644
index 766f8d314..000000000
--- a/src/components/Toast/Toast.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 './Toast.stories';
-
-describe('<Toast />', () => {
-  generateSnapshots(stories as StoryFile);
-});
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
deleted file mode 100644
index d6a5ffc2f..000000000
--- a/src/components/Toast/Toast.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import type { ReactNode } from 'react';
-import Button from '../Button';
-import Icon, { type IconName } from '../Icon';
-import styles from './Toast.module.css';
-
-export type Variant = 'success' | 'error';
-
-export type Props = {
-  /**
-   * Additional class names that can be appended to the component, passed in for styling.
-   */
-  className?: string;
-  /**
-   * The child node(s) contains the toast message.
-   */
-  children: ReactNode;
-  /**
-   * The color of the Toast, based on EDS defined colors. Also determines the icon used.
-   * Note that the Icon mapping matches the style of Banners.
-   */
-  variant: Variant;
-  /**
-   * Callback when Toast is dismissed.
-   */
-  onDismiss?: () => void;
-};
-
-/**
- * `import {Toast} from "@chanzuckerberg/eds";`
- *
- * 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.
- */
-export const Toast = ({
-  children,
-  className,
-  variant,
-  onDismiss,
-  // Allow for additional attributes such as aria roles
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['toast'],
-    variant === 'success' && styles['toast--success'],
-    variant === 'error' && styles['toast--error'],
-    className,
-  );
-  const icon: IconName = variant === 'success' ? 'check-circle' : 'warning';
-  return (
-    <div className={componentClassName} {...other}>
-      <div className={styles['toast__content']}>
-        <Icon name={icon} purpose="informative" size="1.5rem" title={variant} />
-        <p className={styles['toast__text']}>{children}</p>
-      </div>
-      {onDismiss && (
-        <Button onClick={onDismiss} status={variant} variant="icon">
-          <Icon
-            name="close"
-            purpose="informative"
-            size="2rem"
-            title="dismiss message"
-          />
-        </Button>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/Toast/__snapshots__/Toast.test.ts.snap b/src/components/Toast/__snapshots__/Toast.test.ts.snap
deleted file mode 100644
index 5bb0def9a..000000000
--- a/src/components/Toast/__snapshots__/Toast.test.ts.snap
+++ /dev/null
@@ -1,100 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Toast /> Error story renders snapshot 1`] = `
-<div
-  class="toast toast--error"
->
-  <div
-    class="toast__content"
-  >
-    <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>
-        error
-      </title>
-      <path
-        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
-      />
-    </svg>
-    <p
-      class="toast__text"
-    >
-      You've got toast!
-    </p>
-  </div>
-</div>
-`;
-
-exports[`<Toast /> NotDismissable story renders snapshot 1`] = `
-<div
-  class="toast toast--success"
->
-  <div
-    class="toast__content"
-  >
-    <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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <p
-      class="toast__text"
-    >
-      You've got toast!
-    </p>
-  </div>
-</div>
-`;
-
-exports[`<Toast /> Success story renders snapshot 1`] = `
-<div
-  class="toast toast--success"
->
-  <div
-    class="toast__content"
-  >
-    <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>
-        success
-      </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 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
-      />
-    </svg>
-    <p
-      class="toast__text"
-    >
-      You've got toast!
-    </p>
-  </div>
-</div>
-`;
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
deleted file mode 100644
index 2ff3d19c4..000000000
--- a/src/components/Toast/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Toast as default } from './Toast';
diff --git a/src/components/ToastNotification/ToastNotification.stories.ts b/src/components/ToastNotification/ToastNotification.stories.ts
index 0cef1e471..e097b4833 100644
--- a/src/components/ToastNotification/ToastNotification.stories.ts
+++ b/src/components/ToastNotification/ToastNotification.stories.ts
@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 import { ToastNotification } from './ToastNotification';
 
 export default {
-  title: 'Components/V2/ToastNotification',
+  title: 'Components/ToastNotification',
   component: ToastNotification,
   parameters: {
     layout: 'centered',
diff --git a/src/components/ToastNotification/ToastNotification.test.tsx b/src/components/ToastNotification/ToastNotification.test.tsx
index d4fb19a81..001e959da 100644
--- a/src/components/ToastNotification/ToastNotification.test.tsx
+++ b/src/components/ToastNotification/ToastNotification.test.tsx
@@ -9,7 +9,7 @@ const { AutoDismiss } = composeStories(stories);
 
 const { AutoDismiss: skip, ...staticStories } = stories;
 
-describe('<ToastNotification /> (v2)', () => {
+describe('<ToastNotification />', () => {
   afterEach(() => {
     jest.resetAllMocks();
   });
diff --git a/src/components/ToastNotification/ToastNotification.tsx b/src/components/ToastNotification/ToastNotification.tsx
index a96925f00..d07970573 100644
--- a/src/components/ToastNotification/ToastNotification.tsx
+++ b/src/components/ToastNotification/ToastNotification.tsx
@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 
 import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
 import type { Status } from '../../util/variant-types';
-import { ButtonV2 as Button } from '../Button';
-import { IconV2 as Icon } from '../Icon';
+import Button from '../Button';
+import Icon from '../Icon';
 import Text from '../Text';
 
 import styles from './ToastNotification.module.css';
diff --git a/src/components/ToastNotification/__snapshots__/ToastNotification.test.tsx.snap b/src/components/ToastNotification/__snapshots__/ToastNotification.test.tsx.snap
index 25c6de0c9..1afc75874 100644
--- a/src/components/ToastNotification/__snapshots__/ToastNotification.test.tsx.snap
+++ b/src/components/ToastNotification/__snapshots__/ToastNotification.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ToastNotification /> (v2) Critical story renders snapshot 1`] = `
+exports[`<ToastNotification /> Critical story renders snapshot 1`] = `
 <div
   class="toast toast--status-critical w-96"
 >
@@ -30,7 +30,7 @@ exports[`<ToastNotification /> (v2) Critical story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<ToastNotification /> (v2) Default story renders snapshot 1`] = `
+exports[`<ToastNotification /> Default story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable w-96"
 >
@@ -60,7 +60,7 @@ exports[`<ToastNotification /> (v2) Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<ToastNotification /> (v2) Favorable story renders snapshot 1`] = `
+exports[`<ToastNotification /> Favorable story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable w-96"
 >
@@ -90,7 +90,7 @@ exports[`<ToastNotification /> (v2) Favorable story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<ToastNotification /> (v2) NotDismissable story renders snapshot 1`] = `
+exports[`<ToastNotification /> NotDismissable story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable w-96"
 >
diff --git a/src/components/Tooltip/Tooltip-v2.module.css b/src/components/Tooltip/Tooltip-v2.module.css
deleted file mode 100644
index b6cf7191d..000000000
--- a/src/components/Tooltip/Tooltip-v2.module.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/*------------------------------------*\
-    # TOOLTIP
-\*------------------------------------*/
-
-.tooltip {
-  border-style: solid;
-  border-width: calc(var(--eds-border-width-sm) * 1px);
-  border-radius: calc(var(--eds-theme-border-radius-surfaces-md) * 1px);
-  box-shadow: var(--eds-box-shadow-md);
-  max-width: 14rem;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-/**
- * Enables opacity fade animation 
- */
-.tooltip[data-state='hidden'] {
-  opacity: 0;
-}
-
-.tooltip :global(.tippy-content) {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
-}
-
-/**
- * Add arrows
- */
-.tooltip :global(.tippy-arrow) {
-  position: absolute;
-
-  width: 1rem;
-  height: 1rem;
-}
-
-.tooltip :global(.tippy-arrow::before) {
-  position: absolute;
-
-  border-style: solid;
-  border-color: transparent;
-  border-width: 0.5rem;
-
-  content: '';
-}
-
-.tooltip[data-placement^='top'] :global(.tippy-arrow) {
-  left: 0;
-
-  transform: translate3d(73px, 0, 0);
-}
-
-.tooltip[data-placement^='bottom'] :global(.tippy-arrow) {
-  top: 0;
-  left: 0;
-
-  transform: translate3d(73px, 0, 0);
-}
-
-.tooltip[data-placement^='left'] :global(.tippy-arrow) {
-  top: 0;
-  right: 0;
-
-  transform: translate3d(0, 19px, 0);
-}
-
-.tooltip[data-placement^='right'] :global(.tippy-arrow) {
-  top: 0;
-  left: 0;
-
-  transform: translate3d(0, 25px, 0);
-}
-
-.tooltip[data-placement^='top'] :global(.tippy-arrow::before) {
-  left: 0;
-
-  border-top-color: var(--arrow-color);
-  border-bottom-width: 0;
-}
-
-.tooltip[data-placement^='bottom'] :global(.tippy-arrow::before) {
-  left: 0;
-
-  border-bottom-color: var(--arrow-color);
-  border-top-width: 0;
-  top: -7px;
-}
-
-.tooltip[data-placement^='left'] :global(.tippy-arrow::before) {
-  border-left-color: var(--arrow-color);
-  border-right-width: 0;
-  right: -7px;
-}
-
-.tooltip[data-placement^='right'] :global(.tippy-arrow::before) {
-  border-right-color: var(--arrow-color);
-  border-left-width: 0;
-  left: -7px;
-}
-
-.tooltip--variant-default {
-  color: var(--eds-theme-color-text-utility-inverse);
-  border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-  --arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-}
-
-.tooltip--variant-inverse {
-  color: var(--eds-theme-color-text-utility-default-primary);
-  border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
-  --arrow-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
-  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
-}
\ No newline at end of file
diff --git a/src/components/Tooltip/Tooltip-v2.stories.tsx b/src/components/Tooltip/Tooltip-v2.stories.tsx
deleted file mode 100644
index b1cd9a245..000000000
--- a/src/components/Tooltip/Tooltip-v2.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Tooltip } from './Tooltip-v2';
-
-// diminishing the threshold of this component to avoid sub-pixel jittering
-// https://www.chromatic.com/docs/threshold
-const diffThreshold = 0.75;
-const defaultArgs = {
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.',
-  children: <div className="fpo p-1">Target Component</div>,
-  placement: 'right',
-  // most stories show a visible, non-interactive tooltip.
-  // this turns animation off to ensure stable visual snapshots
-  duration: 0,
-  visible: true,
-};
-
-export default {
-  title: 'Components/V2/Tooltip',
-  component: Tooltip,
-  args: defaultArgs,
-  argTypes: {
-    text: {
-      control: {
-        type: 'text',
-      },
-    },
-    children: {
-      control: {
-        type: null,
-      },
-    },
-    visible: {
-      table: {
-        disable: true,
-      },
-    },
-    delay: {
-      control: {
-        type: 'number',
-      },
-    },
-    reference: {
-      control: {
-        type: null,
-      },
-    },
-  },
-  parameters: {
-    layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
-    chromatic: {
-      delay: 500,
-      diffThreshold,
-      diffIncludeAntiAliasing: false,
-    },
-  },
-  decorators: [(Story) => <div className="p-8">{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Tooltip>;
-type Story = StoryObj<Args>;
-
-/**
- * The following stories demonstrate how `Tooltip` can be made to appear on different sides of the trigger.
- * Each story name denotes a value pased to `placement`.
- */
-export const LeftPlacement: Story = {
-  args: {
-    placement: 'left',
-    children: <div className="fpo p-1">Target Component</div>,
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-export const TopPlacement: Story = {
-  args: {
-    placement: 'top',
-    children: <div className="fpo p-1">Target Component</div>,
-  },
-};
-
-export const BottomPlacement: Story = {
-  args: {
-    placement: 'bottom',
-    children: <div className="fpo p-1">Target Component</div>,
-  },
-};
-
-export const LongText: Story = {
-  args: {
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.',
-  },
-};
-
-export const LongTriggerText: Story = {
-  args: {
-    children: <div className="fpo p-1">Longer text to test placement</div>,
-  },
-  parameters: {
-    // Sets the delay (in milliseconds) for a specific story.
-    chromatic: { delay: 300 },
-  },
-};
-
-export const InverseVariant: Story = {
-  args: {
-    ...LeftPlacement.args,
-    variant: 'inverse',
-  },
-  parameters: {
-    backgrounds: { default: 'background-utility-default-high-emphasis' },
-  },
-};
-
-/**
- * Hover over the button to make the tooltip appear.
- */
-export const Interactive: Story = {
-  args: {
-    // reset prop values defined in defaultArgs
-    duration: undefined,
-    visible: undefined,
-    children: <button className="fpo p-1">Target Component</button>,
-  },
-};
-
-/**
- * Hover over the button to make the tooltip appear.
- */
-export const InteractiveDisabled: Story = {
-  args: {
-    duration: undefined,
-  },
-  render: (args) => (
-    <Tooltip
-      childNotInteractive
-      duration={args.duration}
-      placement="top"
-      text={defaultArgs.text}
-    >
-      <div className="fpo p-1">Target Component</div>
-    </Tooltip>
-  ),
-};
diff --git a/src/components/Tooltip/Tooltip-v2.test.tsx b/src/components/Tooltip/Tooltip-v2.test.tsx
deleted file mode 100644
index ca027475d..000000000
--- a/src/components/Tooltip/Tooltip-v2.test.tsx
+++ /dev/null
@@ -1,42 +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 TooltipStoryFile from './Tooltip-v2.stories';
-
-const { Interactive, InteractiveDisabled } = composeStories(TooltipStoryFile);
-
-describe('<Tooltip /> (v2)', () => {
-  generateSnapshots(TooltipStoryFile, {
-    // Tippy renders tooltip as a child of <body> and hence is why baseElement needs to be targetted
-    getElement: (wrapper) => {
-      return wrapper.baseElement;
-    },
-  });
-
-  it('should close tooltip via escape key', async () => {
-    const user = userEvent.setup();
-    // disable animation for test
-    render(<Interactive duration={0} />);
-    const trigger = await screen.findByRole('button');
-    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
-    await user.hover(trigger);
-    expect(screen.getByTestId('tooltip-content')).toBeInTheDocument();
-    await user.keyboard('{Escape}');
-    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
-  });
-
-  it('should close tooltip via escape key for disabled buttons', async () => {
-    const user = userEvent.setup();
-    // disable animation for test
-    render(<InteractiveDisabled duration={0} />);
-    const trigger = await screen.findByTestId('disabled-child-tooltip-wrapper');
-    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
-    await user.hover(trigger);
-    expect(screen.getByTestId('tooltip-content')).toBeInTheDocument();
-    await user.keyboard('{Escape}');
-    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
-  });
-});
diff --git a/src/components/Tooltip/Tooltip-v2.tsx b/src/components/Tooltip/Tooltip-v2.tsx
deleted file mode 100644
index d1382f179..000000000
--- a/src/components/Tooltip/Tooltip-v2.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import type { TippyProps } from '@tippyjs/react';
-import Tippy from '@tippyjs/react';
-import clsx from 'clsx';
-import * as React from 'react';
-import type { HTMLAttributes } from 'react';
-
-import { defaultPopoverModifiersV2 as defaults } from '../PopoverContainer';
-import { Text } from '../Text/Text';
-
-import styles from './Tooltip-v2.module.css';
-
-// Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
-type TooltipProps = {
-  // Component API
-  /**
-   * The element or ref to append the tooltip to.
-   * Defaults to the body element.
-   * 'parent' is suggested if used in a modal.
-   */
-  appendTo?: 'parent' | Element | ((ref: Element) => Element);
-  /**
-   * Behavior of the tooltip transition, defaults to an opacity "fade".
-   * Animation guidelines are provided in https://atomiks.github.io/tippyjs/v5/animations/.
-   * To disable animations, pass `duration={0}`.
-   */
-  animation?: string;
-  /**
-   * The trigger element the tooltip appears next to.
-   */
-  children?: React.ReactElement;
-  /**
-   * If the child being passed into the Tooltip via the `children` prop is not interactive (e.g. a disabled button or an icon).
-   *
-   * Please note that spacing and placement styling will need to be added to a wrapper around the Tooltip,
-   * not on the child component inside the Tooltip, because there will be a wrapper around the child. Example:
-   * <div className="spacing-goes-here"><Tooltip text="Tooltip text"><Button disabled>Button text</Button></Tooltip></div>
-   */
-  childNotInteractive?: boolean;
-  /**
-   * Custom classname for additional styles.
-   *
-   * These styles will only affect the tooltip bubble.
-   */
-  className?: string;
-  /**
-   * How long to delay the Tooltip showing and hiding, in milliseconds.
-   *
-   * If a single number is provided, it will be applied to showing and hiding.
-   * If an array with 2 numbers is provided, the first will apply to showing and
-   * the second will be applied to hiding.
-   * https://atomiks.github.io/tippyjs/v6/all-props/#delay
-   */
-  delay?: number | [number | null, number | null];
-  /**
-   * Duration of Tooltip animation, in milliseconds. Default is 200.
-   */
-  duration?: number;
-  /**
-   * The trigger element the tooltip appears next to.
-   *
-   * Use this instead of `children` if the trigger element is being
-   * stored in a ref. Most cases will use `children` and not
-   * `reference`.
-   */
-  reference?: React.RefObject<Element> | Element;
-  /**
-   * Whether the tooltip is always visible or always invisible.
-   *
-   * This is most often left undefined so the Tooltip component
-   * controls if/when the bubble appears (on hover, click, focus, etc).
-   */
-  visible?: boolean;
-  // Design API
-  /**
-   * Where the tooltip should be placed in relation to the element it's attached to.
-   * See: https://atomiks.github.io/tippyjs/v6/all-props/#placement
-   *
-   * **Default is `"auto"`**.
-   */
-  placement?: Extract<
-    TippyProps['placement'],
-    'auto' | 'top' | 'right' | 'bottom' | 'left'
-  >;
-  /**
-   * The content of the tooltip bubble.
-   */
-  text?: string;
-  /**
-   * The variant treatment for tooltips
-   *
-   * **Default is `"default"`**.
-   */
-  variant?: 'default' | 'inverse';
-} & TippyProps &
-  HTMLAttributes<HTMLElement>;
-
-// @tippyjs/react does not expose tippy.js types, have to extract via props and grab element type from array type
-type Plugins = NonNullable<React.ComponentProps<typeof Tippy>['plugins']>;
-type Plugin = Plugins[number];
-
-/**
- * `import {Tooltip} from "@chanzuckerberg/eds";`
- *
- * A floating information box, attached to other components on the page. Used to display option, additional information.
- *
- * - https://atomiks.github.io/tippyjs/
- * - https://github.com/atomiks/tippyjs-react
- */
-export const Tooltip = ({
-  childNotInteractive,
-  className,
-  duration = 200,
-  placement = 'auto',
-  text,
-  variant = 'default',
-  ...rest
-}: TooltipProps) => {
-  // Hides tooltip when escape key is pressed, following:
-  // https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc
-  const hideOnEsc: Plugin = {
-    name: 'hideOnEsc',
-    defaultValue: true,
-    fn: ({ hide }) => {
-      function onKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
-          hide();
-        }
-      }
-      return {
-        onShow() {
-          document.addEventListener('keydown', onKeyDown);
-        },
-        onHide() {
-          document.removeEventListener('keydown', onKeyDown);
-        },
-      };
-    },
-  };
-
-  let children = rest.children;
-  // Tippy only works on elements with a tabindex. If the child is disabled, we need to
-  // wrap it in an element with a tabindex in order for it to work.
-  if (childNotInteractive) {
-    children = (
-      <span
-        data-testid="disabled-child-tooltip-wrapper"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        {rest.children}
-      </span>
-    );
-  }
-
-  const textContent = (
-    <Text as="span" data-testid="tooltip-content" preset="body-sm">
-      {text}
-    </Text>
-  );
-
-  const tooltipClassNames = clsx(
-    styles['tooltip'],
-    variant && styles[`tooltip--variant-${variant}`],
-    className,
-  );
-
-  // TODO: figure out why the modifiers don't seem to get applied
-  return (
-    <Tippy
-      className={tooltipClassNames}
-      content={textContent}
-      duration={duration}
-      placement={placement}
-      plugins={[hideOnEsc]}
-      popperOptions={{
-        modifiers: defaults,
-      }}
-      {...rest}
-    >
-      {children}
-    </Tippy>
-  );
-};
-
-Tooltip.displayName = 'Tooltip';
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
index 39188a5d2..94848479f 100644
--- a/src/components/Tooltip/Tooltip.module.css
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -2,26 +2,16 @@
     # TOOLTIP
 \*------------------------------------*/
 
-/**
- * TippyJS provides .tippy-box, which has two child elements: .tippy-content and .tippy-arrow.
- *
- * TippyJS also attaches data-attribute `data-placement` depending on how the tooltip is aligned.
- */
-
 .tooltip {
   border-style: solid;
   border-width: calc(var(--eds-border-width-sm) * 1px);
-  border-radius: calc(var(--eds-border-radius-lg) * 1px);
+  border-radius: calc(var(--eds-theme-border-radius-surfaces-md) * 1px);
   box-shadow: var(--eds-box-shadow-md);
+  max-width: 14rem;
 
   @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);
 }
 
 /**
@@ -111,3 +101,17 @@
   border-left-width: 0;
   left: -7px;
 }
+
+.tooltip--variant-default {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+  --arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+}
+
+.tooltip--variant-inverse {
+  color: var(--eds-theme-color-text-utility-default-primary);
+  border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  --arrow-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+}
\ No newline at end of file
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index aae461d51..a24d0262b 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,20 +1,14 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+
 import { Tooltip } from './Tooltip';
 
 // diminishing the threshold of this component to avoid sub-pixel jittering
 // https://www.chromatic.com/docs/threshold
 const diffThreshold = 0.75;
 const defaultArgs = {
-  text: (
-    <span>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-      <strong>Donec a erat eu augue consequat eleifend non vel sem.</strong>{' '}
-      Praesent efficitur mauris ac leo semper accumsan.
-    </span>
-  ),
-  children: <div className="fpo w-3 p-1">&bull;</div>,
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.',
+  children: <div className="fpo p-1">Target Component</div>,
   placement: 'right',
   // most stories show a visible, non-interactive tooltip.
   // this turns animation off to ensure stable visual snapshots
@@ -37,16 +31,27 @@ export default {
         type: null,
       },
     },
-    placement: {
+    visible: {
       table: {
-        defaultValue: { summary: 'top' },
+        disable: true,
+      },
+    },
+    delay: {
+      control: {
+        type: 'number',
+      },
+    },
+    reference: {
+      control: {
+        type: null,
       },
     },
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', BADGE.NEEDS_REVISION],
+    badges: ['intro-1.0', 'current-2.0'],
     chromatic: {
+      delay: 500,
       diffThreshold,
       diffIncludeAntiAliasing: false,
     },
@@ -64,7 +69,7 @@ type Story = StoryObj<Args>;
 export const LeftPlacement: Story = {
   args: {
     placement: 'left',
-    children: <div className="fpo w-3 p-1">&bull;</div>,
+    children: <div className="fpo p-1">Target Component</div>,
   },
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -74,30 +79,20 @@ export const LeftPlacement: Story = {
 export const TopPlacement: Story = {
   args: {
     placement: 'top',
-    children: <div className="fpo w-3 p-1">&bull;</div>,
+    children: <div className="fpo p-1">Target Component</div>,
   },
 };
 
 export const BottomPlacement: Story = {
   args: {
     placement: 'bottom',
-    children: <div className="fpo w-3 p-1">&bull;</div>,
+    children: <div className="fpo p-1">Target Component</div>,
   },
 };
 
 export const LongText: Story = {
   args: {
-    text: (
-      <span>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-        <b>Donec a erat eu augue consequat eleifend non vel sem.</b> Praesent
-        efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum.
-        Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed
-        tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu
-        leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id
-        nulla id, laoreet facilisis est.
-      </span>
-    ),
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.',
   },
 };
 
@@ -105,6 +100,20 @@ export const LongTriggerText: Story = {
   args: {
     children: <div className="fpo p-1">Longer text to test placement</div>,
   },
+  parameters: {
+    // Sets the delay (in milliseconds) for a specific story.
+    chromatic: { delay: 300 },
+  },
+};
+
+export const InverseVariant: Story = {
+  args: {
+    ...LeftPlacement.args,
+    variant: 'inverse',
+  },
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
 };
 
 /**
@@ -115,7 +124,7 @@ export const Interactive: Story = {
     // reset prop values defined in defaultArgs
     duration: undefined,
     visible: undefined,
-    children: <button className="fpo w-3 p-1">&bull;</button>,
+    children: <button className="fpo p-1">Target Component</button>,
   },
 };
 
@@ -133,7 +142,7 @@ export const InteractiveDisabled: Story = {
       placement="top"
       text={defaultArgs.text}
     >
-      <div className="fpo p-1">&bull;</div>
+      <div className="fpo p-1">Target Component</div>
     </Tooltip>
   ),
 };
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 00f7e1b43..b94bfff84 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -3,6 +3,7 @@ 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 TooltipStoryFile from './Tooltip.stories';
 
 const { Interactive, InteractiveDisabled } = composeStories(TooltipStoryFile);
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index c34e10cbb..fc6507bbf 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -2,12 +2,16 @@ import type { TippyProps } from '@tippyjs/react';
 import Tippy from '@tippyjs/react';
 import clsx from 'clsx';
 import * as React from 'react';
-import type { ReactNode, HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+
+import { defaultPopoverModifiersV2 as defaults } from '../PopoverContainer';
 import { Text } from '../Text/Text';
+
 import styles from './Tooltip.module.css';
 
 // Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
 type TooltipProps = {
+  // Component API
   /**
    * The element or ref to append the tooltip to.
    * Defaults to the body element.
@@ -51,12 +55,6 @@ type TooltipProps = {
    * Duration of Tooltip animation, in milliseconds. Default is 200.
    */
   duration?: number;
-  /**
-   * Where the tooltip should be placed in relation to the element it's attached to.
-   *
-   * **Default is `"top"`**.
-   */
-  placement?: 'top' | 'right' | 'bottom' | 'left';
   /**
    * The trigger element the tooltip appears next to.
    *
@@ -65,10 +63,6 @@ type TooltipProps = {
    * `reference`.
    */
   reference?: React.RefObject<Element> | Element;
-  /**
-   * The content of the tooltip bubble.
-   */
-  text?: ReactNode;
   /**
    * Whether the tooltip is always visible or always invisible.
    *
@@ -76,6 +70,27 @@ type TooltipProps = {
    * controls if/when the bubble appears (on hover, click, focus, etc).
    */
   visible?: boolean;
+  // Design API
+  /**
+   * Where the tooltip should be placed in relation to the element it's attached to.
+   * See: https://atomiks.github.io/tippyjs/v6/all-props/#placement
+   *
+   * **Default is `"auto"`**.
+   */
+  placement?: Extract<
+    TippyProps['placement'],
+    'auto' | 'top' | 'right' | 'bottom' | 'left'
+  >;
+  /**
+   * The content of the tooltip bubble.
+   */
+  text?: string;
+  /**
+   * The variant treatment for tooltips
+   *
+   * **Default is `"default"`**.
+   */
+  variant?: 'default' | 'inverse';
 } & TippyProps &
   HTMLAttributes<HTMLElement>;
 
@@ -88,16 +103,16 @@ type Plugin = Plugins[number];
  *
  * A floating information box, attached to other components on the page. Used to display option, additional information.
  *
- * https://atomiks.github.io/tippyjs/
- * https://github.com/atomiks/tippyjs-react
- *
+ * - https://atomiks.github.io/tippyjs/
+ * - https://github.com/atomiks/tippyjs-react
  */
 export const Tooltip = ({
   childNotInteractive,
   className,
   duration = 200,
-  placement = 'top',
+  placement = 'auto',
   text,
+  variant = 'default',
   ...rest
 }: TooltipProps) => {
   // Hides tooltip when escape key is pressed, following:
@@ -138,19 +153,29 @@ export const Tooltip = ({
   }
 
   const textContent = (
-    <Text as="span" data-testid="tooltip-content" preset="caption-lg">
+    <Text as="span" data-testid="tooltip-content" preset="body-sm">
       {text}
     </Text>
   );
 
+  const tooltipClassNames = clsx(
+    styles['tooltip'],
+    variant && styles[`tooltip--variant-${variant}`],
+    className,
+  );
+
+  // TODO: figure out why the modifiers don't seem to get applied
   return (
     <Tippy
-      {...rest}
-      className={clsx(styles['tooltip'], className)}
+      className={tooltipClassNames}
       content={textContent}
       duration={duration}
       placement={placement}
       plugins={[hideOnEsc]}
+      popperOptions={{
+        modifiers: defaults,
+      }}
+      {...rest}
     >
       {children}
     </Tippy>
diff --git a/src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap
deleted file mode 100644
index 5ac10c5d6..000000000
--- a/src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap
+++ /dev/null
@@ -1,356 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Tooltip /> (v2) BottomPlacement story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-3"
-        class="fpo p-1"
-      >
-        Target Component
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-3"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 12px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-default"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="bottom"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; left: 0px; transform: translate(3px, 0px);"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) Interactive story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <button
-        class="fpo p-1"
-      >
-        Target Component
-      </button>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) InteractiveDisabled story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <span
-        data-testid="disabled-child-tooltip-wrapper"
-        tabindex="0"
-      >
-        <div
-          class="fpo p-1"
-        >
-          Target Component
-        </div>
-      </span>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) InverseVariant story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-6"
-        class="fpo p-1"
-      >
-        Target Component
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-6"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-inverse"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="left"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) LeftPlacement story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-1"
-        class="fpo p-1"
-      >
-        Target Component
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-1"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-default"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="left"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) LongText story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-4"
-        class="fpo p-1"
-      >
-        Target Component
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-4"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-default"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="right"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) LongTriggerText story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-5"
-        class="fpo p-1"
-      >
-        Longer text to test placement
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-5"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-default"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="right"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
-      />
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Tooltip /> (v2) TopPlacement story renders snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="p-8"
-    >
-      <div
-        aria-describedby="tippy-2"
-        class="fpo p-1"
-      >
-        Target Component
-      </div>
-    </div>
-  </div>
-  <div
-    data-tippy-root=""
-    id="tippy-2"
-    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -12px);"
-  >
-    <div
-      class="tippy-box tooltip tooltip--variant-default"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="top"
-      data-reference-hidden=""
-      data-state="visible"
-      role="tooltip"
-      style="max-width: 350px; transition-duration: 0ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 0ms;"
-      >
-        <div>
-          <span
-            class="text text--body-sm"
-            data-testid="tooltip-content"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
-          </span>
-        </div>
-      </div>
-      <div
-        class="tippy-arrow"
-        style="position: absolute; left: 0px; transform: translate(3px, 0px);"
-      />
-    </div>
-  </div>
-</body>
-`;
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 2efe9bb2a..3df38cb5d 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -8,19 +8,19 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
     >
       <div
         aria-describedby="tippy-3"
-        class="fpo w-3 p-1"
+        class="fpo p-1"
       >
-        •
+        Target Component
       </div>
     </div>
   </div>
   <div
     data-tippy-root=""
     id="tippy-3"
-    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 10px);"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 12px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="bottom"
@@ -37,18 +37,10 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
       >
         <div>
           <span
-            class="text text--caption-lg"
+            class="text text--body-sm"
             data-testid="tooltip-content"
           >
-            <span>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-               
-              <strong>
-                Donec a erat eu augue consequat eleifend non vel sem.
-              </strong>
-               
-              Praesent efficitur mauris ac leo semper accumsan.
-            </span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
           </span>
         </div>
       </div>
@@ -68,9 +60,9 @@ exports[`<Tooltip /> Interactive story renders snapshot 1`] = `
       class="p-8"
     >
       <button
-        class="fpo w-3 p-1"
+        class="fpo p-1"
       >
-        •
+        Target Component
       </button>
     </div>
   </div>
@@ -90,7 +82,7 @@ exports[`<Tooltip /> InteractiveDisabled story renders snapshot 1`] = `
         <div
           class="fpo p-1"
         >
-          •
+          Target Component
         </div>
       </span>
     </div>
@@ -98,6 +90,59 @@ exports[`<Tooltip /> InteractiveDisabled story renders snapshot 1`] = `
 </body>
 `;
 
+exports[`<Tooltip /> InverseVariant story renders snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="p-8"
+    >
+      <div
+        aria-describedby="tippy-6"
+        class="fpo p-1"
+      >
+        Target Component
+      </div>
+    </div>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-6"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--variant-inverse"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="left"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 0ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 0ms;"
+      >
+        <div>
+          <span
+            class="text text--body-sm"
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
 exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
 <body>
   <div>
@@ -106,19 +151,19 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
     >
       <div
         aria-describedby="tippy-1"
-        class="fpo w-3 p-1"
+        class="fpo p-1"
       >
-        •
+        Target Component
       </div>
     </div>
   </div>
   <div
     data-tippy-root=""
     id="tippy-1"
-    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-10px, 0px);"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="left"
@@ -135,18 +180,10 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
       >
         <div>
           <span
-            class="text text--caption-lg"
+            class="text text--body-sm"
             data-testid="tooltip-content"
           >
-            <span>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-               
-              <strong>
-                Donec a erat eu augue consequat eleifend non vel sem.
-              </strong>
-               
-              Praesent efficitur mauris ac leo semper accumsan.
-            </span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
           </span>
         </div>
       </div>
@@ -167,19 +204,19 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
     >
       <div
         aria-describedby="tippy-4"
-        class="fpo w-3 p-1"
+        class="fpo p-1"
       >
-        •
+        Target Component
       </div>
     </div>
   </div>
   <div
     data-tippy-root=""
     id="tippy-4"
-    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -196,17 +233,10 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
       >
         <div>
           <span
-            class="text text--caption-lg"
+            class="text text--body-sm"
             data-testid="tooltip-content"
           >
-            <span>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-               
-              <b>
-                Donec a erat eu augue consequat eleifend non vel sem.
-              </b>
-               Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.
-            </span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan. Donec posuere semper fermentum. Vivamus venenatis laoreet venenatis. Sed consectetur, dolor sed tristique vehicula, sapien nulla convallis odio, et tempus urna mi eu leo. Phasellus a venenatis sapien. Cras massa lectus, sollicitudin id nulla id, laoreet facilisis est.
           </span>
         </div>
       </div>
@@ -236,10 +266,10 @@ exports[`<Tooltip /> LongTriggerText story renders snapshot 1`] = `
   <div
     data-tippy-root=""
     id="tippy-5"
-    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -256,18 +286,10 @@ exports[`<Tooltip /> LongTriggerText story renders snapshot 1`] = `
       >
         <div>
           <span
-            class="text text--caption-lg"
+            class="text text--body-sm"
             data-testid="tooltip-content"
           >
-            <span>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-               
-              <strong>
-                Donec a erat eu augue consequat eleifend non vel sem.
-              </strong>
-               
-              Praesent efficitur mauris ac leo semper accumsan.
-            </span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
           </span>
         </div>
       </div>
@@ -288,19 +310,19 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
     >
       <div
         aria-describedby="tippy-2"
-        class="fpo w-3 p-1"
+        class="fpo p-1"
       >
-        •
+        Target Component
       </div>
     </div>
   </div>
   <div
     data-tippy-root=""
     id="tippy-2"
-    style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -10px);"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -12px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="top"
@@ -317,18 +339,10 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
       >
         <div>
           <span
-            class="text text--caption-lg"
+            class="text text--body-sm"
             data-testid="tooltip-content"
           >
-            <span>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-               
-              <strong>
-                Donec a erat eu augue consequat eleifend non vel sem.
-              </strong>
-               
-              Praesent efficitur mauris ac leo semper accumsan.
-            </span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
           </span>
         </div>
       </div>
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index a2b0f9347..bb034660e 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,2 +1 @@
 export { Tooltip as default } from './Tooltip';
-export { Tooltip as TooltipV2 } from './Tooltip-v2';
diff --git a/src/design-tokens/mixins.css b/src/design-tokens/mixins.css
index 82ee88cf8..38524a40d 100644
--- a/src/design-tokens/mixins.css
+++ b/src/design-tokens/mixins.css
@@ -180,7 +180,6 @@
 
 @define-mixin messagingWarning {
   --messaging-border-color: var(--eds-theme-color-border-utility-warning-subtle);
-  /* TODO-AH: remove hard-coded value to bridge to the new styles eds.color.other.orange.500 */
   --messaging-icon-color: #E06B00;
 
   background: var(--eds-theme-color-background-utility-warning);
diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json
index ba04ddb0f..aedac978f 100644
--- a/src/design-tokens/primitives.json
+++ b/src/design-tokens/primitives.json
@@ -34,24 +34,29 @@
       "width": {
         "sm": {
           "value": "1",
-          "comment": "TODO-AH @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "group": "size",
+          "comment": "pixels (px)"
         },
         "md": {
           "value": "2",
-          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "group": "size",
+          "comment": "pixels (px)"
         },
         "lg": {
           "value": "4",
-          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "group": "size",
+          "comment": "pixels (px)"
         },
         "xl": {
           "value": "8",
-          "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+          "group": "size",
+          "comment": "pixels (px)"
         }
       },
       "radius": {
         "none": {
-          "value": "0"
+          "value": "0",
+          "comment": "pixels (px)"
         },
         "md": {
           "value": "4",
@@ -65,17 +70,38 @@
           "value": "20",
           "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
-        "50": { "value": "2", "group": "size" },
-        "100": { "value": "4", "group": "size" },
-        "150": { "value": "6", "group": "size" },
-        "200": { "value": "8", "group": "size" },
-        "500": { "value": "20", "group": "size" },
+        "50": {
+          "value": "2",
+          "comment": "pixels (px)",
+          "group": "size"
+        },
+        "100": {
+          "value": "4",
+          "comment": "pixels (px)",
+          "group": "size"
+        },
+        "150": {
+          "value": "6",
+          "comment": "pixels (px)",
+          "group": "size"
+        },
+        "200": {
+          "value": "8",
+          "comment": "pixels (px)",
+          "group": "size"
+        },
+        "500": {
+          "value": "20",
+          "comment": "pixels (px)",
+          "group": "size"
+        },
         "round": {
           "value": "50",
           "comment": "Percentage (%) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
         },
         "full": {
-          "value": "9999"
+          "value": "9999",
+          "comment": "pixels (px)"
         }
       }
     },
@@ -289,14 +315,14 @@
         "950": { "value": "#190D1E", "group": "color" }
       },
       "opacity": {
-        "10": { "value": "0.10", "group": "color" },
-        "20": { "value": "0.20", "group": "color" },
-        "30": { "value": "0.30", "group": "color" },
-        "40": { "value": "0.40", "group": "color" },
-        "50": { "value": "0.50", "group": "color" },
-        "60": { "value": "0.60", "group": "color" },
-        "70": { "value": "0.60", "group": "color" },
-        "80": { "value": "0.80", "group": "color" }
+        "10": { "value": "0.10" },
+        "20": { "value": "0.20" },
+        "30": { "value": "0.30" },
+        "40": { "value": "0.40" },
+        "50": { "value": "0.50" },
+        "60": { "value": "0.60" },
+        "70": { "value": "0.60" },
+        "80": { "value": "0.80" }
       },
       "other": {
         "mint": {
@@ -536,87 +562,102 @@
       "half": {
         "value": "4",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "quarter": {
         "value": "2",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "1": {
         "value": "8",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "1-and-half": {
         "value": "12",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "2": {
         "value": "16",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "2-and-half": {
         "value": "20",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "3": {
         "value": "24",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "4": {
         "value": "32",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "5": {
         "value": "40",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "6": {
         "value": "48",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "7": {
         "value": "56",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "8": {
         "value": "64",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "9": {
         "value": "72",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "10": {
         "value": "80",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "11": {
         "value": "88",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "12": {
         "value": "96",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       },
       "20": {
+        "value": "160",
+        "group": "size",
+        "comment": "Relative EMs (rem)"
+      },
+      "24": {
+        "value": "192",
+        "group": "size",
+        "comment": "Relative EMs (rem)"
+      },
+      "32": {
+        "value": "256",
+        "group": "size",
+        "comment": "Relative EMs (rem)"
+      },
+      "40": {
         "value": "320",
         "group": "size",
-        "comment": "Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "comment": "Relative EMs (rem)"
       }
     },
     "z-index": {
diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
index 16c9f88a8..f0199d505 100644
--- a/src/design-tokens/themes.json
+++ b/src/design-tokens/themes.json
@@ -128,20 +128,24 @@
             "primary": {
               "default": {
                 "value": "{eds.color.brand.grape.100}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "subtle": {
                 "value": "{eds.color.brand.grape.100}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "strong": {
                 "@": {
                   "value": "{eds.color.brand.grape.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               }
             },
@@ -240,11 +244,11 @@
             "overlay": {
               "lowEmphasis": {
                 "value": "{eds.color.neutral.850}",
-                "comment": "TODO-AH: color-mix with opacity 50%"
+                "comment": "NOTE: use with opacity: 50%"
               },
               "highEmphasis": {
                 "value": "{eds.color.neutral.850}",
-                "comment": "TODO-AH: color-mix with opacity 80%"
+                "comment": "NOTE: use with opacity: 80%"
               }
             },
             "default": {
@@ -542,11 +546,13 @@
             "primary": {
               "subtle": {
                 "value": "{eds.color.brand.grape.200}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "default": {
                 "value": "var(--eds-theme-color-border-brand-primary)",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "@": {
                 "value": "{eds.color.brand.grape.300}",
@@ -555,7 +561,8 @@
               },
               "strong": {
                 "value": "{eds.color.brand.grape.400}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "red": {
@@ -792,29 +799,35 @@
               "background": {
                 "@": {
                   "value": "{eds.color.brand.grape.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.color.brand.grape.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
@@ -886,31 +899,37 @@
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.color.brand.grape.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.neutral.white}",
@@ -924,7 +943,8 @@
               "icon": {
                 "@": {
                   "value": "{eds.color.brand.grape.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.neutral.white}",
@@ -940,7 +960,8 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "#E7E8EA",
@@ -998,35 +1019,42 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.mint.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.color.other.mint.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.mint.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.neutral.white}",
@@ -1056,29 +1084,35 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.orange.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.color.other.orange.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.orange.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
@@ -1098,7 +1132,8 @@
               "icon": {
                 "@": {
                   "value": "{eds.color.other.orange.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.neutral.white}",
@@ -1118,31 +1153,37 @@
                 },
                 "hover": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.ruby.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.color.other.ruby.600}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.ruby.800}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.neutral.white}",
@@ -1173,11 +1214,13 @@
             "brand": {
               "@": {
                 "value": "{eds.color.brand.grape.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.brand.grape.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "active": {
                 "value": "{eds.color.neutral.white}",
@@ -1190,11 +1233,13 @@
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
@@ -1204,21 +1249,25 @@
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.brand.grape.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.neutral.white}",
@@ -1256,7 +1305,8 @@
               "border": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "#E7E8EA",
@@ -1285,11 +1335,13 @@
             "success": {
               "@": {
                 "value": "{eds.color.other.mint.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.other.mint.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "active": {
                 "value": "{eds.color.neutral.white}",
@@ -1298,39 +1350,47 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.mint.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.mint.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.mint.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.neutral.white}",
@@ -1341,11 +1401,13 @@
             "warning": {
               "@": {
                 "value": "{eds.color.other.orange.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.other.orange.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "active": {
                 "value": "{eds.color.neutral.white}",
@@ -1354,39 +1416,47 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.orange.100}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.orange.100}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.orange.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.neutral.white}",
@@ -1397,11 +1467,13 @@
             "error": {
               "@": {
                 "value": "{eds.color.other.ruby.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.other.ruby.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "active": {
                 "value": "{eds.color.neutral.white}",
@@ -1410,39 +1482,47 @@
               "background": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.ruby.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "border": {
                 "@": {
                   "value": "{eds.theme.color.transparent.black.0}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.ruby.200}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               },
               "text": {
                 "@": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "hover": {
                   "value": "{eds.color.other.ruby.700}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 },
                 "active": {
                   "value": "{eds.color.neutral.white}",
@@ -1457,7 +1537,8 @@
             "background": {
               "@": {
                 "value": "{eds.color.brand.grape.500}",
-                "group": "colors"
+                "group": "colors",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           }
@@ -1551,11 +1632,13 @@
             "default": {
               "@": {
                 "value": "{eds.color.brand.grape.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.brand.grape.700}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           },
@@ -1563,11 +1646,13 @@
             "primary": {
               "@": {
                 "value": "{eds.color.brand.grape.500}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.brand.grape.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           },
@@ -1718,21 +1803,25 @@
             "success": {
               "@": {
                 "value": "{eds.color.other.mint.500}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.other.mint.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "error": {
               "@": {
                 "value": "{eds.color.other.ruby.500}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "{eds.color.other.ruby.600}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           },
@@ -1784,15 +1873,18 @@
             "text": {
               "@": {
                 "value": "var(--eds-theme-color-text-neutral-strong)",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
                 "value": "var(--eds-theme-color-text-brand-default)",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "focus": {
                 "value": "var(--eds-theme-color-text-neutral-default-inverse)",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             },
             "text-decoration": {
@@ -1859,7 +1951,8 @@
               "background": {
                 "@": {
                   "value": "{eds.color.brand.grape.500}",
-                  "group": "color"
+                  "group": "color",
+                  "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
                 }
               }
             }
@@ -1878,7 +1971,8 @@
             "background": {
               "@": {
                 "value": "{eds.color.brand.grape.500}",
-                "group": "color"
+                "group": "color",
+                "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               }
             }
           }
@@ -2031,7 +2125,8 @@
             },
             "error": {
               "value": "{eds.color.other.ruby.700}",
-              "group": "color"
+              "group": "color",
+              "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
             }
           },
           "grade": {
@@ -2074,7 +2169,8 @@
           },
           "background": {
             "value": "{eds.color.other.yellow.100}",
-            "group": "color"
+            "group": "color",
+            "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           }
         },
         "toggle": {
diff --git a/src/icons/spritemap-v2.tsx b/src/icons/spritemap-v2.tsx
index 1ef6b941c..888afba1b 100644
--- a/src/icons/spritemap-v2.tsx
+++ b/src/icons/spritemap-v2.tsx
@@ -747,21 +747,6 @@ const icons = {
       </>
     ),
   },
-  //
-  // ...TODO-AH: Remove those below once the dependencies are removed
-  //
-  'radio-selected': {
-    viewBox: '0 0 24 24',
-    content: (
-      <path d="M12 17C13.3833 17 14.5627 16.5123 15.538 15.537C16.5127 14.5623 17 13.3833 17 12C17 10.6167 16.5127 9.43733 15.538 8.462C14.5627 7.48733 13.3833 7 12 7C10.6167 7 9.43767 7.48733 8.463 8.462C7.48767 9.43733 7 10.6167 7 12C7 13.3833 7.48767 14.5623 8.463 15.537C9.43767 16.5123 10.6167 17 12 17ZM12 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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z" />
-    ),
-  },
-  'radio-unselected': {
-    viewBox: '0 0 24 24',
-    content: (
-      <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 22ZM12 20C14.2167 20 16.1043 19.221 17.663 17.663C19.221 16.1043 20 14.2167 20 12C20 9.78333 19.221 7.89567 17.663 6.337C16.1043 4.779 14.2167 4 12 4C9.78333 4 7.896 4.779 6.338 6.337C4.77933 7.89567 4 9.78333 4 12C4 14.2167 4.77933 16.1043 6.338 17.663C7.896 19.221 9.78333 20 12 20Z" />
-    ),
-  },
 };
 
 // eslint-disable-next-line @chanzuckerberg/stories/no-components-without-story
diff --git a/src/icons/spritemap.tsx b/src/icons/spritemap.tsx
index 192cb83f2..6976fa27b 100644
--- a/src/icons/spritemap.tsx
+++ b/src/icons/spritemap.tsx
@@ -728,7 +728,6 @@ const icons = {
       </>
     ),
   },
-  // TODO-AH: remove hard-coded value to bridge to the new styles for utility-warning-hover eds.color.other.orange.600
   'status-warning': {
     viewBox: '0 0 24 24',
     content: (
diff --git a/src/index.ts b/src/index.ts
index 4ed19f9c2..f2c8c5528 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,83 +1,64 @@
 // This brings the style tokens that are css custom variables into the built stylesheet so only one stylesheet for EDS has to be imported.
 import './tokens-dist/css/variables.css';
 
-export { default as Accordion } from './components/Accordion';
 export { default as Avatar } from './components/Avatar';
 export { default as Badge } from './components/Badge';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
-export { default as Button } from './components/Button';
-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 FieldNote } from './components/FieldNote';
+// export { default as ClickableStyle } from './components/ClickableStyle'; // Remove
 export { default as Fieldset } from './components/Fieldset';
 export { default as Heading } from './components/Heading';
 export { default as HorizontalStepper } from './components/HorizontalStepper';
 export { default as Hr } from './components/Hr';
-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 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 PageLevelBanner } from './components/PageLevelBanner';
+// export { default as PageLevelBanner } from './components/PageLevelBanner'; // Remove
 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 SearchBar } from './components/SearchBar';
-export { default as Select } from './components/Select';
 export { default as Skeleton } from './components/Skeleton';
 export { default as Slider } from './components/Slider';
 export { default as Table } from './components/Table';
-export { default as Tabs } from './components/Tabs';
+// export { default as Tabs } from './components/Tabs'; // Remove
 export { default as Tag } from './components/Tag';
 export { default as Text } from './components/Text';
-export { default as TextareaField } from './components/TextareaField';
-export { default as Toast } from './components/Toast';
+// export { default as Toast } from './components/Toast'; // Remove
 export { default as Toggle } from './components/Toggle';
-export { default as Tooltip } from './components/Tooltip';
 
 /**
  * Prop types, exported for convenience
  */
-export type { ClickableStyleProps } from './components/ClickableStyle';
-export type { IconName } from './components/Icon';
+// export type { ClickableStyleProps } from './components/ClickableStyle'; // Remove
 
 /**
  * 2.0 component and type exports
  */
-export { AccordionV2 } from './components/Accordion';
-export { default as AppNotificationV2 } from './components/AppNotification';
-export { ButtonV2 } from './components/Button';
-export { ButtonGroupV2 } from './components/ButtonGroup';
-export { CardV2 } from './components/Card';
-export { CheckboxV2 } from './components/Checkbox';
-export { default as FieldLabelV2 } from './components/FieldLabel';
-export { FieldNoteV2 } from './components/FieldNote';
-export { IconV2 } from './components/Icon';
-export { InlineNotificationV2 } from './components/InlineNotification';
-export { InputFieldV2 } from './components/InputField';
-export { LinkV2 } from './components/Link';
-export { LoadingIndicatorV2 } from './components/LoadingIndicator';
-export { MenuV2 } from './components/Menu';
-export { ModalV2 } from './components/Modal';
-export { NumberIconV2 } from './components/NumberIcon';
-export { default as PageNotificationV2 } from './components/PageNotification';
-export { PopoverListItemV2 } from './components/PopoverListItem';
-export { RadioV2 } from './components/Radio';
-export { SelectV2 } from './components/Select';
-export { default as TabGroupV2 } from './components/TabGroup';
-export { TextareaFieldV2 } from './components/TextareaField';
-export { default as ToastNotificationV2 } from './components/ToastNotification';
-export { TooltipV2 } from './components/Tooltip';
+export { default as Accordion } from './components/Accordion';
+export { default as AppNotification } from './components/AppNotification';
+export { default as Button } from './components/Button';
+export { default as ButtonGroup } from './components/ButtonGroup';
+export { default as Card } from './components/Card';
+export { default as Checkbox } from './components/Checkbox';
+export { default as FieldLabel } from './components/FieldLabel';
+export { default as FieldNote } from './components/FieldNote';
+export { default as Icon } from './components/Icon';
+export { default as InlineNotification } from './components/InlineNotification';
+export { default as InputField } from './components/InputField';
+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 PageNotification } from './components/PageNotification';
+export { default as PopoverContainer } from './components/PopoverContainer';
+export { default as PopoverListItem } from './components/PopoverListItem';
+export { default as Radio } from './components/Radio';
+export { default as Select } from './components/Select';
+export { default as TabGroup } from './components/TabGroup';
+export { default as TextareaField } from './components/TextareaField';
+export { default as ToastNotification } from './components/ToastNotification';
+export { default as Tooltip } from './components/Tooltip';
 
-export type { IconNameV2 } from './components/Icon';
-export type { ButtonV2Props } from './components/Button';
-export type { LinkV2Props } from './components/Link';
+export type { IconName } from './components/Icon';
+export type { ButtonProps } from './components/Button';
+export type { LinkProps } from './components/Link';
 export type { PageNotificationProps as PageNotificationV2Props } from './components/PageNotification';
 export type { AppNotificationProps as AppNotificationV2Props } from './components/AppNotification';
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
index 8b43c7009..aadfdfb22 100644
--- a/src/tokens-dist/css/variables.css
+++ b/src/tokens-dist/css/variables.css
@@ -7,24 +7,27 @@
   --eds-z-index-200: 200; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-z-index-100: 100; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-z-index-0: 0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-2-and-half: 20; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-1-and-half: 12; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-quarter: 2; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-half: 4; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-2-and-half: 20; /* Relative EMs (rem) */
+  --eds-size-1-and-half: 12; /* Relative EMs (rem) */
+  --eds-size-quarter: 2; /* Relative EMs (rem) */
+  --eds-size-half: 4; /* Relative EMs (rem) */
   --eds-size-base-unit: 8; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-20: 320; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-12: 96; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-11: 88; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-10: 80; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-9: 72; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-8: 64; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-7: 56; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-6: 48; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-5: 40; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-4: 32; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-3: 24; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-2: 16; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-size-1: 8; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-size-40: 320; /* Relative EMs (rem) */
+  --eds-size-32: 256; /* Relative EMs (rem) */
+  --eds-size-24: 192; /* Relative EMs (rem) */
+  --eds-size-20: 160; /* Relative EMs (rem) */
+  --eds-size-12: 96; /* Relative EMs (rem) */
+  --eds-size-11: 88; /* Relative EMs (rem) */
+  --eds-size-10: 80; /* Relative EMs (rem) */
+  --eds-size-9: 72; /* Relative EMs (rem) */
+  --eds-size-8: 64; /* Relative EMs (rem) */
+  --eds-size-7: 56; /* Relative EMs (rem) */
+  --eds-size-6: 48; /* Relative EMs (rem) */
+  --eds-size-5: 40; /* Relative EMs (rem) */
+  --eds-size-4: 32; /* Relative EMs (rem) */
+  --eds-size-3: 24; /* Relative EMs (rem) */
+  --eds-size-2: 16; /* Relative EMs (rem) */
+  --eds-size-1: 8; /* Relative EMs (rem) */
   --eds-box-shadow-xl: 0px 6px 20px rgba(0, 0, 0, 0.2); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -196,21 +199,21 @@
   --eds-color-brand-grape-100: #F0F0FC; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-color-black: 0 0 0; /* Specified as a value to color-func rgb() so that it can be blended */
   --eds-color-white: 255 255 255; /* Specified as a value to color-func rgb() so that it can be blended */
-  --eds-border-radius-full: 9999;
+  --eds-border-radius-full: 9999; /* pixels (px) */
   --eds-border-radius-round: 50; /* Percentage (%) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-border-radius-xl: 20; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-border-radius-lg: 8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-border-radius-md: 4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-radius-none: 0;
-  --eds-border-radius-500: 20;
-  --eds-border-radius-200: 8;
-  --eds-border-radius-150: 6;
-  --eds-border-radius-100: 4;
-  --eds-border-radius-50: 2;
-  --eds-border-width-xl: 8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-lg: 4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-md: 2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-border-width-sm: 1; /* TODO-AH @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-border-radius-none: 0; /* pixels (px) */
+  --eds-border-radius-500: 20; /* pixels (px) */
+  --eds-border-radius-200: 8; /* pixels (px) */
+  --eds-border-radius-150: 6; /* pixels (px) */
+  --eds-border-radius-100: 4; /* pixels (px) */
+  --eds-border-radius-50: 2; /* pixels (px) */
+  --eds-border-width-xl: 8; /* pixels (px) */
+  --eds-border-width-lg: 4; /* pixels (px) */
+  --eds-border-width-md: 2; /* pixels (px) */
+  --eds-border-width-sm: 1; /* pixels (px) */
   --eds-anim-ease: ease; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-anim-move-long: 0.4; /* Seconds (s) */
   --eds-anim-move-medium: 0.3; /* Seconds (s) */
@@ -242,9 +245,9 @@
   --eds-theme-color-link-brand-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
   --eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-text-brand-default);
-  --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
-  --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default);
-  --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong);
+  --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-form-background-hover: #F4F6F8;
   --eds-theme-color-data-bar-background: #F4F6F8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-neutral-border-hover: #E7E8EA;
@@ -252,7 +255,7 @@
   --eds-theme-color-button-secondary-neutral-background-hover: #E7E8EA;
   --eds-theme-color-border-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5);
   --eds-theme-color-border-utility-inverse: rgb(var(--eds-color-white) / 1);
-  --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary);
+  --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-neutral-subtle: #E7E8EA;
   --eds-theme-color-background-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5);
   --eds-theme-color-background-utility-inverse-high-emphasis: rgb(var(--eds-color-white) / 1);
@@ -419,14 +422,14 @@
   --eds-font-size-base: 16; /* (pixels) Base font size for design system in px */
   --eds-font-family-secondary: 'Argent', serif;
   --eds-font-family-primary: 'Graphik', sans-serif;
-  --eds-theme-color-text-highlight-background: var(--eds-color-other-yellow-100);
+  --eds-theme-color-text-highlight-background: var(--eds-color-other-yellow-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-highlight-foreground: var(--eds-color-neutral-800);
   --eds-theme-color-text-brand-primary: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead. */
   --eds-theme-color-text-disabled: var(--eds-color-neutral-300);
   --eds-theme-color-text-grade-stop: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-grade-revise: var(--eds-color-neutral-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-grade-complete: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-color-text-utility-error: var(--eds-color-other-ruby-700);
+  --eds-theme-color-text-utility-error: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-utility-success: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-utility-placeholder: var(--eds-color-neutral-550);
   --eds-theme-color-text-utility-inverse-interactive-visited: var(--eds-color-purple-350);
@@ -461,8 +464,8 @@
   --eds-theme-color-text-neutral-strong: var(--eds-color-neutral-800);
   --eds-theme-color-text-neutral-default-inverse: var(--eds-color-neutral-white);
   --eds-theme-color-text-neutral-default: var(--eds-color-neutral-700);
-  --eds-theme-color-radio-brand-background: var(--eds-color-brand-grape-500);
-  --eds-theme-color-modal-brand-header-background: var(--eds-color-brand-grape-500);
+  --eds-theme-color-radio-brand-background: var(--eds-color-brand-grape-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-modal-brand-header-background: var(--eds-color-brand-grape-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-disabled: var(--eds-color-neutral-300);
   --eds-theme-color-icon-grade-stop-hover: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-grade-stop: var(--eds-color-other-ruby-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -470,16 +473,16 @@
   --eds-theme-color-icon-grade-revise: var(--eds-color-neutral-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-grade-complete-hover: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-grade-complete: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-color-icon-utility-error-hover: var(--eds-color-other-ruby-600);
-  --eds-theme-color-icon-utility-error: var(--eds-color-other-ruby-500);
-  --eds-theme-color-icon-utility-success-hover: var(--eds-color-other-mint-600);
-  --eds-theme-color-icon-utility-success: var(--eds-color-other-mint-500);
+  --eds-theme-color-icon-utility-error-hover: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-utility-error: var(--eds-color-other-ruby-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-utility-success-hover: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-utility-success: var(--eds-color-other-mint-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-utility-inverse-disabled: var(--eds-theme-color-text-utility-inverse-disabled); /* Use with rgb() */
   --eds-theme-color-icon-utility-inverse: var(--eds-theme-color-text-utility-inverse);
-  --eds-theme-color-icon-brand-primary-hover: var(--eds-color-brand-grape-600);
-  --eds-theme-color-icon-brand-primary: var(--eds-color-brand-grape-500);
-  --eds-theme-color-icon-link-default-hover: var(--eds-color-brand-grape-700);
-  --eds-theme-color-icon-link-default: var(--eds-color-brand-grape-600);
+  --eds-theme-color-icon-brand-primary-hover: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-brand-primary: var(--eds-color-brand-grape-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-link-default-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-icon-link-default: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-icon-neutral-subtle-hover: var(--eds-color-neutral-600);
   --eds-theme-color-icon-neutral-subtle: var(--eds-color-neutral-500);
   --eds-theme-color-icon-neutral-strong-hover: var(--eds-color-neutral-800);
@@ -494,101 +497,101 @@
   --eds-theme-color-focus-ring-inverted: var(--eds-color-neutral-white);
   --eds-theme-color-focus-ring: var(--eds-color-brand-grape-600);
   --eds-theme-color-data-bar-border: var(--eds-color-neutral-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-color-checkbox-brand-background: var(--eds-color-brand-grape-500);
+  --eds-theme-color-checkbox-brand-background: var(--eds-color-brand-grape-500); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-error-text-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-error-text-hover: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-icon-error-text: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-icon-error-border-active: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-icon-error-border-hover: var(--eds-color-other-ruby-200);
-  --eds-theme-color-button-icon-error-border: var(--eds-theme-color-transparent-black-0);
-  --eds-theme-color-button-icon-error-background-active: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-icon-error-background-hover: var(--eds-color-other-ruby-200);
-  --eds-theme-color-button-icon-error-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-icon-error-text-hover: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-text: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-border-active: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-border-hover: var(--eds-color-other-ruby-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-border: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-background-active: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-background-hover: var(--eds-color-other-ruby-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-error-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-error-hover: var(--eds-color-other-ruby-600);
-  --eds-theme-color-button-icon-error: var(--eds-color-other-ruby-600);
+  --eds-theme-color-button-icon-error-hover: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-error: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-warning-text-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-warning-text-hover: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-icon-warning-text: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-icon-warning-border-active: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-icon-warning-border-hover: var(--eds-color-other-orange-100);
-  --eds-theme-color-button-icon-warning-border: var(--eds-theme-color-transparent-black-0);
-  --eds-theme-color-button-icon-warning-background-active: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-icon-warning-background-hover: var(--eds-color-other-orange-100);
-  --eds-theme-color-button-icon-warning-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-icon-warning-text-hover: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-text: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-border-active: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-border-hover: var(--eds-color-other-orange-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-border: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-background-active: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-background-hover: var(--eds-color-other-orange-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-warning-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-warning-hover: var(--eds-color-other-orange-600);
-  --eds-theme-color-button-icon-warning: var(--eds-color-other-orange-600);
+  --eds-theme-color-button-icon-warning-hover: var(--eds-color-other-orange-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-warning: var(--eds-color-other-orange-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-success-text-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-success-text-hover: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-icon-success-text: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-icon-success-border-active: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-icon-success-border-hover: var(--eds-color-other-mint-200);
-  --eds-theme-color-button-icon-success-border: var(--eds-theme-color-transparent-black-0);
-  --eds-theme-color-button-icon-success-background-active: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-icon-success-background-hover: var(--eds-color-other-mint-200);
-  --eds-theme-color-button-icon-success-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-icon-success-text-hover: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-text: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-border-active: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-border-hover: var(--eds-color-other-mint-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-border: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-background-active: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-background-hover: var(--eds-color-other-mint-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-success-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-success-hover: var(--eds-color-other-mint-600);
-  --eds-theme-color-button-icon-success: var(--eds-color-other-mint-600);
+  --eds-theme-color-button-icon-success-hover: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-success: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-neutral-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-icon-neutral-text-hover: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral-text: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral-border-active: var(--eds-color-neutral-600);
-  --eds-theme-color-button-icon-neutral-border: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-icon-neutral-border: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-neutral-background-active: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-icon-neutral-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-icon-neutral-hover: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-brand-text-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-brand-text-hover: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-icon-brand-text: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-icon-brand-border-active: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-icon-brand-border-hover: var(--eds-color-brand-grape-200);
+  --eds-theme-color-button-icon-brand-text-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-brand-text: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-brand-border-active: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-brand-border-hover: var(--eds-color-brand-grape-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-brand-border: var(--eds-theme-color-transparent-black-0);
-  --eds-theme-color-button-icon-brand-background-active: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-icon-brand-background-hover: var(--eds-color-brand-grape-200);
+  --eds-theme-color-button-icon-brand-background-active: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-brand-background-hover: var(--eds-color-brand-grape-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-icon-brand-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-icon-brand-active: var(--eds-color-neutral-white);
-  --eds-theme-color-button-icon-brand-hover: var(--eds-color-brand-grape-600);
-  --eds-theme-color-button-icon-brand: var(--eds-color-brand-grape-600);
+  --eds-theme-color-button-icon-brand-hover: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-brand: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-error-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-error-icon-hover: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-error-icon: var(--eds-color-other-ruby-600);
   --eds-theme-color-button-secondary-error-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-error-text-hover: var(--eds-color-neutral-white);
-  --eds-theme-color-button-secondary-error-text: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-secondary-error-border-active: var(--eds-color-other-ruby-800);
-  --eds-theme-color-button-secondary-error-border-hover: var(--eds-color-other-ruby-700);
-  --eds-theme-color-button-secondary-error-border: var(--eds-color-other-ruby-600);
-  --eds-theme-color-button-secondary-error-background-active: var(--eds-color-other-ruby-800);
-  --eds-theme-color-button-secondary-error-background-hover: var(--eds-color-other-ruby-700);
+  --eds-theme-color-button-secondary-error-text: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-error-border-active: var(--eds-color-other-ruby-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-error-border-hover: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-error-border: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-error-background-active: var(--eds-color-other-ruby-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-error-background-hover: var(--eds-color-other-ruby-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-error-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-secondary-warning-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-warning-icon-hover: var(--eds-color-neutral-white);
-  --eds-theme-color-button-secondary-warning-icon: var(--eds-color-other-orange-600);
+  --eds-theme-color-button-secondary-warning-icon: var(--eds-color-other-orange-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-warning-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-warning-text-hover: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-warning-text: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-secondary-warning-border-active: var(--eds-color-other-orange-800);
-  --eds-theme-color-button-secondary-warning-border-hover: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-secondary-warning-border: var(--eds-color-other-orange-600);
-  --eds-theme-color-button-secondary-warning-background-active: var(--eds-color-other-orange-800);
-  --eds-theme-color-button-secondary-warning-background-hover: var(--eds-color-other-orange-700);
-  --eds-theme-color-button-secondary-warning-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-secondary-warning-border-active: var(--eds-color-other-orange-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-warning-border-hover: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-warning-border: var(--eds-color-other-orange-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-warning-background-active: var(--eds-color-other-orange-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-warning-background-hover: var(--eds-color-other-orange-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-warning-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-success-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-success-icon-hover: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-success-icon: var(--eds-color-other-mint-600);
   --eds-theme-color-button-secondary-success-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-success-text-hover: var(--eds-color-neutral-white);
-  --eds-theme-color-button-secondary-success-text: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-secondary-success-border-active: var(--eds-color-other-mint-800);
-  --eds-theme-color-button-secondary-success-border-hover: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-secondary-success-border: var(--eds-color-other-mint-600);
-  --eds-theme-color-button-secondary-success-background-active: var(--eds-color-other-mint-800);
-  --eds-theme-color-button-secondary-success-background-hover: var(--eds-color-other-mint-700);
-  --eds-theme-color-button-secondary-success-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-secondary-success-text: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-border-active: var(--eds-color-other-mint-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-border-hover: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-border: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-background-active: var(--eds-color-other-mint-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-background-hover: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-success-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-neutral-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-neutral-icon-hover: var(--eds-color-neutral-400);
   --eds-theme-color-button-secondary-neutral-icon: var(--eds-color-neutral-400);
@@ -599,18 +602,18 @@
   --eds-theme-color-button-secondary-neutral-border-hover: var(--eds-color-neutral-600);
   --eds-theme-color-button-secondary-neutral-border: var(--eds-color-neutral-600);
   --eds-theme-color-button-secondary-neutral-background-active: var(--eds-color-neutral-700);
-  --eds-theme-color-button-secondary-neutral-background: var(--eds-theme-color-transparent-black-0);
+  --eds-theme-color-button-secondary-neutral-background: var(--eds-theme-color-transparent-black-0); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-brand-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-brand-icon-hover: var(--eds-color-neutral-white);
-  --eds-theme-color-button-secondary-brand-icon: var(--eds-color-brand-grape-600);
+  --eds-theme-color-button-secondary-brand-icon: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-brand-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-brand-text-hover: var(--eds-color-neutral-white);
-  --eds-theme-color-button-secondary-brand-text: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-secondary-brand-border-active: var(--eds-color-brand-grape-800);
-  --eds-theme-color-button-secondary-brand-border-hover: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-secondary-brand-border: var(--eds-color-brand-grape-600);
-  --eds-theme-color-button-secondary-brand-background-active: var(--eds-color-brand-grape-800);
-  --eds-theme-color-button-secondary-brand-background-hover: var(--eds-color-brand-grape-700);
+  --eds-theme-color-button-secondary-brand-text: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-brand-border-active: var(--eds-color-brand-grape-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-brand-border-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-brand-border: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-brand-background-active: var(--eds-color-brand-grape-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-secondary-brand-background-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-button-secondary-brand-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-primary-error-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-primary-error-text-hover: var(--eds-color-neutral-white);
@@ -624,12 +627,12 @@
   --eds-theme-color-button-primary-brand-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-primary-brand-text-hover: var(--eds-color-neutral-white);
   --eds-theme-color-button-primary-brand-text: var(--eds-color-neutral-white);
-  --eds-theme-color-button-primary-brand-border-active: var(--eds-color-brand-grape-800);
-  --eds-theme-color-button-primary-brand-border-hover: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-primary-brand-border: var(--eds-color-brand-grape-600);
-  --eds-theme-color-button-primary-brand-background-active: var(--eds-color-brand-grape-800);
-  --eds-theme-color-button-primary-brand-background-hover: var(--eds-color-brand-grape-700);
-  --eds-theme-color-button-primary-brand-background: var(--eds-color-brand-grape-600);
+  --eds-theme-color-button-primary-brand-border-active: var(--eds-color-brand-grape-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-primary-brand-border-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-primary-brand-border: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-primary-brand-background-active: var(--eds-color-brand-grape-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-primary-brand-background-hover: var(--eds-color-brand-grape-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-primary-brand-background: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-disabled: var(--eds-color-neutral-300);
   --eds-theme-color-border-grade-stop: var(--eds-color-other-ruby-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-grade-revise-strong: var(--eds-color-other-yellow-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -683,9 +686,9 @@
   --eds-theme-color-border-brand-yellow: var(--eds-color-yellow-150);
   --eds-theme-color-border-brand-orange: var(--eds-color-orange-250);
   --eds-theme-color-border-brand-red: var(--eds-color-red-850);
-  --eds-theme-color-border-brand-primary-strong: var(--eds-color-brand-grape-400);
+  --eds-theme-color-border-brand-primary-strong: var(--eds-color-brand-grape-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-brand-primary: var(--eds-color-brand-grape-300); /* @deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead */
-  --eds-theme-color-border-brand-primary-subtle: var(--eds-color-brand-grape-200);
+  --eds-theme-color-border-brand-primary-subtle: var(--eds-color-brand-grape-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-border-neutral-strong-hover: var(--eds-color-neutral-500);
   --eds-theme-color-border-neutral-strong: var(--eds-color-neutral-400);
   --eds-theme-color-border-neutral-default-hover: var(--eds-color-neutral-400);
@@ -743,8 +746,8 @@
   --eds-theme-color-background-utility-default-low-emphasis: var(--eds-color-neutral-050);
   --eds-theme-color-background-utility-default-no-emphasis-active: var(--eds-color-neutral-100);
   --eds-theme-color-background-utility-default-no-emphasis-hover: var(--eds-color-neutral-050);
-  --eds-theme-color-background-utility-overlay-high-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 80% */
-  --eds-theme-color-background-utility-overlay-low-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 50% */
+  --eds-theme-color-background-utility-overlay-high-emphasis: var(--eds-color-neutral-850); /* NOTE: use with opacity: 80% */
+  --eds-theme-color-background-utility-overlay-low-emphasis: var(--eds-color-neutral-850); /* NOTE: use with opacity: 50% */
   --eds-theme-color-background-utility-container-active: var(--eds-color-neutral-100);
   --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050);
   --eds-theme-color-background-utility-base-2: var(--eds-color-neutral-025);
@@ -763,10 +766,10 @@
   --eds-theme-color-background-brand-orange: var(--eds-color-orange-250);
   --eds-theme-color-background-brand-red-low-emphasis: var(--eds-color-red-050);
   --eds-theme-color-background-brand-red: var(--eds-color-red-850);
-  --eds-theme-color-background-brand-primary-strong-hover: var(--eds-color-brand-grape-800);
-  --eds-theme-color-background-brand-primary-strong: var(--eds-color-brand-grape-600);
-  --eds-theme-color-background-brand-primary-subtle: var(--eds-color-brand-grape-100);
-  --eds-theme-color-background-brand-primary-default: var(--eds-color-brand-grape-100);
+  --eds-theme-color-background-brand-primary-strong-hover: var(--eds-color-brand-grape-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-brand-primary-strong: var(--eds-color-brand-grape-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-brand-primary-subtle: var(--eds-color-brand-grape-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-brand-primary-default: var(--eds-color-brand-grape-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-background-neutral-medium-hover: var(--eds-color-neutral-300);
   --eds-theme-color-background-neutral-default: var(--eds-color-neutral-white);
   --eds-theme-color-body-background-inverted: var(--eds-color-neutral-700);
diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
index be7bcac2e..df96e3ff7 100644
--- a/src/tokens-dist/json/variables-nested.json
+++ b/src/tokens-dist/json/variables-nested.json
@@ -1449,7 +1449,10 @@
       "10": "80",
       "11": "88",
       "12": "96",
-      "20": "320",
+      "20": "160",
+      "24": "192",
+      "32": "256",
+      "40": "320",
       "base-unit": "8",
       "half": "4",
       "quarter": "2",
diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
index fe49698cc..163549c9b 100644
--- a/src/tokens-dist/ts/colors.ts
+++ b/src/tokens-dist/ts/colors.ts
@@ -7,10 +7,10 @@ export const EdsThemeColorBackgroundNeutralSubtle = '#F4F6F8'; // @deprecated Th
 export const EdsThemeColorBackgroundNeutralSubtleHover = '#E7E8EA';
 export const EdsThemeColorBackgroundNeutralMedium = '#E7E8EA';
 export const EdsThemeColorBackgroundNeutralMediumHover = '#C0C4C8';
-export const EdsThemeColorBackgroundBrandPrimaryDefault = '#F0F0FC';
-export const EdsThemeColorBackgroundBrandPrimarySubtle = '#F0F0FC';
-export const EdsThemeColorBackgroundBrandPrimaryStrong = '#6B65E2';
-export const EdsThemeColorBackgroundBrandPrimaryStrongHover = '#3E42B1';
+export const EdsThemeColorBackgroundBrandPrimaryDefault = '#F0F0FC'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundBrandPrimarySubtle = '#F0F0FC'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundBrandPrimaryStrong = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorBackgroundBrandPrimaryStrongHover = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBackgroundBrandRed = '#4D0118';
 export const EdsThemeColorBackgroundBrandRedLowEmphasis = '#FDF3F4';
 export const EdsThemeColorBackgroundBrandOrange = '#FFA070';
@@ -33,8 +33,8 @@ export const EdsThemeColorBackgroundUtilityContainer =
   'rgb(var(--eds-color-white) / 1)';
 export const EdsThemeColorBackgroundUtilityContainerHover = '#F9F3F1';
 export const EdsThemeColorBackgroundUtilityContainerActive = '#EEE7E4';
-export const EdsThemeColorBackgroundUtilityOverlayLowEmphasis = '#272625'; // TODO-AH: color-mix with opacity 50%
-export const EdsThemeColorBackgroundUtilityOverlayHighEmphasis = '#272625'; // TODO-AH: color-mix with opacity 80%
+export const EdsThemeColorBackgroundUtilityOverlayLowEmphasis = '#272625'; // NOTE: use with opacity: 50%
+export const EdsThemeColorBackgroundUtilityOverlayHighEmphasis = '#272625'; // NOTE: use with opacity: 80%
 export const EdsThemeColorBackgroundUtilityDefaultNoEmphasis = 'transparent';
 export const EdsThemeColorBackgroundUtilityDefaultNoEmphasisHover = '#F9F3F1';
 export const EdsThemeColorBackgroundUtilityDefaultNoEmphasisActive = '#EEE7E4';
@@ -126,11 +126,11 @@ export const EdsThemeColorBorderNeutralDefault = '#C0C4C8';
 export const EdsThemeColorBorderNeutralDefaultHover = '#999EA3';
 export const EdsThemeColorBorderNeutralStrong = '#999EA3';
 export const EdsThemeColorBorderNeutralStrongHover = '#878C90';
-export const EdsThemeColorBorderBrandPrimarySubtle = '#E0E0F9';
+export const EdsThemeColorBorderBrandPrimarySubtle = '#E0E0F9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderBrandPrimaryDefault =
-  'var(--eds-theme-color-border-brand-primary)';
+  'var(--eds-theme-color-border-brand-primary)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderBrandPrimary = '#C4C1F3'; // @deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead
-export const EdsThemeColorBorderBrandPrimaryStrong = '#A6A3EE';
+export const EdsThemeColorBorderBrandPrimaryStrong = '#A6A3EE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderBrandRed = '#4D0118';
 export const EdsThemeColorBorderBrandOrange = '#FFA070';
 export const EdsThemeColorBorderBrandYellow = '#F9DA78';
@@ -188,12 +188,12 @@ export const EdsThemeColorBorderGradeReviseDefault = '#FFDD80'; // @deprecated T
 export const EdsThemeColorBorderGradeReviseStrong = '#F7BE2D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderGradeStop = '#FB90B0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorBorderDisabled = '#C0C4C8';
-export const EdsThemeColorButtonPrimaryBrandBackground = '#6B65E2';
-export const EdsThemeColorButtonPrimaryBrandBackgroundHover = '#5751D2';
-export const EdsThemeColorButtonPrimaryBrandBackgroundActive = '#3E42B1';
-export const EdsThemeColorButtonPrimaryBrandBorder = '#6B65E2';
-export const EdsThemeColorButtonPrimaryBrandBorderHover = '#5751D2';
-export const EdsThemeColorButtonPrimaryBrandBorderActive = '#3E42B1';
+export const EdsThemeColorButtonPrimaryBrandBackground = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonPrimaryBrandBackgroundHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonPrimaryBrandBackgroundActive = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonPrimaryBrandBorder = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonPrimaryBrandBorderHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonPrimaryBrandBorderActive = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonPrimaryBrandText = '#FFFFFF';
 export const EdsThemeColorButtonPrimaryBrandTextHover = '#FFFFFF';
 export const EdsThemeColorButtonPrimaryBrandTextActive = '#FFFFFF';
@@ -207,18 +207,18 @@ export const EdsThemeColorButtonPrimaryErrorText = '#FFFFFF';
 export const EdsThemeColorButtonPrimaryErrorTextHover = '#FFFFFF';
 export const EdsThemeColorButtonPrimaryErrorTextActive = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryBrandBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonSecondaryBrandBackgroundHover = '#5751D2';
-export const EdsThemeColorButtonSecondaryBrandBackgroundActive = '#3E42B1';
-export const EdsThemeColorButtonSecondaryBrandBorder = '#6B65E2';
-export const EdsThemeColorButtonSecondaryBrandBorderHover = '#5751D2';
-export const EdsThemeColorButtonSecondaryBrandBorderActive = '#3E42B1';
-export const EdsThemeColorButtonSecondaryBrandText = '#5751D2';
+export const EdsThemeColorButtonSecondaryBrandBackgroundHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryBrandBackgroundActive = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryBrandBorder = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryBrandBorderHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryBrandBorderActive = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryBrandText = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryBrandTextHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryBrandTextActive = '#FFFFFF';
-export const EdsThemeColorButtonSecondaryBrandIcon = '#6B65E2';
+export const EdsThemeColorButtonSecondaryBrandIcon = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryBrandIconHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryBrandIconActive = '#FFFFFF';
-export const EdsThemeColorButtonSecondaryNeutralBackground = 'rgba(0, 0, 0, 0)';
+export const EdsThemeColorButtonSecondaryNeutralBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryNeutralBackgroundHover = '#E7E8EA';
 export const EdsThemeColorButtonSecondaryNeutralBackgroundActive = '#383C43';
 export const EdsThemeColorButtonSecondaryNeutralBorder = '#5D6369';
@@ -230,53 +230,53 @@ export const EdsThemeColorButtonSecondaryNeutralTextActive = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryNeutralIcon = '#999EA3';
 export const EdsThemeColorButtonSecondaryNeutralIconHover = '#999EA3';
 export const EdsThemeColorButtonSecondaryNeutralIconActive = '#FFFFFF';
-export const EdsThemeColorButtonSecondarySuccessBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonSecondarySuccessBackgroundHover = '#007249';
-export const EdsThemeColorButtonSecondarySuccessBackgroundActive = '#005939';
-export const EdsThemeColorButtonSecondarySuccessBorder = '#008656';
-export const EdsThemeColorButtonSecondarySuccessBorderHover = '#007249';
-export const EdsThemeColorButtonSecondarySuccessBorderActive = '#005939';
-export const EdsThemeColorButtonSecondarySuccessText = '#007249';
+export const EdsThemeColorButtonSecondarySuccessBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessBackgroundHover = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessBackgroundActive = '#005939'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessBorder = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessBorderHover = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessBorderActive = '#005939'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondarySuccessText = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondarySuccessTextHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondarySuccessTextActive = '#FFFFFF';
 export const EdsThemeColorButtonSecondarySuccessIcon = '#008656';
 export const EdsThemeColorButtonSecondarySuccessIconHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondarySuccessIconActive = '#FFFFFF';
-export const EdsThemeColorButtonSecondaryWarningBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonSecondaryWarningBackgroundHover = '#AC3400';
-export const EdsThemeColorButtonSecondaryWarningBackgroundActive = '#842800';
-export const EdsThemeColorButtonSecondaryWarningBorder = '#C64600';
-export const EdsThemeColorButtonSecondaryWarningBorderHover = '#AC3400';
-export const EdsThemeColorButtonSecondaryWarningBorderActive = '#842800';
+export const EdsThemeColorButtonSecondaryWarningBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryWarningBackgroundHover = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryWarningBackgroundActive = '#842800'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryWarningBorder = '#C64600'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryWarningBorderHover = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryWarningBorderActive = '#842800'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryWarningText = '#AC3400';
 export const EdsThemeColorButtonSecondaryWarningTextHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryWarningTextActive = '#FFFFFF';
-export const EdsThemeColorButtonSecondaryWarningIcon = '#C64600';
+export const EdsThemeColorButtonSecondaryWarningIcon = '#C64600'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryWarningIconHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryWarningIconActive = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryErrorBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonSecondaryErrorBackgroundHover = '#BD0044';
-export const EdsThemeColorButtonSecondaryErrorBackgroundActive = '#8F0134';
-export const EdsThemeColorButtonSecondaryErrorBorder = '#D41E52';
-export const EdsThemeColorButtonSecondaryErrorBorderHover = '#BD0044';
-export const EdsThemeColorButtonSecondaryErrorBorderActive = '#8F0134';
-export const EdsThemeColorButtonSecondaryErrorText = '#BD0044';
+export const EdsThemeColorButtonSecondaryErrorBackgroundHover = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryErrorBackgroundActive = '#8F0134'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryErrorBorder = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryErrorBorderHover = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryErrorBorderActive = '#8F0134'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonSecondaryErrorText = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonSecondaryErrorTextHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryErrorTextActive = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryErrorIcon = '#D41E52';
 export const EdsThemeColorButtonSecondaryErrorIconHover = '#FFFFFF';
 export const EdsThemeColorButtonSecondaryErrorIconActive = '#FFFFFF';
-export const EdsThemeColorButtonIconBrand = '#6B65E2';
-export const EdsThemeColorButtonIconBrandHover = '#6B65E2';
+export const EdsThemeColorButtonIconBrand = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconBrandHover = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconBrandActive = '#FFFFFF';
 export const EdsThemeColorButtonIconBrandBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconBrandBackgroundHover = '#E0E0F9';
-export const EdsThemeColorButtonIconBrandBackgroundActive = '#5751D2';
+export const EdsThemeColorButtonIconBrandBackgroundHover = '#E0E0F9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconBrandBackgroundActive = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconBrandBorder = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconBrandBorderHover = '#E0E0F9';
-export const EdsThemeColorButtonIconBrandBorderActive = '#5751D2';
-export const EdsThemeColorButtonIconBrandText = '#5751D2';
-export const EdsThemeColorButtonIconBrandTextHover = '#5751D2';
+export const EdsThemeColorButtonIconBrandBorderHover = '#E0E0F9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconBrandBorderActive = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconBrandText = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconBrandTextHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconBrandTextActive = '#FFFFFF';
 export const EdsThemeColorButtonIconNeutral = '#5D6369';
 export const EdsThemeColorButtonIconNeutralHover = '#5D6369';
@@ -284,49 +284,49 @@ export const EdsThemeColorButtonIconNeutralActive = '#FFFFFF';
 export const EdsThemeColorButtonIconNeutralBackground = 'rgba(0, 0, 0, 0)';
 export const EdsThemeColorButtonIconNeutralBackgroundHover = '#E7E8EA';
 export const EdsThemeColorButtonIconNeutralBackgroundActive = '#5D6369';
-export const EdsThemeColorButtonIconNeutralBorder = 'rgba(0, 0, 0, 0)';
+export const EdsThemeColorButtonIconNeutralBorder = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconNeutralBorderHover = '#E7E8EA';
 export const EdsThemeColorButtonIconNeutralBorderActive = '#5D6369';
 export const EdsThemeColorButtonIconNeutralText = '#5D6369';
 export const EdsThemeColorButtonIconNeutralTextHover = '#5D6369';
 export const EdsThemeColorButtonIconNeutralTextActive = '#FFFFFF';
-export const EdsThemeColorButtonIconSuccess = '#008656';
-export const EdsThemeColorButtonIconSuccessHover = '#008656';
+export const EdsThemeColorButtonIconSuccess = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessHover = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconSuccessActive = '#FFFFFF';
-export const EdsThemeColorButtonIconSuccessBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconSuccessBackgroundHover = '#B7E9CE';
-export const EdsThemeColorButtonIconSuccessBackgroundActive = '#007249';
-export const EdsThemeColorButtonIconSuccessBorder = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconSuccessBorderHover = '#B7E9CE';
-export const EdsThemeColorButtonIconSuccessBorderActive = '#007249';
-export const EdsThemeColorButtonIconSuccessText = '#007249';
-export const EdsThemeColorButtonIconSuccessTextHover = '#007249';
+export const EdsThemeColorButtonIconSuccessBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessBackgroundHover = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessBackgroundActive = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessBorder = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessBorderHover = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessBorderActive = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessText = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconSuccessTextHover = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconSuccessTextActive = '#FFFFFF';
-export const EdsThemeColorButtonIconWarning = '#C64600';
-export const EdsThemeColorButtonIconWarningHover = '#C64600';
+export const EdsThemeColorButtonIconWarning = '#C64600'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningHover = '#C64600'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconWarningActive = '#FFFFFF';
-export const EdsThemeColorButtonIconWarningBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconWarningBackgroundHover = '#FFF1E9';
-export const EdsThemeColorButtonIconWarningBackgroundActive = '#AC3400';
-export const EdsThemeColorButtonIconWarningBorder = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconWarningBorderHover = '#FFF1E9';
-export const EdsThemeColorButtonIconWarningBorderActive = '#AC3400';
-export const EdsThemeColorButtonIconWarningText = '#AC3400';
-export const EdsThemeColorButtonIconWarningTextHover = '#AC3400';
+export const EdsThemeColorButtonIconWarningBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningBackgroundHover = '#FFF1E9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningBackgroundActive = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningBorder = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningBorderHover = '#FFF1E9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningBorderActive = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningText = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconWarningTextHover = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconWarningTextActive = '#FFFFFF';
-export const EdsThemeColorButtonIconError = '#D41E52';
-export const EdsThemeColorButtonIconErrorHover = '#D41E52';
+export const EdsThemeColorButtonIconError = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorHover = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconErrorActive = '#FFFFFF';
-export const EdsThemeColorButtonIconErrorBackground = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconErrorBackgroundHover = '#FFCBD7';
-export const EdsThemeColorButtonIconErrorBackgroundActive = '#BD0044';
-export const EdsThemeColorButtonIconErrorBorder = 'rgba(0, 0, 0, 0)';
-export const EdsThemeColorButtonIconErrorBorderHover = '#FFCBD7';
-export const EdsThemeColorButtonIconErrorBorderActive = '#BD0044';
-export const EdsThemeColorButtonIconErrorText = '#BD0044';
-export const EdsThemeColorButtonIconErrorTextHover = '#BD0044';
+export const EdsThemeColorButtonIconErrorBackground = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorBackgroundHover = '#FFCBD7'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorBackgroundActive = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorBorder = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorBorderHover = '#FFCBD7'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorBorderActive = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorText = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorButtonIconErrorTextHover = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorButtonIconErrorTextActive = '#FFFFFF';
-export const EdsThemeColorCheckboxBrandBackground = '#8984E8';
+export const EdsThemeColorCheckboxBrandBackground = '#8984E8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorDataBarBackground = '#F4F6F8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorDataBarBorder = '#C0C4C8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorFocusRing = '#6B65E2';
@@ -343,10 +343,10 @@ export const EdsThemeColorIconNeutralStrong = '#383C43';
 export const EdsThemeColorIconNeutralStrongHover = '#333231';
 export const EdsThemeColorIconNeutralSubtle = '#878C90';
 export const EdsThemeColorIconNeutralSubtleHover = '#5D6369';
-export const EdsThemeColorIconLinkDefault = '#6B65E2';
-export const EdsThemeColorIconLinkDefaultHover = '#5751D2';
-export const EdsThemeColorIconBrandPrimary = '#8984E8';
-export const EdsThemeColorIconBrandPrimaryHover = '#6B65E2';
+export const EdsThemeColorIconLinkDefault = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconLinkDefaultHover = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconBrandPrimary = '#8984E8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconBrandPrimaryHover = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconUtilityDefaultPrimary = '#0F2163';
 export const EdsThemeColorIconUtilityDefaultPrimaryHover = '#0A164C';
 export const EdsThemeColorIconUtilityDefaultPrimaryActive = '#060E30';
@@ -379,10 +379,10 @@ export const EdsThemeColorIconUtilityInverse =
 export const EdsThemeColorIconUtilityInverseDisabled =
   'rgb(var(--eds-color-white) / 0.5)'; // Use with rgb()
 export const EdsThemeColorIconUtilityPlaceholder = '#6C6967';
-export const EdsThemeColorIconUtilitySuccess = '#00A56A';
-export const EdsThemeColorIconUtilitySuccessHover = '#008656';
-export const EdsThemeColorIconUtilityError = '#F1497B';
-export const EdsThemeColorIconUtilityErrorHover = '#D41E52';
+export const EdsThemeColorIconUtilitySuccess = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconUtilitySuccessHover = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconUtilityError = '#F1497B'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
+export const EdsThemeColorIconUtilityErrorHover = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconGradeComplete = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconGradeCompleteHover = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconGradeRevise = '#333231'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
@@ -391,11 +391,11 @@ export const EdsThemeColorIconGradeStop = '#F1497B'; // @deprecated This should
 export const EdsThemeColorIconGradeStopHover = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorIconDisabled = '#C0C4C8';
 export const EdsThemeColorLinkBrandText =
-  'var(--eds-theme-color-text-neutral-strong)';
+  'var(--eds-theme-color-text-neutral-strong)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorLinkBrandTextHover =
-  'var(--eds-theme-color-text-brand-default)';
+  'var(--eds-theme-color-text-brand-default)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorLinkBrandTextFocus =
-  'var(--eds-theme-color-text-neutral-default-inverse)';
+  'var(--eds-theme-color-text-neutral-default-inverse)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorLinkBrandTextDecoration =
   'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkBrandTextDecorationHover =
@@ -418,10 +418,10 @@ export const EdsThemeColorLinkNeutralTextDecorationFocus =
   'var(--eds-theme-color-text-neutral-default-inverse)';
 export const EdsThemeColorLinkNeutralBackgroundFocus =
   'var(--eds-theme-color-text-neutral-default)';
-export const EdsThemeColorModalBrandHeaderBackground = '#8984E8';
+export const EdsThemeColorModalBrandHeaderBackground = '#8984E8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorProgressBarBackground = '#E7E8EA';
 export const EdsThemeColorProgressBarBorder = '#E7E8EA';
-export const EdsThemeColorRadioBrandBackground = '#8984E8';
+export const EdsThemeColorRadioBrandBackground = '#8984E8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextNeutralDefault = '#383C43';
 export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF';
 export const EdsThemeColorTextNeutralStrong = '#333231';
@@ -460,7 +460,7 @@ export const EdsThemeColorTextUtilityInverseDisabled =
 export const EdsThemeColorTextUtilityInverseInteractiveVisited = '#C580E7';
 export const EdsThemeColorTextUtilityPlaceholder = '#6C6967';
 export const EdsThemeColorTextUtilitySuccess = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
-export const EdsThemeColorTextUtilityError = '#BD0044';
+export const EdsThemeColorTextUtilityError = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextGradeComplete = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextGradeRevise = '#333231'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextGradeStop = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
@@ -469,7 +469,7 @@ export const EdsThemeColorTextBrandDefault =
   'var(--eds-theme-color-text-brand-primary)';
 export const EdsThemeColorTextBrandPrimary = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead.
 export const EdsThemeColorTextHighlightForeground = '#333231';
-export const EdsThemeColorTextHighlightBackground = '#FDF1D0';
+export const EdsThemeColorTextHighlightBackground = '#FDF1D0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorToggleOnBackground =
   'var(--eds-theme-color-background-brand-primary-strong)';
 export const EdsThemeColorToggleOffBackground =
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d56aabbd0..90f225cc6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -68,7 +68,7 @@ export default {
     // sync with src/design-tokens/tier-1-definitions/breakpoints.js
     // Docs: https://tailwindcss.com/docs/responsive-design#customizing-your-theme
     screens: {
-      xs: '0px', // TODO-AH: reconcile the difference in the grid to be mobile first
+      xs: '0px',
       sm: '600px',
       md: '768px',
       lg: '1040px',