diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 51aa7c1f42..ca430ab0d1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -182,6 +182,28 @@ jobs:
           name: playwright-avt-report
           path: .playwright
 
+  vrt-runner:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+          cache: yarn
+      - name: Install
+        run: yarn
+      - name: Install browsers
+        run: yarn playwright install --with-deps
+      - name: Build project
+        run: yarn build
+      - name: Run VRT
+        working-directory: packages/core
+        env:
+          PERCY_TOKEN: web_d04495b0b413d61c2ea6b9118d1748b43f4fdd58d17ebe453ef8e0016b5766e4
+        run: yarn percy storybook storybook-static
+
   avt:
     if: ${{ always() }}
     runs-on: ubuntu-latest
diff --git a/.gitignore b/.gitignore
index bb1a2bab8d..ae1dc14e3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ logs
 pids
 *.pid
 *.seed
+.env
 
 # Certificates
 *.crt
diff --git a/.percy.yml b/.percy.yml
new file mode 100644
index 0000000000..859929afc9
--- /dev/null
+++ b/.percy.yml
@@ -0,0 +1,17 @@
+# Percy config
+version: 2
+snapshot:
+  widths:
+    - 360
+    - 1366
+  minHeight: 1024
+storybook:
+  include: ['/IBM Products/']
+  exclude: [
+      '/Datagrid/*',
+      '/DataSpreadsheet/',
+      '/MultiAddSelect: With Avatars/', # avoid dynamic avatar color generation
+      '/Tag set/TagSet: Hundreds Of Tags', # avoid dynamic tag color generation
+      '/Page header/PageHeader: Page header with all items, pre-collapsed', # takes random time, to collapse on initial load
+      '/Tag set/TagSet: Many Tags', # takes time to calculate the overflow, causing random layout shift
+    ]
diff --git a/cspell.json b/cspell.json
index 2a23a9989e..cf69e0555e 100644
--- a/cspell.json
+++ b/cspell.json
@@ -138,6 +138,7 @@
     "nonlinearreading",
     "nonselectablerows",
     "noreply",
+    "Overflowmenu",
     "overridable",
     "overscan",
     "overscroll",
diff --git a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js
index 84d1579c4a..9840381506 100644
--- a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js
+++ b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js
@@ -16,7 +16,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-basic-usage', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid--basic-usage',
+      id: 'deprecated-datagrid-datagrid--basic-usage',
       globals: {
         carbonTheme: 'white',
       },
@@ -27,7 +27,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-open-and-dismiss-sidepanel-onRowClick', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid-clickablerow--clickable-row-story',
+      id: 'deprecated-datagrid-datagrid-clickablerow--clickable-row-story',
       globals: {
         carbonTheme: 'white',
       },
diff --git a/package.json b/package.json
index 14e9a9baf6..31587ffb5a 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,8 @@
     "upgrade:dependencies:examples": "npm-check-updates -u --dep dev,peer,prod --color --target minor --packageFile 'scripts/example-gallery-builder/update-example/**/package.json'",
     "upgrade:automatic": "run-s -s 'upgrade:dependencies:*'",
     "upgrade:carbon": "npm-check-updates -u --dep dev,peer,prod --packageFile '{package.json,{config/**,packages/**}/package.json}' --filter '/carbon/' --target minor",
-    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh"
+    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh",
+    "visual-snapshot": "cd packages/core && yarn percy storybook storybook-static"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
diff --git a/packages/core/package.json b/packages/core/package.json
index ff7217b060..4a5c454001 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -35,6 +35,8 @@
     "@carbon/react": "^1.69.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
+    "@percy/cli": "^1.30.1",
+    "@percy/storybook": "^6.0.0",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-controls": "^8.0.9",
diff --git a/packages/ibm-products/src/components/Card/Card.tsx b/packages/ibm-products/src/components/Card/Card.tsx
index 2f9a842723..20c3eda738 100644
--- a/packages/ibm-products/src/components/Card/Card.tsx
+++ b/packages/ibm-products/src/components/Card/Card.tsx
@@ -11,8 +11,9 @@ import {
   Button,
   IconButton,
   OverflowMenu,
-  OverflowMenuItem,
+  MenuItem,
   Layer,
+  unstable_FeatureFlags as FeatureFlags,
 } from '@carbon/react';
 import { CheckmarkOutline, Incomplete } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
