diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ca430ab0d1..51aa7c1f42 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -182,28 +182,6 @@ 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/e2e/components/Checklist/Checklist-test.avt.e2e.js b/e2e/components/Checklist/Checklist-test.avt.e2e.js
index f50662c70e..cd0bf3a40f 100644
--- a/e2e/components/Checklist/Checklist-test.avt.e2e.js
+++ b/e2e/components/Checklist/Checklist-test.avt.e2e.js
@@ -20,5 +20,56 @@ test.describe('Checklist @avt', () => {
       },
     });
     await expect(page).toHaveNoACViolations('Checklist @avt-default-state');
+
+    const buttonEle = page.locator('[aria-label="Checklist toggle"]');
+    const viewButton = page.getByRole('button', { name: 'View all (10)' });
+    const tooltipContent = await page.getByText('Toggle');
+    const taskButtons = page.locator('[title="Task name"]');
+    //press tab to move focus to buttonELement
+    await page.keyboard.press('Tab');
+    await expect(buttonEle).toBeInViewport();
+    await expect(buttonEle).toBeFocused();
+
+    //check the checklist is expanded
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'true');
+    await expect(viewButton).toBeVisible();
+    //Press enter to collapse the checklist
+    await page.keyboard.press('Enter');
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'false');
+
+    //Press escape to hide tooltip
+    await page.keyboard.press('Escape');
+    await expect(tooltipContent).not.toBeVisible();
+
+    //Press tab to move focus to 1st Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(0)).toBeFocused();
+
+    //Press tab to move focus to 2nd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(1)).toBeFocused();
+
+    //Press tab to move focus to 3rd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(2)).toBeFocused();
+
+    //Press tab to move focus to View all(10) button
+    await page.keyboard.press('Tab');
+    await expect(viewButton).toBeFocused();
+
+    //check button element is showing Toggle tooltip while hovering
+    await buttonEle.hover();
+    await expect(tooltipContent).toBeVisible();
+  });
+
+  test('@avt-task-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Checklist',
+      id: 'ibm-products-onboarding-checklist--task-states',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Checklist @avt-task-state');
   });
 });
diff --git a/packages/core/package.json b/packages/core/package.json
index ebb3e2cfc8..7b2de5b104 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -32,7 +32,7 @@
     "@carbon/ibm-products-styles": "^2.52.0-rc.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.71.1",
+    "@carbon/react": "^1.72.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "@percy/cli": "^1.30.1",
diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
index fa1adf8ebe..e2878df4b0 100644
--- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
+++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss
@@ -538,14 +538,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle-row {
-    display: -webkit-box;
-    overflow: hidden;
-    max-width: 100%;
     margin-top: $spacing-03;
 
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
     @include breakpoint-up('md') {
       max-width: $left-section-std-width;
     }
@@ -559,6 +553,24 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     @include type.type-style('body-01');
   }
 
+  .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
+    border-bottom: 0;
+    letter-spacing: inherit;
+  }
+
+  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header
+  .#{$block-class}__subtitle-tooltip
+    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+    max-inline-size: fit-content;
+  }
+
+  .#{$block-class}__subtitle-text {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   .#{$block-class}__available-row {
     @include type.type-style('body-01');
 
diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json
index 26436b2aa1..ca3039524a 100644
--- a/packages/ibm-products-web-components/package.json
+++ b/packages/ibm-products-web-components/package.json
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@carbon/ibm-products-styles": "^2.52.0-rc.0",
-    "@carbon/styles": "1.70.0",
-    "@carbon/web-components": "2.18.0",
+    "@carbon/styles": "1.71.0",
+    "@carbon/web-components": "2.19.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
@@ -77,7 +77,7 @@
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "eslint": "^9.11.1",
-    "eslint-config-carbon": "3.17.1",
+    "eslint-config-carbon": "3.18.0",
     "globby": "^14.0.2",
     "happy-dom": "^15.11.6",
     "postcss": "^8.4.47",
diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json
index 2dc473c19f..e7a3a1d6f9 100644
--- a/packages/ibm-products/package.json
+++ b/packages/ibm-products/package.json
@@ -103,7 +103,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.5.0",
-    "framer-motion": "^6.5.1 < 7",
+    "framer-motion": "^11.11.17",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -114,7 +114,7 @@
     "@carbon/grid": "^11.29.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.71.1",
+    "@carbon/react": "^1.72.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
diff --git a/packages/ibm-products/src/components/Checklist/Checklist.test.js b/packages/ibm-products/src/components/Checklist/Checklist.test.js
index a4ba4d5441..6464e63e17 100644
--- a/packages/ibm-products/src/components/Checklist/Checklist.test.js
+++ b/packages/ibm-products/src/components/Checklist/Checklist.test.js
@@ -6,7 +6,7 @@
  */
 
 import React, { act } from 'react';
-import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { render, screen, fireEvent } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 import userEvent from '@testing-library/user-event';
 
 import { pkg } from '../../settings';
@@ -50,6 +50,48 @@ const taskLists = [
       },
     ],
   },
