diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 51aa7c1f42..c2e5d8ee42 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -25,7 +25,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: build-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
@@ -45,7 +45,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: lint-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
@@ -65,7 +65,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: lint-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
@@ -85,7 +85,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: spellcheck-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
@@ -105,7 +105,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: test-c4p-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
@@ -130,7 +130,7 @@ jobs:
           node-version: '20.x'
           cache: yarn
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key:
diff --git a/.github/workflows/update-example-gallery.yml b/.github/workflows/update-example-gallery.yml
index d84bc622ea..33421f5823 100644
--- a/.github/workflows/update-example-gallery.yml
+++ b/.github/workflows/update-example-gallery.yml
@@ -20,7 +20,7 @@ jobs:
           cache: yarn
 
       - name: Cache dependencies
-        uses: actions/cache@v4
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0
         with:
           path: '**/node_modules'
           key: check-gallery-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
diff --git a/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md b/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md
index 0900278590..08cd923f19 100644
--- a/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md
+++ b/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.16.0-rc.0) (2025-01-13)
+
+**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive
+
+
+
+
+
+## [0.15.1](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.15.1-rc.0...babel-preset-ibm-cloud-cognitive@0.15.1) (2025-01-10)
+
+**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive
+
+
+
+
+
+## [0.15.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.15.1-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive
+
+
+
+
+
+# [0.15.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.15.0-rc.0...babel-preset-ibm-cloud-cognitive@0.15.0) (2025-01-08)
+
+**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive
+
+
+
+
+
 # [0.15.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.15.0-rc.0) (2024-12-24)
 
 **Note:** Version bump only for package babel-preset-ibm-cloud-cognitive
diff --git a/config/babel-preset-ibm-cloud-cognitive/package.json b/config/babel-preset-ibm-cloud-cognitive/package.json
index 2ac7e7bdbc..a754ad690e 100644
--- a/config/babel-preset-ibm-cloud-cognitive/package.json
+++ b/config/babel-preset-ibm-cloud-cognitive/package.json
@@ -1,7 +1,7 @@
 {
   "name": "babel-preset-ibm-cloud-cognitive",
   "private": true,
-  "version": "0.15.0-rc.0",
+  "version": "0.16.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
diff --git a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md
index 916ee6afd2..af8a6b450f 100644
--- a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md
+++ b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md
@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.17.0-rc.0) (2025-01-13)
+
+
+### Bug Fixes
+
+* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56))
+
+
+
+
+
+## [1.16.1](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.16.1-rc.0...jest-config-ibm-cloud-cognitive@1.16.1) (2025-01-10)
+
+**Note:** Version bump only for package jest-config-ibm-cloud-cognitive
+
+
+
+
+
+## [1.16.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.1-rc.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56))
+
+
+
+
+
+# [1.16.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.16.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.0) (2025-01-08)
+
+**Note:** Version bump only for package jest-config-ibm-cloud-cognitive
+
+
+
+
+
 # [1.16.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.0-rc.0) (2024-12-24)
 
 
diff --git a/config/jest-config-ibm-cloud-cognitive/index.js b/config/jest-config-ibm-cloud-cognitive/index.js
index f85b56be75..0bd2e5f3b4 100644
--- a/config/jest-config-ibm-cloud-cognitive/index.js
+++ b/config/jest-config-ibm-cloud-cognitive/index.js
@@ -33,9 +33,9 @@ module.exports = {
   setupFiles: [require.resolve('./setup/setupFiles.js')],
   setupFilesAfterEnv: [require.resolve('./setup/setupFilesAfterEnv.js')],
   testMatch: [
-    '<rootDir>/**/__tests__/**/*.js?(x)',
-    '<rootDir>/**/*.(spec|test).js?(x)',
-    '<rootDir>/**/*-(spec|test).js?(x)',
+    '<rootDir>/**/__tests__/**/*.(js|jsx|ts|tsx)?(x)',
+    '<rootDir>/**/*.(spec|test).(js|jsx|ts|tsx)?(x)',
+    '<rootDir>/**/*-(spec|test).(js|jsx|ts|tsx)?(x)',
   ],
   transform: {
     '^.+\\.(mjs|cjs|js|jsx|ts|tsx)$': require.resolve(
diff --git a/config/jest-config-ibm-cloud-cognitive/package.json b/config/jest-config-ibm-cloud-cognitive/package.json
index 12bc95c2b0..23706e605b 100644
--- a/config/jest-config-ibm-cloud-cognitive/package.json
+++ b/config/jest-config-ibm-cloud-cognitive/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
-  "version": "1.16.0-rc.0",
+  "version": "1.17.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -39,7 +39,7 @@
     "accessibility-checker": "^3.1.78",
     "axe-core": "^4.8.3",
     "babel-jest": "^29.7.0",
-    "babel-preset-ibm-cloud-cognitive": "^0.15.0-rc.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.16.0-rc.0",
     "chalk": "^4.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest-circus": "^29.7.0",
diff --git a/config/storybook-addon-carbon-theme/CHANGELOG.md b/config/storybook-addon-carbon-theme/CHANGELOG.md
index 3186bf1cf4..ac4b97e07f 100644
--- a/config/storybook-addon-carbon-theme/CHANGELOG.md
+++ b/config/storybook-addon-carbon-theme/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.7.0-rc.0) (2025-01-13)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
+## [2.6.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.6.1-rc.0...@carbon/storybook-addon-theme@2.6.1) (2025-01-10)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
+## [2.6.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.6.1-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
+# [2.6.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.6.0-rc.0...@carbon/storybook-addon-theme@2.6.0) (2025-01-08)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 # [2.6.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.6.0-rc.0) (2024-12-24)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme
diff --git a/config/storybook-addon-carbon-theme/package.json b/config/storybook-addon-carbon-theme/package.json
index 806cca8080..f8dc393c66 100644
--- a/config/storybook-addon-carbon-theme/package.json
+++ b/config/storybook-addon-carbon-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "2.6.0-rc.0",
+  "version": "2.7.0-rc.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "repository": {
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 0b872e35c2..f44ec0029b 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.34.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.34.0-rc.0) (2025-01-13)
+
+
+### Bug Fixes
+
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+
+
+### Features
+
+* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc))
+
+
+
+
+
+## [2.33.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.33.1-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.1) (2025-01-10)
+
+**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core
+
+
+
+
+
+## [2.33.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.1-rc.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+
+
+### Features
+
+* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc))
+
+
+
+
+
+# [2.33.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.33.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.0) (2025-01-08)
+
+**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core
+
+
+
+
+
 # [2.33.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.0-rc.0) (2024-12-24)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 5aa1e9aeb4..9b950e1ff8 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-cloud-cognitive-core",
   "private": true,
-  "version": "2.33.0-rc.0",
+  "version": "2.34.0-rc.0",
   "license": "Apache-2.0",
   "main": "scripts/build.js",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@carbon/grid": "^11.29.0",
-    "@carbon/ibm-products-styles": "^2.53.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.54.0-rc.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
     "@carbon/react": "^1.72.0",
diff --git a/packages/ibm-products-styles/CHANGELOG.md b/packages/ibm-products-styles/CHANGELOG.md
index 352c76f176..3bf68405e5 100644
--- a/packages/ibm-products-styles/CHANGELOG.md
+++ b/packages/ibm-products-styles/CHANGELOG.md
@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.54.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.54.0-rc.0) (2025-01-13)
+
+
+### Bug Fixes
+
+* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d))
+* **conditionbuilder:** property text to be bold ([#6658](https://github.com/carbon-design-system/ibm-products/issues/6658)) ([cfc7b39](https://github.com/carbon-design-system/ibm-products/commit/cfc7b3928b1e16847a7370413d2f52588beca03e))
+* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed))
+* **pageHeader:** menu button overflow issue on small screens ([#6502](https://github.com/carbon-design-system/ibm-products/issues/6502)) ([0072e42](https://github.com/carbon-design-system/ibm-products/commit/0072e424fc1f25fbf58be67f7d4d792643f26c30))
+
+
+### Features
+
+* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579))
+* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8))
+
+
+
+
+
+## [2.53.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.53.1-rc.0...@carbon/ibm-products-styles@2.53.1) (2025-01-10)
+
+**Note:** Version bump only for package @carbon/ibm-products-styles
+
+
+
+
+
+## [2.53.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.53.1-rc.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d))
+* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed))
+* **pageHeader:** menu button overflow issue on small screens ([#6502](https://github.com/carbon-design-system/ibm-products/issues/6502)) ([0072e42](https://github.com/carbon-design-system/ibm-products/commit/0072e424fc1f25fbf58be67f7d4d792643f26c30))
+
+
+### Features
+
+* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579))
+* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8))
+
+
+
+
+
+# [2.53.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.53.0-rc.0...@carbon/ibm-products-styles@2.53.0) (2025-01-08)
+
+**Note:** Version bump only for package @carbon/ibm-products-styles
+
+
+
+
+
 # [2.53.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.53.0-rc.0) (2024-12-24)
 
 
diff --git a/packages/ibm-products-styles/package.json b/packages/ibm-products-styles/package.json
index 9f5ccb2b40..1448d5f6ba 100644
--- a/packages/ibm-products-styles/package.json
+++ b/packages/ibm-products-styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.53.0-rc.0",
+  "version": "2.54.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -52,7 +52,7 @@
     "cross-env": "^7.0.3",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.16.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.17.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-check-updates": "^17.1.11",
     "npm-run-all": "^4.1.5",
diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
index bd3b95b762..0d018a6872 100644
--- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
+++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
@@ -31,7 +31,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   transition: all $duration-fast-02 motion(standard, productive);
 }
 
-.#{$block-class}__condition-wrapper * {
+.#{$block-class}__condition-wrapper {
   @include type-style('body-01');
 }
 
diff --git a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss
index 207d86585d..897310cc29 100644
--- a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss
+++ b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss
@@ -26,13 +26,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
 $block-class-overflow: #{$block-class}-popover;
 $block-class-modal: #{$block-class}-modal;
 
-.#{$block-class} {
+.#{$block-class}__visible-tags {
   display: flex;
-  width: 100%;
-  min-width: $spacing-12;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
 }
 
 .#{$block-class}--align-end {
diff --git a/packages/ibm-products-web-components/.storybook/main.ts b/packages/ibm-products-web-components/.storybook/main.ts
index 89486e35d0..af240786b1 100644
--- a/packages/ibm-products-web-components/.storybook/main.ts
+++ b/packages/ibm-products-web-components/.storybook/main.ts
@@ -1,6 +1,5 @@
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
-import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader';
 const glob = require('fast-glob');
 const stories = glob.sync(
   [
@@ -36,11 +35,7 @@ const config = {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
-      plugins: [
-        litStyleLoader(),
-        litTemplateLoader(),
-        viteSVGResultCarbonIconLoader(),
-      ],
+      plugins: [litStyleLoader(), litTemplateLoader()],
     });
   },
 };