@@ -169,21 +170,23 @@ export const Card = forwardRef(
     // actions can either be an overflow menu or series of icons
     const getActions = () => {
       if (overflowActions.length > 0) {
-        const pos = actionsPlacement === 'top' ? 'bottom' : 'top';
+        const pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
         const size = actionsPlacement === 'top' ? 'sm' : 'md';
         return (
           <Layer level={2}>
-            <OverflowMenu
-              size={size}
-              direction={pos}
-              flipped
-              aria-label={overflowAriaLabel}
-              iconDescription={iconDescription}
-            >
-              {overflowActions.map(({ id, ...rest }) => (
-                <OverflowMenuItem key={id} {...rest} />
-              ))}
-            </OverflowMenu>
+            <FeatureFlags enableV12Overflowmenu>
+              <OverflowMenu
+                autoAlign
+                menuAlignment={pos}
+                size={size}
+                aria-label={overflowAriaLabel}
+                label={iconDescription}
+              >
+                {overflowActions.map(({ id, itemText, ...rest }) => (
+                  <MenuItem key={id} label={itemText} {...rest} />
+                ))}
+              </OverflowMenu>
+            </FeatureFlags>
           </Layer>
         );
       }
diff --git a/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx b/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx
index f1031bef63..1108fbfd32 100644
--- a/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx
+++ b/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx
@@ -55,6 +55,12 @@ export default {
     layout: 'fullscreen',
     docs: { page: DocsPage },
     controls: { sort: 'requiredFirst' },
+    percy: {
+      waitForSelector: [
+        `button.${blockClass}__create-button`,
+        `.${blockClass}__influencer`,
+      ],
+    },
   },
   decorators: [
     (story) => <div className={`${storyClass}__viewport`}>{story()}</div>,
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
index e8b2ecbce5..ab7451ce49 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
@@ -13,6 +13,7 @@ import toolbarScreenshot from './storybook-assets/datagrid-actions-example.png';
 
 const DocsPage = () => (
   <StoryDocsPage
+    deprecationNotice={`\`Datagrid\` is deprecated and will be moving to an example-based approach. For more information, please refer to the [migration docs](https://github.com/carbon-design-system/tanstack-carbon).`}
     blocks={[
       {
         title: 'Getting started',
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
index d4f4c02110..b4859abf15 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
@@ -36,9 +36,10 @@ import { Wrapper } from './utils/Wrapper';
 import DocsPage from './Datagrid.docs-page';
 import { getBatchActions } from './utils/getBatchActions';
 import { StatusIcon } from '../StatusIcon';
+import { Annotation } from '../../../../core/.storybook/Annotation';
 
 export default {
-  title: 'IBM Products/Components/Datagrid',
+  title: 'Deprecated/Datagrid/Datagrid',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
@@ -56,6 +57,27 @@ export default {
     },
   },
   excludeStories: ['getBatchActions'],
+  decorators: [
+    (story) => (
+      <div>
+        <Annotation
+          type="deprecation-notice"
+          text={
+            <div>
+              This component is deprecated and will be moving to an
+              example-based approach. For more information, please refer to the{' '}
+              <a href="https://github.com/carbon-design-system/tanstack-carbon">
+                migration documentation
+              </a>
+              .
+            </div>
+          }
+        >
+          {story()}
+        </Annotation>
+      </div>
+    ),
+  ],
 };
 
 const getColumns = (rows) => {
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
index 1f70df495f..aa18a8c878 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -917,7 +917,10 @@ const ActionsColumnExample = ({
 
 beforeAll(() => {
   jest.spyOn(global.console, 'warn').mockImplementation((message) => {
-    if (!message.includes('componentWillReceiveProps')) {
+    if (
+      !message.includes('componentWillReceiveProps') &&
+      !message.includes('deprecated')
+    ) {
       global.console.warn(message);
     }
   });
@@ -1171,7 +1174,8 @@ describe(componentName, () => {
         );
         expect(container.children.length).toEqual(0);
         jest.spyOn(console, 'error').mockRestore();
-      }
+      },
+      2
     );
   });
 
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
index 5513e0466d..06dc2d3a1f 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
@@ -34,6 +34,7 @@ export interface DatagridProps {
 
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export let Datagrid = React.forwardRef(
   (
@@ -104,6 +105,12 @@ export let Datagrid = React.forwardRef(
   }
 );
 
+/**@ts-ignore*/
+Datagrid.deprecated = {
+  level: 'warn',
+  details: `For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx
index 31abdb9ab1..a54b6163fa 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx
@@ -26,7 +26,7 @@ import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 import { ExampleAILabel } from '../../utils/ExampleAILabel';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/AILabel',
+  title: 'Deprecated/Datagrid/Datagrid/AILabel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx
index 9188f31cf7..e40444d898 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx
@@ -30,7 +30,7 @@ import { SidePanel } from '../../../SidePanel';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ClickableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ClickableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx
index c145c4e894..89e8742532 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx
@@ -30,7 +30,7 @@ import { FeatureFlags } from '../../../FeatureFlags';
 import { WithFeatureFlags } from '../../../../../../core/.storybook/WithFeatureFlags';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ColumnCustomization',
+  title: 'Deprecated/Datagrid/Datagrid/ColumnCustomization',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx
index c015260486..7ce2812ef3 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx
@@ -28,7 +28,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 const storybookBlockClass = `storybook-${blockClass}__validation-code-snippet`;
 
 export default {
-  title: 'IBM Products/Components/Datagrid/EditableCell',
+  title: 'Deprecated/Datagrid/Datagrid/EditableCell',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx
index 655cf20a04..d15e68425d 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx
@@ -26,7 +26,7 @@ import { DocsPage } from './ExpandableRow.docs-page';
 import { usePrefix } from '../../../../global/js/hooks';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ExpandableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ExpandableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx
index 29908a82fc..7eee49314d 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx
@@ -18,7 +18,7 @@ import { getDateFormat } from '../../utils/getDateFormat';
 import { getFilterProps } from './Panel.stories';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Flyout',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Flyout',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx
index f97daf5ab6..48bcbbb55e 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx
@@ -18,7 +18,7 @@ import { FilteringUsage } from '../../utils/FilteringUsage';
 import { getDateFormat } from '../../utils/getDateFormat';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Panel',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Panel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx
index bf3c6ca3ee..cdfe350540 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx
@@ -33,7 +33,7 @@ const sharedArgTypes = {
 };
 
 export default {
-  title: 'IBM Products/Components/Datagrid/NestedRows',
+  title: 'Deprecated/Datagrid/Datagrid/NestedRows',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx
index 22548e8709..34f97ac3a6 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx
@@ -25,7 +25,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowActionButtons',
+  title: 'Deprecated/Datagrid/Datagrid/RowActionButtons',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx
index e720c4f475..8d59917fba 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx
@@ -19,7 +19,7 @@ import { ARG_TYPES } from '../../utils/getArgTypes';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowHeightSettings',
+  title: 'Deprecated/Datagrid/Datagrid/RowHeightSettings',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx b/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx
index 4dfab749f4..8ed33d8847 100644
--- a/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx
+++ b/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx
@@ -41,6 +41,9 @@ export default {
     docs: {
       page: mdx,
     },
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
 };
 
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
index 90b2b71aac..ffc36aa911 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
+++ b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
@@ -373,7 +373,14 @@ export default {
   title: 'IBM Products/Components/Page header/PageHeader',
   component: PageHeader,
   tags: ['autodocs'],
-  parameters: { styles, layout: 'fullscreen' /* docs: { page: mdx } */ },
+  parameters: {
+    styles,
+    layout: 'fullscreen',
+    /* docs: { page: mdx } */
+    percy: {
+      waitForTimeout: 1000,
+    },
+  },
   decorators: [
     (story, { args }) => (
       <div
diff --git a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
index efb26b648b..b14f8d7e5f 100644
--- a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
+++ b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
@@ -135,6 +135,9 @@ export default {
   parameters: {
     // docs: { page: mdx },
     styles,
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
   argTypes: {
     containerWidth: {
diff --git a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js
index c086bef450..95f690d44b 100644
--- a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js
+++ b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js
@@ -97,6 +97,7 @@ export const StoryDocsPage = ({
   blocks,
   omitCodedExample,
   omitUnreferencedStories,
+  deprecationNotice,
 }) => {
   const { csfFile } = useOf('meta', ['meta']);
 
@@ -140,6 +141,12 @@ export const StoryDocsPage = ({
         )
       ) : null}
 
+      {deprecationNotice && (
+        <>
+          <h2 style={{ marginTop: '16px' }}>Deprecation notice</h2>
+          <Markdown>{deprecationNotice}</Markdown>
+        </>
+      )}
       <h2 style={{ marginTop: guidelinesHref ? '16px' : '' }}>
         Table of contents
       </h2>
@@ -290,6 +297,10 @@ StoryDocsPage.propTypes = {
       }),
     })
   ),
+  /**
+   * Designates a special top level area for important notices or messaging like deprecation
+   */
+  deprecationNotice: PropTypes.string,
   /**
    * Set to true if no published example exists (all components and patterns should have an example)
    */
diff --git a/packages/ibm-products/src/global/js/utils/test-helper.js b/packages/ibm-products/src/global/js/utils/test-helper.js
index fa9b93a1ff..d089abf5da 100644
--- a/packages/ibm-products/src/global/js/utils/test-helper.js
+++ b/packages/ibm-products/src/global/js/utils/test-helper.js
@@ -138,11 +138,12 @@ const makeMatcherArray = (args) =>
  * argument.
  * @param {Function} test the test function to call, during which the call to
  * console.warn will be expected.
+ * @param {number} calls by default the test assumes warn will be called a single time, but it's possible it'll be called more than once
  */
-export const expectWarn = (message, test) => {
+export const expectWarn = (message, test, calls = 1) => {
   const warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
   const result = test();
-  expect(warn).toBeCalledTimes(1);
+  expect(warn).toBeCalledTimes(calls);
   // expect(warn).toHaveBeenCalledWith(...makeMatcherArray(message));
   warn.mockRestore();
   return result;
diff --git a/yarn.lock b/yarn.lock
index 2e7eabde70..25d0ad9025 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1805,6 +1805,8 @@ __metadata:
     "@carbon/react": "npm:^1.69.0"
     "@carbon/themes": "npm:^11.43.0"
     "@carbon/type": "npm:^11.33.0"
+    "@percy/cli": "npm:^1.30.1"
+    "@percy/storybook": "npm:^6.0.0"
     "@storybook/addon-a11y": "npm:^8.1.10"
     "@storybook/addon-actions": "npm:^8.0.9"
     "@storybook/addon-controls": "npm:^8.0.9"
@@ -5189,6 +5191,199 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/cli-app@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-app@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+    "@percy/cli-exec": "npm:1.30.1"
+  checksum: 461803b9ff800424a434e3e78121355006df8958b712f3a3214aab5ea07338f3e26e2950dded20ab516e480bc518950c0145103ffaef5e1e4dba8225b69c068e
+  languageName: node
+  linkType: hard
+
+"@percy/cli-build@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-build@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+  checksum: e2aea224da33db9e8012dd1c92b246c9b241beba84cbad4f2f0558067a154bc78868fcee3cb8de2deb7051445fff3238e134c70c1fdbbd6a12965f2c2b7bf444
+  languageName: node
+  linkType: hard
+
+"@percy/cli-command@npm:1.30.1, @percy/cli-command@npm:^1.28.5":
+  version: 1.30.1
+  resolution: "@percy/cli-command@npm:1.30.1"
+  dependencies:
+    "@percy/config": "npm:1.30.1"
+    "@percy/core": "npm:1.30.1"
+    "@percy/logger": "npm:1.30.1"
+  bin:
+    percy-cli-readme: bin/readme.js
+  checksum: 89d837c9ffe31b7028acc290a3846f61c6d037176c7c09a730c96f667edaa97313c4ea7163a04dbeac2334a7a38e5872e27ddaee6b491b87d60a233758943314
+  languageName: node
+  linkType: hard
+
+"@percy/cli-config@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-config@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+  checksum: abb14b7699033015b69b3189492456426b195261f690369a0a1dc2e9e7cce1879f6bd9fe7c25b69638032a8b1e0549a462eeafaae2d23d479575e6971a777bf6
+  languageName: node
+  linkType: hard
+
+"@percy/cli-exec@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-exec@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+    "@percy/logger": "npm:1.30.1"
+    cross-spawn: "npm:^7.0.3"
+    which: "npm:^2.0.2"
+  checksum: fa072b6805f6da372d11336455bb07f5296a538d074e89fb8f79fabfebdcf3a7cee78a755953f9d71593924ab35ca1efc83e0338412e1328866f005d1652e623
+  languageName: node
+  linkType: hard
+
+"@percy/cli-snapshot@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-snapshot@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+    yaml: "npm:^2.0.0"
+  checksum: cb4dff415d64b9fa1055335ae5c2cee63b87fd8feed5a5aa85ce3c457f48de845f4b6d90f79163cd856a91baa4ecd612cf6c34b04f9639073d30bfa6a5640a1c
+  languageName: node
+  linkType: hard
+
+"@percy/cli-upload@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli-upload@npm:1.30.1"
+  dependencies:
+    "@percy/cli-command": "npm:1.30.1"
+    fast-glob: "npm:^3.2.11"
+    image-size: "npm:^1.0.0"
+  checksum: 11803bb330fb741b9011f6e70233957a5339ad045066e5526beae989601d945c11db2ec42ca0a4b224bd11f47ee00a0fb66e12d11b75956399f461eb2ece9a81
+  languageName: node
+  linkType: hard
+
+"@percy/cli@npm:^1.30.1":
+  version: 1.30.1
+  resolution: "@percy/cli@npm:1.30.1"
+  dependencies:
+    "@percy/cli-app": "npm:1.30.1"
+    "@percy/cli-build": "npm:1.30.1"
+    "@percy/cli-command": "npm:1.30.1"
+    "@percy/cli-config": "npm:1.30.1"
+    "@percy/cli-exec": "npm:1.30.1"
+    "@percy/cli-snapshot": "npm:1.30.1"
+    "@percy/cli-upload": "npm:1.30.1"
+    "@percy/client": "npm:1.30.1"
+    "@percy/logger": "npm:1.30.1"
+  bin:
+    percy: bin/run.cjs
+  checksum: 57782c02ff29f317b2315ff7b22630cf100b55536855c15bc418b60d0443321932c43560a70638c73681588c88780168b6688e1ce8c270fdd5e5187b4e18646d
+  languageName: node
+  linkType: hard
+
+"@percy/client@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/client@npm:1.30.1"
+  dependencies:
+    "@percy/env": "npm:1.30.1"
+    "@percy/logger": "npm:1.30.1"
+    pako: "npm:^2.1.0"
+  checksum: 124711e3f8721e495cde69277f73d3078195af754b0a780d76f31e834b784f4410ae2dabcf3a942721cf8771126b1000d2d7f6e1d0a162c088b9dc46bfb70ccc
+  languageName: node
+  linkType: hard
+
+"@percy/config@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/config@npm:1.30.1"
+  dependencies:
+    "@percy/logger": "npm:1.30.1"
+    ajv: "npm:^8.6.2"
+    cosmiconfig: "npm:^8.0.0"
+    yaml: "npm:^2.0.0"
+  checksum: eb44803208716e232cc79c0ceaf7a37077cc0f63208f01d8532b28f32b4ba0e1b90dac2a49675e473a56fddfc7bcbdb581b84107684f29b95ce493ddb0b031f5
+  languageName: node
+  linkType: hard
+
+"@percy/core@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/core@npm:1.30.1"
+  dependencies:
+    "@percy/client": "npm:1.30.1"
+    "@percy/config": "npm:1.30.1"
+    "@percy/dom": "npm:1.30.1"
+    "@percy/logger": "npm:1.30.1"
+    "@percy/webdriver-utils": "npm:1.30.1"
+    content-disposition: "npm:^0.5.4"
+    cross-spawn: "npm:^7.0.3"
+    extract-zip: "npm:^2.0.1"
+    fast-glob: "npm:^3.2.11"
+    micromatch: "npm:^4.0.8"
+    mime-types: "npm:^2.1.34"
+    pako: "npm:^2.1.0"
+    path-to-regexp: "npm:^6.3.0"
+    rimraf: "npm:^3.0.2"
+    ws: "npm:^8.17.1"
+    yaml: "npm:^2.4.1"
+  checksum: 3735da83258b00261962be5ca3c6b0e75662da30b23713d414cb125f1a702f10aa66421a805046ed4e90cdb26ba72a642002014534f29738b956f14669e972f8
+  languageName: node
+  linkType: hard
+
+"@percy/dom@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/dom@npm:1.30.1"
+  checksum: 91100f1db94fec5fd3daa4afbdbc0cfe6b4ce43f28c289ac58ccbb9d02e0ed37a87671abd2091768282f745a6abacfe85264a802a6442a0aaacc8766c43b330a
+  languageName: node
+  linkType: hard
+
+"@percy/env@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/env@npm:1.30.1"
+  dependencies:
+    "@percy/logger": "npm:1.30.1"
+  checksum: 61d5c9776be18ced48740bbada10d598e4f2d8296f4daa10ebfe51b54b1f6689f3d913bcfe5fa9b9f95ca2da9cbfc1b04db971a51cdb699f8d70b3622cdec32a
+  languageName: node
+  linkType: hard
+
+"@percy/logger@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/logger@npm:1.30.1"
+  checksum: 6d7cee83271c26f8beabb91e122da8bbe080f92bf79168a8950f6478b65738272a40d192ebe21e6b9167e7d5c392617a2559c114e59dba29263d422a240258a9
+  languageName: node
+  linkType: hard
+
+"@percy/sdk-utils@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/sdk-utils@npm:1.30.1"
+  checksum: 76b4ad1898b5acb05201830ba48c27831fc67e55205a17d7b15e6b0a0efc444885a98a4a3351d8821f60c4f432348c9efa867da13a276c2c4c65f52dce8333e4
+  languageName: node
+  linkType: hard
+
+"@percy/storybook@npm:^6.0.0":
+  version: 6.0.2
+  resolution: "@percy/storybook@npm:6.0.2"
+  dependencies:
+    "@percy/cli-command": "npm:^1.28.5"
+    cross-spawn: "npm:^7.0.3"
+    qs: "npm:^6.11.0"
+  bin:
+    percy-storybook: bin/percy-storybook.cjs
+  checksum: e007104369883907df1cfee1642190adf81adc8257f591f92d18d4fdafb401cdeaab95b06c28b7994d9fcf0ae146cc1f777601a7df13ea37b5c3666f4164bb94
+  languageName: node
+  linkType: hard
+
+"@percy/webdriver-utils@npm:1.30.1":
+  version: 1.30.1
+  resolution: "@percy/webdriver-utils@npm:1.30.1"
+  dependencies:
+    "@percy/config": "npm:1.30.1"
+    "@percy/sdk-utils": "npm:1.30.1"
+  checksum: d02714acfddcb596a77635605d3b88c23c3deaff55bd5b8e5e733b1efbbc8f175b472b8924b11946b9eceb5987dd0c0289be20c4ede8423adae43d1a81f9edf0
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -9405,6 +9600,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:^8.6.2":
+  version: 8.17.1
+  resolution: "ajv@npm:8.17.1"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^3.0.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+  checksum: ee3c62162c953e91986c838f004132b6a253d700f1e51253b99791e2dbfdb39161bc950ebdc2f156f8568035bb5ed8be7bd78289cd9ecbf3381fe8f5b82e3f33
+  languageName: node
+  linkType: hard
+
 "ansi-align@npm:^3.0.0, ansi-align@npm:^3.0.1":
   version: 3.0.1
   resolution: "ansi-align@npm:3.0.1"
@@ -11571,7 +11778,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-disposition@npm:0.5.4":
+"content-disposition@npm:0.5.4, content-disposition@npm:^0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
   dependencies:
@@ -11801,7 +12008,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.2.0, cosmiconfig@npm:^8.3.6":
+"cosmiconfig@npm:^8.0.0, cosmiconfig@npm:^8.2.0, cosmiconfig@npm:^8.3.6":
   version: 8.3.6
   resolution: "cosmiconfig@npm:8.3.6"
   dependencies:
@@ -14590,7 +14797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -14624,6 +14831,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-uri@npm:^3.0.1":
+  version: 3.0.3
+  resolution: "fast-uri@npm:3.0.3"
+  checksum: 92487c75848b03edc45517fca0148287d342c30818ce43d556391db774d8e01644fb6964315a3336eec5a90f301b218b21f71fb9b2528ba25757435a20392c95
+  languageName: node
+  linkType: hard
+
 "fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -16380,6 +16594,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"image-size@npm:^1.0.0":
+  version: 1.1.1
+  resolution: "image-size@npm:1.1.1"
+  dependencies:
+    queue: "npm:6.0.2"
+  bin:
+    image-size: bin/image-size.js
+  checksum: f28966dd3f6d4feccc4028400bb7e8047c28b073ab0aa90c7c53039288139dd416c6bc254a976d4bf61113d4bc84871786804113099701cbfe9ccf377effdb54
+  languageName: node
+  linkType: hard
+
 "immediate@npm:~3.0.5":
   version: 3.0.6
   resolution: "immediate@npm:3.0.6"
@@ -19895,7 +20120,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.34, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -21750,6 +21975,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "pako@npm:2.1.0"
+  checksum: 38a04991d0ec4f4b92794a68b8c92bf7340692c5d980255c92148da96eb3e550df7a86a7128b5ac0c65ecddfe5ef3bbe9c6dab13e1bc315086e759b18f7c1401
+  languageName: node
+  linkType: hard
+
 "pako@npm:~0.2.0":
   version: 0.2.9
   resolution: "pako@npm:0.2.9"
@@ -22919,7 +23151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.13.0":
+"qs@npm:6.13.0, qs@npm:^6.11.0":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
   dependencies:
@@ -22958,6 +23190,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"queue@npm:6.0.2":
+  version: 6.0.2
+  resolution: "queue@npm:6.0.2"
+  dependencies:
+    inherits: "npm:~2.0.3"
+  checksum: 3437954ef1442c86ff01a0fbe3dc6222838823b1ca97f37eff651bc20b868c0c2904424ef2c0d44cba46055f54b578f92866e573125dc9a5e8823d751e4d1585
+  languageName: node
+  linkType: hard
+
 "quick-lru@npm:^4.0.1":
   version: 4.0.1
   resolution: "quick-lru@npm:4.0.1"
@@ -27817,6 +28058,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.0.0":
+  version: 2.6.0
+  resolution: "yaml@npm:2.6.0"
+  bin:
+    yaml: bin.mjs
+  checksum: f4369f667c7626c216ea81b5840fe9b530cdae4cff2d84d166ec1239e54bf332dbfac4a71bf60d121f8e85e175364a4e280a520292269b6cf9d074368309adf9
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.3.4":
   version: 2.4.2
   resolution: "yaml@npm:2.4.2"