+  {
+    title: 'List 3 title',
+    tasks: [
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 4 title',
+    tasks: [
+      {
+        kind: 'disabled',
+        label: 'disabled task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'disabled',
+        label: 'disabled task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 5 title',
+    tasks: [
+      {
+        kind: 'error',
+        label: 'error task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'error',
+        label: 'error task without callback',
+      },
+    ],
+  },
 ];
 
 // calculate some values based on taskLists
@@ -173,4 +215,63 @@ describe(componentName, () => {
     await click(taskItemWithCallback);
     expect(list1itemCallbackFn).toHaveBeenCalledTimes(1);
   });
+
+  it('should expand/collapse while clicking on checklist header button ', async () => {
+    renderComponent({
+      title: 'Checklist header',
+      viewAllLabel: `View all (10)`,
+    });
+
+    const buttonEle = screen.getAllByRole('button');
+    const toggleButton = buttonEle.find(
+      (btn) => btn.getAttribute('aria-label') === 'Checklist toggle'
+    );
+    // checking if the checklist is expanded
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+
+    // collapsing checklist
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    // expand back on second click
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+  });
+
+  it('should call checklist with checked, unchecked,indeterminate, disabled and error state', async () => {
+    renderComponent();
+    const checkedElement = screen
+      .getByTitle('List 1 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(checkedElement).toBeInViewport;
+    expect(checkedElement).toHaveClass(`${blockClass}__icon--checked`);
+
+    const uncheckedElement = screen
+      .getByTitle('List 2 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(uncheckedElement).toBeInViewport;
+    expect(uncheckedElement).toHaveClass(`${blockClass}__icon--unchecked`);
+
+    const indeterminateElement = screen
+      .getByTitle('List 3 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(indeterminateElement).toBeInViewport;
+    expect(indeterminateElement).toHaveClass(
+      `${blockClass}__icon--indeterminate`
+    );
+
+    const disabledElement = screen
+      .getByTitle('List 4 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(disabledElement).toBeInViewport;
+    expect(disabledElement).toHaveClass(`${blockClass}__icon--disabled`);
+
+    const errorElement = screen
+      .getByTitle('List 5 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(errorElement).toBeInViewport;
+    expect(errorElement).toHaveClass(`${blockClass}__icon--error`);
+  });
 });
diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js
index 5ec8084cb6..57fe87bd23 100644
--- a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js
+++ b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js
@@ -5,14 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import {
-  render,
-  screen,
-  act,
-  waitFor,
-  fireEvent,
-} from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import React, { act } from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+
 import userEvent from '@testing-library/user-event';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -23,8 +18,14 @@ import {
   CoachmarkOverlayElement,
   CoachmarkOverlayElements,
 } from '..';
-import { BEACON_KIND } from './utils/enums';
+import {
+  BEACON_KIND,
+  COACHMARK_ALIGNMENT,
+  COACHMARK_OVERLAY_KIND,
+} from './utils/enums';
 import { CoachmarkDragbar } from './CoachmarkDragbar';
+import { getOffsetTune } from './utils/constants';
+import { clamp } from './utils/helpers';
 const blockClass = `${pkg.prefix}--coachmark`;
 const componentName = Coachmark.displayName;
 
@@ -74,6 +75,14 @@ describe(componentName, () => {
     expect(screen.getByTestId(dataTestId)).toHaveClass(blockClass);
   });
 
+  it('Check coachmark can be open by default', () => {
+    renderCoachmark({
+      'data-testid': dataTestId,
+      isOpenByDefault: true,
+    });
+    expect(isCoachmarkVisible()).toBeTruthy();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderCoachmark();
     await expect(container).toBeAccessible(componentName);
@@ -211,11 +220,108 @@ describe(componentName, () => {
     );
   });
 
-  it('Check coachmark can be open by default', () => {
+  it('renders the theme prop', async () => {
     renderCoachmark({
       'data-testid': dataTestId,
-      isOpenByDefault: true,
+      theme: 'dark',
     });
-    expect(isCoachmarkVisible()).toBeTruthy();
+
+    await expect(screen.getByTestId(dataTestId)).toHaveClass(
+      `${pkg.prefix}--coachmark__dark`
+    );
+  });
+
+  it('tests getOffsetTune util', async () => {
+    let result;
+    const distanceOffset = 24;
+    const coachmarkTarget = {
+      targetRect: {
+        width: 200,
+        height: 200,
+      },
+      align: COACHMARK_ALIGNMENT.TOP,
+    };
+
+    // Test case when it is a tooltip
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.TOOLTIP);
+    expect(result.left).toBe(0);
+    expect(result.top).toBe(0);
+
+    // Test top alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.TOP;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(100);
+    expect(result.top).toBe(0);
+
+    // Test top left alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.TOP_LEFT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(distanceOffset);
+    expect(result.top).toBe(0);
+
+    // Test top right alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.TOP_RIGHT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(200 - distanceOffset);
+    expect(result.top).toBe(0);
+
+    // Test bottom alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.BOTTOM;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(100);
+    expect(result.top).toBe(200);
+
+    // Test bottom left alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.BOTTOM_LEFT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(distanceOffset);
+    expect(result.top).toBe(200);
+
+    // Test bottom right alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.BOTTOM_RIGHT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(200 - distanceOffset);
+    expect(result.top).toBe(200);
+
+    // Test left alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.LEFT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(0);
+    expect(result.top).toBe(100);
+
+    // Test left top alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.LEFT_TOP;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(0);
+    expect(result.top).toBe(distanceOffset);
+
+    // Test left bottom alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.LEFT_BOTTOM;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(0);
+    expect(result.top).toBe(200 - distanceOffset);
+
+    // Test right alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.RIGHT;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(200);
+    expect(result.top).toBe(100);
+
+    // Test right top alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.RIGHT_TOP;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(200);
+    expect(result.top).toBe(distanceOffset);
+
+    // Test right bottom alignment
+    coachmarkTarget.align = COACHMARK_ALIGNMENT.RIGHT_BOTTOM;
+    result = getOffsetTune(coachmarkTarget, COACHMARK_OVERLAY_KIND.FLOATING);
+    expect(result.left).toBe(200);
+    expect(result.top).toBe(200 - distanceOffset);
+  });
+
+  it('tests clamp helper function', () => {
+    expect(clamp(100, 50, 20)).toBe(50);
+    expect(clamp(40, 10, 50)).toBe(40);
   });
 });
diff --git a/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx b/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx
index 0e0f29d3aa..4b20c4b738 100644
--- a/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx
+++ b/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx
@@ -105,6 +105,7 @@ export let CoachmarkOverlay = forwardRef<HTMLDivElement, CoachmarkOverlayProps>(
 
     const handleKeyPress = (event) => {
       const { shiftKey, key } = event;
+      /* istanbul ignore next */
       if (key === 'Enter' || key === ' ') {
         setA11yDragMode((prevVal) => !prevVal);
       } else if (a11yDragMode) {
@@ -151,6 +152,7 @@ export let CoachmarkOverlay = forwardRef<HTMLDivElement, CoachmarkOverlayProps>(
       return style;
     }, [isBeacon, isDraggable, coachmark, kind]);
 
+    /* istanbul ignore next */
     function handleDragBounds(x, y) {
       let xRes = x;
       let yRes = y;
@@ -254,6 +256,7 @@ const useWindowDimensions = () => {
   );
 
   useEffect(() => {
+    /* istanbul ignore next */
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
diff --git a/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.test.js b/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.test.js
index d9cf59f68f..485911ba7a 100644
--- a/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.test.js
+++ b/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.test.js
@@ -22,12 +22,18 @@ const children = `hello, world (${uuidv4()})`;
 const dataTestId = uuidv4();
 const className = `class-${uuidv4()}`;
 
-const childrenContent = (
+const childrenContent = [
   <CoachmarkOverlayElement
+    key="element1"
     title="Hello World"
     description="this is a description test"
-  />
-);
+  />,
+  <CoachmarkOverlayElement
+    key="element2"
+    title="Hello World"
+    description="this is a another description test"
+  />,
+];
 
 const renderCoachmarkWithOverlayElements = (
   { ...rest } = {},
@@ -165,4 +171,22 @@ describe(componentName, () => {
 
     expect(screen.getByRole('img')).toBeInTheDocument();
   });
+
+  it('calls onNext', async () => {
+    const user = userEvent.setup();
+    const onNext = jest.fn();
+    renderCoachmarkWithOverlayElements({
+      'data-testid': dataTestId,
+      onNext,
+    });
+    const beaconOrButton = screen.getByRole('button', {
+      name: 'Show information',
+    });
+    await act(() => user.click(beaconOrButton));
+    const nextButton = screen.getByRole('button', {
+      name: 'Next',
+    });
+    await act(() => user.click(nextButton));
+    await expect(onNext).toHaveBeenCalled();
+  });
 });
diff --git a/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.tsx b/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.tsx
index 2db4b39812..710db555aa 100644
--- a/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.tsx
+++ b/packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.tsx
@@ -77,6 +77,18 @@ export interface CoachmarkOverlayElementsProps {
    * The label for the Close button.
    */
   closeButtonLabel?: string;
+  /**
+   * Callback called when clicking on the Next button.
+   */
+  onNext?: () => void;
+  /**
+   * Callback called when clicking on the Previous button.
+   */
+  onBack?: () => void;
+  /**
+   * Current step of the coachmarks.
+   */
+  currentStep?: number;
 }
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -96,6 +108,9 @@ const defaults = {
   nextButtonText: 'Next',
   previousButtonLabel: 'Back',
   closeButtonLabel: 'Got it',
+  onNext: undefined,
+  onBack: undefined,
+  currentStep: 0,
 };
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -112,9 +127,12 @@ export let CoachmarkOverlayElements = React.forwardRef<
       isVisible = defaults.isVisible,
       media,
       renderMedia,
+      currentStep = defaults.currentStep,
       nextButtonText = defaults.nextButtonText,
       previousButtonLabel = defaults.previousButtonLabel,
       closeButtonLabel = defaults.closeButtonLabel,
+      onNext = defaults.onNext,
+      onBack = defaults.onBack,
       // Collect any other property values passed in.
       ...rest
     },
@@ -123,7 +141,7 @@ export let CoachmarkOverlayElements = React.forwardRef<
     const buttonFocusRef = useRef<ButtonProps<any> | undefined>(undefined);
     const scrollRef = useRef<CarouselProps | undefined>(undefined);
     const [scrollPosition, setScrollPosition] = useState(0);
-    const [currentProgStep, _setCurrentProgStep] = useState(0);
+    const [currentProgStep, _setCurrentProgStep] = useState(currentStep);
     const coachmark = useCoachmark();
     const hasMedia = media || renderMedia;
 
@@ -145,6 +163,16 @@ export let CoachmarkOverlayElements = React.forwardRef<
       [currentProgStep, renderMedia]
     );
 
+    useEffect(() => {
+      // When current step is set by props
+      // scroll to the appropriate view on the carrousel
+      const targetStep = clamp(currentStep, progStepFloor, progStepCeil);
+
+      scrollRef?.current?.scrollToView?.(targetStep);
+      // Avoid circular call to this hook
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStep]);
+
     useEffect(() => {
       // On mount, one of the two primary buttons ("next" or "close")
       // will be rendered and must have focus. (a11y)
@@ -222,7 +250,6 @@ export let CoachmarkOverlayElements = React.forwardRef<
         ) : (
           <>
             <Carousel
-              disableArrowScroll
               ref={scrollRef as RefObject<HTMLDivElement>}
               onScroll={(scrollPercent) => {
                 setScrollPosition(scrollPercent);
@@ -248,6 +275,7 @@ export let CoachmarkOverlayElements = React.forwardRef<
                     );
                     scrollRef?.current?.scrollToView?.(targetStep);
                     setCurrentProgStep(targetStep);
+                    onBack?.();
                   }}
                 >
                   {previousButtonLabel}
@@ -268,6 +296,7 @@ export let CoachmarkOverlayElements = React.forwardRef<
                     );
                     scrollRef?.current?.scrollToView?.(targetStep);
                     setCurrentProgStep(targetStep);
+                    onNext?.();
                   }}
                 >
                   {nextButtonText}
@@ -320,6 +349,10 @@ CoachmarkOverlayElements.propTypes = {
    * The label for the Close button.
    */
   closeButtonLabel: PropTypes.string,
+  /**
+   * Current step of the coachmarks
+   */
+  currentStep: PropTypes.number,
   /**
    * The visibility of CoachmarkOverlayElements is
    * managed in the parent component.
@@ -344,6 +377,14 @@ CoachmarkOverlayElements.propTypes = {
    * The label for the Next button.
    */
   nextButtonText: PropTypes.string,
+  /**
+   * Optional callback called when clicking on the Previous button.
+   */
+  onBack: PropTypes.func,
+  /**
+   * Optional callback called when clicking on the Next button.
+   */
+  onNext: PropTypes.func,
   /**
    * The label for the Previous button.
    */
diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.test.js b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.test.js
index dd67b208f2..f46f0cdc3e 100644
--- a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.test.js
+++ b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.test.js
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import { render, screen, act } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -131,4 +131,74 @@ describe(componentName, () => {
       componentName
     );
   });
+
+  it('calls the onClose prop', async () => {
+    const onClose = jest.fn();
+    renderCoachmarkStack({
+      title: 'Coachmark Stack',
+      description: 'Coachmark Stack Description',
+      navLinkLabels: ['Label 1', 'Label 2', 'Label 3'],
+      tagline: 'Test Tagline',
+      'data-testid': dataTestId,
+      onClose,
+    });
+    expect(onClose).not.toHaveBeenCalled();
+
+    const coachmarkStackButton = screen.getByRole('button', {
+      name: /Test Tagline/,
+    });
+
+    await act(() => userEvent.click(coachmarkStackButton));
+
+    const closeButton = screen.getAllByRole('button', {
+      name: /Close/,
+    })[0];
+
+    await act(() => userEvent.click(closeButton));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('opens a stacked coachmark', async () => {
+    const onClose = jest.fn();
+    renderCoachmarkStack({
+      title: 'Coachmark Stack',
+      description: 'Coachmark Stack Description',
+      navLinkLabels: ['Label 1', 'Label 2', 'Label 3'],
+      tagline: 'Test Tagline',
+      'data-testid': dataTestId,
+      onClose,
+    });
+
+    // gets the trigger to open the overlay
+    const coachmarkStackButton = screen.getByRole('button', {
+      name: /Test Tagline/,
+    });
+    await act(() => userEvent.click(coachmarkStackButton));
+
+    // Gets the label button to open a stacked item
+    const labelButton = screen.getByRole('button', {
+      name: /Label 1/,
+    });
+    await act(() => userEvent.click(labelButton));
+
+    // Gets the overlay element
+    const coachmarkOverlay = document.querySelector(
+      `.${pkg.prefix}--coachmark-overlay`
+    );
+
+    // tests to see if the element has the is-stacked class
+    expect(coachmarkOverlay).toHaveClass(
+      `${pkg.prefix}--coachmark-stack-element--is-stacked`
+    );
+
+    // pressing escape should close the stacked item
+    await act(() => userEvent.keyboard('{Escape}'));
+
+    expect(coachmarkOverlay).not.toHaveClass(
+      `${pkg.prefix}--coachmark-stack-element--is-stacked`
+    );
+
+    await act(() => userEvent.keyboard('{Escape}'));
+  });
 });
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
index 8cacdd4f05..b53be1ec6d 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
@@ -16,16 +16,376 @@ import { ConditionBuilder } from '.';
 import cx from 'classnames';
 import userEvent from '@testing-library/user-event';
 
-import { inputData, inputDataDynamicOptions } from './assets/sampleInput';
 import {
   sampleDataStructure_nonHierarchical,
   sampleDataStructure_Hierarchical,
 } from './assets/SampleData';
 import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT } from './utils/util';
+import CustomInput from './assets/CustomInput';
 
 const blockClass = `${pkg.prefix}--condition-builder`;
 const componentName = ConditionBuilder.displayName;
 
+const customOperators = [
+  {
+    label: 'is greater than',
+    id: 'greater',
+  },
+  {
+    label: 'is greater than or equal to',
+    id: 'greaterEqual',
+  },
+];
+
+const inputData = {
+  properties: [
+    {
+      id: 'continent',
+      label: 'Continent',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Africa',
+            id: 'Africa',
+          },
+          {
+            label: 'Antarctica',
+            id: 'Antarctica',
+          },
+          {
+            label: 'Asia',
+            id: 'Asia',
+          },
+          {
+            label: 'Australia',
+            id: 'Australia',
+          },
+          {
+            label: 'Europe',
+            id: 'Europe',
+          },
+        ],
+      },
+    },
+    {
+      id: 'region',
+      label: 'Region',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Afghanistan',
+            id: 'AF',
+          },
+          {
+            label: 'Albania',
+            id: 'AL',
+          },
+          {
+            label: 'Algeria',
+            id: 'AG',
+          },
+          {
+            label: 'Andorra',
+            id: 'AN',
+          },
+          {
+            label: 'India',
+            id: 'India',
+          },
+        ],
+      },
+    },
+    {
+      id: 'color',
+      label: 'Color',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'black',
+            id: 'black',
+          },
+          {
+            label: 'silver',
+            id: 'silver',
+          },
+          {
+            label: 'gray',
+            id: 'gray',
+          },
+          {
+            label: 'white',
+            id: 'white',
+          },
+          {
+            label: 'maroon',
+            id: 'maroon',
+          },
+          {
+            label: 'red',
+            id: 'red',
+          },
+          {
+            label: 'purple',
+            id: 'purple',
+          },
+          {
+            label: 'fuchsia',
+            id: 'fuchsia',
+          },
+          {
+            label: 'green',
+            id: 'green',
+          },
+          {
+            label: 'lime',
+            id: 'lime',
+          },
+          {
+            label: 'olive',
+            id: 'olive',
+          },
+          {
+            label: 'yellow',
+            id: 'yellow',
+          },
+          {
+            label: 'navy',
+            id: 'navy',
+          },
+          {
+            label: 'blue',
+            id: 'blue',
+          },
+          {
+            label: 'teal',
+            id: 'teal',
+          },
+          {
+            label: 'aqua',
+            id: 'aqua',
+          },
+        ],
+      },
+    },
+    {
+      id: 'id',
+      label: 'ID',
+      type: 'text',
+      config: {},
+    },
+    {
+      id: 'id_long',
+      label: 'Id Long',
+      type: 'textarea',
+      config: {},
+    },
+    {
+      id: 'price',
+      label: 'Price',
+      type: 'number',
+      config: {
+        min: 0,
+        step: 1,
+        unit: 'Dollars',
+      },
+    },
+    {
+      id: 'date',
+      label: 'Date',
+      type: 'date',
+      config: {},
+    },
+    {
+      id: 'time',
+      label: 'Time',
+      type: 'time',
+      config: {
+        timeZones: ['IST', 'CET', 'UTC', 'LOCAL'],
+      },
+    },
+    {
+      id: 'delivery',
+      label: 'Delivery',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Processing',
+            id: 'Processing',
+          },
+          {
+            label: 'Preparing for dispatch',
+            id: 'Preparing for dispatch',
+          },
+          {
+            label: 'Dispatched',
+            id: 'Dispatched',
+          },
+          {
+            label: 'In delivery',
+            id: 'In delivery',
+          },
+          {
+            label: 'Delivered',
+            id: 'Delivered',
+          },
+        ],
+      },
+    },
+    {
+      id: 'season',
+      label: 'Season',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Winter',
+            id: 'Winter',
+          },
+          {
+            label: 'Spring',
+            id: 'Spring',
+          },
+          {
+            label: 'Summer',
+            id: 'Summer',
+          },
+          {
+            label: 'Fall',
+            id: 'Fall',
+          },
+        ],
+      },
+    },
+    {
+      id: 'product',
+      label: 'Product',
+      type: 'custom',
+      config: {
+        component: CustomInput,
+        operators: customOperators,
+      },
+    },
+  ],
+};
+
+const inputDataDynamicOptions = {
+  properties: [
+    {
+      id: 'continent',
+      label: 'Continent',
+      icon: Earth,
+      type: 'option',
+      config: {},
+    },
+    {
+      id: 'region',
+      label: 'Region',
+      type: 'option',
+      config: {},
+    },
+    {
+      id: 'color',
+      label: 'Color',
+      type: 'option',
+      config: {},
+    },
+    {
+      id: 'id',
+      label: 'ID',
+      type: 'text',
+      config: {},
+    },
+    {
+      id: 'price',
+      label: 'Price',
+      type: 'number',
+      config: {
+        min: 0,
+        step: 1,
+        unit: 'Dollars',
+      },
+    },
+    {
+      id: 'date',
+      label: 'Date',
+      type: 'date',
+      config: {},
+    },
+    {
+      id: 'time',
+      label: 'Time',
+      type: 'time',
+      config: {
+        timeZones: ['IST', 'CET', 'UTC', 'LOCAL'],
+      },
+    },
+
+    {
+      id: 'product',
+      label: 'Product',
+      type: 'text',
+      config: {},
+    },
+    {
+      id: 'delivery',
+      label: 'Delivery',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Processing',
+            id: 'Processing',
+          },
+          {
+            label: 'Preparing for dispatch',
+            id: 'Preparing for dispatch',
+          },
+          {
+            label: 'Dispatched',
+            id: 'Dispatched',
+          },
+          {
+            label: 'In delivery',
+            id: 'In delivery',
+          },
+          {
+            label: 'Delivered',
+            id: 'Delivered',
+          },
+        ],
+      },
+    },
+    {
+      id: 'season',
+      label: 'Season',
+      type: 'option',
+      config: {
+        options: [
+          {
+            label: 'Winter',
+            id: 'Winter',
+          },
+          {
+            label: 'Spring',
+            id: 'Spring',
+          },
+          {
+            label: 'Summer',
+            id: 'Summer',
+          },
+          {
+            label: 'Fall',
+            id: 'Fall',
+          },
+        ],
+      },
+    },
+  ],
+};
 // values to use
 const className = `class-${uuidv4()}`;
 const dataTestId = uuidv4();