diff --git a/packages/ibm-products-web-components/CHANGELOG.md b/packages/ibm-products-web-components/CHANGELOG.md
index 3635388b0b..d9f2108175 100644
--- a/packages/ibm-products-web-components/CHANGELOG.md
+++ b/packages/ibm-products-web-components/CHANGELOG.md
@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.7.0-rc.0) (2025-01-13)
+
+
+### Bug Fixes
+
+* **Side Panel Web components:** storybook controls issue ([#6500](https://github.com/carbon-design-system/ibm-products/issues/6500)) ([19a7536](https://github.com/carbon-design-system/ibm-products/commit/19a75363d0683ed6765e0d713c3f68878eaeaef2))
+* **Tearsheet in Web Components:** cancel button not working as expected ([#6458](https://github.com/carbon-design-system/ibm-products/issues/6458)) ([2461f81](https://github.com/carbon-design-system/ibm-products/commit/2461f8120431c125ceb826ccb5d139a82d49f39c))
+* **Tearsheet web components:** control changes doesn't reflect in stories ([#6413](https://github.com/carbon-design-system/ibm-products/issues/6413)) ([84f6d14](https://github.com/carbon-design-system/ibm-products/commit/84f6d140d0476868a13b18ea886515d856bb0835))
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+* **web-components:** addresses issues in wc build script ([#6675](https://github.com/carbon-design-system/ibm-products/issues/6675)) ([90dc01c](https://github.com/carbon-design-system/ibm-products/commit/90dc01cf337a252c1f7698121820f0ca4cd40755))
+
+
+
+
+
+## [0.6.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.6.1-rc.0...@carbon/ibm-products-web-components@0.6.1) (2025-01-10)
+
+**Note:** Version bump only for package @carbon/ibm-products-web-components
+
+
+
+
+
+## [0.6.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.6.1-rc.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* **Side Panel Web components:** storybook controls issue ([#6500](https://github.com/carbon-design-system/ibm-products/issues/6500)) ([19a7536](https://github.com/carbon-design-system/ibm-products/commit/19a75363d0683ed6765e0d713c3f68878eaeaef2))
+* **Tearsheet in Web Components:** cancel button not working as expected ([#6458](https://github.com/carbon-design-system/ibm-products/issues/6458)) ([2461f81](https://github.com/carbon-design-system/ibm-products/commit/2461f8120431c125ceb826ccb5d139a82d49f39c))
+* **Tearsheet web components:** control changes doesn't reflect in stories ([#6413](https://github.com/carbon-design-system/ibm-products/issues/6413)) ([84f6d14](https://github.com/carbon-design-system/ibm-products/commit/84f6d140d0476868a13b18ea886515d856bb0835))
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+
+
+
+
+
+# [0.6.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.6.0-rc.0...@carbon/ibm-products-web-components@0.6.0) (2025-01-08)
+
+**Note:** Version bump only for package @carbon/ibm-products-web-components
+
+
+
+
+
 # [0.6.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.6.0-rc.0) (2024-12-24)
 
 
diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json
index 5200fb8de7..992a206d42 100644
--- a/packages/ibm-products-web-components/package.json
+++ b/packages/ibm-products-web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.6.0-rc.0",
+  "version": "0.7.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -12,21 +12,21 @@
     "url": "https://github.com/carbon-design-system/ibm-products.git",
     "directory": "packages/ibm-products-web-components"
   },
+  "files": [
+    "custom-elements.json",
+    "es/**/*",
+    "lib/**/*",
+    "scss/**/*"
+  ],
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "exports": {
-    "./es/components/*": {
-      "node": "./lib/components/*",
-      "default": "./es/components/*"
-    },
-    "./es/globals/*": {
-      "node": "./lib/globals/*",
-      "default": "./es/globals/*"
-    },
     "./es/*": "./es/*",
     "./lib/*": "./lib/*",
+    "./dist/*": "./dist/*",
+    "./scss/*": "./scss/*",
     "./custom-elements.json": "./custom-elements.json",
     "./package.json": "./package.json"
   },
@@ -49,12 +49,14 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.53.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.54.0-rc.0",
     "@carbon/styles": "1.71.0",
     "@carbon/web-components": "2.19.0",
-    "lit": "^3.1.0"
+    "lit": "^3.1.0",
+    "tslib": "^2.6.3"
   },
   "devDependencies": {
+    "@carbon/icon-helpers": "^10.54.0",
     "@carbon/icons": "^11.53.0",
     "@carbon/motion": "^11.24.0",
     "@mordech/vite-lit-loader": "^0.35.0",
diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts
index fe7b498300..47bfb57880 100644
--- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts
+++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts
@@ -21,8 +21,8 @@ import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';
 import styles from './side-panel.scss?lit';
 import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16';
-import Close20 from '@carbon/icons/lib/close/20';
+import ArrowLeft16 from '@carbon/web-components/es/icons/arrow--left/16';
+import Close20 from '@carbon/web-components/es/icons/close/20';
 import { moderate02 } from '@carbon/motion';
 import Handle from '../../globals/internal/handle';
 import '@carbon/web-components/es/components/button/index.js';
diff --git a/packages/ibm-products-web-components/tasks/build.js b/packages/ibm-products-web-components/tasks/build.js
index 35a96de035..385ffa8c2a 100644
--- a/packages/ibm-products-web-components/tasks/build.js
+++ b/packages/ibm-products-web-components/tasks/build.js
@@ -12,8 +12,6 @@ import { globby } from 'globby';
 import { rollup } from 'rollup';
 import alias from '@rollup/plugin-alias';
 import autoprefixer from 'autoprefixer';
-import carbonIcons from '../tools/rollup-plugin-icons.js';
-import carbonIconPaths from '../tools/rollup-plugin-icon-paths.js';
 import commonjs from '@rollup/plugin-commonjs';
 import copy from 'rollup-plugin-copy';
 import cssnano from 'cssnano';
@@ -46,7 +44,8 @@ async function build() {
   ]);
 
   const iconInput = await globby([
-    'node_modules/@carbon/icons/lib/**/*.js',
+    '../node_modules/@carbon/icons/lib/**/*.js',
+    '../../node_modules/@carbon/icons/lib/**/*.js',
     '!**/index.js',
   ]);
 
@@ -148,7 +147,6 @@ function getRollupConfig(input, rootDir, outDir, iconInput) {
           ).css;
         },
       }),
-      carbonIcons(iconInput, banner),
       typescript({
         noEmitOnError: true,
         compilerOptions: {
@@ -156,7 +154,6 @@ function getRollupConfig(input, rootDir, outDir, iconInput) {
           outDir,
         },
       }),
-      carbonIconPaths(),
     ],
   };
 }
diff --git a/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js b/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js
deleted file mode 100644
index 7349229dd4..0000000000
--- a/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * 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 path from 'path';
-import { fileURLToPath } from 'url';
-
-/**
- * @returns {object} The rollup plugin to transform `@carbon/icons/lib` imports to relative path in build.
- */
-export default function rollupPluginIconPaths() {
-  return {
-    name: 'transform-icon-paths',
-
-    generateBundle(options, bundle) {
-      function transformIconPaths(filePath, content) {
-        const __dirname = path.dirname(fileURLToPath(import.meta.url));
-        const iconPathRegex = /@carbon\/icons\/lib/g;
-        const filenameES = filePath.replace(/[/\\]src[/\\]/, '/es/');
-        const iconsDir = path.relative(
-          path.dirname(filenameES),
-          path.resolve(__dirname, '../icons')
-        );
-        return content.replace(iconPathRegex, iconsDir);
-      }
-
-      for (const [fileName, fileData] of Object.entries(bundle)) {
-        if (fileData.type === 'chunk') {
-          fileData.code = transformIconPaths(fileName, fileData.code);
-        }
-      }
-    },
-  };
-}
diff --git a/packages/ibm-products-web-components/tools/rollup-plugin-icons.js b/packages/ibm-products-web-components/tools/rollup-plugin-icons.js
deleted file mode 100644
index 1b76dcab39..0000000000
--- a/packages/ibm-products-web-components/tools/rollup-plugin-icons.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * @license
- *
- * 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 path from 'path';
-import { createRequire } from 'node:module';
-import { fileURLToPath } from 'url';
-import icon from './svg-result-carbon-icon.js';
-
-/**
- * @param {Array} [inputs] icon files of the @carbon/icons/lib folder from node_modules
- * @param {String} [banner] license banner to prepend to file
- * @returns {object} The rollup plugin to generate lit svg template icon files.
- */
-export default function rollupPluginIcons(inputs, banner) {
-  return {
-    name: 'carbon-icons',
-
-    async buildEnd() {
-      const __dirname = path.dirname(fileURLToPath(import.meta.url));
-      const require = createRequire(import.meta.url);
-
-      for (const input of inputs) {
-        const iconPath = path.resolve(__dirname, `../${input}`);
-
-        const svg = await import(iconPath);
-
-        const iconsDir = path.dirname(require.resolve('@carbon/icons/lib'));
-        const iconsESPath = path.resolve(
-          'es',
-          'icons',
-          path.relative(iconsDir, iconPath)
-        );
-
-        const code = `${banner}
-import { svg } from 'lit';
-import spread from '@carbon/web-components/es/globals/directives/spread.js';
-
-const svgResultCarbonIcon = ${icon(svg.default)};
-export default svgResultCarbonIcon;`;
-
-        this.emitFile({
-          type: 'asset',
-          fileName: `icons/${path.relative(iconsDir, iconPath)}`,
-          source: code,
-        });
-
-        // emit icon type file
-        const typeCode = `${banner}
-import { SVGTemplateResult } from 'lit-html';
-declare const svgResultCarbonIcon: ({ children, ...attrs }?: { children?: SVGTemplateResult; [attr: string]: any }) => SVGTemplateResult;
-export default svgResultCarbonIcon;`;
-
-        const typePath = path.format({
-          ...path.parse(iconPath),
-          base: '',
-          ext: '.d.ts',
-        });
-
-        this.emitFile({
-          type: 'asset',
-          fileName: `icons/${path.relative(iconsDir, typePath)}`,
-          source: typeCode,
-        });
-      }
-    },
-  };
-}
diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js
deleted file mode 100644
index 34db97b433..0000000000
--- a/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const path = require('path');
-const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
-
-/**
- * A Vite loader to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
- *
- * @returns {string} The massaged module content.
- */
-function svgResultCarbonIconLoader() {
-  const descriptor = require(this.resourcePath); // eslint-disable-line global-require
-  return `
-    import { svg } from 'lit';
-    import spread from '@carbon/web-components/es/globals/directives/spread.js';
-    const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)};
-    export default svgResultCarbonIcon;
-  `;
-}
-
-module.exports = svgResultCarbonIconLoader;
diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js
deleted file mode 100644
index 5c738e011e..0000000000
--- a/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 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 { getAttributes, formatAttributes } from '@carbon/icon-helpers';
-
-// TODO: update @carbon/icon-helpers with this version of toString
-const toString = (descriptor) => {
-  if (typeof descriptor === 'string') {
-    return descriptor;
-  }
-  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
-  const children = content.map(toString).join('');
-  if (elem !== 'svg') {
-    return `<${elem} ${formatAttributes(attrs)}>${children}</${elem}>`;
-  }
-  return `<${elem} ${formatAttributes(
-    getAttributes(attrs)
-  )}>${children}</${elem}>`;
-};
-
-/**
- * Function that takes a valid @carbon/icons style icon descriptor and returns a lit-html svg instance
- *
- * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons
- */
-const icon = (descriptor) => {
-  descriptor.attrs = getAttributes(
-    Object.assign(descriptor.attrs, {
-      '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string
-    })
-  );
-  descriptor?.content?.unshift('${children}'); // eslint-disable-line no-template-curly-in-string
-  return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``;
-};
-
-export default icon;
diff --git a/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts b/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts
deleted file mode 100644
index b1e08ae759..0000000000
--- a/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const path = require('path');
-const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
-
-/**
- * A Vite plugin to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
- *
- * @returns {string} The massaged module content.
- */
-export default function svgResultCarbonIconLoader() {
-  const svgRegex = /@carbon[\\/]icons[\\/]/i;
-
-  const paths = new Map<string, string>();
-
-  return {
-    name: 'svg-result-carbon-icon-loader',
-    enforce: 'pre',
-
-    resolveId(id: string): string | null {
-      if (id.match(svgRegex)) {
-        paths.set(id, id);
-        return id;
-      } else {
-        return null;
-      }
-    },
-
-    async load(id: string): Promise<string | undefined> {
-      let outcome: string | undefined;
-      if (!id.match(svgRegex)) {
-        return outcome;
-      }
-      return ``;
-    },
-
-    async transform(src: string, id: string) {
-      if (!paths.has(id)) {
-        return null;
-      }
-
-      const outcome: string | undefined = src;
-      if (!id.match(svgRegex)) {
-        return outcome;
-      }
-
-      const descriptor = require(id);
-      return `
-          import { svg } from 'lit';
-          import spread from '@carbon/web-components/es/globals/directives/spread.js';
-          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon.default(
-            descriptor
-          )};
-          export default svgResultCarbonIcon;
-      `;
-    },
-  };
-}
diff --git a/packages/ibm-products-web-components/vite.config.ts b/packages/ibm-products-web-components/vite.config.ts
index ba3b1ff6de..dbf7d912d0 100644
--- a/packages/ibm-products-web-components/vite.config.ts
+++ b/packages/ibm-products-web-components/vite.config.ts
@@ -8,14 +8,8 @@
 import { defineConfig, configDefaults } from 'vitest/config';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    // @ts-ignore
-    litStyleLoader(),
-    // @ts-ignore
-    litTemplateLoader(),
-  ],
+  plugins: [litStyleLoader(), litTemplateLoader()],
   test: {
     environment: 'happy-dom',
     include: ['./src/**/*.{test,spec}.{js,ts}'],
diff --git a/packages/ibm-products/CHANGELOG.md b/packages/ibm-products/CHANGELOG.md
index 1927252bdc..21dcff0e91 100644
--- a/packages/ibm-products/CHANGELOG.md
+++ b/packages/ibm-products/CHANGELOG.md
@@ -3,6 +3,111 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.58.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.58.0-rc.0) (2025-01-13)
+
+
+### Bug Fixes
+
+* **APIKeyModal:** implement focus return to generate button ([#6440](https://github.com/carbon-design-system/ibm-products/issues/6440)) ([535e871](https://github.com/carbon-design-system/ibm-products/commit/535e87142413695c530952f7b314201c8a35becc))
+* **APIKeyModal:** implement useFocus hook ([#6290](https://github.com/carbon-design-system/ibm-products/issues/6290)) ([4a92770](https://github.com/carbon-design-system/ibm-products/commit/4a92770d9179f6b59bfe18e53c998fdb51bd794a))
+* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d))
+* **Condition builder:** correct  and add more storybook data ([#6545](https://github.com/carbon-design-system/ibm-products/issues/6545)) ([8301cc1](https://github.com/carbon-design-system/ibm-products/commit/8301cc11def0e87cc9a1d8112066e06a00947a1a))
+* **Condition builder:** initial state getting reset on re-rendering ([#6555](https://github.com/carbon-design-system/ibm-products/issues/6555)) ([ea0989a](https://github.com/carbon-design-system/ibm-products/commit/ea0989ae23b6a23450491c4994bf4e46687dbeb2))
+* **conditionBuilder:** issue fix and data correction ([#6421](https://github.com/carbon-design-system/ibm-products/issues/6421)) ([1f5b63e](https://github.com/carbon-design-system/ibm-products/commit/1f5b63ec428ddd2a2b2ee7c4153c83c2fff6a61c))
+* **CreateTearsheet:** Dynamically disable/hide the experimentalSecondarySubmit button in CreateTearsheet ([#6412](https://github.com/carbon-design-system/ibm-products/issues/6412)) ([2eab4db](https://github.com/carbon-design-system/ibm-products/commit/2eab4db31164aed9f84c003466fce0bc74467ce3))
+* datagrid select all behavior in virtual scroll ([#6546](https://github.com/carbon-design-system/ibm-products/issues/6546)) ([b80d7f0](https://github.com/carbon-design-system/ibm-products/commit/b80d7f03a79a1802279e6142432a52fdb36a966a))
+* **Datagrid:** onRowClick results in toggleRow.toggleRowSelected is not a function error in console ([#6633](https://github.com/carbon-design-system/ibm-products/issues/6633)) ([82ce15c](https://github.com/carbon-design-system/ibm-products/commit/82ce15c9b96b5d80f6f566084f177e47a56054f7))
+* **Emptystate:** accessibility violation ([#6605](https://github.com/carbon-design-system/ibm-products/issues/6605)) ([cc8f1aa](https://github.com/carbon-design-system/ibm-products/commit/cc8f1aa66a80346104f28b173a4228a012fe0643))
+* **EmptyState:** empty states throws hydration errors in next js due to dynamic id ([#6508](https://github.com/carbon-design-system/ibm-products/issues/6508)) ([d5767e8](https://github.com/carbon-design-system/ibm-products/commit/d5767e8e9e5bc078d7324fbda71268a4d42d0bee))
+* **FullPageError:** accessibility violations ([#6503](https://github.com/carbon-design-system/ibm-products/issues/6503)) ([3f45528](https://github.com/carbon-design-system/ibm-products/commit/3f45528cd037c0232c2699c18d8bf63a5da8891b))
+* onclose callback triggered twice ([#6582](https://github.com/carbon-design-system/ibm-products/issues/6582)) ([8361907](https://github.com/carbon-design-system/ibm-products/commit/83619075773be394ffb9b46fe06dde16defba498))
+* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed))
+* remove tooltip from tagoverflow ([#6463](https://github.com/carbon-design-system/ibm-products/issues/6463)) ([c6f0ac0](https://github.com/carbon-design-system/ibm-products/commit/c6f0ac0f444165b55e37873c80462401fd34f14f))
+* reverts framer-motion to v6 ([#6679](https://github.com/carbon-design-system/ibm-products/issues/6679)) ([13fbc56](https://github.com/carbon-design-system/ibm-products/commit/13fbc567bcb4bd6a688da81b13a7c704628cef9b))
+* **side panel in react:** slideIn not working as expected ([#6501](https://github.com/carbon-design-system/ibm-products/issues/6501)) ([9d07dab](https://github.com/carbon-design-system/ibm-products/commit/9d07dab82cefd4046f65f8cac25d1d829f6d7c1a))
+* **SidePanel:** resolve storybook SlideOver animation flickering in doc page ([#6554](https://github.com/carbon-design-system/ibm-products/issues/6554)) ([03c31fc](https://github.com/carbon-design-system/ibm-products/commit/03c31fc3625afadc16d6eb2ca7d91c898bf18de6))
+* **tearsheet:** address portalTarget type ([#6400](https://github.com/carbon-design-system/ibm-products/issues/6400)) ([a11d036](https://github.com/carbon-design-system/ibm-products/commit/a11d0364a5beaa3d018db559656c3d7806e1b484))
+* **tearsheet:** resolve focusing elements multiple times while rendering ([#6513](https://github.com/carbon-design-system/ibm-products/issues/6513)) ([1c918d1](https://github.com/carbon-design-system/ibm-products/commit/1c918d1605f2a370988d7ade503c1e57e0d43df1))
+* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56))
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+* **useravatar:** accessibility issue and add avt complex state ([#6399](https://github.com/carbon-design-system/ibm-products/issues/6399)) ([4a70821](https://github.com/carbon-design-system/ibm-products/commit/4a70821b85688730a9d4484340da2517ee079db1))
+
+
+### Features
+
+* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc))
+* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579))
+* **coachmark:** Add default opening for not-stacked coachmarks ([#6516](https://github.com/carbon-design-system/ibm-products/issues/6516)) ([73ee693](https://github.com/carbon-design-system/ibm-products/commit/73ee693dda68bbbc0ccc6ed802b0efe8f528950e))
+* **CoachmarkOverlayElements:** Add next/back callbacks and currentStep properties ([#6548](https://github.com/carbon-design-system/ibm-products/issues/6548)) ([36bd4f9](https://github.com/carbon-design-system/ibm-products/commit/36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212))
+* **ConditionBuilder:** customize primary conditions using custom statement configuration ([#6663](https://github.com/carbon-design-system/ibm-products/issues/6663)) ([8eeab4c](https://github.com/carbon-design-system/ibm-products/commit/8eeab4c770f3a09585f187e8282f8c5d371d86f7))
+* Decouple lottie-web dependency from our repo ([#6477](https://github.com/carbon-design-system/ibm-products/issues/6477)) ([6b0a75b](https://github.com/carbon-design-system/ibm-products/commit/6b0a75ba4d15d7b2e640b4bb6992635ec3ab770c))
+* **productive card:** floating ui for overflow menu ([#6395](https://github.com/carbon-design-system/ibm-products/issues/6395)) ([42a1362](https://github.com/carbon-design-system/ibm-products/commit/42a1362ad2ff4998f8286ed0698a82c4ec8ea552))
+* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8))
+
+
+
+
+
+## [2.57.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.57.1-rc.0...@carbon/ibm-products@2.57.1) (2025-01-10)
+
+**Note:** Version bump only for package @carbon/ibm-products
+
+
+
+
+
+## [2.57.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.57.1-rc.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* **APIKeyModal:** implement focus return to generate button ([#6440](https://github.com/carbon-design-system/ibm-products/issues/6440)) ([535e871](https://github.com/carbon-design-system/ibm-products/commit/535e87142413695c530952f7b314201c8a35becc))
+* **APIKeyModal:** implement useFocus hook ([#6290](https://github.com/carbon-design-system/ibm-products/issues/6290)) ([4a92770](https://github.com/carbon-design-system/ibm-products/commit/4a92770d9179f6b59bfe18e53c998fdb51bd794a))
+* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d))
+* **Condition builder:** correct  and add more storybook data ([#6545](https://github.com/carbon-design-system/ibm-products/issues/6545)) ([8301cc1](https://github.com/carbon-design-system/ibm-products/commit/8301cc11def0e87cc9a1d8112066e06a00947a1a))
+* **Condition builder:** initial state getting reset on re-rendering ([#6555](https://github.com/carbon-design-system/ibm-products/issues/6555)) ([ea0989a](https://github.com/carbon-design-system/ibm-products/commit/ea0989ae23b6a23450491c4994bf4e46687dbeb2))
+* **conditionBuilder:** issue fix and data correction ([#6421](https://github.com/carbon-design-system/ibm-products/issues/6421)) ([1f5b63e](https://github.com/carbon-design-system/ibm-products/commit/1f5b63ec428ddd2a2b2ee7c4153c83c2fff6a61c))
+* **CreateTearsheet:** Dynamically disable/hide the experimentalSecondarySubmit button in CreateTearsheet ([#6412](https://github.com/carbon-design-system/ibm-products/issues/6412)) ([2eab4db](https://github.com/carbon-design-system/ibm-products/commit/2eab4db31164aed9f84c003466fce0bc74467ce3))
+* datagrid select all behavior in virtual scroll ([#6546](https://github.com/carbon-design-system/ibm-products/issues/6546)) ([b80d7f0](https://github.com/carbon-design-system/ibm-products/commit/b80d7f03a79a1802279e6142432a52fdb36a966a))
+* **Emptystate:** accessibility violation ([#6605](https://github.com/carbon-design-system/ibm-products/issues/6605)) ([cc8f1aa](https://github.com/carbon-design-system/ibm-products/commit/cc8f1aa66a80346104f28b173a4228a012fe0643))
+* **EmptyState:** empty states throws hydration errors in next js due to dynamic id ([#6508](https://github.com/carbon-design-system/ibm-products/issues/6508)) ([d5767e8](https://github.com/carbon-design-system/ibm-products/commit/d5767e8e9e5bc078d7324fbda71268a4d42d0bee))
+* **FullPageError:** accessibility violations ([#6503](https://github.com/carbon-design-system/ibm-products/issues/6503)) ([3f45528](https://github.com/carbon-design-system/ibm-products/commit/3f45528cd037c0232c2699c18d8bf63a5da8891b))
+* onclose callback triggered twice ([#6582](https://github.com/carbon-design-system/ibm-products/issues/6582)) ([8361907](https://github.com/carbon-design-system/ibm-products/commit/83619075773be394ffb9b46fe06dde16defba498))
+* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed))
+* remove tooltip from tagoverflow ([#6463](https://github.com/carbon-design-system/ibm-products/issues/6463)) ([c6f0ac0](https://github.com/carbon-design-system/ibm-products/commit/c6f0ac0f444165b55e37873c80462401fd34f14f))
+* reverts framer-motion to v6 ([#6679](https://github.com/carbon-design-system/ibm-products/issues/6679)) ([13fbc56](https://github.com/carbon-design-system/ibm-products/commit/13fbc567bcb4bd6a688da81b13a7c704628cef9b))
+* **side panel in react:** slideIn not working as expected ([#6501](https://github.com/carbon-design-system/ibm-products/issues/6501)) ([9d07dab](https://github.com/carbon-design-system/ibm-products/commit/9d07dab82cefd4046f65f8cac25d1d829f6d7c1a))
+* **SidePanel:** resolve storybook SlideOver animation flickering in doc page ([#6554](https://github.com/carbon-design-system/ibm-products/issues/6554)) ([03c31fc](https://github.com/carbon-design-system/ibm-products/commit/03c31fc3625afadc16d6eb2ca7d91c898bf18de6))
+* **tearsheet:** address portalTarget type ([#6400](https://github.com/carbon-design-system/ibm-products/issues/6400)) ([a11d036](https://github.com/carbon-design-system/ibm-products/commit/a11d0364a5beaa3d018db559656c3d7806e1b484))
+* **tearsheet:** resolve focusing elements multiple times while rendering ([#6513](https://github.com/carbon-design-system/ibm-products/issues/6513)) ([1c918d1](https://github.com/carbon-design-system/ibm-products/commit/1c918d1605f2a370988d7ade503c1e57e0d43df1))
+* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56))
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+* **useravatar:** accessibility issue and add avt complex state ([#6399](https://github.com/carbon-design-system/ibm-products/issues/6399)) ([4a70821](https://github.com/carbon-design-system/ibm-products/commit/4a70821b85688730a9d4484340da2517ee079db1))
+
+
+### Features
+
+* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc))
+* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579))
+* **coachmark:** Add default opening for not-stacked coachmarks ([#6516](https://github.com/carbon-design-system/ibm-products/issues/6516)) ([73ee693](https://github.com/carbon-design-system/ibm-products/commit/73ee693dda68bbbc0ccc6ed802b0efe8f528950e))
+* **CoachmarkOverlayElements:** Add next/back callbacks and currentStep properties ([#6548](https://github.com/carbon-design-system/ibm-products/issues/6548)) ([36bd4f9](https://github.com/carbon-design-system/ibm-products/commit/36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212))
+* **ConditionBuilder:** customize primary conditions using custom statement configuration ([#6663](https://github.com/carbon-design-system/ibm-products/issues/6663)) ([8eeab4c](https://github.com/carbon-design-system/ibm-products/commit/8eeab4c770f3a09585f187e8282f8c5d371d86f7))
+* Decouple lottie-web dependency from our repo ([#6477](https://github.com/carbon-design-system/ibm-products/issues/6477)) ([6b0a75b](https://github.com/carbon-design-system/ibm-products/commit/6b0a75ba4d15d7b2e640b4bb6992635ec3ab770c))
+* **productive card:** floating ui for overflow menu ([#6395](https://github.com/carbon-design-system/ibm-products/issues/6395)) ([42a1362](https://github.com/carbon-design-system/ibm-products/commit/42a1362ad2ff4998f8286ed0698a82c4ec8ea552))
+* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8))
+
+
+
+
+
+# [2.57.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.57.0-rc.0...@carbon/ibm-products@2.57.0) (2025-01-08)
+
+**Note:** Version bump only for package @carbon/ibm-products
+
+
+
+
+
 # [2.57.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.57.0-rc.0) (2024-12-24)
 
 
diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json
index 996d27298b..b95d29e462 100644
--- a/packages/ibm-products/package.json
+++ b/packages/ibm-products/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.57.0-rc.0",
+  "version": "2.58.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -72,7 +72,7 @@
     "@rollup/plugin-typescript": "^12.1.1",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.15.0-rc.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.16.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "4.1.2",
     "classnames": "^2.5.1",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.16.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.17.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^17.1.11",
@@ -96,14 +96,14 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.53.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.54.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.5.0",
-    "framer-motion": "^11.11.17",
+    "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
diff --git a/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js b/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js
index d8aa1a717d..7aed7eee87 100644
--- a/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js
+++ b/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js
@@ -9,7 +9,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { pkg } from '../../settings';
+import { pkg, carbon } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { BigNumbers } from '.';
 import { BigNumbersSize } from './constants';
@@ -138,4 +138,17 @@ describe(componentName, () => {
       componentName
     );
   });
+
+  it('should render a tooltip ', async () => {
+    renderBigNumbers({
+      tooltipDescription: 'Tooltip description',
+      trending: true,
+      'data-testid': dataTestId,
+    });
+    const element = screen.getByTestId(dataTestId);
+    const tooltipElement = element
+      .querySelector(`.${blockClass}__label`)
+      .getElementsByClassName(`span.${carbon.prefix}--tooltip`);
+    expect(tooltipElement).toBeTruthy();
+  });
 });
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
index 49f572490b..daddf1e47a 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { TextAreaProps, TextInputProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/react/icons';
+import { CarbonIconType } from '@carbon/icons-react';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import {
   Dispatch,
diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
index 2383da3fff..1d6423c1c6 100644
--- a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
+++ b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
@@ -789,7 +789,6 @@ export const DataSpreadsheetBody = forwardRef(
       [
         prepareRow,
         renderRowHeader,
-        renderRowHeaderDirection,
         rows,
         hasCustomRowHeader,
         activeCellCoordinates?.row,
@@ -797,8 +796,9 @@ export const DataSpreadsheetBody = forwardRef(
         handleRowHeaderClickEvent,
         handleBodyCellClickEvent,
         handleBodyCellHoverEvent,
-        defaultColumn,
         columns,
+        defaultColumn,
+        renderRowHeaderDirection,
       ]
     );
 
diff --git a/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts b/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts
index 152bde3663..4a1b3c541f 100644
--- a/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts
+++ b/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts
@@ -36,7 +36,7 @@ const useOnRowClick = (hooks: Hooks) => {
           if (!withSelectRows) {
             instance.selectedFlatRows &&
               instance.selectedFlatRows.map((toggleRow) =>
-                toggleRow.toggleRowSelected(false)
+                toggleRow.toggleRowSelected?.(false)
               );
             toggleRowSelected(id, true);
           }
diff --git a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx
index d39f2a9288..decd22fffe 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 mode="wait">
+        <AnimatePresence exitBeforeEnter>
           {!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 fcf585087d..db0de19a27 100644
--- a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx
+++ b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx
@@ -25,6 +25,7 @@ import React, {
   isValidElement,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -288,6 +289,14 @@ export let InterstitialScreen = React.forwardRef<
       return () => window.removeEventListener('keydown', close);
     }, [handleClose]);
 
+    const stepSize = useMemo(
+      () =>
+        children && Children.count(children) > 1
+          ? parseFloat((1 / (Children.count(children) - 1)).toFixed(2))
+          : 0,
+      [children]
+    );
+
     if (!isOpen) {
       return null;
     }
@@ -394,6 +403,11 @@ export let InterstitialScreen = React.forwardRef<
       );
     };
 
+    const scrollToCurrentStep = (scrollPercent) => {
+      const currentStep = scrollPercent / stepSize;
+      setProgStep(Math.ceil(currentStep));
+    };
+
     const renderBody = () => {
       {
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
@@ -419,9 +433,7 @@ export let InterstitialScreen = React.forwardRef<
                         <Carousel
                           disableArrowScroll
                           ref={scrollRef}
-                          onScroll={(scrollPercent) => {
-                            scrollPercent === 0 && setProgStep(0);
-                          }}
+                          onScroll={scrollToCurrentStep}
                         >
                           {children}
                         </Carousel>
@@ -461,9 +473,7 @@ export let InterstitialScreen = React.forwardRef<
                   <Carousel
                     disableArrowScroll
                     ref={scrollRef}
-                    onScroll={(scrollPercent) => {
-                      scrollPercent === 0 && setProgStep(0);
-                    }}
+                    onScroll={scrollToCurrentStep}
                   >
                     {children}
                   </Carousel>
diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
index 8f53e32c28..d6083e6ee4 100644
--- a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
+++ b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -33,7 +33,11 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
 import { timeAgo } from './utils';
-import { useClickOutside, usePreviousValue } from '../../global/js/hooks';
+import {
+  useClickOutside,
+  useIsomorphicEffect,
+  usePreviousValue,
+} from '../../global/js/hooks';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion';
 import wrapFocus from '../../global/js/utils/wrapFocus';
 
@@ -646,6 +650,18 @@ export let NotificationsPanel = React.forwardRef(
       },
     ]);
 
+    useIsomorphicEffect(() => {
+      // setTimeout ensures that this gets run
+      const timeout = setTimeout(() => {
+        if (notificationPanelRef.current && !reducedMotion) {
+          notificationPanelRef.current.style.animation = open
+            ? 'fade-in 250ms'
+            : 'fade-out forwards 250ms';
+        }
+      }, 0);
+      return () => clearTimeout(timeout);
+    }, [open, reducedMotion]);
+
     return shouldRender ? (
       <>
         <button
@@ -668,11 +684,6 @@ export let NotificationsPanel = React.forwardRef(
           }
           id={blockClass}
           className={cx(blockClass, className, `${blockClass}__container`)}
-          style={{
-            animation: !reducedMotion
-              ? `${open ? 'fade-in 250ms' : 'fade-out forwards 250ms'}`
-              : undefined,
-          }}
           onAnimationEnd={onAnimationEnd}
           ref={
             (ref as MutableRefObject<HTMLDivElement | null>) ||
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.test.js b/packages/ibm-products/src/components/PageHeader/PageHeader.test.js
index 7ee965e467..d1d43aaa58 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeader.test.js
+++ b/packages/ibm-products/src/components/PageHeader/PageHeader.test.js
@@ -1,3 +1,5 @@
+/* eslint react/forbid-component-props: 0 */
+
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -337,10 +339,11 @@ describe('PageHeader', () => {
     ).toHaveLength(1);
 
     // When withoutBackground is false this should result in the value 1 for opacity
-    const regStyle = new RegExp(
-      `--${prefix}--page-header--background-opacity: 1`
-    );
-    expect(header.getAttribute('style')).toMatch(regStyle);
+    const backgroundOpacity = window
+      .getComputedStyle(header)
+      .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+
+    expect(backgroundOpacity).toBe('1');
   });
 
   const dataTestId = 'data-testid';
@@ -711,10 +714,10 @@ describe('PageHeader', () => {
     const header = screen.getByTestId(dataTestId);
 
     // When withoutBackground is true this should result in the value 0 for opacity
-    const regStyle = new RegExp(
-      `--${prefix}--page-header--background-opacity: 0`
-    );
-    expect(header.getAttribute('style')).toMatch(regStyle);
+    const backgroundOpacity = window
+      .getComputedStyle(header)
+      .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+    expect(backgroundOpacity).toBe('0');
   });
 
   it('Works, for now, with deprecated props', async () =>
@@ -731,10 +734,10 @@ describe('PageHeader', () => {
       const header = screen.getByTestId(dataTestId);
 
       // When hasBackgroundAlways is false this should result in the value 0 for opacity
-      const regStyle = new RegExp(
-        `--${prefix}--page-header--background-opacity: 0`
-      );
-      expect(header.getAttribute('style')).toMatch(regStyle);
+      const backgroundOpacity = window
+        .getComputedStyle(header)
+        .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+      expect(backgroundOpacity).toBe('0');
     }));
 
   it('PageHeader grid settings narrow and fullWidth', async () => {
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
index 8d339ec5e2..db5fac8d40 100644
--- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
+++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
@@ -39,7 +39,11 @@ import {
   deprecateProp,
   prepareProps,
 } from '../../global/js/utils/props-helper';
-import { useNearestScroll, useWindowResize } from '../../global/js/hooks';
+import {
+  useIsomorphicEffect,
+  useNearestScroll,
+  useWindowResize,
+} from '../../global/js/hooks';
 
 import { ActionBar } from '../ActionBar/';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
@@ -421,6 +425,10 @@ interface Metrics {
   navigationRowHeight?: number;
 }
 
+interface HTMLElementStyled extends HTMLElement {
+  style: CSSStyleDeclaration;
+}
+
 export let PageHeader = React.forwardRef(
   (
     {
@@ -476,8 +484,9 @@ export let PageHeader = React.forwardRef(
     });
 
     // refs
-    const localHeaderRef = useRef(null);
-    const headerRef = ref || localHeaderRef;
+    const localHeaderRef = useRef<HTMLDivElement | null>(null);
+    const headerRef = (ref ||
+      localHeaderRef) as MutableRefObject<HTMLElementStyled>;
     const sizingContainerRef: MutableRefObject<HTMLDivElement | null> =
       useRef(null);
     const offsetTopMeasuringRef = useRef(null);
@@ -903,6 +912,17 @@ export let PageHeader = React.forwardRef(
 
     const displayedBreadcrumbs = getBreadcrumbs();
 
+    useIsomorphicEffect(() => {
+      Object.keys(pageHeaderStyles).forEach((key) => {
+        // check if style is a css var
+        if (key.startsWith('--')) {
+          headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
+        } else {
+          headerRef.current.style[key] = pageHeaderStyles[key];
+        }
+      });
+    }, [headerRef, pageHeaderStyles]);
+
     const subtitleRef = useRef<HTMLSpanElement>(null);
     const isOverflowing = checkHeightOverflow(subtitleRef.current);
     const subtitleContent = (
@@ -928,7 +948,6 @@ export let PageHeader = React.forwardRef(
               [`${blockClass}--has-navigation-tags-only`]: !navigation && tags,
             },
           ])}
-          style={pageHeaderStyles}
           ref={headerRef}
           {...getDevtoolsProps(componentName)}
         >
diff --git a/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js b/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js
index 7d49554600..32cbad3432 100644
--- a/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js
+++ b/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js
@@ -20,6 +20,7 @@ import {
   getScrollState,
   useIsOverflow,
 } from './constants';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 const blockClass = `${pkg.prefix}--scroll-gradient`;
 const componentName = 'ScrollGradient';
 
@@ -48,12 +49,47 @@ export let ScrollGradient = React.forwardRef(
     },
     ref
   ) => {
+    const scrollContainer = useRef(undefined);
+    const contentChildrenContainer = useRef(undefined);
+    const { xScrollable, yScrollable } = useIsOverflow(scrollContainer);
+
+    const gradientRight =
+      yScrollable && scrollContainer.current && contentChildrenContainer.current
+        ? scrollContainer.current.offsetWidth -
+          contentChildrenContainer.current.offsetWidth
+        : 0;
+    const gradientBottom =
+      xScrollable && scrollContainer.current && contentChildrenContainer.current
+        ? scrollContainer.current.offsetHeight -
+          contentChildrenContainer.current.offsetHeight
+        : 0;
+
     const [verticalPosition, setVerticalPosition] = useState(ScrollStates.NONE);
     const [horizontalPosition, setHorizontalPosition] = useState(
       ScrollStates.NONE
     );
-    const scrollContainer = useRef(undefined);
-    const contentChildrenContainer = useRef(undefined);
+
+    const startVerticalRef = useRef(null);
+    const startHorizontalRef = useRef(null);
+    const endVerticalRef = useRef(null);
+    const endHorizontalRef = useRef(null);
+
+    useIsomorphicEffect(() => {
+      // start vertical styles
+      startVerticalRef.current.style.right = gradientRight;
+      startVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, transparent, ${color} 90%)`;
+      // start horizontal styles
+      startHorizontalRef.current.backgroundImage = `linear-gradient(-90deg, transparent, ${color} 90%)`;
+      startHorizontalRef.current.bottom = gradientBottom;
+      // end vertical styles
+      endVerticalRef.current.style.right = gradientRight;
+      endVerticalRef.current.style.bottom = gradientBottom;
+      endVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, ${color} 10%, transparent)`;
+      // end horizontal styles
+      endHorizontalRef.current.style.right = gradientRight;
+      endHorizontalRef.current.style.bottom = gradientBottom;
+      endHorizontalRef.current.style.backgroundImage = `linear-gradient(-90deg, ${color} 10%, transparent)`;
+    }, [color, gradientRight, gradientBottom]);
 
     const updateScrollState = throttle(() => {
       const updatedVerticalVal = getScrollState(
@@ -85,19 +121,6 @@ export let ScrollGradient = React.forwardRef(
       scrollHandler();
     }, [scrollHandler]);
 
-    const { xScrollable, yScrollable } = useIsOverflow(scrollContainer);
-
-    const gradientRight =
-      yScrollable && scrollContainer.current && contentChildrenContainer.current
-        ? scrollContainer.current.offsetWidth -
-          contentChildrenContainer.current.offsetWidth
-        : 0;
-    const gradientBottom =
-      xScrollable && scrollContainer.current && contentChildrenContainer.current
-        ? scrollContainer.current.offsetHeight -
-          contentChildrenContainer.current.offsetHeight
-        : 0;
-
     return (
       <div
         {...rest}
@@ -134,42 +157,28 @@ export let ScrollGradient = React.forwardRef(
         {!hideStartGradient && (
           <>
             <div
+              ref={startVerticalRef}
               className={`${blockClass}__start-vertical`}
-              style={{
-                right: gradientRight,
-                backgroundImage: `linear-gradient(0deg, transparent, ${color} 90%)`,
-              }}
               role="presentation"
               aria-hidden
             />
             <div
+              ref={startHorizontalRef}
               className={`${blockClass}__start-horizontal`}
-              style={{
-                backgroundImage: `linear-gradient(-90deg, transparent, ${color} 90%)`,
-                bottom: gradientBottom,
-              }}
               role="presentation"
               aria-hidden
             />
           </>
         )}
         <div
+          ref={endVerticalRef}
           className={`${blockClass}__end-vertical`}
-          style={{
-            right: gradientRight,
-            bottom: gradientBottom,
-            backgroundImage: `linear-gradient(0deg, ${color} 10%, transparent)`,
-          }}
           role="presentation"
           aria-hidden
         />
         <div
+          ref={endHorizontalRef}
           className={`${blockClass}__end-horizontal`}
-          style={{
-            right: gradientRight,
-            bottom: gradientBottom,
-            backgroundImage: `linear-gradient(-90deg, ${color} 10%, transparent)`,
-          }}
           role="presentation"
           aria-hidden
         />
diff --git a/packages/ibm-products/src/components/StringFormatter/StringFormatter.js b/packages/ibm-products/src/components/StringFormatter/StringFormatter.js
index a656b3f05c..141f8605cd 100644
--- a/packages/ibm-products/src/components/StringFormatter/StringFormatter.js
+++ b/packages/ibm-products/src/components/StringFormatter/StringFormatter.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -20,6 +20,7 @@ import {
   propMappingFunction,
 } from './utils/enums';
 import { allPropTypes } from '../../global/js/utils/props-helper';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 
 const blockClass = `${pkg.prefix}--string-formatter`;
 const componentName = 'StringFormatter';
@@ -48,15 +49,19 @@ export let StringFormatter = React.forwardRef(
     },
     ref
   ) => {
+    const contentRef = useRef(null);
+
+    useIsomorphicEffect(() => {
+      contentRef.current.style.maxWidth = width;
+      contentRef.current.style.WebkitLineClamp = lines;
+    }, [lines, width]);
+
     const stringFormatterContent = (
       <span
+        ref={contentRef}
         className={cx(`${blockClass}--content`, {
           [`${blockClass}--truncate`]: truncate,
         })}
-        style={{
-          maxWidth: width,
-          WebkitLineClamp: lines,
-        }}
       >
         {value}
       </span>
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx
index e7fd34845e..e10ac46038 100644
--- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx
+++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx
@@ -75,6 +75,7 @@ export const TagsWithOverflowCount = Template.bind({});
 TagsWithOverflowCount.args = {
   containerWidth: 250,
   items: fiveTags,
+  onOverflowTagChange: (items) => console.log(items),
 };
 
 export const TagsWithTruncation = Template.bind({});
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js b/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js
index 263e41f434..85727438fa 100644
--- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js
+++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -104,12 +104,9 @@ describe(componentName, () => {
 
   it('Obeys max visible', async () => {
     render(<TagOverflow {...tagOverflowProps} maxVisible={3} />);
-
-    expect(
-      screen.getAllByText(/Tag [0-9]+/, {
-        selector: `.${blockClass}__item--tag span`,
-      }).length
-    ).toEqual(3);
+    await waitFor(() => {
+      expect(screen.getByText('+2'));
+    });
   });
 
   // The below test case is failing due to ResizeObserver mock
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
index ee592090a9..582b0833a2 100644
--- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
+++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
@@ -7,12 +7,10 @@
 
 import React, {
   ReactNode,
-  Ref,
   RefObject,
   createElement,
   forwardRef,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -26,7 +24,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
+import { useOverflowItems } from '../../global/js/hooks/useOverflowItems';
 export interface TagOverflowItem {
   className?: string;
   /**
@@ -61,10 +59,19 @@ export interface TagOverflowProps {
   allTagsModalTitle?: string;
   autoAlign?: boolean;
   className?: string;
-  containingElementRef?: RefObject<HTMLElement>;
+  /**
+   * @deprecated The `containingElementRef` prop is no longer going to be used in favor of the forwarded ref.
+   */
+  containingElementRef?: RefObject<HTMLDivElement>;
   items: TagOverflowItem[];
   maxVisible?: number;
+  /**
+   * @deprecated The `measurementOffset` prop is no longer going to be used. This value will now be calculated automatically.
+   */
   measurementOffset?: number;
+  /**
+   * @deprecated The `multiline` prop is no longer going to be used. This component should only be used when you need to hide overflowing items.
+   */
   multiline?: boolean;
   overflowAlign?:
     | 'top'
@@ -90,8 +97,8 @@ const blockClass = `${pkg.prefix}--tag-overflow`;
 const componentName = 'TagOverflow';
 const allTagsModalSearchThreshold = 10;
 
-export let TagOverflow = forwardRef(
-  (props: TagOverflowProps, ref: Ref<HTMLDivElement>) => {
+export let TagOverflow = forwardRef<HTMLDivElement, TagOverflowProps>(
+  (props, ref) => {
     const {
       align = 'start',
       allTagsModalAriaLabel,
@@ -101,11 +108,8 @@ export let TagOverflow = forwardRef(
       allTagsModalTitle,
       autoAlign,
       className,
-      containingElementRef,
       items,
       maxVisible,
-      measurementOffset = 0,
-      multiline,
       overflowAlign = 'bottom',
       overflowClassName,
       overflowType = 'default',
@@ -114,26 +118,22 @@ export let TagOverflow = forwardRef(
       tagComponent,
       ...rest
     } = props;
-
-    const localContainerRef = useRef<HTMLDivElement>(null);
-    const containerRef = ref || localContainerRef;
-    const itemRefs = useRef<Map<string, string> | null>(null);
-    const overflowRef = useRef<HTMLDivElement>(null);
-    // itemOffset is the value of margin applied on each items
-    // This value is required for calculating how many items will fit within the container
-    const itemOffset = 4;
-    const overflowIndicatorWidth = 40;
-
-    const [containerWidth, setContainerWidth] = useState<number>(0);
-    const [visibleItems, setVisibleItems] = useState<TagOverflowItem[]>([]);
-    const [overflowItems, setOverflowItems] = useState<TagOverflowItem[]>([]);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const offsetRef = useRef<HTMLDivElement>(null);
     const [showAllModalOpen, setShowAllModalOpen] = useState<boolean>(false);
     const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
-    const resizeElm =
-      containingElementRef && containingElementRef.current
-        ? containingElementRef
-        : containerRef;
+    const {
+      visibleItems,
+      hiddenItems: overflowItems,
+      itemRefHandler,
+    } = useOverflowItems(
+      items,
+      containerRef,
+      offsetRef,
+      maxVisible,
+      onOverflowTagChange
+    );
 
     const handleShowAllClick = () => {
       setShowAllModalOpen(true);
@@ -143,110 +143,17 @@ export let TagOverflow = forwardRef(
       setShowAllModalOpen(false);
     };
 
-    const handleResize = () => {
-      if (typeof resizeElm !== 'function' && resizeElm.current) {
-        setContainerWidth(resizeElm.current.offsetWidth);
-      }
-    };
-
-    useResizeObserver(resizeElm, handleResize);
-
-    const getMap = () => {
-      if (!itemRefs.current) {
-        itemRefs.current = new Map();
-      }
-      return itemRefs.current;
-    };
-
-    const itemRefHandler = (id, node) => {
-      const map = getMap();
-      if (id && node && map.get(id) !== node.offsetWidth) {
-        map.set(id, node.offsetWidth);
-      }
-    };
-
-    const getVisibleItems = useCallback(() => {
-      if (!itemRefs.current) {
-        return items;
-      }
-
-      if (multiline) {
-        const visibleItems = maxVisible ? items?.slice(0, maxVisible) : items;
-        return visibleItems;
-      }
-
-      const map = getMap();
-      const optionalContainingElement = containingElementRef?.current;
-      const measurementOffsetValue =
-        typeof measurementOffset === 'number' ? measurementOffset : 0;
-      const spaceAvailable = optionalContainingElement
-        ? optionalContainingElement.offsetWidth - measurementOffsetValue
-        : containerWidth;
-
-      const overflowContainerWidth =
-        overflowRef &&
-        overflowRef.current &&
-        overflowRef.current.offsetWidth > overflowIndicatorWidth
-          ? overflowRef.current.offsetWidth
-          : overflowIndicatorWidth;
-      const maxWidth = spaceAvailable - overflowContainerWidth;
-
-      let childrenWidth = 0;
-      let maxReached = false;
-
-      return items.reduce((prev: TagOverflowItem[], cur: TagOverflowItem) => {
-        if (!maxReached) {
-          const itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
-          const fits = itemWidth + childrenWidth < maxWidth;
-
-          if (fits) {
-            childrenWidth += itemWidth;
-            prev.push(cur);
-          } else {
-            maxReached = true;
-          }
-        }
-        return prev;
-      }, []);
-    }, [
-      containerWidth,
-      containingElementRef,
-      items,
-      maxVisible,
-      measurementOffset,
-      multiline,
-    ]);
-
     const getCustomComponent = (
       item: TagOverflowItem,
       tagComponent: string
     ) => {
-      const { className, id, ...other } = item;
+      const { className, ...other } = item;
       return createElement(tagComponent, {
         ...other,
-        key: id,
         className: cx(`${blockClass}__item`, className),
-        ref: (node) => itemRefHandler(id, node),
       });
     };
 
-    useEffect(() => {
-      let visibleItemsArr = getVisibleItems();
-
-      if (maxVisible && maxVisible < visibleItemsArr.length) {
-        visibleItemsArr = visibleItemsArr?.slice(0, maxVisible);
-      }
-
-      const hiddenItems = items?.slice(visibleItemsArr.length);
-      const overflowItemsArr = hiddenItems?.map(({ tagType, ...other }) => {
-        return { type: tagType, ...other };
-      });
-
-      setVisibleItems(visibleItemsArr);
-      setOverflowItems(overflowItemsArr);
-      onOverflowTagChange?.(overflowItemsArr);
-    }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
-
     const handleTagOnClose = useCallback(
       (onClose, index) => {
         onClose?.();
@@ -259,51 +166,52 @@ export let TagOverflow = forwardRef(
 
     return (
       <div
-        {
-          // Pass through any other property values as HTML attributes.
-          ...rest
-        }
-        className={cx(blockClass, className, `${blockClass}--align-${align}`, {
-          [`${blockClass}--multiline`]: multiline,
-        })}
-        ref={containerRef}
+        {...rest}
+        className={cx(blockClass, className)}
         {...getDevtoolsProps(componentName)}
+        ref={ref}
       >
-        {visibleItems?.length > 0 &&
-          visibleItems.map((item, index) => {
-            // Render custom components
-            if (tagComponent) {
-              return getCustomComponent(item, tagComponent);
-            } else {
-              const { id, label, tagType, onClose, filter, ...other } = item;
-              // If there is no template prop, then render items as Tags
-              return (
-                <div ref={(node) => itemRefHandler(id, node)} key={id}>
-                  {typeof onClose === 'function' || filter ? (
-                    <DismissibleTag
-                      {...other}
-                      className={`${blockClass}__item--tag`}
-                      type={tagType}
-                      onClose={() => handleTagOnClose(onClose, index)}
-                      text={label}
-                    />
-                  ) : (
-                    <Tag
-                      {...other}
-                      className={`${blockClass}__item--tag`}
-                      type={tagType}
-                    >
-                      {label}
-                    </Tag>
-                  )}
-                </div>
-              );
-            }
+        <div
+          className={cx(
+            `${blockClass}__visible-tags`,
+            `${blockClass}--align-${align}`
+          )}
+          ref={containerRef}
+        >
+          {visibleItems.map((item, index) => {
+            const { id, label, tagType, onClose, filter, ...other } = item;
+            return (
+              <div
+                className={`${blockClass}__tag-container`}
+                ref={(node) => {
+                  itemRefHandler(id, node);
+                }}
+                key={id}
+              >
+                {tagComponent ? (
+                  getCustomComponent(item, tagComponent)
+                ) : typeof onClose === 'function' || filter ? (
+                  <DismissibleTag
+                    {...other}
+                    className={`${blockClass}__item--tag`}
+                    type={tagType}
+                    onClose={() => handleTagOnClose(onClose, index)}
+                    text={label}
+                  />
+                ) : (
+                  <Tag
+                    {...other}
+                    className={`${blockClass}__item--tag`}
+                    type={tagType}
+                  >
+                    {label}
+                  </Tag>
+                )}
+              </div>
+            );
           })}
-
-        <span className={`${blockClass}__indicator`} ref={overflowRef}>
-          {overflowItems?.length > 0 && (
-            <>
+          {overflowItems.length > 0 && (
+            <div className={`${blockClass}__indicator`} ref={offsetRef}>
               <TagOverflowPopover
                 allTagsModalSearchThreshold={allTagsModalSearchThreshold}
                 className={overflowClassName}
@@ -313,7 +221,7 @@ export let TagOverflow = forwardRef(
                 overflowType={overflowType}
                 showAllTagsLabel={showAllTagsLabel}
                 key="tag-overflow-popover"
-                ref={overflowRef}
+                ref={offsetRef}
                 popoverOpen={popoverOpen}
                 setPopoverOpen={setPopoverOpen}
                 autoAlign={autoAlign}
@@ -329,9 +237,9 @@ export let TagOverflow = forwardRef(
                 searchPlaceholder={allTagsModalSearchPlaceholderText}
                 portalTarget={allTagsModalTarget}
               />
-            </>
+            </div>
           )}
-        </span>
+        </div>
       </div>
     );
   }
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
index 4f9feba2cf..710b842c74 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
@@ -11,7 +11,6 @@ import userEvent from '@testing-library/user-event';
 import {
   expectWarn,
   expectMultipleError,
-  required,
 } from '../../global/js/utils/test-helper';
 
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -131,7 +130,6 @@ const DummyComponent = ({ props, open }) => {
 // These are tests than apply to both Tearsheet and TearsheetNarrow
 // and also (with extra props and omitting button tests) to CreateTearsheetNarrow
 let tooManyButtonsTestedAlready = false;
-let closeIconDescriptionTestedAlready = false;
 const commonTests = (Ts, name, props, testActions) => {
   it(`renders a component ${name}`, async () => {
     render(<Ts {...{ ...props, closeIconDescription }} />);
@@ -229,24 +227,6 @@ const commonTests = (Ts, name, props, testActions) => {
     screen.getByRole('button', { name: closeIconDescription });
   });
 
-  if (testActions) {
-    it('requires closeIconDescription when there are no actions', async () =>
-      expectMultipleError(
-        // prop-types only reports the first occurrence of each distinct error,
-        // which creates an unfortunate dependency between test runs
-        closeIconDescriptionTestedAlready
-          ? [required('closeIconDescription', name)]
-          : [
-              required('closeIconDescription', name),
-              required('closeIconDescription', 'TearsheetShell'),
-            ],
-        () => {
-          render(<Ts {...props} />);
-          closeIconDescriptionTestedAlready = true;
-        }
-      ));
-  }
-
   it('renders description', async () => {
     render(<Ts {...{ ...props, closeIconDescription, description }} />);
     screen.getByText(descriptionFragment);
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
index 655a76b8b1..836d8cb26a 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
@@ -9,7 +9,7 @@
 import { Button, type ButtonProps } from '@carbon/react';
 // Import portions of React that are needed.
 import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react';
-import { TearsheetShell, tearsheetHasCloseIcon } from './TearsheetShell';
+import { TearsheetShell } from './TearsheetShell';
 
 import { ActionSet } from '../ActionSet';
 // Other standard imports.
@@ -22,23 +22,6 @@ import { portalType } from './TearsheetShell';
 const componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * The accessibility title for the close icon (if shown).
- *
- * **Note:** This prop is only required if a close icon is shown, i.e. if
- * there are a no navigation actions and/or hasCloseIcon is true.
- */
-export type CloseIconDescriptionTypes =
-  | {
-      hasCloseIcon?: false;
-      closeIconDescription?: string;
-    }
-  | {
-      hasCloseIcon: true;
-      closeIconDescription: string;
-    };
-
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
@@ -76,6 +59,12 @@ export interface TearsheetProps extends PropsWithChildren {
    */
   className?: string;
 
+  /**
+   * The accessibility title for the close icon (if shown).
+   *
+   */
+  closeIconDescription?: string;
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -194,7 +183,7 @@ export let Tearsheet = React.forwardRef(
       influencerPosition = 'left',
       influencerWidth = 'narrow',
       ...rest
-    }: TearsheetProps & CloseIconDescriptionTypes,
+    }: TearsheetProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => (
     <TearsheetShell
@@ -287,13 +276,8 @@ Tearsheet.propTypes = {
   /**
    * The accessibility title for the close icon (if shown).
    *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  /**@ts-ignore */
-  closeIconDescription: PropTypes.string.isRequired.if(
-    ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon)
-  ),
+  closeIconDescription: PropTypes.string,
 
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
@@ -308,7 +292,6 @@ Tearsheet.propTypes = {
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
-  /**@ts-ignore */
   hasCloseIcon: PropTypes.bool,
 
   /**
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
index 0d2e51d871..c05757e4b0 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
@@ -8,10 +8,8 @@
 // Carbon and package components we use.
 import { Button, ButtonProps } from '@carbon/react';
 import {
-  CloseIconDescriptionTypes,
   TearsheetShell,
   tearsheetShellWideProps as blocked,
-  tearsheetHasCloseIcon,
 } from './TearsheetShell';
 // Import portions of React that are needed.
 import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react';
@@ -24,7 +22,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { portalType } from './TearsheetShell';
 
-interface TearsheetNarrowBaseProps extends PropsWithChildren {
+export interface TearsheetNarrowProps extends PropsWithChildren {
   /**
    * The navigation actions to be shown as buttons in the action area at the
    * bottom of the tearsheet. Each action is specified as an object with
@@ -51,6 +49,12 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
    */
   className?: string;
 
+  /**
+   * The accessibility title for the close icon (if shown).
+   *
+   */
+  closeIconDescription?: string;
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -118,9 +122,6 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
   verticalPosition?: 'normal' | 'lower';
 }
 
-export type TearsheetNarrowProps = TearsheetNarrowBaseProps &
-  CloseIconDescriptionTypes;
-
 const componentName = 'TearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -236,14 +237,8 @@ TearsheetNarrow.propTypes = {
   /**
    * The accessibility title for the close icon (if shown).
    *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  /**@ts-ignore */
-  closeIconDescription: PropTypes.string.isRequired.if(
-    ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon)
-  ),
-
+  closeIconDescription: PropTypes.string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -255,7 +250,6 @@ TearsheetNarrow.propTypes = {
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
-  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
 
   /**
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
index 456671512d..a5626228ad 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -39,8 +39,8 @@ import {
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
+import { useIsomorphicEffect, usePreviousValue } from '../../global/js/hooks';
 import { claimFocus, useFocus } from '../../global/js/hooks/useFocus';
-import { usePreviousValue } from '../../global/js/hooks';
 import { TearsheetAction } from './Tearsheet';
 
 // The block part of our conventional BEM class names (bc__E--M).
@@ -59,6 +59,14 @@ interface TearsheetShellProps extends PropsWithChildren {
    */
   className?: string;
 
+  /**
+   * The accessibility title for the close icon (if shown).
+   *
+   * **Note:** This prop is only required if a close icon is shown, i.e. if
+   * there are a no navigation actions and/or hasCloseIcon is true.
+   */
+  closeIconDescription?: string;
+
   /**
    * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
    */
@@ -185,16 +193,6 @@ interface TearsheetShellProps extends PropsWithChildren {
   slug?: ReactNode;
 }
 
-export type CloseIconDescriptionTypes =
-  | {
-      hasCloseIcon?: false;
-      closeIconDescription?: string;
-    }
-  | {
-      hasCloseIcon: true;
-      closeIconDescription: string;
-    };
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 // Global data structure to communicate the state of tearsheet stacking
@@ -247,7 +245,7 @@ export const TearsheetShell = React.forwardRef(
       ariaLabel,
       children,
       className,
-      closeIconDescription,
+      closeIconDescription = 'Close',
       currentStep,
       description,
       hasCloseIcon,
@@ -270,7 +268,7 @@ export const TearsheetShell = React.forwardRef(
       launcherButtonRef,
       // Collect any other property values passed in.
       ...rest
-    }: TearsheetShellProps & CloseIconDescriptionTypes,
+    }: TearsheetShellProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const carbonPrefix = usePrefix();
@@ -384,6 +382,28 @@ export const TearsheetShell = React.forwardRef(
       };
     }, [open, size]);
 
+    const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
+
+    useIsomorphicEffect(() => {
+      const setScaleValues = () => {
+        if (!areAllSameSizeVariant()) {
+          return {
+            [`--${bc}--stacking-scale-factor-single`]: 1,
+            [`--${bc}--stacking-scale-factor-double`]: 1,
+          };
+        }
+        return {
+          [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
+          [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
+        };
+      };
+      if (modalRef.current) {
+        Object.entries(setScaleValues()).map(([key, value]) => {
+          modalRef.current.style.setProperty(key, String(value));
+        });
+      }
+    }, [modalRef, width]);
+
     if (position <= depth) {
       // Include a modal header if and only if one or more of these is given.
       // We can't use a Wrap for the ModalHeader because ComposedModal requires
@@ -401,18 +421,6 @@ export const TearsheetShell = React.forwardRef(
 
       const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
 
-      const setScaleValues = () => {
-        if (!areAllSameSizeVariant()) {
-          return {
-            [`--${bc}--stacking-scale-factor-single`]: 1,
-            [`--${bc}--stacking-scale-factor-double`]: 1,
-          };
-        }
-        return {
-          [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
-          [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
-        };
-      };
       return renderPortalUse(
         <FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
           <ComposedModal
@@ -435,7 +443,6 @@ export const TearsheetShell = React.forwardRef(
               [`${bc}--has-close`]: effectiveHasCloseIcon,
             })}
             decorator={decorator || deprecated_slug}
-            style={setScaleValues()}
             containerClassName={cx(`${bc}__container`, {
               [`${bc}__container--lower`]: verticalPosition === 'lower',
               [`${bc}__container--mixed-size-stacking`]:
@@ -644,9 +651,7 @@ TearsheetShell.propTypes = {
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
   /**@ts-ignore*/
-  closeIconDescription: PropTypes.string.isRequired.if(
-    ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon)
-  ),
+  closeIconDescription: PropTypes.string,
 
   /**
    * Optional prop that allows you to pass any component.
diff --git a/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx b/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx
index 07aec989e6..a0881ddf2e 100644
--- a/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx
+++ b/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx
@@ -22,6 +22,7 @@ import { Button } from '@carbon/react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--truncated-list`;
@@ -140,6 +141,12 @@ export let TruncatedList = React.forwardRef<HTMLDivElement, TruncatedListProps>(
       }
     }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
 
+    useIsomorphicEffect(() => {
+      if (listRef.current) {
+        listRef.current.style.height = `${listHeight}px`;
+      }
+    }, [listHeight]);
+
     return (
       <div
         {...rest}
@@ -156,11 +163,7 @@ export let TruncatedList = React.forwardRef<HTMLDivElement, TruncatedListProps>(
         ref={ref}
         {...getDevtoolsProps(componentName)}
       >
-        <List
-          className={`${blockClass}__list`}
-          ref={listRef}
-          style={{ height: listHeight }}
-        >
+        <List className={`${blockClass}__list`} ref={listRef}>
           {isCollapsed ? childrenArray.slice(0, minItems) : children}
         </List>
 
diff --git a/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx b/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx
index a0ff859eae..e4ca4df6cc 100644
--- a/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx
+++ b/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx
@@ -11,10 +11,12 @@ import { Close, Help } from '@carbon/react/icons';
 // Import portions of React that are needed.
 import React, {
   ForwardedRef,
+  MutableRefObject,
   PropsWithChildren,
   ReactNode,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -26,6 +28,7 @@ import { moderate02 } from '@carbon/motion';
 import { pkg } from '../../settings';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion';
 import { useWebTerminal } from './hooks';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const componentName = 'WebTerminal';
@@ -87,6 +90,10 @@ export interface WebTerminalProps extends PropsWithChildren {
   webTerminalAriaLabel?: string;
 }
 
+interface HTMLElementStyled extends HTMLDivElement {
+  style: CSSStyleDeclaration;
+}
+
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
@@ -108,6 +115,10 @@ export let WebTerminal = React.forwardRef(
     }: WebTerminalProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
+    const localRef = useRef<HTMLDivElement>();
+    const webTerminalRef = (ref ??
+      localRef) as MutableRefObject<HTMLElementStyled>;
+
     const { open, closeWebTerminal, openWebTerminal } = useWebTerminal();
 
     const [shouldRender, setRender] = useState(open);
@@ -117,6 +128,15 @@ export let WebTerminal = React.forwardRef(
       open ? 'web-terminal-entrance' : 'web-terminal-exit forwards'
     } ${moderate02}`;
 
+    useIsomorphicEffect(() => {
+      const timeout = setTimeout(() => {
+        if (webTerminalRef.current && !shouldReduceMotion) {
+          webTerminalRef.current.style.animation = webTerminalAnimationName;
+        }
+      }, 0);
+      return () => clearTimeout(timeout);
+    }, [shouldReduceMotion, webTerminalAnimationName, webTerminalRef]);
+
     const showDocumentationLinks = useMemo(
       () => documentationLinks.length > 0,
       [documentationLinks]
@@ -164,7 +184,7 @@ export let WebTerminal = React.forwardRef(
           ...rest,
           ...getDevtoolsProps(componentName),
         }}
-        ref={ref}
+        ref={webTerminalRef}
         className={cx([
           blockClass,
           className,
@@ -173,9 +193,6 @@ export let WebTerminal = React.forwardRef(
             [`${blockClass}--closed`]: !open,
           },
         ])}
-        style={{
-          animation: !shouldReduceMotion ? webTerminalAnimationName : '',
-        }}
         onAnimationEnd={onAnimationEnd}
       >
         <header
diff --git a/packages/ibm-products/src/custom-typings/index.d.ts b/packages/ibm-products/src/custom-typings/index.d.ts
index 0517f20f1b..8078d72e7f 100644
--- a/packages/ibm-products/src/custom-typings/index.d.ts
+++ b/packages/ibm-products/src/custom-typings/index.d.ts
@@ -212,7 +212,6 @@ declare module '@carbon/react' {
     usePrefix,
   } from '@carbon/react';
 }
-
 declare module '@carbon/colors';
 declare module '@carbon/motion';
 declare module '@carbon/feature-flags';
diff --git a/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts b/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts
new file mode 100644
index 0000000000..f18955a9e3
--- /dev/null
+++ b/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 { RefObject, useRef, useState } from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+type Item = {
+  id: string;
+};
+
+export const useOverflowItems = <T extends Item>(
+  items: T[] = [],
+  containerRef: RefObject<HTMLDivElement>,
+  offsetRef?: RefObject<HTMLDivElement>,
+  maxItems?: number,
+  onChange?: (hiddenItems: T[]) => void
+) => {
+  const itemsRef = useRef<Map<string, number> | null>(null);
+  const [maxWidth, setMaxWidth] = useState(0);
+  const visibleItemCount = useRef<number>(0);
+
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+
+  useResizeObserver(containerRef, handleResize);
+
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+
+  const itemRefHandler = (id: string, node: HTMLDivElement | null) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth =
+        node.offsetWidth +
+        parseInt(style.marginLeft) +
+        parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+
+    return () => {
+      map.delete(id);
+    };
+  };
+
+  const getVisibleItems = () => {
+    if (!containerRef) {
+      return items;
+    }
+
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, [] as T[]);
+    return visibleItems;
+  };
+
+  const visibleItems = getVisibleItems();
+  const hiddenItems = items.slice(visibleItems.length);
+  // only call the change handler when the number of visible items has changed
+  if (visibleItems.length !== visibleItemCount.current) {
+    visibleItemCount.current = visibleItems.length;
+    onChange?.(hiddenItems);
+  }
+
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems,
+  };
+};
diff --git a/packages/ibm-products/telemetry.yml b/packages/ibm-products/telemetry.yml
index be04f5afec..96cefb2114 100644
--- a/packages/ibm-products/telemetry.yml
+++ b/packages/ibm-products/telemetry.yml
@@ -134,11 +134,13 @@ collect:
         - hasActions
         - hasCloseIcon
         - hasCustomRowHeader
+        - hasError
         - hasFieldset
         - headerActions
         - headerGroups
         - HeaderRow
         - headers
+        - headingAs
         - headRef
         - hideConditionPreviewHandler
         - hideConditionSubGroupPreviewHandler
@@ -346,6 +348,7 @@ collect:
         - sortByLabel
         - startConditionLabel
         - state
+        - statementConfigCustom
         - status
         - style
         - submitButtonText
diff --git a/yarn.lock b/yarn.lock
index e952a9c971..29eb00548a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1681,7 +1681,7 @@ __metadata:
   resolution: "@carbon/ibm-cloud-cognitive-core@workspace:packages/core"
   dependencies:
     "@carbon/grid": "npm:^11.29.0"
-    "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0"
+    "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0"
     "@carbon/layout": "npm:^11.28.0"
     "@carbon/motion": "npm:^11.24.0"
     "@carbon/react": "npm:^1.72.0"
@@ -1722,7 +1722,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibm-products-styles@npm:^2.53.0-rc.0, @carbon/ibm-products-styles@workspace:packages/ibm-products-styles":
+"@carbon/ibm-products-styles@npm:^2.54.0-rc.0, @carbon/ibm-products-styles@workspace:packages/ibm-products-styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibm-products-styles@workspace:packages/ibm-products-styles"
   dependencies:
@@ -1732,7 +1732,7 @@ __metadata:
     cross-env: "npm:^7.0.3"
     glob: "npm:^10.3.10"
     jest: "npm:^29.7.0"
-    jest-config-ibm-cloud-cognitive: "npm:^1.16.0-rc.0"
+    jest-config-ibm-cloud-cognitive: "npm:^1.17.0-rc.0"
     jest-environment-jsdom: "npm:^29.7.0"
     npm-check-updates: "npm:^17.1.11"
     npm-run-all: "npm:^4.1.5"
@@ -1752,7 +1752,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/ibm-products-web-components@workspace:packages/ibm-products-web-components"
   dependencies:
-    "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0"
+    "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0"
+    "@carbon/icon-helpers": "npm:^10.54.0"
     "@carbon/icons": "npm:^11.53.0"
     "@carbon/motion": "npm:^11.24.0"
     "@carbon/styles": "npm:1.71.0"
@@ -1789,6 +1790,7 @@ __metadata:
     sass: "npm:^1.80.6"
     storybook: "npm:^8.4.5"
     storybook-addon-accessibility-checker: "npm:^3.1.61-rc.3"
+    tslib: "npm:^2.6.3"
     typescript: "npm:^5.5.3"
     vite: "npm:^6.0.3"
     vitest: "npm:^2.1.2"
@@ -1811,7 +1813,7 @@ __metadata:
     "@babel/preset-typescript": "npm:^7.21.5"
     "@babel/runtime": "npm:^7.23.9"
     "@carbon/feature-flags": "npm:^0.24.0"
-    "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0"
+    "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0"
     "@carbon/telemetry": "npm:^0.1.0"
     "@dnd-kit/core": "npm:^6.0.8"
     "@dnd-kit/modifiers": "npm:^7.0.0"
@@ -1825,18 +1827,18 @@ __metadata:
     "@rollup/plugin-typescript": "npm:^12.1.1"
     "@types/react-table": "npm:^7.7.20"
     babel-plugin-dev-expression: "npm:^0.2.3"
-    babel-preset-ibm-cloud-cognitive: "npm:^0.15.0-rc.0"
+    babel-preset-ibm-cloud-cognitive: "npm:^0.16.0-rc.0"
     chalk: "npm:^4.1.2"
     change-case: "npm:4.1.2"
     classnames: "npm:^2.5.1"
     copyfiles: "npm:^2.4.1"
     cross-env: "npm:^7.0.3"
-    framer-motion: "npm:^11.11.17"
+    framer-motion: "npm:^6.5.1 < 7"
     fs-extra: "npm:^11.2.0"
     glob: "npm:^10.3.10"
     immutability-helper: "npm:^3.1.1"
     jest: "npm:^29.7.0"
-    jest-config-ibm-cloud-cognitive: "npm:^1.16.0-rc.0"
+    jest-config-ibm-cloud-cognitive: "npm:^1.17.0-rc.0"
     jest-environment-jsdom: "npm:^29.7.0"
     lodash: "npm:^4.17.21"
     lottie-web: "npm:^5.12.2"
@@ -2866,6 +2868,22 @@ __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"
@@ -4098,6 +4116,71 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@motionone/animation@npm:^10.12.0":
+  version: 10.18.0
+  resolution: "@motionone/animation@npm:10.18.0"
+  dependencies:
+    "@motionone/easing": "npm:^10.18.0"
+    "@motionone/types": "npm:^10.17.1"
+    "@motionone/utils": "npm:^10.18.0"
+    tslib: "npm:^2.3.1"
+  checksum: c7fc04dd10d6cade3d3b63d26f2532a2b2731233afc0454722e55ad8061fb3923d926db9cc09f1bcedb39f504fcee1e80adaab270523846998aad3017364a583
+  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.18.0":
+  version: 10.18.0
+  resolution: "@motionone/easing@npm:10.18.0"
+  dependencies:
+    "@motionone/utils": "npm:^10.18.0"
+    tslib: "npm:^2.3.1"
+  checksum: a455a06ccee907ce9da7b1dfe392060a473132733e3f92bbee3a99c36af7baa333cf3c6e38c6d44ad0f9878fdafca3c3f4bcfe55aaeb2a633e45d8e0429f8fa5
+  languageName: node
+  linkType: hard
+
+"@motionone/generators@npm:^10.12.0":
+  version: 10.18.0
+  resolution: "@motionone/generators@npm:10.18.0"
+  dependencies:
+    "@motionone/types": "npm:^10.17.1"
+    "@motionone/utils": "npm:^10.18.0"
+    tslib: "npm:^2.3.1"
+  checksum: 149720881e8db6a1ff38cea98349c3a00f72e5318b645459b68a2aeddb1f2be63ad2ae8978f6c4a63e2414f39e65f06de13a43fd35cf24dc3fb3e3c7f87526bc
+  languageName: node
+  linkType: hard
+
+"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.17.1":
+  version: 10.17.1
+  resolution: "@motionone/types@npm:10.17.1"
+  checksum: 21d92d733ba30f810b72609fe04f2ef86125ba0160b826974605cc4cc5fbb6ab7bbf1640cbc64fd6298eb8d36fb920ad3ca646c76adf0e2c47a4920200616952
+  languageName: node
+  linkType: hard
+
+"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/utils@npm:10.18.0"
+  dependencies:
+    "@motionone/types": "npm:^10.17.1"
+    hey-listen: "npm:^1.0.8"
+    tslib: "npm:^2.3.1"
+  checksum: 0fa9232d132383880d6004522ded763d60f490946584e02bca7f64df98fae07421071f3a85de06aa6ecb52632a47a7586b4143e824e459a87cc852fab657e549
+  languageName: node
+  linkType: hard
+
 "@mswjs/interceptors@npm:^0.35.8":
   version: 0.35.9
   resolution: "@mswjs/interceptors@npm:0.35.9"
@@ -8990,7 +9073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-ibm-cloud-cognitive@npm:^0.15.0-rc.0, babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive":
+"babel-preset-ibm-cloud-cognitive@npm:^0.16.0-rc.0, babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive":
   version: 0.0.0-use.local
   resolution: "babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive"
   dependencies:
@@ -13007,23 +13090,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^11.11.17":
-  version: 11.11.17
-  resolution: "framer-motion@npm:11.11.17"
+"framer-motion@npm:^6.5.1 < 7":
+  version: 6.5.1
+  resolution: "framer-motion@npm:6.5.1"
   dependencies:
-    tslib: "npm:^2.4.0"
+    "@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"
   peerDependencies:
-    "@emotion/is-prop-valid": "*"
-    react: ^18.0.0
-    react-dom: ^18.0.0
-  peerDependenciesMeta:
+    react: ">=16.8 || ^17.0.0 || ^18.0.0"
+    react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
+  dependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: 85193dea8ea4161efa20604db31d82761008b56f1c68097239e6e825a422c4fcc8e3b06c3a81e9cbbb1905c4b9d69632b520db2f9dd4808e03bf83e1826791ea
+  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
   languageName: node
   linkType: hard
 
@@ -13787,6 +13880,13 @@ __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"
@@ -14925,7 +15025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-config-ibm-cloud-cognitive@npm:^1.16.0-rc.0, jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive":
+"jest-config-ibm-cloud-cognitive@npm:^1.17.0-rc.0, jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive":
   version: 0.0.0-use.local
   resolution: "jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive"
   dependencies:
@@ -14940,7 +15040,7 @@ __metadata:
     accessibility-checker: "npm:^3.1.78"
     axe-core: "npm:^4.8.3"
     babel-jest: "npm:^29.7.0"
-    babel-preset-ibm-cloud-cognitive: "npm:^0.15.0-rc.0"
+    babel-preset-ibm-cloud-cognitive: "npm:^0.16.0-rc.0"
     chalk: "npm:^4.1.2"
     identity-obj-proxy: "npm:^3.0.0"
     jest-circus: "npm:^29.7.0"
@@ -18719,6 +18819,18 @@ __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"
@@ -21179,6 +21291,16 @@ __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"
@@ -21937,6 +22059,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.3.1":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.6.3":
   version: 2.7.0
   resolution: "tslib@npm:2.7.0"