@@ -861,12 +1221,12 @@ describe(componentName, () => {
     let closeButtons = document.querySelectorAll(
       `.${blockClass}__close-condition`
     );
-    expect(closeButtons).toHaveLength(3);
+    expect(closeButtons).toHaveLength(4);
     //click first close button
     await act(() => userEvent.click(closeButtons[0]));
 
     closeButtons = document.querySelectorAll(`.${blockClass}__close-condition`);
-    expect(closeButtons).toHaveLength(2);
+    expect(closeButtons).toHaveLength(3);
 
     expect(closeButtons[0]).toHaveFocus();
 
@@ -874,8 +1234,8 @@ describe(componentName, () => {
 
     await act(() => userEvent.click(closeButtons[1]));
     closeButtons = document.querySelectorAll(`.${blockClass}__close-condition`);
-    expect(closeButtons).toHaveLength(1);
-    expect(closeButtons[0]).toHaveFocus();
+    expect(closeButtons).toHaveLength(2);
+    expect(closeButtons[1]).toHaveFocus();
   });
 
   it('check the next/previous close button is focussed on remove condition for Hierarchical variant', async () => {
@@ -1558,49 +1918,55 @@ describe(componentName, () => {
 
     await act(() => userEvent.keyboard('{ArrowDown}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`)
+      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowDown}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`)
+      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowDown}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`)
+      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowDown}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`)
+      document.querySelectorAll(
+        `[role="row"][aria-level="3"][aria-posinset="1"]`
+      )[1]
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowDown}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="3"]`)
+      document.querySelectorAll(
+        `[role="row"][aria-level="3"][aria-posinset="2"]`
+      )[1]
     ).toHaveFocus();
 
     //reverse row navigation
 
     await act(() => userEvent.keyboard('{ArrowUp}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`)
+      document.querySelectorAll(
+        `[role="row"][aria-level="3"][aria-posinset="1"]`
+      )[1]
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowUp}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`)
+      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowUp}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`)
+      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowUp}'));
     expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`)
+      document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`)
     ).toHaveFocus();
 
     await act(() => userEvent.keyboard('{ArrowUp}'));
@@ -1627,13 +1993,5 @@ describe(componentName, () => {
     expect(
       document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`)
     ).toHaveFocus();
-
-    await act(() => userEvent.keyboard('{ArrowRight}'));
-    expect(screen.getAllByRole('button', { name: 'Region' })[0]).toHaveFocus();
-
-    await act(() => userEvent.keyboard('{ArrowLeft}'));
-    expect(
-      document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`)
-    ).toHaveFocus();
   });
 });
diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
index 5c2543bdea..e208703234 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
+++ b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
@@ -4,123 +4,127 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+//cspell:disable
 import uuidv4 from '../../../global/js/utils/uuidv4';
 
 export const sampleDataStructure_Hierarchical = {
   operator: 'or',
   groups: [
     {
-      groupOperator: 'and', //'and|or',
-      statement: 'ifAll', // 'if|exclude if',
+      groupOperator: 'and',
+      statement: 'ifAll',
       id: uuidv4(),
       conditions: [
         {
-          property: 'region',
-          operator: 'is',
-          value: { id: 'India', label: 'India' },
-          id: uuidv4(),
-        },
-        {
-          property: 'delivery',
-          operator: 'is',
-          value: { id: 'Processing', label: 'Processing' },
-          id: uuidv4(),
-        },
-        {
-          property: 'delivery',
+          property: 'continent',
           operator: 'is',
-          value: { id: 'Processing', label: 'Processing' },
+          value: {
+            label: 'Africa',
+            id: 'Africa',
+          },
           id: uuidv4(),
         },
         {
-          property: 'delivery',
-          operator: 'is',
-          value: { id: 'Processing', label: 'Processing' },
+          property: 'region',
+          operator: 'oneOf',
+          value: [
+            {
+              label: 'Algeria',
+              id: 'DZ',
+            },
+            {
+              label: 'Andorra',
+              id: 'AD',
+            },
+          ],
           id: uuidv4(),
         },
-        //group object repeats
         {
-          groupOperator: 'and', //'and|or',
-          statement: 'unlessAll', // 'if|exclude if',
-          id: uuidv4(),
+          statement: 'unlessAll',
+          groupOperator: 'and',
           conditions: [
-            {
-              property: 'region',
-              operator: 'is',
-              value: { id: 'India', label: 'India' },
-              id: uuidv4(),
-            },
             {
               property: 'delivery',
               operator: 'is',
-              value: { id: 'Processing', label: 'Processing' },
+              value: {
+                label: 'Delivered',
+                id: 'Delivered',
+              },
               id: uuidv4(),
             },
             {
-              property: 'delivery',
-              operator: 'is',
-              value: { id: 'Processing', label: 'Processing' },
+              property: 'id',
+              operator: 'startsWith',
+              value: '#delivered',
               id: uuidv4(),
             },
+          ],
+          id: uuidv4(),
+        },
+        {
+          statement: 'ifAny',
+          groupOperator: 'or',
+          conditions: [
             {
-              property: 'delivery',
+              property: 'season',
               operator: 'is',
-              value: { id: 'Processing', label: 'Processing' },
+              value: {
+                label: 'Summer',
+                id: 'Summer',
+              },
               id: uuidv4(),
             },
-            //group object repeats
             {
-              groupOperator: 'or', //'and|or',
-              statement: 'ifAny', // 'if|exclude if',
+              property: 'season',
+              operator: 'is',
+              value: {
+                label: 'Fall',
+                id: 'Fall',
+              },
               id: uuidv4(),
-              conditions: [
-                {
-                  property: 'region',
-                  operator: 'is',
-                  value: { id: 'India', label: 'India' },
-                  id: uuidv4(),
-                },
-                {
-                  property: 'delivery',
-                  operator: 'is',
-                  value: { id: 'Processing', label: 'Processing' },
-                  id: uuidv4(),
-                },
-                {
-                  property: 'delivery',
-                  operator: 'is',
-                  value: { id: 'Processing', label: 'Processing' },
-                  id: uuidv4(),
-                },
-                //group object repeats
-              ],
             },
           ],
+          id: uuidv4(),
         },
       ],
     },
     {
-      groupOperator: 'and', //'and|or',
-      statement: 'ifAll', // 'if|exclude if',
+      statement: 'ifAll',
+      groupOperator: 'and',
       id: uuidv4(),
       conditions: [
         {
-          property: 'continent',
-          operator: 'is',
-          value: { id: 'Asia', label: 'Asia' },
-          id: uuidv4(),
-        },
-        {
-          property: 'region',
-          operator: 'is',
-          value: { id: 'India', label: 'India' },
+          property: 'delivery',
+          operator: 'oneOf',
+          value: [
+            {
+              label: 'Processing',
+              id: 'Processing',
+            },
+            {
+              label: 'Preparing for dispatch',
+              id: 'Preparing for dispatch',
+            },
+          ],
           id: uuidv4(),
         },
         {
-          property: 'price',
-          operator: 'is',
-          value: '20',
+          statement: 'ifAll',
+          groupOperator: 'and',
+          conditions: [
+            {
+              property: 'price',
+              operator: 'greater',
+              value: '50 Dollars',
+              id: uuidv4(),
+            },
+            {
+              property: 'id',
+              operator: 'is',
+              value: '#proccessing',
+              id: uuidv4(),
+            },
+          ],
           id: uuidv4(),
         },
       ],
@@ -131,10 +135,19 @@ export const sampleDataStructure_Hierarchical = {
 export const sampleDataStructure_nonHierarchical = {
   groups: [
     {
-      groupOperator: 'and', //'and|or',
-      statement: 'ifAll', // 'if|exclude if',
+      groupOperator: 'and',
+      statement: 'ifAll',
       id: uuidv4(),
       conditions: [
+        {
+          property: 'continent',
+          operator: 'is',
+          value: {
+            label: 'Asia',
+            id: 'Asia',
+          },
+          id: uuidv4(),
+        },
         {
           property: 'region',
           operator: 'oneOf',
@@ -144,25 +157,29 @@ export const sampleDataStructure_nonHierarchical = {
               id: 'AF',
             },
             {
-              label: 'Albania',
-              id: 'AL',
+              label: 'India',
+              id: 'IN',
             },
           ],
           id: uuidv4(),
         },
         {
-          property: 'delivery',
-          operator: 'is',
-          value: { id: 'Processing', label: 'Processing' },
+          property: 'date',
+          operator: 'between',
+          value: ['2024-12-04T18:30:00.000Z', '2024-12-18T18:30:00.000Z'],
           id: uuidv4(),
         },
         {
-          property: 'price',
+          property: 'season',
           operator: 'is',
-          value: '3 Dollars',
+          value: {
+            label: 'Fall',
+            id: 'Fall',
+          },
           id: uuidv4(),
         },
       ],
     },
   ],
+  operator: 'or',
 };
diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
index 6aeab8ae3d..eec003a83b 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
+++ b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+//cspell:disable
 import {
   Calendar,
   ColorPalette,
@@ -15,10 +15,421 @@ import {
   Flag,
   Hashtag,
   Tree,
-  Wikis,
 } from '@carbon/react/icons';
 import CustomInput from './CustomInput';
+import React from 'react';
 
+const regions = [
+  ['AF', 'Afghanistan'],
+  ['AX', 'Åland Islands'],
+  ['AL', 'Albania'],
+  ['DZ', 'Algeria'],
+  ['AS', 'American Samoa'],
+  ['AD', 'Andorra'],
+  ['AO', 'Angola'],
+  ['AI', 'Anguilla'],
+  ['AQ', 'Antarctica'],
+  ['AG', 'Antigua & Barbuda'],
+  ['AR', 'Argentina'],
+  ['AM', 'Armenia'],
+  ['AW', 'Aruba'],
+  ['AC', 'Ascension Island'],
+  ['AU', 'Australia'],
+  ['AT', 'Austria'],
+  ['AZ', 'Azerbaijan'],
+  ['BS', 'Bahamas'],
+  ['BH', 'Bahrain'],
+  ['BD', 'Bangladesh'],
+  ['BB', 'Barbados'],
+  ['BY', 'Belarus'],
+  ['BE', 'Belgium'],
+  ['BZ', 'Belize'],
+  ['BJ', 'Benin'],
+  ['BM', 'Bermuda'],
+  ['BT', 'Bhutan'],
+  ['BO', 'Bolivia'],
+  ['BA', 'Bosnia & Herzegovina'],
+  ['BW', 'Botswana'],
+  ['BV', 'Bouvet Island'],
+  ['BR', 'Brazil'],
+  ['IO', 'British Indian Ocean Territory'],
+  ['VG', 'British Virgin Islands'],
+  ['BN', 'Brunei'],
+  ['BG', 'Bulgaria'],
+  ['BF', 'Burkina Faso'],
+  ['BI', 'Burundi'],
+  ['KH', 'Cambodia'],
+  ['CM', 'Cameroon'],
+  ['CA', 'Canada'],
+  ['IC', 'Canary Islands'],
+  ['CV', 'Cape Verde'],
+  ['BQ', 'Caribbean Netherlands'],
+  ['KY', 'Cayman Islands'],
+  ['CF', 'Central African Republic'],
+  ['EA', 'Ceuta & Melilla'],
+  ['TD', 'Chad'],
+  ['CL', 'Chile'],
+  ['CN', 'China'],
+  ['CX', 'Christmas Island'],
+  ['CP', 'Clipperton Island'],
+  ['CC', 'Cocos (Keeling) Islands'],
+  ['CO', 'Colombia'],
+  ['KM', 'Comoros'],
+  ['CG', 'Congo - Brazzaville'],
+  ['CD', 'Congo - Kinshasa'],
+  ['CK', 'Cook Islands'],
+  ['CR', 'Costa Rica'],
+  ['CI', "Côte d'Ivoire"],
+  ['HR', 'Croatia'],
+  ['CU', 'Cuba'],
+  ['CW', 'Curaçao'],
+  ['CY', 'Cyprus'],
+  ['CZ', 'Czechia'],
+  ['DK', 'Denmark'],
+  ['DG', 'Diego Garcia'],
+  ['DJ', 'Djibouti'],
+  ['DM', 'Dominica'],
+  ['DO', 'Dominican Republic'],
+  ['EC', 'Ecuador'],
+  ['EG', 'Egypt'],
+  ['SV', 'El Salvador'],
+  ['GQ', 'Equatorial Guinea'],
+  ['ER', 'Eritrea'],
+  ['EE', 'Estonia'],
+  ['SZ', 'Eswatini'],
+  ['ET', 'Ethiopia'],
+  ['EU', 'European Union'],
+  ['FK', 'Falkland Islands'],
+  ['FO', 'Faroe Islands'],
+  ['FJ', 'Fiji'],
+  ['FI', 'Finland'],
+  ['FR', 'France'],
+  ['GF', 'French Guiana'],
+  ['PF', 'French Polynesia'],
+  ['TF', 'French Southern Territories'],
+  ['GA', 'Gabon'],
+  ['GM', 'Gambia'],
+  ['GE', 'Georgia'],
+  ['DE', 'Germany'],
+  ['GH', 'Ghana'],
+  ['GI', 'Gibraltar'],
+  ['GR', 'Greece'],
+  ['GL', 'Greenland'],
+  ['GD', 'Grenada'],
+  ['GP', 'Guadeloupe'],
+  ['GU', 'Guam'],
+  ['GT', 'Guatemala'],
+  ['GG', 'Guernsey'],
+  ['GN', 'Guinea'],
+  ['GW', 'Guinea-Bissau'],
+  ['GY', 'Guyana'],
+  ['HT', 'Haiti'],
+  ['HM', 'Heard & McDonald Islands'],
+  ['HN', 'Honduras'],
+  ['HK', 'Hong Kong SAR China'],
+  ['HU', 'Hungary'],
+  ['IS', 'Iceland'],
+  ['IN', 'India'],
+  ['ID', 'Indonesia'],
+  ['IR', 'Iran'],
+  ['IQ', 'Iraq'],
+  ['IE', 'Ireland'],
+  ['IM', 'Isle of Man'],
+  ['IL', 'Israel'],
+  ['IT', 'Italy'],
+  ['JM', 'Jamaica'],
+  ['JP', 'Japan'],
+  ['JE', 'Jersey'],
+  ['JO', 'Jordan'],
+  ['KZ', 'Kazakhstan'],
+  ['KE', 'Kenya'],
+  ['KI', 'Kiribati'],
+  ['XK', 'Kosovo'],
+  ['KW', 'Kuwait'],
+  ['KG', 'Kyrgyzstan'],
+  ['LA', 'Laos'],
+  ['LV', 'Latvia'],
+  ['LB', 'Lebanon'],
+  ['LS', 'Lesotho'],
+  ['LR', 'Liberia'],
+  ['LY', 'Libya'],
+  ['LI', 'Liechtenstein'],
+  ['LT', 'Lithuania'],
+  ['LU', 'Luxembourg'],
+  ['MO', 'Macao SAR China'],
+  ['MG', 'Madagascar'],
+  ['MW', 'Malawi'],
+  ['MY', 'Malaysia'],
+  ['MV', 'Maldives'],
+  ['ML', 'Mali'],
+  ['MT', 'Malta'],
+  ['MH', 'Marshall Islands'],
+  ['MQ', 'Martinique'],
+  ['MR', 'Mauritania'],
+  ['MU', 'Mauritius'],
+  ['YT', 'Mayotte'],
+  ['MX', 'Mexico'],
+  ['FM', 'Micronesia'],
+  ['MD', 'Moldova'],
+  ['MC', 'Monaco'],
+  ['MN', 'Mongolia'],
+  ['ME', 'Montenegro'],
+  ['MS', 'Montserrat'],
+  ['MA', 'Morocco'],
+  ['MZ', 'Mozambique'],
+  ['MM', 'Myanmar (Burma)'],
+  ['NA', 'Namibia'],
+  ['NR', 'Nauru'],
+  ['NP', 'Nepal'],
+  ['NL', 'Netherlands'],
+  ['NC', 'New Caledonia'],
+  ['NZ', 'New Zealand'],
+  ['NI', 'Nicaragua'],
+  ['NE', 'Niger'],
+  ['NG', 'Nigeria'],
+  ['NU', 'Niue'],
+  ['NF', 'Norfolk Island'],
+  ['KP', 'North Korea'],
+  ['MK', 'North Macedonia'],
+  ['MP', 'Northern Mariana Islands'],
+  ['NO', 'Norway'],
+  ['OM', 'Oman'],
+  ['PK', 'Pakistan'],
+  ['PW', 'Palau'],
+  ['PS', 'Palestinian Territories'],
+  ['PA', 'Panama'],
+  ['PG', 'Papua New Guinea'],
+  ['PY', 'Paraguay'],
+  ['PE', 'Peru'],
+  ['PH', 'Philippines'],
+  ['PN', 'Pitcairn Islands'],
+  ['PL', 'Poland'],
+  ['PT', 'Portugal'],
+  ['PR', 'Puerto Rico'],
+  ['QA', 'Qatar'],
+  ['RE', 'Réunion'],
+  ['RO', 'Romania'],
+  ['RU', 'Russia'],
+  ['RW', 'Rwanda'],
+  ['BL', 'St. Barthélemy'],
+  ['SH', 'St. Helena'],
+  ['KN', 'St. Kitts & Nevis'],
+  ['LC', 'St. Lucia'],
+  ['MF', 'St. Martin'],
+  ['PM', 'St. Pierre & Miquelon'],
+  ['VC', 'St. Vincent & Grenadines'],
+  ['WS', 'Samoa'],
+  ['SM', 'San Marino'],
+  ['ST', 'São Tomé & Príncipe'],
+  ['SA', 'Saudi Arabia'],
+  ['SN', 'Senegal'],
+  ['RS', 'Serbia'],
+  ['SC', 'Seychelles'],
+  ['SL', 'Sierra Leone'],
+  ['SG', 'Singapore'],
+  ['SX', 'Sint Maarten'],
+  ['SK', 'Slovakia'],
+  ['SI', 'Slovenia'],
+  ['SB', 'Solomon Islands'],
+  ['SO', 'Somalia'],
+  ['ZA', 'South Africa'],
+  ['GS', 'South Georgia & South Sandwich Islands'],
+  ['KR', 'South Korea'],
+  ['SS', 'South Sudan'],
+  ['ES', 'Spain'],
+  ['LK', 'Sri Lanka'],
+  ['SD', 'Sudan'],
+  ['SR', 'Suriname'],
+  ['SJ', 'Svalbard & Jan Mayen'],
+  ['SE', 'Sweden'],
+  ['CH', 'Switzerland'],
+  ['SY', 'Syria'],
+  ['TW', 'Taiwan'],
+  ['TJ', 'Tajikistan'],
+  ['TZ', 'Tanzania'],
+  ['TH', 'Thailand'],
+  ['TL', 'Timor-Leste'],
+  ['TG', 'Togo'],
+  ['TK', 'Tokelau'],
+  ['TO', 'Tonga'],
+  ['TT', 'Trinidad & Tobago'],
+  ['TA', 'Tristan da Cunha'],
+  ['TN', 'Tunisia'],
+  ['TR', 'Turkey'],
+  ['TM', 'Turkmenistan'],
+  ['TC', 'Turks & Caicos Islands'],
+  ['TV', 'Tuvalu'],
+  ['UG', 'Uganda'],
+  ['UA', 'Ukraine'],
+  ['AE', 'United Arab Emirates'],
+  ['GB', 'United Kingdom'],
+  ['UN', 'United Nations'],
+  ['US', 'United States'],
+  ['UM', 'U.S. Outlying Islands'],
+  ['VI', 'U.S. Virgin Islands'],
+  ['UY', 'Uruguay'],
+  ['UZ', 'Uzbekistan'],
+  ['VU', 'Vanuatu'],
+  ['VA', 'Vatican City'],
+  ['VE', 'Venezuela'],
+  ['VN', 'Vietnam'],
+  ['WF', 'Wallis & Futuna'],
+  ['EH', 'Western Sahara'],
+  ['YE', 'Yemen'],
+  ['ZM', 'Zambia'],
+  ['ZW', 'Zimbabwe'],
+];
+const colors = [
+  'black',
+  'silver',
+  'gray',
+  'white',
+  'maroon',
+  'red',
+  'purple',
+  'fuchsia',
+  'green',
+  'lime',
+  'olive',
+  'yellow',
+  'navy',
+  'blue',
+  'teal',
+  'aqua',
+  'orange',
+  'aliceblue',
+  'antiquewhite',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'blanchedalmond',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'cyan\n(synonym of aqua)',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'limegreen',
+  'linen',
+  'magenta',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'oldlace',
+  'olivedrab',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'thistle',
+  'tomato',
+  'transparent',
+  'turquoise',
+  'violet',
+  'wheat',
+  'whitesmoke',
+  'yellowgreen',
+  'rebeccapurple',
+];
 //keeping this commented code intentionally ,which is an alternative way to give support for dynamic options.
 //instead of supplying getOptions callback, we keep option property in inputConfig always as a async method instead to array as below.
 // export const inputDataForAsyncOptions = {
@@ -112,33 +523,17 @@ export const inputData = {
       icon: Flag,
       type: 'option',
       config: {
-        options: [
-          {
-            label: 'Afghanistan',
-            id: 'AF',
-            icon: Wikis,
-          },
-          {
-            label: 'Albania',
-            id: 'AL',
-            icon: Wikis,
-          },
-          {
-            label: 'Algeria',
-            id: 'AG',
-            icon: Wikis,
-          },
-          {
-            label: 'Andorra',
-            id: 'AN',
-            icon: Wikis,
-          },
-          {
-            label: 'India',
-            id: 'India',
-            icon: Wikis,
-          },
-        ],
+        options: regions.map(([id, label]) => ({
+          id,
+          label,
+          icon: () => (
+            <span>
+              {String.fromCodePoint(
+                ...[...id].map((char) => 127397 + char.charCodeAt(0))
+              )}
+            </span>
+          ),
+        })),
       },
     },
     {
@@ -147,72 +542,17 @@ export const inputData = {
       icon: ColorPalette,
       type: 'option',
       config: {
-        options: [
-          {
-            label: 'black',
-            id: 'black',
-          },
-          {
-            label: 'silver',
-            id: 'silver',
-          },
-          {
-            label: 'gray',
-            id: 'gray',
-          },
-          {
-            label: 'white',
-            id: 'white',
-          },
-          {
-            label: 'maroon',
-            id: 'maroon',
-          },
-          {
-            label: 'red',
-            id: 'red',
-          },
-          {
-            label: 'purple',
-            id: 'purple',
-          },
-          {
-            label: 'fuchsia',
-            id: 'fuchsia',
-          },
-          {
-            label: 'green',
-            id: 'green',
-          },
-          {
-            label: 'lime',
-            id: 'lime',
-          },
-          {
-            label: 'olive',
-            id: 'olive',
-          },
-          {
-            label: 'yellow',
-            id: 'yellow',
-          },
-          {
-            label: 'navy',
-            id: 'navy',
-          },
-          {
-            label: 'blue',
-            id: 'blue',
-          },
-          {
-            label: 'teal',
-            id: 'teal',
-          },
-          {
-            label: 'aqua',
-            id: 'aqua',
-          },
-        ],
+        options: colors.map((item) => {
+          return {
+            id: item,
+            label: item,
+            icon: () => (
+              <svg width="12" height="12" viewBox="0 0 12 12">
+                <rect x="0" y="0" width="12" height="12" rx="1" fill={item} />
+              </svg>
+            ),
+          };
+        }),
       },
     },
     {
diff --git a/packages/ibm-products/src/components/DragAndDrop/DragAndDrop.mdx b/packages/ibm-products/src/components/DragAndDrop/DragAndDrop.mdx
index 52df1c0ac2..1ba3736161 100644
--- a/packages/ibm-products/src/components/DragAndDrop/DragAndDrop.mdx
+++ b/packages/ibm-products/src/components/DragAndDrop/DragAndDrop.mdx
@@ -2,7 +2,7 @@ import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
 import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import * as stories from './DragAndDrop.stories';
 
-# DescriptionList
+# Drag and drop
 
 ## Table of Contents
 
diff --git a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx
index decd22fffe..d39f2a9288 100644
--- a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx
+++ b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx
@@ -158,7 +158,7 @@ const FilterSummary = React.forwardRef(
           [`${blockClass}__expanded`]: multiline,
         })}
       >
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           {!multiline && renderTagSet('single')}
           {multiline && renderTagSet('multiline')}
         </AnimatePresence>
diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx
index 72fba302fe..fcf585087d 100644
--- a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx
+++ b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx
@@ -304,7 +304,7 @@ export let InterstitialScreen = React.forwardRef<
             className // Apply any supplied class names to the main HTML element.
           )}
           size="lg"
-          onClose={onClose}
+          onClose={handleClose}
           open={isOpen}
           ref={_forwardedRef}
           aria-label={interstitialAriaLabel}
@@ -317,7 +317,6 @@ export let InterstitialScreen = React.forwardRef<
               headerClassName
             )}
             iconDescription={closeIconDescription}
-            buttonOnClick={handleClose}
           >
             {headerTitle && <h2>{headerTitle}</h2>}
             {!hideProgressIndicator && (
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
index 22e6b8fd6b..74ac52968c 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
+++ b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
@@ -486,7 +486,7 @@ const pageActionsOverflowLabel = 'Page actions...';
 
 const subtitle = 'Optional subtitle if necessary';
 const longSubtitle =
-  'Optional subtitle if necessary, which is very long in this case, but will need to be handled somehow. It just keeps going on and on and on and on and on.';
+  'Optional subtitle if necessary, which is very long in this case, but will need to be handled somehow. It just keeps going on and on and on and on and on and on and on and on and on and on and on.';
 const demoSubtitle = 'This report details the monthly authentication failures';
 
 const dummyPageContent = (
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
index aa2c4a6cc1..8d339ec5e2 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
+++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
@@ -15,6 +15,7 @@ import {
   usePrefix,
   ButtonProps,
   PopoverAlignment,
+  DefinitionTooltip,
 } from '@carbon/react';
 import { TagProps } from '@carbon/react/lib/components/Tag/Tag';
 import React, {
@@ -51,6 +52,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
+import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow';
 
 const componentName = 'PageHeader';
 
@@ -901,12 +903,20 @@ export let PageHeader = React.forwardRef(
 
     const displayedBreadcrumbs = getBreadcrumbs();
 
+    const subtitleRef = useRef<HTMLSpanElement>(null);
+    const isOverflowing = checkHeightOverflow(subtitleRef.current);
+    const subtitleContent = (
+      <span ref={subtitleRef} className={`${blockClass}__subtitle-text`}>
+        {subtitle}
+      </span>
+    );
+
     return (
       <>
         <div
           className={`${blockClass}--offset-top-measuring-element`}
           ref={offsetTopMeasuringRef}
-        ></div>
+        />
         <section
           {...rest}
           className={cx([
@@ -1035,13 +1045,22 @@ export let PageHeader = React.forwardRef(
                 </Row>
               ) : null}
 
-              {subtitle ? (
+              {subtitle && (
                 <Row className={`${blockClass}__subtitle-row`}>
                   <Column className={`${blockClass}__subtitle`}>
-                    {subtitle}
+                    {isOverflowing ? (
+                      <DefinitionTooltip
+                        definition={subtitle}
+                        className={`${blockClass}__subtitle-tooltip`}
+                      >
+                        {subtitleContent}
+                      </DefinitionTooltip>
+                    ) : (
+                      subtitleContent
+                    )}
                   </Column>
                 </Row>
-              ) : null}
+              )}
 
               {children ? (
                 <Row className={`${blockClass}__available-row`}>
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js
index 188776d5f8..c0d8371e86 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js
+++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.js
@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { DefinitionTooltip, SkeletonText } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace';
+import { checkWidthOverflow } from '../../global/js/utils/checkForOverflow';
 
 /**
  *
@@ -39,25 +40,8 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => {
   let titleText;
   let isEditable = !!onSave;
 
-  const [isEllipsisApplied, setIsEllipsisApplied] = useState();
-  const longTitleRef = useRef(undefined);
-  const titleRef = useRef(undefined);
-
-  useLayoutEffect(() => {
-    setIsEllipsisApplied(isEllipsisActive());
-  }, [longTitleRef, titleRef, title]);
-
-  const isEllipsisActive = () => {
-    if (longTitleRef.current) {
-      return (
-        longTitleRef.current?.offsetWidth < longTitleRef.current?.scrollWidth
-      );
-    } else if (titleRef.current) {
-      return titleRef.current?.offsetWidth < titleRef.current?.scrollWidth;
-    }
-
-    return false;
-  };
+  const titleRef = useRef();
+  const isEllipsisApplied = checkWidthOverflow(titleRef.current);
 
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
@@ -66,6 +50,12 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => {
     }
     const TitleIcon = icon;
 
+    const titleContent = (
+      <span ref={titleRef} className={`${blockClass}__titleText`}>
+        {text}
+      </span>
+    );
+
     titleInnards = (
       <>
         {icon && !loading ? (
@@ -97,18 +87,10 @@ export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => {
             definition={text}
             className={`${blockClass}__tooltip`}
           >
-            <span ref={longTitleRef} className={`${blockClass}__titleText`}>
-              {text}
-            </span>
+            {titleContent}
           </DefinitionTooltip>
         ) : (
-          <span
-            ref={titleRef}
-            className={`${blockClass}__titleText`}
-            title={!loading ? asText : null}
-          >
-            {text}
-          </span>
+          titleContent
         )}
       </>
     );
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js
index 5e98d445ca..4692e9cc9d 100644
--- a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js
+++ b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js
@@ -6,17 +6,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  fireEvent,
-  render,
-  screen,
-  act,
-  waitFor,
-} from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectMultipleError } from '../../global/js/utils/test-helper';
 
-import React from 'react';
+import React, { act } from 'react';
 import { Button, TextInput, AILabel, AILabelContent } from '@carbon/react';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -189,7 +183,7 @@ describe('SidePanel', () => {
       `.${blockClass}__close-button`
     );
     await act(() => userEvent.click(closeIconButton));
-    rerender(<SlideIn placement="left" open={false} />);
+    await act(() => rerender(<SlideIn placement="left" open={false} />));
     const updatedStyles = getComputedStyle(pageContent);
     expect(updatedStyles.marginInlineStart).toBe('0');
   });
@@ -204,9 +198,9 @@ describe('SidePanel', () => {
     );
     const outerElement = container.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(closeIconButton));
-    fireEvent.animationStart(outerElement);
-    rerender(<SlideIn placement="right" open={false} />);
-    fireEvent.animationEnd(outerElement);
+    await act(() => fireEvent.animationStart(outerElement));
+    await act(() => rerender(<SlideIn placement="right" open={false} />));
+    await act(() => fireEvent.animationEnd(outerElement));
     const updatedStyles = getComputedStyle(pageContent);
     expect(updatedStyles.marginInlineEnd).toBe('0');
     expect(onUnmountFn).toHaveBeenCalled();
@@ -229,9 +223,11 @@ describe('SidePanel', () => {
     );
     const outerElement = container.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(closeIconButton));
-    fireEvent.animationStart(outerElement);
-    fireEvent.animationEnd(outerElement);
-    rerender(<SlideIn animateTitle={false} placement="right" open={false} />);
+    await act(() => fireEvent.animationStart(outerElement));
+    await act(() => fireEvent.animationEnd(outerElement));
+    await act(() =>
+      rerender(<SlideIn animateTitle={false} placement="right" open={false} />)
+    );
     const updatedStyles = getComputedStyle(pageContent);
     expect(updatedStyles.marginInlineEnd).toBe('0');
   });
@@ -245,16 +241,18 @@ describe('SidePanel', () => {
     );
     const overlayElement = container.querySelector(`.${blockClass}__overlay`);
     await act(() => userEvent.click(closeIconButton));
-    rerender(
-      <SidePanel
-        title={title}
-        includeOverlay
-        open={false}
-        onRequestClose={onRequestCloseFn}
-        id="sidepanel-id"
-      >
-        Content
-      </SidePanel>
+    await act(() =>
+      rerender(
+        <SidePanel
+          title={title}
+          includeOverlay
+          open={false}
+          onRequestClose={onRequestCloseFn}
+          id="sidepanel-id"
+        >
+          Content
+        </SidePanel>
+      )
     );
     setTimeout(() => {
       expect(overlayElement).not.toBeInTheDocument();
diff --git a/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js b/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js
new file mode 100644
index 0000000000..2144e23e88
--- /dev/null
+++ b/packages/ibm-products/src/global/js/utils/__tests__/checkForOverflow.test.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { checkWidthOverflow, checkHeightOverflow } from '../checkForOverflow';
+
+const normalElm = {
+  offsetWidth: 200,
+  scrollWidth: 100,
+  offsetHeight: 200,
+  scrollHeight: 100,
+};
+
+const overflowElm = {
+  offsetWidth: 100,
+  scrollWidth: 200,
+  offsetHeight: 100,
+  scrollHeight: 200,
+};
+
+describe('checkForOverflow', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('detects width overflow', () => {
+    expect(checkWidthOverflow(normalElm)).toBe(false);
+    expect(checkWidthOverflow(overflowElm)).toBe(true);
+    expect(checkWidthOverflow()).toBe(false);
+  });
+
+  it('detects height overflow', () => {
+    expect(checkHeightOverflow(normalElm)).toBe(false);
+    expect(checkHeightOverflow(overflowElm)).toBe(true);
+    expect(checkHeightOverflow()).toBe(false);
+  });
+});
diff --git a/packages/ibm-products/src/global/js/utils/checkForOverflow.ts b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts
new file mode 100644
index 0000000000..386389d4b2
--- /dev/null
+++ b/packages/ibm-products/src/global/js/utils/checkForOverflow.ts
@@ -0,0 +1,24 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/**
+ * used to calculate if a element is overflowing the width or height of an area
+ */
+
+export const checkWidthOverflow = (el: HTMLElement | null): boolean => {
+  if (el) {
+    return el?.offsetWidth < el?.scrollWidth;
+  }
+  return false;
+};
+
+export const checkHeightOverflow = (el: HTMLElement | null): boolean => {
+  if (el) {
+    return el?.offsetHeight < el?.scrollHeight;
+  }
+  return false;
+};
diff --git a/yarn.lock b/yarn.lock
index 209fcd8b18..c059e63aad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1684,7 +1684,7 @@ __metadata:
     "@carbon/ibm-products-styles": "npm:^2.52.0-rc.0"
     "@carbon/layout": "npm:^11.28.0"
     "@carbon/motion": "npm:^11.24.0"
-    "@carbon/react": "npm:^1.71.1"
+    "@carbon/react": "npm:^1.72.0"
     "@carbon/themes": "npm:^11.43.0"
     "@carbon/type": "npm:^11.33.0"
     "@percy/cli": "npm:^1.30.1"
@@ -1755,8 +1755,8 @@ __metadata:
     "@carbon/ibm-products-styles": "npm:^2.52.0-rc.0"
     "@carbon/icons": "npm:^11.53.0"
     "@carbon/motion": "npm:^11.24.0"
-    "@carbon/styles": "npm:1.70.0"
-    "@carbon/web-components": "npm:2.18.0"
+    "@carbon/styles": "npm:1.71.0"
+    "@carbon/web-components": "npm:2.19.0"
     "@mordech/vite-lit-loader": "npm:^0.35.0"
     "@rollup/plugin-alias": "npm:^5.1.1"
     "@rollup/plugin-commonjs": "npm:^28.0.1"
@@ -1777,7 +1777,7 @@ __metadata:
     autoprefixer: "npm:^10.4.20"
     cssnano: "npm:^7.0.6"
     eslint: "npm:^9.11.1"
-    eslint-config-carbon: "npm:3.17.1"
+    eslint-config-carbon: "npm:3.18.0"
     globby: "npm:^14.0.2"
     happy-dom: "npm:^15.11.6"
     lit: "npm:^3.1.0"
@@ -1831,7 +1831,7 @@ __metadata:
     classnames: "npm:^2.5.1"
     copyfiles: "npm:^2.4.1"
     cross-env: "npm:^7.0.3"
-    framer-motion: "npm:^6.5.1 < 7"
+    framer-motion: "npm:^11.11.17"
     fs-extra: "npm:^11.2.0"
     glob: "npm:^10.3.10"
     immutability-helper: "npm:^3.1.1"
@@ -1855,7 +1855,7 @@ __metadata:
     "@carbon/grid": ^11.29.0
     "@carbon/layout": ^11.28.0
     "@carbon/motion": ^11.24.0
-    "@carbon/react": ^1.71.1
+    "@carbon/react": ^1.72.0
     "@carbon/themes": ^11.43.0
     "@carbon/type": ^11.33.0
     react: ^16.8.6 || ^17.0.1 || ^18.2.0
@@ -1912,15 +1912,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/react@npm:^1.71.1":
-  version: 1.71.1
-  resolution: "@carbon/react@npm:1.71.1"
+"@carbon/react@npm:^1.72.0":
+  version: 1.72.0
+  resolution: "@carbon/react@npm:1.72.0"
   dependencies:
     "@babel/runtime": "npm:^7.24.7"
     "@carbon/feature-flags": "npm:^0.24.0"
     "@carbon/icons-react": "npm:^11.53.0"
     "@carbon/layout": "npm:^11.28.0"
-    "@carbon/styles": "npm:^1.70.0"
+    "@carbon/styles": "npm:^1.71.0"
     "@floating-ui/react": "npm:^0.26.0"
     "@ibm/telemetry-js": "npm:^1.5.0"
     classnames: "npm:2.5.1"
@@ -1941,7 +1941,7 @@ __metadata:
     react: ^16.8.6 || ^17.0.1 || ^18.2.0
     react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0
     sass: ^1.33.0
-  checksum: 51fde69cfc9962d4f3671dcb93c8f8da02cf3715f5a8e34a4724731e3dc519860bb2edffd8996134f41ca667051e18b56d0cd98ee7b1d57c76ef4805ae720b83
+  checksum: aa10615630798ec67a7598acf4cc09712d0bbd771d5a147564736ce88716d5468a4173035c758f4aee758b7635eb39de20556fa22425823e08fd85ab1185b451
   languageName: node
   linkType: hard
 
@@ -1971,9 +1971,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/styles@npm:1.70.0, @carbon/styles@npm:^1.70.0":
-  version: 1.70.0
-  resolution: "@carbon/styles@npm:1.70.0"
+"@carbon/styles@npm:1.71.0, @carbon/styles@npm:^1.71.0":
+  version: 1.71.0
+  resolution: "@carbon/styles@npm:1.71.0"
   dependencies:
     "@carbon/colors": "npm:^11.28.0"
     "@carbon/feature-flags": "npm:^0.24.0"
@@ -1997,7 +1997,7 @@ __metadata:
   peerDependenciesMeta:
     sass:
       optional: true
-  checksum: 6a6c7c6c8c226b95bcac86633db516bb7099a4bb203bf68cced7f259ceaf0e0ff0c205e620be02abf2424e380c752ff57ebd9179ac2d242ccc252a36ad2b1532
+  checksum: 927e6037d98c9927baf3452a808e75cfea9a5434e2031fdddf1af8dc52360bbdd4dfe1feadcfbb66c8529d20e132ce925111331b02db00514d78e8bb4dcc3e4d
   languageName: node
   linkType: hard
 
@@ -2034,18 +2034,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/web-components@npm:2.18.0":
-  version: 2.18.0
-  resolution: "@carbon/web-components@npm:2.18.0"
+"@carbon/web-components@npm:2.19.0":
+  version: 2.19.0
+  resolution: "@carbon/web-components@npm:2.19.0"
   dependencies:
-    "@carbon/styles": "npm:^1.70.0"
+    "@carbon/styles": "npm:^1.71.0"
     "@floating-ui/dom": "npm:^1.6.3"
     "@ibm/telemetry-js": "npm:^1.5.0"
     flatpickr: "npm:4.6.13"
     lit: "npm:^3.1.0"
     lodash-es: "npm:^4.17.21"
     tslib: "npm:^2.6.3"
-  checksum: 51d99f31649ad9e021316bf11c9f55b0712be7d2ebc9d83591d6a47fe78a441b5a219e9d55ef2daa0b565b9361ddde402554e1aecdd7090ca7ee2cc281c68586
+  checksum: f424175856be71a66c63cc983ddc74064766aea596a410dc4633567453832b2338ceb7bc757af11bc95147eca719cecb9221d499e262aaec39ac107d7f4b3bb3
   languageName: node
   linkType: hard
 
@@ -2866,22 +2866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^0.8.2":
-  version: 0.8.8
-  resolution: "@emotion/is-prop-valid@npm:0.8.8"
-  dependencies:
-    "@emotion/memoize": "npm:0.7.4"
-  checksum: e85bdeb9d9d23de422f271e0f5311a0142b15055bb7e610440dbf250f0cdfd049df88af72a49e2c6081954481f1cbeca9172e2116ff536b38229397dfbed8082
-  languageName: node
-  linkType: hard
-
-"@emotion/memoize@npm:0.7.4":
-  version: 0.7.4
-  resolution: "@emotion/memoize@npm:0.7.4"
-  checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc
-  languageName: node
-  linkType: hard
-
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -4114,71 +4098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@motionone/animation@npm:^10.12.0":
-  version: 10.17.0
-  resolution: "@motionone/animation@npm:10.17.0"
-  dependencies:
-    "@motionone/easing": "npm:^10.17.0"
-    "@motionone/types": "npm:^10.17.0"
-    "@motionone/utils": "npm:^10.17.0"
-    tslib: "npm:^2.3.1"
-  checksum: 85ac8a36f33b7510cec239b12d90eec38a8f191158e2686c95c7ba237b17cac0e14b1533748fb27e10c18b8f4f4ea9798bc0a9286cf854852ab957d290a09ba9
-  languageName: node
-  linkType: hard
-
-"@motionone/dom@npm:10.12.0":
-  version: 10.12.0
-  resolution: "@motionone/dom@npm:10.12.0"
-  dependencies:
-    "@motionone/animation": "npm:^10.12.0"
-    "@motionone/generators": "npm:^10.12.0"
-    "@motionone/types": "npm:^10.12.0"
-    "@motionone/utils": "npm:^10.12.0"
-    hey-listen: "npm:^1.0.8"
-    tslib: "npm:^2.3.1"
-  checksum: 6fd7804b8adba5578d700fced12df6e7fca366aeda8837471286481ebfb5275facd3883448df84a2f772c32e7e3297fc696d3a19b110214f070f305b1ab21c67
-  languageName: node
-  linkType: hard
-
-"@motionone/easing@npm:^10.17.0":
-  version: 10.17.0
-  resolution: "@motionone/easing@npm:10.17.0"
-  dependencies:
-    "@motionone/utils": "npm:^10.17.0"
-    tslib: "npm:^2.3.1"
-  checksum: 69f0fc4999a209801b128586cbb328937d9db1c091bed26762d30d035ecc5c01b0cbdce610c6550f609c0be78c1ad03c808e6c61f15fc52621f614449ce10a86
-  languageName: node
-  linkType: hard
-
-"@motionone/generators@npm:^10.12.0":
-  version: 10.17.0
-  resolution: "@motionone/generators@npm:10.17.0"
-  dependencies:
-    "@motionone/types": "npm:^10.17.0"
-    "@motionone/utils": "npm:^10.17.0"
-    tslib: "npm:^2.3.1"
-  checksum: 06bd6c16cdb3c9fbb3a3fca05d6941d5e756b6ce151e2e9cc4f49c3b021fb54a5b970b01e3ddae9d77175e58b66cacb00927ee829f545fafd0bbdbdc838933aa
-  languageName: node
-  linkType: hard
-
-"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.17.0":
-  version: 10.17.0
-  resolution: "@motionone/types@npm:10.17.0"
-  checksum: 9449991493f6e7be59261e4fc1a3d4a5b842da8962084d742905f964b4d3aad5fd6c37bd95d5ab51f65fda7b0c389a332c5f7c7eccd6be54eb765ee2fc6e7070
-  languageName: node
-  linkType: hard
-
-"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.17.0":
-  version: 10.17.0
-  resolution: "@motionone/utils@npm:10.17.0"
-  dependencies:
-    "@motionone/types": "npm:^10.17.0"
-    hey-listen: "npm:^1.0.8"
-    tslib: "npm:^2.3.1"
-  checksum: 030359d37a6edebf29e0477050e638340f3756fc993a75b877e923b31ed4f3092a61f9d2323494f4b561ada1afc5ea774fb34022e7afbe2ec449c215585ab392
-  languageName: node
-  linkType: hard
-
 "@mswjs/interceptors@npm:^0.35.8":
   version: 0.35.9
   resolution: "@mswjs/interceptors@npm:0.35.9"
@@ -5838,6 +5757,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.28.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm64@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-android-arm64@npm:4.27.3"
@@ -5845,6 +5771,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm64@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.28.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-arm64@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-darwin-arm64@npm:4.27.3"
@@ -5852,6 +5785,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-arm64@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.28.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-x64@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-darwin-x64@npm:4.27.3"
@@ -5859,6 +5799,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-x64@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.28.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-arm64@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-freebsd-arm64@npm:4.27.3"
@@ -5866,6 +5813,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-arm64@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.28.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-x64@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-freebsd-x64@npm:4.27.3"
@@ -5873,6 +5827,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-x64@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.28.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.27.3"
@@ -5880,6 +5841,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.28.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-musleabihf@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.27.3"
@@ -5887,6 +5855,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-musleabihf@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.28.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-gnu@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.27.3"
@@ -5894,6 +5869,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-gnu@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.28.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-musl@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.27.3"
@@ -5901,6 +5883,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-musl@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.28.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-powerpc64le-gnu@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.27.3"
@@ -5908,6 +5897,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.28.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-gnu@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.27.3"
@@ -5915,6 +5911,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-gnu@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.28.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-s390x-gnu@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.27.3"
@@ -5922,6 +5925,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-s390x-gnu@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.28.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.27.3"
@@ -5929,6 +5939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-gnu@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.28.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-musl@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.27.3"
@@ -5936,6 +5953,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-musl@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.28.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-arm64-msvc@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.27.3"
@@ -5943,6 +5967,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-arm64-msvc@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.28.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-ia32-msvc@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.27.3"
@@ -5950,6 +5981,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-ia32-msvc@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.28.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-x64-msvc@npm:4.27.3":
   version: 4.27.3
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.27.3"
@@ -5957,6 +5995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-x64-msvc@npm:4.28.0":
+  version: 4.28.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.28.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@sigstore/bundle@npm:^2.3.0, @sigstore/bundle@npm:^2.3.1":
   version: 2.3.1
   resolution: "@sigstore/bundle@npm:2.3.1"
@@ -6057,7 +6102,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:8.4.5, @storybook/addon-actions@npm:^8.4.5":
+"@storybook/addon-actions@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-actions@npm:8.4.5"
   dependencies:
@@ -6072,6 +6117,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-actions@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/addon-actions@npm:8.4.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@types/uuid": "npm:^9.0.1"
+    dequal: "npm:^2.0.2"
+    polished: "npm:^4.2.2"
+    uuid: "npm:^9.0.0"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: d5ed4ffb2df7ecf256132f9bc4e235c8912ce786a78b00bf90170e72f6c058c524118c110604970de45fee684302cc14e20c4c4427a0f91313b4e5b64a84e123
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-backgrounds@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-backgrounds@npm:8.4.5"
@@ -6085,7 +6145,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:8.4.5, @storybook/addon-controls@npm:^8.4.5":
+"@storybook/addon-controls@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-controls@npm:8.4.5"
   dependencies:
@@ -6098,7 +6158,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:8.4.5, @storybook/addon-docs@npm:^8.4.5":
+"@storybook/addon-controls@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/addon-controls@npm:8.4.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    dequal: "npm:^2.0.2"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: 2bf9bd08d33ba567701446b43fe544d6b5ca3931d2ec5aa65e056e42ac2d28bf318a3d8efaad61b9b653b33c6278c4d24c77a8b79c42c78c14e74d6578c0b5b9
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-docs@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-docs@npm:8.4.5"
   dependencies:
@@ -6115,6 +6188,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-docs@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/addon-docs@npm:8.4.6"
+  dependencies:
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/blocks": "npm:8.4.6"
+    "@storybook/csf-plugin": "npm:8.4.6"
+    "@storybook/react-dom-shim": "npm:8.4.6"
+    react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
+    react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: 6fe339fc4541f6ed8df53a3bff88c2e71fef25982da3e9fb2e854198f378c59e0cc7231b439455e602f49fcfcd37b1eac167c09a609be6f00d5da19ab8c3060c
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-essentials@npm:^8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-essentials@npm:8.4.5"
@@ -6211,7 +6301,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:8.4.5, @storybook/addon-toolbars@npm:^8.4.5":
+"@storybook/addon-toolbars@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-toolbars@npm:8.4.5"
   peerDependencies:
@@ -6220,7 +6310,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.4.5, @storybook/addon-viewport@npm:^8.4.5":
+"@storybook/addon-toolbars@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/addon-toolbars@npm:8.4.6"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: 54a67e960a782c42813afb899de037dfbb79274dca3279057b296d1abfde1a3f3ac19e371567dfe757e531f0fea66fe6a394f9d3a93227ed2a3d1ca7a3b6159f
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-viewport@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/addon-viewport@npm:8.4.5"
   dependencies:
@@ -6231,6 +6330,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-viewport@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/addon-viewport@npm:8.4.6"
+  dependencies:
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: 06e95780da6619bbf60f84df5a4bdb04e237265cd070dc605114f1f0ffdbfa14f2d64d307ed7354459ff11f53550a8cb26db2010f5720f4634deb831d7950816
+  languageName: node
+  linkType: hard
+
 "@storybook/addons@npm:^7.6.17":
   version: 7.6.20
   resolution: "@storybook/addons@npm:7.6.20"
@@ -6252,7 +6362,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:8.4.5, @storybook/blocks@npm:^8.4.5":
+"@storybook/blocks@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/blocks@npm:8.4.5"
   dependencies:
@@ -6272,6 +6382,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/blocks@npm:8.4.6, @storybook/blocks@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/blocks@npm:8.4.6"
+  dependencies:
+    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/icons": "npm:^1.2.12"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^8.4.6
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 65c2b215ca32e34656f491fe59646282b94217f7fe1e275f85804daea3e4d90413fa7a05623e5a95ca53b026cf66b78fc6d05d3f3534cfaccb791b388b431dda
+  languageName: node
+  linkType: hard
+
 "@storybook/builder-vite@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/builder-vite@npm:8.4.5"
@@ -6372,7 +6502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:8.4.5, @storybook/components@npm:^8.4.5":
+"@storybook/components@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/components@npm:8.4.5"
   peerDependencies:
@@ -6381,6 +6511,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/components@npm:8.4.6, @storybook/components@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/components@npm:8.4.6"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 66b08f840017e279274a0be2d9cba9edaa50139d5d7cdd9f148ff815f693db0026531e3e15efc9706c9e32aeccb0a97717aca7b81a2119b79f5875a69f0b81a3
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:7.4.5":
   version: 7.4.5
   resolution: "@storybook/core-events@npm:7.4.5"
@@ -6443,6 +6582,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-plugin@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/csf-plugin@npm:8.4.6"
+  dependencies:
+    unplugin: "npm:^1.3.1"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: e09a2175bc3af950668a307626bcc68b51c88b8404e39f2a57942097ff638b5c997aafaaf694493dac611b11572863f8a9cb6246c0b117a07c0d650299fff620
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
@@ -6535,7 +6685,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:8.4.5, @storybook/manager-api@npm:^8.4.5":
+"@storybook/manager-api@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/manager-api@npm:8.4.5"
   peerDependencies:
@@ -6544,6 +6694,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager-api@npm:8.4.6, @storybook/manager-api@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/manager-api@npm:8.4.6"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: f6deb13cc36852681a54a0a7ec4fed17dab7ae496f07b667e5550950186fd5569b53a21ea0a1416997cda202d47710684bc2da251cb3ea495f59160199e52076
+  languageName: node
+  linkType: hard
+
 "@storybook/preview-api@npm:7.4.5":
   version: 7.4.5
   resolution: "@storybook/preview-api@npm:7.4.5"
@@ -6597,6 +6756,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-api@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/preview-api@npm:8.4.6"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 9771ea6d3e3a6d48ca926293d6521caeec370f7c51527400ec9d184c9b41c580567f00661a568d66eb5d34b9a7e8703e3c2cc9b1cf91be6acb324d134c7c9f02
+  languageName: node
+  linkType: hard
+
 "@storybook/react-dom-shim@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/react-dom-shim@npm:8.4.5"
@@ -6608,6 +6776,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/react-dom-shim@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/react-dom-shim@npm:8.4.6"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^8.4.6
+  checksum: 0f36d3e21590eb51b537dad88b08a5262d942d4a4e22f202986697c159b285b8276711cc19c337ac910521d0d33ed2216bd2921ea9874fdcd373d901eda23e3b
+  languageName: node
+  linkType: hard
+
 "@storybook/react-vite@npm:^8.4.5":
   version: 8.4.5
   resolution: "@storybook/react-vite@npm:8.4.5"
@@ -6630,7 +6809,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:8.4.5, @storybook/react@npm:^8.4.5":
+"@storybook/react@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/react@npm:8.4.5"
   dependencies:
@@ -6655,6 +6834,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/react@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/react@npm:8.4.6"
+  dependencies:
+    "@storybook/components": "npm:8.4.6"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager-api": "npm:8.4.6"
+    "@storybook/preview-api": "npm:8.4.6"
+    "@storybook/react-dom-shim": "npm:8.4.6"
+    "@storybook/theming": "npm:8.4.6"
+  peerDependencies:
+    "@storybook/test": 8.4.6
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^8.4.6
+    typescript: ">= 4.2.x"
+  peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 3d58409032d57cd6597cc318c1723e00f463cd1fb816e840909211ea336fa55ecf4f557f6f8e6d1ed2b9b3ae63eb11f31c61b8c988bca3273630548fa203db50
+  languageName: node
+  linkType: hard
+
 "@storybook/router@npm:7.4.5":
   version: 7.4.5
   resolution: "@storybook/router@npm:7.4.5"
@@ -6680,7 +6884,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:8.4.5, @storybook/source-loader@npm:^8.4.5":
+"@storybook/source-loader@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/source-loader@npm:8.4.5"
   dependencies:
@@ -6694,6 +6898,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/source-loader@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/source-loader@npm:8.4.6"
+  dependencies:
+    "@storybook/csf": "npm:^0.1.11"
+    es-toolkit: "npm:^1.22.0"
+    estraverse: "npm:^5.2.0"
+    prettier: "npm:^3.1.1"
+  peerDependencies:
+    storybook: ^8.4.6
+  checksum: 9083831d9ae1541b4689816b7f1819d5a7ae206f8d102426c442634f0ab17030311663eef2de084430a54f1171f3e82c7e3b51c80ecb7982babfde22fc385fa0
+  languageName: node
+  linkType: hard
+
 "@storybook/theming@npm:7.4.5":
   version: 7.4.5
   resolution: "@storybook/theming@npm:7.4.5"
@@ -6724,7 +6942,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:8.4.5, @storybook/theming@npm:^8.4.5":
+"@storybook/theming@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/theming@npm:8.4.5"
   peerDependencies:
@@ -6733,6 +6951,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:8.4.6, @storybook/theming@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/theming@npm:8.4.6"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 364c7c8d66f523d5dec020157ae5dd86ac976b988f1c61cff61ae141ed906d4c8693f2361eb3b1709409c62f246537e68a3ad6c8d7c7d5c39d7df5bd1c39a815
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.4.5":
   version: 7.4.5
   resolution: "@storybook/types@npm:7.4.5"
@@ -6770,7 +6997,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/web-components@npm:8.4.5, @storybook/web-components@npm:^8.4.5":
+"@storybook/web-components@npm:8.4.5":
   version: 8.4.5
   resolution: "@storybook/web-components@npm:8.4.5"
   dependencies:
@@ -6788,6 +7015,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/web-components@npm:^8.4.5":
+  version: 8.4.6
+  resolution: "@storybook/web-components@npm:8.4.6"
+  dependencies:
+    "@storybook/components": "npm:8.4.6"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager-api": "npm:8.4.6"
+    "@storybook/preview-api": "npm:8.4.6"
+    "@storybook/theming": "npm:8.4.6"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    lit: ^2.0.0 || ^3.0.0
+    storybook: ^8.4.6
+  checksum: 78259da1ebb5a17b31f179d6ae3bcb9a8b0ed54f850597b812584a90c369690121be827ffe29cf49a054b87f63b5d71bca81c50d69ecc06a69fc5561a2034bc2
+  languageName: node
+  linkType: hard
+
 "@testim/chrome-version@npm:^1.1.4":
   version: 1.1.4
   resolution: "@testim/chrome-version@npm:1.1.4"
@@ -11854,6 +12099,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-config-carbon@npm:3.18.0":
+  version: 3.18.0
+  resolution: "eslint-config-carbon@npm:3.18.0"
+  dependencies:
+    "@babel/eslint-parser": "npm:^7.24.7"
+    "@typescript-eslint/eslint-plugin": "npm:^5.59.6"
+    "@typescript-eslint/parser": "npm:^5.59.6"
+    eslint-config-airbnb: "npm:^19.0.4"
+    eslint-config-airbnb-base: "npm:^15.0.0"
+    eslint-config-prettier: "npm:^9.0.0"
+    eslint-plugin-import: "npm:^2.27.5"
+    eslint-plugin-jest: "npm:^28.0.0"
+    eslint-plugin-jest-dom: "npm:^5.0.0"
+    eslint-plugin-jsdoc: "npm:^50.0.0"
+    eslint-plugin-jsx-a11y: "npm:^6.7.1"
+    eslint-plugin-prettier: "npm:^5.0.0"
+    eslint-plugin-react: "npm:^7.32.2"
+    eslint-plugin-react-hooks: "npm:^4.6.0"
+    eslint-plugin-ssr-friendly: "npm:^1.3.0"
+    eslint-plugin-storybook: "npm:^0.8.0"
+    eslint-plugin-testing-library: "npm:^6.0.1"
+    eslint-restricted-globals: "npm:^0.2.0"
+  peerDependencies:
+    eslint: ^9.0.0
+  checksum: 64c3494d833f95abbf8e0048ebd63b6b0dde2d01d54d2f35a6ab277f37277330b1d72f571b7eb50e55081b868f99acff649f833cc3ab21554d67301611405720
+  languageName: node
+  linkType: hard
+
 "eslint-config-prettier@npm:^9.0.0":
   version: 9.1.0
   resolution: "eslint-config-prettier@npm:9.1.0"
@@ -12853,33 +13126,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^6.5.1 < 7":
-  version: 6.5.1
-  resolution: "framer-motion@npm:6.5.1"
+"framer-motion@npm:^11.11.17":
+  version: 11.11.17
+  resolution: "framer-motion@npm:11.11.17"
   dependencies:
-    "@emotion/is-prop-valid": "npm:^0.8.2"
-    "@motionone/dom": "npm:10.12.0"
-    framesync: "npm:6.0.1"
-    hey-listen: "npm:^1.0.8"
-    popmotion: "npm:11.0.3"
-    style-value-types: "npm:5.0.0"
-    tslib: "npm:^2.1.0"
+    tslib: "npm:^2.4.0"
   peerDependencies:
-    react: ">=16.8 || ^17.0.0 || ^18.0.0"
-    react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
-  dependenciesMeta:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
-  checksum: ecdb2cceb0ff400f2bddc8800b74e0b377fd7d627a051437ec510cf3c1e7184b6a0afc68696e70cb21bf277e41ea41813e2833f8878e23de178be10d7b2978e5
-  languageName: node
-  linkType: hard
-
-"framesync@npm:6.0.1":
-  version: 6.0.1
-  resolution: "framesync@npm:6.0.1"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 38a985189c90867a969e9acc1d31bfcab8184bccc0f1ad41a12dbd573e3ec0ba74259d12f3fcabaccd914330601cabd686f47b543798cf6e8c4ad23ea3c0a581
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 85193dea8ea4161efa20604db31d82761008b56f1c68097239e6e825a422c4fcc8e3b06c3a81e9cbbb1905c4b9d69632b520db2f9dd4808e03bf83e1826791ea
   languageName: node
   linkType: hard
 
@@ -13643,13 +13906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hey-listen@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "hey-listen@npm:1.0.8"
-  checksum: 744b5f4c18c7cfb82b22bd22e1d300a9ac4eafe05a22e58fb87e48addfca8be00604d9aa006434ea02f9530990eb4b393ddb28659e2ab7f833ce873e32eb809c
-  languageName: node
-  linkType: hard
-
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"
@@ -17416,8 +17672,8 @@ __metadata:
   linkType: hard
 
 "node-gyp@npm:^10.0.0":
-  version: 10.3.1
-  resolution: "node-gyp@npm:10.3.1"
+  version: 10.1.0
+  resolution: "node-gyp@npm:10.1.0"
   dependencies:
     env-paths: "npm:^2.2.0"
     exponential-backoff: "npm:^3.1.1"
@@ -17425,13 +17681,13 @@ __metadata:
     graceful-fs: "npm:^4.2.6"
     make-fetch-happen: "npm:^13.0.0"
     nopt: "npm:^7.0.0"
-    proc-log: "npm:^4.1.0"
+    proc-log: "npm:^3.0.0"
     semver: "npm:^7.3.5"
-    tar: "npm:^6.2.1"
+    tar: "npm:^6.1.2"
     which: "npm:^4.0.0"
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: d3004f648559e42d7ec8791ea75747fe8a163a6061c202e311e5d7a5f6266baa9a5f5c6fde7be563974c88b030c5d0855fd945364f52fcd230d2a2ceee7be80d
+  checksum: 89e105e495e66cd4568af3cf79cdeb67d670eb069e33163c7781d3366470a30367c9bd8dea59e46db16370020139e5bf78b1fbc03284cb571754dfaa59744db5
   languageName: node
   linkType: hard
 
@@ -18575,18 +18831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"popmotion@npm:11.0.3":
-  version: 11.0.3
-  resolution: "popmotion@npm:11.0.3"
-  dependencies:
-    framesync: "npm:6.0.1"
-    hey-listen: "npm:^1.0.8"
-    style-value-types: "npm:5.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: d2b6f16536b093d6106ab4caff105b1b4a8bb260e1deb316ca4fe81997c2ca1fc9e2d7747cee08dc2ce34d23ef7be8fd096efa7bc7f6908479da9d16343e1f63
-  languageName: node
-  linkType: hard
-
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -19056,6 +19300,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proc-log@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "proc-log@npm:3.0.0"
+  checksum: 02b64e1b3919e63df06f836b98d3af002b5cd92655cab18b5746e37374bfb73e03b84fe305454614b34c25b485cc687a9eebdccf0242cda8fda2475dd2c97e02
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^4.0.0, proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
   version: 4.2.0
   resolution: "proc-log@npm:4.2.0"
@@ -20017,7 +20268,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.20.0, rollup@npm:^4.27.3":
+"rollup@npm:^4.20.0":
   version: 4.27.3
   resolution: "rollup@npm:4.27.3"
   dependencies:
@@ -20086,6 +20337,75 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.27.3":
+  version: 4.28.0
+  resolution: "rollup@npm:4.28.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.28.0"
+    "@rollup/rollup-android-arm64": "npm:4.28.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.28.0"
+    "@rollup/rollup-darwin-x64": "npm:4.28.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.28.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.28.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.28.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.28.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.28.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.28.0"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.28.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.28.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.28.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.28.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.28.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.28.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.28.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.28.0"
+    "@types/estree": "npm:1.0.6"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-freebsd-arm64":
+      optional: true
+    "@rollup/rollup-freebsd-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: e604ff8d866818fff5b15864eab09011b497117774de413a566c17bda5fc6878ea101b6124421e29d7c3478280b8e6a864b2b1f1c7c4422e7fe31cb6846a09fc
+  languageName: node
+  linkType: hard
+
 "run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -21033,16 +21353,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-value-types@npm:5.0.0":
-  version: 5.0.0
-  resolution: "style-value-types@npm:5.0.0"
-  dependencies:
-    hey-listen: "npm:^1.0.8"
-    tslib: "npm:^2.1.0"
-  checksum: a4043bcc8e9f73e393c48f3f3d26f0ed42ac518cf623b1966737a17dc07ef9a4bcefaa81bfb91037c38b160a7683e139132c87fe747aebe6527b785a04262dd8
-  languageName: node
-  linkType: hard
-
 "stylehacks@npm:^7.0.4":
   version: 7.0.4
   resolution: "stylehacks@npm:7.0.4"
@@ -21423,7 +21733,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:6.2.1, tar@npm:^6.1.11, tar@npm:^6.2.1":
+"tar@npm:6.2.1, tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
   dependencies:
@@ -21794,7 +22104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca