diff --git a/cspell.json b/cspell.json
index f9751c3ff94..f9d0945a73b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -214,6 +214,7 @@
     "typeahead",
     "typeof",
     "unauthorizedemptystate",
+    "unbundle",
     "useravatar",
     "userprofileimage",
     "uuidv",
diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss
index 987f1f55471..d9fca67d0ba 100644
--- a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss
+++ b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss
@@ -21,6 +21,7 @@
   initial-value: 320px;
   syntax: '<length>';
 }
+
 $block-class-component: #{$block-class}-filter-panel;
 
 .#{$block-class-component} {
diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json
index 0a5dd8b19e7..a0ad1751bb6 100644
--- a/packages/ibm-products-web-components/package.json
+++ b/packages/ibm-products-web-components/package.json
@@ -43,7 +43,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "yarn clean && node tasks/build.js && yarn wca",
+    "build": "yarn clean && tsdown && yarn wca",
     "build:storybook": "storybook build --quiet",
     "clean": "rimraf es lib scss dist storybook-static",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
@@ -106,6 +106,7 @@
     "sass": "^1.93.2",
     "storybook": "^9.1.15",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.0",
+    "tsdown": "^0.14.1",
     "tslib": "^2.8.1",
     "typescript": "^5.5.3",
     "vite": "npm:rolldown-vite@latest",
diff --git a/packages/ibm-products-web-components/tasks/build.js b/packages/ibm-products-web-components/tasks/build.js
deleted file mode 100644
index 8249479a584..00000000000
--- a/packages/ibm-products-web-components/tasks/build.js
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-import { fileURLToPath } from 'url';
-import { globby } from 'globby';
-import { rollup } from 'rollup';
-import alias from '@rollup/plugin-alias';
-import autoprefixer from 'autoprefixer';
-import commonjs from '@rollup/plugin-commonjs';
-import copy from 'rollup-plugin-copy';
-import cssnano from 'cssnano';
-import litSCSS from '../tools/rollup-plugin-lit-scss.js';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import path from 'path';
-import postcss from 'postcss';
-import typescript from '@rollup/plugin-typescript';
-import json from '@rollup/plugin-json';
-import image from '@rollup/plugin-image';
-import fs from 'fs-extra';
-
-import * as packageJson from '../package.json' with { type: 'json' };
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-async function build() {
-  const esInputs = await globby([
-    'src/**/*.ts',
-    '!src/**/*.stories.ts',
-    '!src/**/*.d.ts',
-    '!src/polyfills',
-  ]);
-
-  const libInputs = await globby([
-    'src/components/**/defs.ts',
-    'src/globals/**/*.ts',
-    '!src/globals/decorators/**/*.ts',
-    '!src/globals/directives/**/*.ts',
-    '!src/globals/internal/**/*.ts',
-    '!src/globals/mixins/**/*.ts',
-  ]);
-
-  const iconInput = await globby([
-    '../node_modules/@carbon/icons/lib/**/*.js',
-    '../../node_modules/@carbon/icons/lib/**/*.js',
-    '!**/index.js',
-  ]);
-
-  const entryPoint = {
-    rootDir: 'src',
-    outputDirectory: path.resolve(__dirname, '..'),
-  };
-
-  const formats = [
-    {
-      type: 'esm',
-      directory: 'es',
-    },
-    {
-      type: 'commonjs',
-      directory: 'lib',
-    },
-  ];
-
-  for (const format of formats) {
-    const outputDirectory = path.join(
-      entryPoint.outputDirectory,
-      format.directory
-    );
-
-    const cwcInputConfig = getRollupConfig(
-      format.type === 'esm' ? esInputs : libInputs,
-      entryPoint.rootDir,
-      outputDirectory,
-      format.type === 'esm' ? iconInput : []
-    );
-
-    const cwcBundle = await rollup(cwcInputConfig);
-
-    await cwcBundle.write({
-      dir: outputDirectory,
-      format: format.type,
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      banner,
-      exports: 'named',
-      sourcemap: true,
-    });
-  }
-
-  await postBuild();
-}
-
-const banner = `/**
- * 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.
- */
-`;
-
-function getRollupConfig(input, rootDir, outDir, iconInput) {
-  return {
-    input,
-    // Mark dependencies listed in `package.json` as external so that they are
-    // not included in the output bundle.
-    external: [
-      ...Object.keys(packageJson.default.dependencies),
-      ...Object.keys(packageJson.default.devDependencies),
-    ].map((name) => {
-      // Transform the name of each dependency into a regex so that imports from
-      // nested paths are correctly marked as external.
-      //
-      // Example:
-      // import 'module-name';
-      // import 'module-name/path/to/nested/module';
-      return new RegExp(`^${name}(/.*)?`);
-    }),
-    plugins: [
-      alias({
-        entries: [{ find: /^(.*)\.scss\?lit$/, replacement: '$1.scss' }],
-      }),
-      copy({
-        targets: [
-          {
-            src: 'src/components/**/*.scss',
-            dest: 'scss',
-            ignore: 'src/components/**/story-styles.scss',
-          },
-        ],
-        flatten: false,
-      }),
-      [json()],
-      nodeResolve({
-        browser: true,
-        mainFields: ['jsnext', 'module', 'main'],
-        extensions: ['.js', '.ts'],
-      }),
-      commonjs({
-        include: [/node_modules/],
-      }),
-      litSCSS({
-        includePaths: [
-          path.resolve(__dirname, '../node_modules'),
-          path.resolve(__dirname, '../../../node_modules'),
-        ],
-        async preprocessor(contents, id) {
-          return (
-            await postcss([autoprefixer(), cssnano()]).process(contents, {
-              from: id,
-            })
-          ).css;
-        },
-      }),
-      typescript({
-        noEmitOnError: true,
-        compilerOptions: {
-          rootDir,
-          outDir,
-        },
-      }),
-      image(),
-    ],
-  };
-}
-
-build().catch((error) => {
-  console.log(error);
-  process.exit(1);
-});
-
-async function postBuild() {
-  const sourceDir = path.resolve(__dirname, '../es');
-
-  if (sourceDir) {
-    const targetDir = path.resolve(__dirname, '../es-custom');
-
-    // Copy `es` directory to `es-custom`
-    await fs.copy(sourceDir, targetDir);
-
-    // Find all files in the `es-custom` directory
-    const files = await globby([`${targetDir}/**/*`], { onlyFiles: true });
-
-    // Replace "cds" with "cds-custom" in all files
-    await Promise.all(
-      files.map(async (file) => {
-        const content = await fs.promises.readFile(file, 'utf8');
-        const updatedContent = content.replace(/(?<!--)cds/g, 'cds-custom');
-        const updatedContentWithImports = updatedContent.replace(
-          /import\s+['"]@carbon\/web-components\/es\/components\/(.*?)['"]/g,
-          "import '@carbon/web-components/es-custom/components/$1'"
-        );
-        await fs.promises.writeFile(file, updatedContentWithImports);
-      })
-    );
-  }
-}
diff --git a/packages/ibm-products-web-components/tsdown.config.ts b/packages/ibm-products-web-components/tsdown.config.ts
new file mode 100644
index 00000000000..dc606613d2a
--- /dev/null
+++ b/packages/ibm-products-web-components/tsdown.config.ts
@@ -0,0 +1,152 @@
+/**
+ * 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 { defineConfig, type UserConfig } from 'tsdown';
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import copy from 'rollup-plugin-copy';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import path from 'path';
+import litSCSS from './tools/rollup-plugin-lit-scss.js';
+import fs from 'fs-extra';
+import { globby } from 'globby';
+import * as packageJson from './package.json' with { type: 'json' };
+
+const banner = `/**
+ * Copyright IBM Corp. 2020, ${new Date().getFullYear()}
+ *
+ * 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 esInputs = [
+  'src/**/*.ts',
+  '!src/**/*.stories.ts',
+  '!src/**/*.d.ts',
+  '!src/polyfills',
+];
+
+const libInputs = [
+  'src/**/*.ts',
+  'src/components/**/defs.ts',
+  'src/globals/**/*.ts',
+  '!src/globals/decorators/**/*.ts',
+  '!src/globals/directives/**/*.ts',
+  '!src/globals/internal/**/*.ts',
+  '!src/globals/mixins/**/*.ts',
+  '!src/**/*.stories.ts',
+];
+
+const sharedConfig: UserConfig = {
+  banner: () => ({
+    js: banner,
+    dts: banner,
+  }),
+  platform: 'neutral',
+  dts: true,
+  cwd: import.meta.dirname,
+  unbundle: true,
+  outExtensions: () => ({ js: '.js' }),
+  external: [
+    '@carbon/utilities',
+    ...Object.keys(packageJson.dependencies),
+    ...Object.keys(packageJson.devDependencies),
+  ].map((name) => {
+    // Transform the name of each dependency into a regex so that imports from
+    // nested paths are correctly marked as external.
+    //
+    // Example:
+    // import 'module-name';
+    // import 'module-name/path/to/nested/module';
+    return new RegExp(`^${name}(/.*)?`);
+  }),
+  plugins: [
+    alias({
+      entries: [{ find: /^(.*)\.scss\?lit$/, replacement: '$1.scss' }],
+    }),
+    copy({
+      targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }],
+      flatten: false,
+    }),
+    [
+      json({
+        exclude: ['./package.json'],
+      }),
+    ],
+    // Transforms .scss files into lit templates
+    // This custom rollup plugin uses sass.render api
+    // internally which is very slow, we should explore
+    // some alternative
+    litSCSS({
+      // @ts-expect-error
+      includePaths: [
+        path.resolve(__dirname, './node_modules'),
+        path.resolve(__dirname, '../../node_modules'),
+      ],
+      async preprocessor(contents, id) {
+        return (
+          await postcss([autoprefixer(), cssnano()]).process(contents, {
+            from: id,
+          })
+        ).css;
+      },
+    }),
+  ],
+};
+
+export default defineConfig([
+  {
+    ...sharedConfig,
+    entry: esInputs,
+    outDir: 'es',
+    onSuccess() {
+      console.info('✅ esm build succeeded!');
+    },
+    hooks: {
+      'build:done': async () => await postBuild(),
+    },
+  },
+  {
+    ...sharedConfig,
+    entry: libInputs,
+    outDir: 'lib',
+    format: 'cjs',
+    onSuccess() {
+      console.info('✅ cjs build succeeded!');
+    },
+  },
+]);
+
+async function postBuild() {
+  const sourceDir = path.resolve(__dirname, './es');
+
+  if (sourceDir) {
+    const targetDir = path.resolve(__dirname, './es-custom');
+
+    // Copy `es` directory to `es-custom`
+    await fs.copy(sourceDir, targetDir);
+
+    // Find all files in the `es-custom` directory
+    const files = await globby([`${targetDir}/**/*`], { onlyFiles: true });
+
+    // Replace "cds" with "cds-custom" in all files
+    await Promise.all(
+      files.map(async (file) => {
+        let content = await fs.promises.readFile(file, 'utf8');
+        content = content.replace(/cds/g, 'cds-custom');
+        content = content.replace(
+          /import\s+['"]@carbon\/web-components\/es\/components\/(.*?)['"]/g,
+          "import '@carbon/web-components/es-custom/components/$1'"
+        );
+        await fs.promises.writeFile(file, content);
+      })
+    );
+  }
+}
diff --git a/packages/ibm-products/.storybook/get-auto-track-script.ts b/packages/ibm-products/.storybook/get-auto-track-script.ts
new file mode 100644
index 00000000000..b7342cc45c4
--- /dev/null
+++ b/packages/ibm-products/.storybook/get-auto-track-script.ts
@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+//cspell: disable
+export const getAutoTrack = (source: string) => `
+  <script>
+    window._ibmAnalytics = {
+      settings: {
+        name: '${source}',
+        isSpa: false,
+        tealiumProfileName: 'in-app-usage-growth',
+      },
+      onLoad: [['ibmStats.pageview', []]],
+    };
+
+    window.digitalData = {
+      page: {
+        pageInfo: {
+          ibm: {
+            siteId: 'IBM_${source}',
+          },
+          segment: {
+            enabled: true,
+            env: 'test',
+            key: 'aWg1ug3bDNcSTnde9iwvg1OcvVRzf0JC',
+            coremetrics: false,
+            commonProperties: {
+              productCode: 'C4IP',
+              productTitle: 'Carbon for IBM Products',
+            },
+            pageProperties: {
+              productCode: 'C4IP',
+              productTitle: 'Carbon for IBM Products',
+            },
+          },
+        },
+        category: {
+          primaryCategory: 'PC110',
+        },
+      },
+    };
+  </script>
+  <script
+    src="//1.www.s81c.com/common/stats/ibm-common.js"
+    type="text/javascript"
+    async="async"></script>
+  <script
+    type="text/javascript"
+    async="async"
+    src="//1.www.s81c.com/common/carbon/autotrack.min.js"></script>`;
diff --git a/packages/ibm-products/.storybook/main.js b/packages/ibm-products/.storybook/main.js
index 74f37f71be8..3e59d71f367 100644
--- a/packages/ibm-products/.storybook/main.js
+++ b/packages/ibm-products/.storybook/main.js
@@ -7,7 +7,8 @@
 import { createRequire } from 'node:module';
 import { dirname, join, resolve } from 'path';
 import remarkGfm from 'remark-gfm';
-import { getAutoTrack } from '../../../scripts/get-auto-track-script';
+import react from '@vitejs/plugin-react';
+// import { getAutoTrack } from './get-auto-track-script';
 
 const require = createRequire(import.meta.url);
 
@@ -59,7 +60,8 @@ export default {
       ${head}
       ${
         process.env.NODE_ENV !== 'development'
-          ? getAutoTrack('ibm-products-react-storybook')
+          ? // ? getAutoTrack('ibm-products-react-storybook')
+            ''
           : ''
       }
     `;
diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json
index cf855e8540e..9160b332146 100644
--- a/packages/ibm-products/package.json
+++ b/packages/ibm-products/package.json
@@ -5,6 +5,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "lib/index.d.ts",
   "installConfig": {
     "hoistingLimits": "none"
   },
@@ -46,7 +47,7 @@
     "build:css": "copyfiles '../ibm-products-styles/css/**/*.*' ./ -u 2",
     "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
     "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build --quiet",
-    "build:js-new": "node scripts/build",
+    "build:js": "tsdown",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate/index.mjs",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
@@ -105,6 +106,7 @@
     "sass": "^1.93.2",
     "storybook": "^9.1.15",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.0",
+    "tsdown": "^0.14.1",
     "typescript-config-carbon": "^0.9.0",
     "vite": "^7.0.0",
     "yargs": "^18.0.0"
diff --git a/packages/ibm-products/scripts/build.js b/packages/ibm-products/scripts/build.js
deleted file mode 100644
index b3b8afe3be1..00000000000
--- a/packages/ibm-products/scripts/build.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-const { babel } = require('@rollup/plugin-babel');
-const commonjs = require('@rollup/plugin-commonjs');
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const typescript = require('@rollup/plugin-typescript');
-const path = require('path');
-const { rollup } = require('rollup');
-const stripBanner = require('rollup-plugin-strip-banner');
-const { preserveDirectives } = require('rollup-plugin-preserve-directives');
-const {
-  loadBaseTsCompilerOpts,
-  loadTsCompilerOpts,
-} = require('typescript-config-carbon');
-const { readFileSync } = require('fs');
-const packageJson = JSON.parse(readFileSync('./package.json'));
-
-async function build() {
-  const reactEntrypoint = {
-    filepath: path.resolve(__dirname, '..', 'src', 'index.ts'),
-    rootDir: 'src',
-    outputDirectory: path.resolve(__dirname, '..'),
-  };
-  const formats = [
-    {
-      type: 'esm',
-      directory: 'es',
-    },
-    {
-      type: 'commonjs',
-      directory: 'lib',
-    },
-  ];
-
-  // Build @carbon/react formats
-  for (const format of formats) {
-    const outputDirectory = path.join(
-      reactEntrypoint.outputDirectory,
-      format.directory
-    );
-
-    const reactInputConfig = getRollupConfig(
-      reactEntrypoint.filepath,
-      reactEntrypoint.rootDir,
-      outputDirectory
-    );
-    const reactBundle = await rollup(reactInputConfig);
-
-    await reactBundle.write({
-      dir: outputDirectory,
-      format: format.type,
-      preserveModules: true,
-      preserveModulesRoot: path.dirname(reactEntrypoint.filepath),
-      banner,
-      exports: 'named',
-    });
-  }
-}
-
-const banner = `/**
- * Copyright IBM Corp. 2020, ${new Date().getFullYear()}
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-`;
-
-// Base babel config for js and ts
-const babelConfig = {
-  babelrc: false,
-  exclude: ['/node_modules/'],
-  ignore: ['/node_modules/'],
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-        targets: {
-          browsers: ['extends browserslist-config-carbon'],
-        },
-      },
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
-  plugins: [
-    'dev-expression',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-transform-react-constant-elements',
-  ],
-  babelHelpers: 'bundled',
-  extensions: ['.ts', '.tsx', '.js', '.jsx'],
-};
-
-function getTsCompilerOptions() {
-  const baseOpts = loadBaseTsCompilerOpts();
-  const projectTsConfigPath = path.resolve('./tsconfig.json');
-  const overrideOpts = loadTsCompilerOpts(projectTsConfigPath);
-  return { ...baseOpts, ...overrideOpts };
-}
-
-function getRollupConfig(input, rootDir, outDir) {
-  return {
-    input,
-    // Mark dependencies listed in `package.json` as external so that they are
-    // not included in the output bundle.
-    external: [
-      ...Object.keys(packageJson.peerDependencies),
-      ...Object.keys(packageJson.dependencies),
-      ...Object.keys(packageJson.devDependencies),
-    ].map((name) => {
-      // Transform the name of each dependency into a regex so that imports from
-      // nested paths are correctly marked as external.
-      //
-      // Example:
-      // import 'module-name';
-      // import 'module-name/path/to/nested/module';
-      return new RegExp(`^${name}(/.*)?`);
-    }),
-    plugins: [
-      nodeResolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      }),
-      commonjs({
-        include: /node_modules/,
-      }),
-      typescript({
-        noEmitOnError: true,
-        noForceEmit: true,
-        outputToFilesystem: false,
-        compilerOptions: {
-          ...getTsCompilerOptions(),
-          rootDir,
-          outDir,
-        },
-        exclude: ['**/patterns/**'], // pattern code doesn't need to be included in build
-      }),
-      babel(babelConfig),
-      preserveDirectives(),
-      stripBanner(),
-      {
-        transform(_code, id) {
-          // Make sure to mark feature-flags.js as having side-effects to make
-          // sure it gets included in the final bundle
-          if (id === path.join(__dirname, '..', 'src', 'feature-flags.js')) {
-            return {
-              moduleSideEffects: true,
-            };
-          }
-        },
-      },
-    ],
-    // rollup-plugin-preserve-directives doesn't suppress the warning that
-    // rollup pops by default for directives. Specifically, this prevents:
-    // @carbon/react: src/index.ts (9:0): Module level directives cause errors
-    // when bundled, "use client" in "src/index.ts" was ignored.
-    onwarn(warning, warn) {
-      if (warning.code !== 'MODULE_LEVEL_DIRECTIVE') {
-        warn(warning);
-      }
-    },
-  };
-}
-
-build().catch((error) => {
-  console.log(error);
-  process.exit(1);
-});
diff --git a/packages/ibm-products/scripts/import.js b/packages/ibm-products/scripts/import.js
deleted file mode 100644
index c109dc6a9d3..00000000000
--- a/packages/ibm-products/scripts/import.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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.
- */
-
-const path = require('node:path');
-
-const reset = "\x1b[0m";
-const green = str => `\x1b[42m${str + reset}`;
-const red = str => `\x1b[41m${str + reset}`;
-
-/**
- * used in `yarn ci-check` to check if lib is generate in the build command
- */
-const importCheck = () => {
-  const lib = path.resolve(__dirname, '..', 'lib');
-  let status;
-
-  try {
-    require('assert')(path);
-  } catch (error) {
-    status = error;
-  } finally {
-    console.log(`${status ? red('FAIL') : green('PASS')} Import '${lib}'`);
-
-    if (status) {
-      console.error(`\n${red(status)}`);
-    }
-  }
-};
-
-module.exports = importCheck();
diff --git a/packages/ibm-products/src/__tests__/index-all-enabled.test.jsx b/packages/ibm-products/src/__tests__/index-all-enabled.test.jsx
new file mode 100644
index 00000000000..388b5d090f9
--- /dev/null
+++ b/packages/ibm-products/src/__tests__/index-all-enabled.test.jsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { WebTerminalProvider } from '../index';
+
+import { pkg } from '../settings';
+
+import * as components from '..';
+
+const canaryClass = `${pkg.prefix}--canary`;
+const name = 'JS export checks';
+
+pkg._silenceWarnings(true);
+pkg.setAllComponents(true);
+
+describe(name, () => {
+  let mockError, mockWarn;
+
+  beforeEach(() => {
+    // The component instantiations that follow will generate a stack of
+    // console errors and warnings about required props not provided or
+    // conditions not met, and for the purposes of these tests we don't care.
+    mockError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mockWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    mockError.mockRestore();
+    mockWarn.mockRestore();
+    jest.restoreAllMocks();
+  });
+
+  for (const key in components) {
+    if (key.charAt(0) === key.charAt(0).toUpperCase()) {
+      it(`Does not render a canary for "${key}" if package flags set to enable`, async () => {
+        const TestComponent = components[key];
+        let elementContainer;
+
+        /** Wraps the test component with the web terminal provider if the test component
+            starts with 'WebTerminal' */
+        if (key.startsWith('WebTerminal')) {
+          const { container } = render(
+            <WebTerminalProvider>
+              <TestComponent />
+            </WebTerminalProvider>
+          );
+          elementContainer = container;
+        } else {
+          const { container } = render(<TestComponent />);
+          elementContainer = container;
+        }
+
+        expect(elementContainer.querySelector(`.${canaryClass}`)).toBeNull();
+      });
+    }
+  }
+});
diff --git a/packages/ibm-products/src/components/ActionBar/index.js b/packages/ibm-products/src/components/ActionBar/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/ActionBar/index.js
rename to packages/ibm-products/src/components/ActionBar/index.ts
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx b/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx
index d6b7f579f00..de75fa5a63c 100644
--- a/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx
+++ b/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx
@@ -16,11 +16,11 @@ import {
   TearsheetProps,
 } from '../../components/Tearsheet';
 import { NotFoundEmptyState } from '../EmptyStates';
-import { AddSelectSidebar } from './AddSelectSidebar';
-import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs';
-import { AddSelectList } from './AddSelectList';
-import { AddSelectColumn } from './AddSelectColumn';
-import { AddSelectFilter } from './AddSelectFilter';
+import { AddSelectSidebar } from './AddSelectSidebar.jsx';
+import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs.jsx';
+import { AddSelectList } from './AddSelectList.jsx';
+import { AddSelectColumn } from './AddSelectColumn.jsx';
+import { AddSelectFilter } from './AddSelectFilter.jsx';
 import { AddSelectSort } from './AddSelectSort';
 import { sortItems, getFilteredItems } from './add-select-utils';
 import { useItemSort } from './hooks/useItemSort';
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectColumn.jsx b/packages/ibm-products/src/components/AddSelect/AddSelectColumn.jsx
index 905e85d8978..9ab85909f53 100644
--- a/packages/ibm-products/src/components/AddSelect/AddSelectColumn.jsx
+++ b/packages/ibm-products/src/components/AddSelect/AddSelectColumn.jsx
@@ -19,7 +19,7 @@ import {
 } from '@carbon/react';
 import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings';
-import { AddSelectList } from './AddSelectList';
+import { AddSelectList } from './AddSelectList.jsx';
 import { AddSelectSort } from './AddSelectSort';
 import { sortItems } from './add-select-utils';
 import { useItemSort } from './hooks/useItemSort';
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectList.jsx b/packages/ibm-products/src/components/AddSelect/AddSelectList.jsx
index e209ebca89f..bd29b11be38 100644
--- a/packages/ibm-products/src/components/AddSelect/AddSelectList.jsx
+++ b/packages/ibm-products/src/components/AddSelect/AddSelectList.jsx
@@ -9,7 +9,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { AddSelectRow } from './AddSelectRow';
+import { AddSelectRow } from './AddSelectRow.jsx';
 import useFocus from './hooks/useFocus';
 
 const blockClass = `${pkg.prefix}--add-select__selections`;
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectRow.jsx b/packages/ibm-products/src/components/AddSelect/AddSelectRow.jsx
index 8f26e716418..c75c6ad89c7 100644
--- a/packages/ibm-products/src/components/AddSelect/AddSelectRow.jsx
+++ b/packages/ibm-products/src/components/AddSelect/AddSelectRow.jsx
@@ -11,7 +11,7 @@ import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { AddSelectFormControl } from './AddSelectFormControl';
+import { AddSelectFormControl } from './AddSelectFormControl.jsx';
 
 const blockClass = `${pkg.prefix}--add-select__selections`;
 const componentName = 'AddSelectList';
diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectSidebar.jsx b/packages/ibm-products/src/components/AddSelect/AddSelectSidebar.jsx
index 7ad29074450..0b41b9a5f65 100644
--- a/packages/ibm-products/src/components/AddSelect/AddSelectSidebar.jsx
+++ b/packages/ibm-products/src/components/AddSelect/AddSelectSidebar.jsx
@@ -10,7 +10,7 @@ import { Tag, Accordion, AccordionItem } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
 import { pkg } from '../../settings';
-import { AddSelectMetaPanel } from './AddSelectMetaPanel';
+import { AddSelectMetaPanel } from './AddSelectMetaPanel.jsx';
 
 const blockClass = `${pkg.prefix}--add-select__sidebar`;
 const componentName = 'AddSelectSidebar';
diff --git a/packages/ibm-products/src/components/BreadcrumbWithOverflow/index.js b/packages/ibm-products/src/components/BreadcrumbWithOverflow/index.js
index 8f51f098fe6..f74d2a845ff 100644
--- a/packages/ibm-products/src/components/BreadcrumbWithOverflow/index.js
+++ b/packages/ibm-products/src/components/BreadcrumbWithOverflow/index.js
@@ -7,4 +7,4 @@
 
 // NOTE: An index file is most useful when you have multiple components
 
-export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow';
+export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.jsx';
diff --git a/packages/ibm-products/src/components/ButtonSetWithOverflow/index.js b/packages/ibm-products/src/components/ButtonSetWithOverflow/index.js
index 0a74c6dbda2..2132d5112ca 100644
--- a/packages/ibm-products/src/components/ButtonSetWithOverflow/index.js
+++ b/packages/ibm-products/src/components/ButtonSetWithOverflow/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { ButtonSetWithOverflow } from './ButtonSetWithOverflow';
+export { ButtonSetWithOverflow } from './ButtonSetWithOverflow.jsx';
diff --git a/packages/ibm-products/src/components/Checklist/Checklist.tsx b/packages/ibm-products/src/components/Checklist/Checklist.tsx
index f97f202ae96..daf1dac7a2e 100644
--- a/packages/ibm-products/src/components/Checklist/Checklist.tsx
+++ b/packages/ibm-products/src/components/Checklist/Checklist.tsx
@@ -24,8 +24,8 @@ import React, {
   useState,
 } from 'react';
 
-import { ChecklistChart } from './ChecklistChart';
-import { ChecklistIcon } from './ChecklistIcon';
+import { ChecklistChart } from './ChecklistChart.jsx';
+import { ChecklistIcon } from './ChecklistIcon.jsx';
 import { ChevronUp } from '@carbon/react/icons';
 // Other standard imports.
 import PropTypes from 'prop-types';
diff --git a/packages/ibm-products/src/components/CoachmarkStack/index.js b/packages/ibm-products/src/components/CoachmarkStack/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/CoachmarkStack/index.js
rename to packages/ibm-products/src/components/CoachmarkStack/index.ts
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx
index cf53603265d..0e0a3feed8a 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx
@@ -26,7 +26,7 @@ import ConditionPreview from '../ConditionPreview/ConditionPreview';
 import { Heading } from '@carbon/react';
 /**@ts-ignore */
 import { Section } from '@carbon/react';
-import GroupConnector from '../ConditionBuilderConnector/GroupConnector';
+import GroupConnector from '../ConditionBuilderConnector/GroupConnector.jsx';
 import ConditionBuilderActions from '../ConditionBuilderActions/ConditionBuilderActions';
 import { useTranslations } from '../utils/useTranslations';
 import {
diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx
index 86a57ce8865..bbf24eac07a 100644
--- a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx
+++ b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx
@@ -46,7 +46,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth';
 import { handleEditSubmit } from './utils/handleEditSubmit';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
-import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.jsx';
 import { handleKeyPress } from './utils/commonEventHandlers';
 import { pkg } from '../../settings';
 import { removeCellSelections } from './utils/removeCellSelections';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories/CustomizeColumnStory.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories/CustomizeColumnStory.jsx
similarity index 100%
rename from packages/ibm-products/src/components/Datagrid/Datagrid.stories/CustomizeColumnStory.js
rename to packages/ibm-products/src/components/Datagrid/Datagrid.stories/CustomizeColumnStory.jsx
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.jsx
similarity index 100%
rename from packages/ibm-products/src/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.js
rename to packages/ibm-products/src/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.jsx
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.jsx
similarity index 100%
rename from packages/ibm-products/src/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.js
rename to packages/ibm-products/src/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.jsx
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx
index 87f184d039f..a12d569b9a6 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx
@@ -20,7 +20,7 @@ import {
   handleColumnResizeEndEvent,
   handleColumnResizingEvent,
 } from './addons/stateReducer';
-import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
+import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent.jsx';
 import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel';
 import { useInitialColumnSort } from '../useInitialColumnSort';
 import {
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.jsx
index c7f882e8a75..592217ee1bb 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { Checkbox } from '@carbon/react';
 import { pkg } from '../../../../../settings';
 import cx from 'classnames';
-import { DraggableItemsList } from './DraggableItemsList';
+import { DraggableItemsList } from './DraggableItemsList.jsx';
 import uuidv4 from '../../../../../global/js/utils/uuidv4';
 
 const blockClass = `${pkg.prefix}--datagrid`;
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.jsx
index dce6046f06e..54b1c8e1a72 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.jsx
@@ -8,8 +8,8 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { TearsheetNarrow } from '../../../../Tearsheet';
-import Columns from './Columns';
-import Actions from './Actions';
+import Columns from './Columns.jsx';
+import Actions from './Actions.jsx';
 import { pkg } from '../../../../../settings';
 import { useCallback } from 'react';
 
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.jsx
index 5ed918a635f..fef357ff778 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.jsx
@@ -12,7 +12,7 @@ import { isColumnVisible } from './common';
 import { useId } from '../../../../../global/js/utils/useId';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
-import { getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent';
+import { getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent.jsx';
 
 import {
   DndContext,
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.jsx
index deb1c95e941..aefd84eba3d 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.jsx
@@ -6,7 +6,7 @@
 
 import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet';
+import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet.jsx';
 import { InlineEditContext } from '../InlineEdit/InlineEditContext';
 
 const TearsheetWrapper = ({ instance, launcherButtonRef }) => {
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js
index cda6f240627..7d9d9fdbb75 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js
@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper';
+export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper.jsx';
 export { default as ToggleButtonWrapper } from './ButtonWrapper';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js
index 29b5ef737a6..ecc85f27626 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js
@@ -6,6 +6,6 @@
  */
 
 export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
-export { default as useFilters } from './useFilters';
+export { default as useFilters } from './useFilters.jsx';
 export { default as useShouldDisableButtons } from './useShouldDisableButtons';
 export { default as useFilterContext } from './useFilterContext';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.jsx
index 32d19696927..56a13f351f9 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.jsx
@@ -36,7 +36,7 @@ import React, {
   useContext,
 } from 'react';
 
-import OverflowCheckboxes from '../OverflowCheckboxes';
+import OverflowCheckboxes from '../OverflowCheckboxes.jsx';
 import { getInitialStateFromFilters } from '../utils';
 import { usePreviousValue } from '../../../../../../global/js/hooks';
 import { FilterContext } from '../FilterProvider';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/index.js
index 3c4a86cd9bb..a4fb80283e8 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/index.js
@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as FilterFlyout } from './FilterFlyout';
-export { default as FilterPanel } from './FilterPanel';
+export { default as FilterFlyout } from './FilterFlyout.jsx';
+export { default as FilterPanel } from './FilterPanel.jsx';
 export { FilterProvider, FilterContext } from './FilterProvider';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js
index 41d0f6a0d56..650a806a4b2 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { InlineEditButton } from './InlineEditButton';
+export { InlineEditButton } from './InlineEditButton.jsx';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js
index 81c7273e10f..b9a5d0aec03 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { InlineEditCell } from './InlineEditCell';
+export { InlineEditCell } from './InlineEditCell.jsx';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js
index 5c170b9d5fc..9f5586554a4 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { InlineEditProvider, InlineEditContext } from './InlineEditContext';
+export { InlineEditProvider, InlineEditContext } from './InlineEditContext.jsx';
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.jsx
index bc15c15d91f..e5e8a8a8608 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.jsx
@@ -16,7 +16,7 @@ import {
   usePrefix,
 } from '@carbon/react';
 import cx from 'classnames';
-import RowSizeRadioGroup from './RowSizeRadioGroup';
+import RowSizeRadioGroup from './RowSizeRadioGroup.jsx';
 import { pkg } from '../../../../../settings';
 
 const blockClass = `${pkg.prefix}--datagrid__row-size`;
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/index.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/index.js
index 7428a38c869..5d7a5f69582 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/index.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as RowSizeDropdown } from './RowSizeDropdown';
+export { default as RowSizeDropdown } from './RowSizeDropdown.jsx';
diff --git a/packages/ibm-products/src/components/Datagrid/useDatagrid.ts b/packages/ibm-products/src/components/Datagrid/useDatagrid.ts
index 95fd716e7e2..f32fb630da0 100644
--- a/packages/ibm-products/src/components/Datagrid/useDatagrid.ts
+++ b/packages/ibm-products/src/components/Datagrid/useDatagrid.ts
@@ -20,7 +20,7 @@ import {
   PluginHook,
 } from 'react-table';
 import useSkeletonRows from './useSkeletonRows';
-import useDefaultStringRenderer from './useDefaultStringRenderer';
+import useDefaultStringRenderer from './useDefaultStringRenderer.jsx';
 import useRowRenderer from './useRowRenderer';
 import useRowSize from './useRowSize';
 import useHeaderRow from './Datagrid/DatagridHeaderRow';
diff --git a/packages/ibm-products/src/components/Datagrid/useExpandedRow.ts b/packages/ibm-products/src/components/Datagrid/useExpandedRow.ts
index edf98e7b777..8e8c79160d9 100644
--- a/packages/ibm-products/src/components/Datagrid/useExpandedRow.ts
+++ b/packages/ibm-products/src/components/Datagrid/useExpandedRow.ts
@@ -7,7 +7,7 @@
 
 import { useState } from 'react';
 import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
-import useRowExpander from './useRowExpander';
+import useRowExpander from './useRowExpander.jsx';
 import { Hooks, TableInstance } from 'react-table';
 import { DataGridState, DatagridRow } from './types';
 
diff --git a/packages/ibm-products/src/components/Datagrid/useNestedRows.ts b/packages/ibm-products/src/components/Datagrid/useNestedRows.ts
index cfd89501511..34a2fb40484 100644
--- a/packages/ibm-products/src/components/Datagrid/useNestedRows.ts
+++ b/packages/ibm-products/src/components/Datagrid/useNestedRows.ts
@@ -7,7 +7,7 @@
 
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import useNestedRowExpander from './useNestedRowExpander';
+import useNestedRowExpander from './useNestedRowExpander.jsx';
 import { useEffect } from 'react';
 import { Hooks, TableInstance } from 'react-table';
 import { DataGridState, DatagridRow } from './types';
diff --git a/packages/ibm-products/src/components/Decorator/index.js b/packages/ibm-products/src/components/Decorator/index.ts
similarity index 79%
rename from packages/ibm-products/src/components/Decorator/index.js
rename to packages/ibm-products/src/components/Decorator/index.ts
index 0487a229df9..5b31c85597e 100644
--- a/packages/ibm-products/src/components/Decorator/index.js
+++ b/packages/ibm-products/src/components/Decorator/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { Decorator } from './Decorator';
+export { Decorator } from './Decorator.jsx';
diff --git a/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.jsx b/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.jsx
index e836ce250cb..de86ff2d096 100644
--- a/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.jsx
+++ b/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.jsx
@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings';
 
 import { getMagnitude, truncate } from './utils';
-import { DecoratorIcon } from './DecoratorIcon';
+import { DecoratorIcon } from './DecoratorIcon.jsx';
 
 const blockClass = `${pkg.prefix}--decorator`;
 const componentName = 'DecoratorBase';
diff --git a/packages/ibm-products/src/components/DecoratorBase/index.js b/packages/ibm-products/src/components/DecoratorBase/index.js
index 75a0fafcc9f..4aa4a53d405 100644
--- a/packages/ibm-products/src/components/DecoratorBase/index.js
+++ b/packages/ibm-products/src/components/DecoratorBase/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { DecoratorBase } from './DecoratorBase';
+export { DecoratorBase } from './DecoratorBase.jsx';
diff --git a/packages/ibm-products/src/components/DecoratorSingleButton/index.js b/packages/ibm-products/src/components/DecoratorDualButton/index.ts
similarity index 73%
rename from packages/ibm-products/src/components/DecoratorSingleButton/index.js
rename to packages/ibm-products/src/components/DecoratorDualButton/index.ts
index 783f41b674e..cde626eacda 100644
--- a/packages/ibm-products/src/components/DecoratorSingleButton/index.js
+++ b/packages/ibm-products/src/components/DecoratorDualButton/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { DecoratorSingleButton } from './DecoratorSingleButton';
+export { DecoratorDualButton } from './DecoratorDualButton.jsx';
diff --git a/packages/ibm-products/src/components/StringFormatter/index.js b/packages/ibm-products/src/components/DecoratorLink/index.ts
similarity index 77%
rename from packages/ibm-products/src/components/StringFormatter/index.js
rename to packages/ibm-products/src/components/DecoratorLink/index.ts
index 4699509be29..7ebbf9618ef 100644
--- a/packages/ibm-products/src/components/StringFormatter/index.js
+++ b/packages/ibm-products/src/components/DecoratorLink/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { StringFormatter } from './StringFormatter';
+export { DecoratorLink } from './DecoratorLink.jsx';
diff --git a/packages/ibm-products/src/components/DecoratorDualButton/index.js b/packages/ibm-products/src/components/DecoratorSingleButton/index.ts
similarity index 72%
rename from packages/ibm-products/src/components/DecoratorDualButton/index.js
rename to packages/ibm-products/src/components/DecoratorSingleButton/index.ts
index 6d1adf8ef19..635c9047e0d 100644
--- a/packages/ibm-products/src/components/DecoratorDualButton/index.js
+++ b/packages/ibm-products/src/components/DecoratorSingleButton/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { DecoratorDualButton } from './DecoratorDualButton';
+export { DecoratorSingleButton } from './DecoratorSingleButton.jsx';
diff --git a/packages/ibm-products/src/components/DescriptionList/index.js b/packages/ibm-products/src/components/DescriptionList/index.js
deleted file mode 100644
index e1b78abef16..00000000000
--- a/packages/ibm-products/src/components/DescriptionList/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { DescriptionList } from './DescriptionList';
-export { DescriptionListBody } from './DescriptionListBody';
-export { DescriptionListCell } from './DescriptionListCell';
-export { DescriptionListRow } from './DescriptionListRow';
diff --git a/packages/ibm-products/src/components/DescriptionList/index.ts b/packages/ibm-products/src/components/DescriptionList/index.ts
new file mode 100644
index 00000000000..3307f833ed7
--- /dev/null
+++ b/packages/ibm-products/src/components/DescriptionList/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { DescriptionList } from './DescriptionList.jsx';
+export { DescriptionListBody } from './DescriptionListBody.jsx';
+export { DescriptionListCell } from './DescriptionListCell.jsx';
+export { DescriptionListRow } from './DescriptionListRow.jsx';
diff --git a/packages/ibm-products/src/components/EditTearsheet/index.js b/packages/ibm-products/src/components/EditTearsheet/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/EditTearsheet/index.js
rename to packages/ibm-products/src/components/EditTearsheet/index.ts
diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyStateIllustration.tsx b/packages/ibm-products/src/components/EmptyStates/EmptyStateIllustration.tsx
new file mode 100644
index 00000000000..b8de70a06fe
--- /dev/null
+++ b/packages/ibm-products/src/components/EmptyStates/EmptyStateIllustration.tsx
@@ -0,0 +1,61 @@
+/**
+ * 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 React, { Suspense, lazy } from 'react';
+import PropTypes from 'prop-types';
+
+const ErrorIllustration = lazy(() => import('./assets/ErrorIllustration.jsx'));
+const NoDataIllustration = lazy(
+  () => import('./assets/NoDataIllustration.jsx')
+);
+const NoTagsIllustration = lazy(
+  () => import('./assets/NoTagsIllustration.jsx')
+);
+const NotFoundIllustration = lazy(
+  () => import('./assets/NotFoundIllustration.jsx')
+);
+const NotificationsIllustration = lazy(
+  () => import('./assets/NotificationsIllustration.jsx')
+);
+const UnauthorizedIllustration = lazy(
+  () => import('./assets/UnauthorizedIllustration.jsx')
+);
+
+const getIllustration = (kind) => {
+  switch (kind) {
+    case 'error':
+      return ErrorIllustration;
+    case 'noData':
+      return NoDataIllustration;
+    case 'noTags':
+      return NoTagsIllustration;
+    case 'notifications':
+      return NotificationsIllustration;
+    case 'notFound':
+      return NotFoundIllustration;
+    case 'unauthorized':
+      return UnauthorizedIllustration;
+    default:
+      return () => null;
+  }
+};
+
+const EmptyStateIllustration = ({ kind, ...rest }) => {
+  const Illustration = getIllustration(kind);
+  return (
+    <Suspense>
+      {/* @ts-ignore */}
+      <Illustration aria-hidden="true" {...rest} />
+    </Suspense>
+  );
+};
+
+EmptyStateIllustration.propTypes = {
+  kind: PropTypes.string,
+};
+
+export default EmptyStateIllustration;
diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
index da2d696931f..960675dbb9b 100644
--- a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import ErrorIllustration from '../assets/ErrorIllustration';
+import ErrorIllustration from '../assets/ErrorIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx
index 4ad2cc314ed..4d4c71fc189 100644
--- a/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import NoDataIllustration from '../assets/NoDataIllustration';
+import NoDataIllustration from '../assets/NoDataIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx
index d72f1431e25..581c4eef5cd 100644
--- a/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import NoTagsIllustration from '../assets/NoTagsIllustration';
+import NoTagsIllustration from '../assets/NoTagsIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx
index 97f687506e6..584144014aa 100644
--- a/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import NotFoundIllustration from '../assets/NotFoundIllustration';
+import NotFoundIllustration from '../assets/NotFoundIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.tsx
index 0f6ceb0fd08..4a8ff33dbb1 100644
--- a/packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import NotificationsIllustration from '../assets/NotificationsIllustration';
+import NotificationsIllustration from '../assets/NotificationsIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
index b8f9fefaa0d..2dd5b56c30f 100644
--- a/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
+++ b/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 
 import { EmptyStateContent } from '../EmptyStateContent';
-import UnauthorizedIllustration from '../assets/UnauthorizedIllustration';
+import UnauthorizedIllustration from '../assets/UnauthorizedIllustration.jsx';
 import { defaults, EmptyStatePresetProps } from '../EmptyState';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/index.js
index 0f16d6b1feb..bfc2b33d820 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelAccordion } from './FilterPanelAccordion';
+export { FilterPanelAccordion } from './FilterPanelAccordion.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordionItem/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordionItem/index.js
index b14e23bac31..b894fa2b8e0 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordionItem/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelAccordionItem/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelAccordionItem } from './FilterPanelAccordionItem';
+export { FilterPanelAccordionItem } from './FilterPanelAccordionItem.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js
index 234c92987fd..224a6e24981 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelCheckbox } from './FilterPanelCheckbox';
+export { FilterPanelCheckbox } from './FilterPanelCheckbox.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckboxWithOverflow/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckboxWithOverflow/index.js
index 889b189c839..1a1de0e408a 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckboxWithOverflow/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckboxWithOverflow/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelCheckboxWithOverflow } from './FilterPanelCheckboxWithOverflow';
+export { FilterPanelCheckboxWithOverflow } from './FilterPanelCheckboxWithOverflow.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelGroup/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelGroup/index.js
index 3436be6f687..50cefa411cb 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelGroup/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelGroup/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelGroup } from './FilterPanelGroup';
+export { FilterPanelGroup } from './FilterPanelGroup.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js
index 31b7b9df322..ea9a5f1f6b1 100644
--- a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanelLabel } from './FilterPanelLabel';
+export { FilterPanelLabel } from './FilterPanelLabel.jsx';
diff --git a/packages/ibm-products/src/components/FilterPanel/index.js b/packages/ibm-products/src/components/FilterPanel/index.ts
similarity index 73%
rename from packages/ibm-products/src/components/FilterPanel/index.js
rename to packages/ibm-products/src/components/FilterPanel/index.ts
index 825c82631f3..54a53b62a66 100644
--- a/packages/ibm-products/src/components/FilterPanel/index.js
+++ b/packages/ibm-products/src/components/FilterPanel/index.ts
@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { FilterPanel } from './FilterPanel';
-export { FilterPanelAccordion } from './FilterPanelAccordion/FilterPanelAccordion';
-export { FilterPanelAccordionItem } from './FilterPanelAccordionItem/FilterPanelAccordionItem';
-export { FilterPanelCheckbox } from './FilterPanelCheckbox/FilterPanelCheckbox';
-export { FilterPanelCheckboxWithOverflow } from './FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow';
-export { FilterPanelGroup } from './FilterPanelGroup/FilterPanelGroup';
-export { FilterPanelLabel } from './FilterPanelLabel/FilterPanelLabel';
-export { FilterPanelSearch } from './FilterPanelSearch/FilterPanelSearch';
+export { FilterPanel } from './FilterPanel.jsx';
+export { FilterPanelAccordion } from './FilterPanelAccordion/FilterPanelAccordion.jsx';
+export { FilterPanelAccordionItem } from './FilterPanelAccordionItem/FilterPanelAccordionItem.jsx';
+export { FilterPanelCheckbox } from './FilterPanelCheckbox/FilterPanelCheckbox.jsx';
+export { FilterPanelCheckboxWithOverflow } from './FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.jsx';
+export { FilterPanelGroup } from './FilterPanelGroup/FilterPanelGroup.jsx';
+export { FilterPanelLabel } from './FilterPanelLabel/FilterPanelLabel.jsx';
+export { FilterPanelSearch } from './FilterPanelSearch/FilterPanelSearch.jsx';
diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.tsx b/packages/ibm-products/src/components/FullPageError/FullPageError.tsx
index bff04ec8835..1630097d321 100644
--- a/packages/ibm-products/src/components/FullPageError/FullPageError.tsx
+++ b/packages/ibm-products/src/components/FullPageError/FullPageError.tsx
@@ -10,9 +10,9 @@ import { Column, Grid } from '@carbon/react';
 // Import portions of React that are needed.
 import React, { ReactNode } from 'react';
 
-import { Error403SVG } from './assets/Error403SVG';
-import { Error404SVG } from './assets/Error404SVG';
-import { ErrorGenericSVG } from './assets/ErrorGenericSVG';
+import { Error403SVG } from './assets/Error403SVG.jsx';
+import { Error404SVG } from './assets/Error404SVG.jsx';
+import { ErrorGenericSVG } from './assets/ErrorGenericSVG.jsx';
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx
index 8376d591091..778460f9476 100644
--- a/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx
+++ b/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx
@@ -11,8 +11,8 @@ import React, { PropsWithChildren } from 'react';
 // Other standard imports.
 import cx from 'classnames';
 import { arrayOf, shape, string } from 'prop-types';
-import { HTTPErrorSvg403 } from '../assets/HTTPErrorSvg403';
-import { HTTPErrorContent } from '../HTTPErrorContent';
+import { HTTPErrorSvg403 } from '../assets/HTTPErrorSvg403.jsx';
+import { HTTPErrorContent } from '../HTTPErrorContent.jsx';
 
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError403/index.js b/packages/ibm-products/src/components/HTTPErrors/HTTPError403/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/HTTPErrors/HTTPError403/index.js
rename to packages/ibm-products/src/components/HTTPErrors/HTTPError403/index.ts
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx
index ab4a44ffd50..375ebaa6288 100644
--- a/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx
+++ b/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx
@@ -11,8 +11,8 @@ import React, { PropsWithChildren } from 'react';
 // Other standard imports.
 import cx from 'classnames';
 import { arrayOf, shape, string } from 'prop-types';
-import { HTTPErrorSvg404 } from '../assets/HTTPErrorSvg404';
-import { HTTPErrorContent } from '../HTTPErrorContent';
+import { HTTPErrorSvg404 } from '../assets/HTTPErrorSvg404.jsx';
+import { HTTPErrorContent } from '../HTTPErrorContent.jsx';
 
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError404/index.js b/packages/ibm-products/src/components/HTTPErrors/HTTPError404/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/HTTPErrors/HTTPError404/index.js
rename to packages/ibm-products/src/components/HTTPErrors/HTTPError404/index.ts
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx
index d984d65d320..f0d7b90d8a2 100644
--- a/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx
+++ b/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx
@@ -11,8 +11,8 @@ import React, { PropsWithChildren, Ref } from 'react';
 // Other standard imports.
 import cx from 'classnames';
 import { arrayOf, shape, string } from 'prop-types';
-import { HTTPErrorSvgOther } from '../assets/HTTPErrorSvgOther';
-import { HTTPErrorContent } from '../HTTPErrorContent';
+import { HTTPErrorSvgOther } from '../assets/HTTPErrorSvgOther.jsx';
+import { HTTPErrorContent } from '../HTTPErrorContent.jsx';
 
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/index.js b/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/index.js
rename to packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/index.ts
diff --git a/packages/ibm-products/src/components/HTTPErrors/index.js b/packages/ibm-products/src/components/HTTPErrors/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/HTTPErrors/index.js
rename to packages/ibm-products/src/components/HTTPErrors/index.ts
diff --git a/packages/ibm-products/src/components/Nav/Nav.jsx b/packages/ibm-products/src/components/Nav/Nav.jsx
index f3133d2985d..0603f303127 100644
--- a/packages/ibm-products/src/components/Nav/Nav.jsx
+++ b/packages/ibm-products/src/components/Nav/Nav.jsx
@@ -9,8 +9,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import NavList, { blockClass as navListBlockClass } from './NavList';
-import NavItem, { blockClass as navItemBlockClass } from './NavItem';
+import NavList, { blockClass as navListBlockClass } from './NavList.jsx';
+import NavItem, { blockClass as navItemBlockClass } from './NavItem.jsx';
 
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
diff --git a/packages/ibm-products/src/components/Nav/NavList.jsx b/packages/ibm-products/src/components/Nav/NavList.jsx
index 544ecb29025..cf33132d1c3 100644
--- a/packages/ibm-products/src/components/Nav/NavList.jsx
+++ b/packages/ibm-products/src/components/Nav/NavList.jsx
@@ -9,7 +9,7 @@ import React, { useState, useEffect, useImperativeHandle } from 'react';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import { bool, func, node, number, string } from 'prop-types';
-import NavItem, { blockClass as navItemBlockClass } from './NavItem';
+import NavItem, { blockClass as navItemBlockClass } from './NavItem.jsx';
 import { pkg } from '../../settings';
 
 const componentName = 'NavList';
diff --git a/packages/ibm-products/src/components/Nav/index.js b/packages/ibm-products/src/components/Nav/index.js
deleted file mode 100644
index 5e83df750dc..00000000000
--- a/packages/ibm-products/src/components/Nav/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { Nav } from './Nav';
-export { NavList } from './NavList';
-export { NavItem } from './NavItem';
diff --git a/packages/ibm-products/src/components/Nav/index.ts b/packages/ibm-products/src/components/Nav/index.ts
new file mode 100644
index 00000000000..1b02a5ddf54
--- /dev/null
+++ b/packages/ibm-products/src/components/Nav/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Nav } from './Nav.jsx';
+export { NavList } from './NavList.jsx';
+export { NavItem } from './NavItem.jsx';
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.tsx b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.tsx
new file mode 100644
index 00000000000..4c97502b6e9
--- /dev/null
+++ b/packages/ibm-products/src/components/PageHeader/PageHeaderTitle.tsx
@@ -0,0 +1,197 @@
+/**
+ * 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 React, { ReactElement, ReactNode, useRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { DefinitionTooltip, SkeletonText } from '@carbon/react';
+import { EditInPlace } from '../EditInPlace';
+import { useOverflowStringWidth } from '../../global/js/hooks/useOverflowString';
+
+interface TitleProps {
+  text?: string;
+  editDescription?: string;
+  editableLabel?: string;
+  cancelDescription?: string;
+  saveDescription?: string;
+  content?: ReactNode;
+  loading?: boolean;
+  icon?: ReactElement<unknown, string> | undefined;
+  asText?: string;
+  onChange?: () => void;
+  onSave?: () => void;
+  tooltipAlignment?: string;
+}
+
+/**
+ *
+ * Utility component used by Page Header
+ */
+
+export const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => {
+  let titleInnards;
+
+  // debugger;
+
+  const {
+    content,
+    loading,
+    icon,
+    onChange,
+    onSave,
+    editDescription,
+    editableLabel,
+    cancelDescription,
+    saveDescription,
+    tooltipAlignment = 'bottom',
+    ...rest
+  }: TitleProps = title;
+  let { text, asText }: TitleProps = title;
+  let titleText;
+  const isEditable = !!onSave;
+
+  const titleRef = useRef<HTMLSpanElement | null>(null);
+  const isEllipsisApplied = useOverflowStringWidth(titleRef);
+
+  if (text || !content) {
+    if (text === undefined && typeof title === 'string') {
+      text = title;
+      asText = title;
+    }
+    const TitleIcon = icon;
+
+    const titleContent = (
+      <span ref={titleRef} className={`${blockClass}__titleText`}>
+        {text}
+      </span>
+    );
+
+    titleInnards = (
+      <>
+        {icon && !loading ? (
+          <span className={`${blockClass}__title-icon-wrapper`}>
+            {/* @ts-ignore */}
+            <TitleIcon className={`${blockClass}__title-icon`} />
+          </span>
+        ) : null}
+
+        {loading ? (
+          <SkeletonText className={`${blockClass}__title-skeleton`} />
+        ) : isEditable ? (
+          <EditInPlace
+            tooltipAlignment="bottom"
+            value={text!}
+            cancelLabel={cancelDescription!}
+            editLabel={editDescription!}
+            saveLabel={saveDescription!}
+            labelText={editableLabel!}
+            onChange={onChange!}
+            onSave={onSave}
+            size="md"
+            inheritTypography
+            onCancel={() => {}}
+            id="page-header-title-edit-in-place"
+            {...rest}
+          />
+        ) : isEllipsisApplied ? (
+          <DefinitionTooltip
+            openOnHover={false}
+            align={tooltipAlignment}
+            definition={text}
+            className={`${blockClass}__tooltip`}
+          >
+            {titleContent}
+          </DefinitionTooltip>
+        ) : (
+          titleContent
+        )}
+      </>
+    );
+  } else {
+    titleInnards = content;
+    titleText = asText;
+  }
+  return (
+    <h1
+      className={cx(
+        `${blockClass}__title`,
+        { [`${blockClass}__title--editable`]: isEditable },
+        {
+          [`${blockClass}__title--fades`]: hasBreadcrumbRow,
+        }
+      )}
+      title={titleText}
+    >
+      {titleInnards}
+    </h1>
+  );
+};
+
+export const editInPlaceRequired = ({ onSave }) => !!onSave;
+
+PageHeaderTitle.propTypes = {
+  // passed from page header
+  blockClass: PropTypes.string.isRequired,
+  /**
+   * controlled from within page header
+   */
+  hasBreadcrumbRow: PropTypes.bool,
+  /**
+   * An optional page title supplied as a string or object with the following attributes: text, icon, loading
+   *
+   * Can be supplied either as:
+   * - String
+   * - Object containing
+   *    - text: title string
+   *    - icon: optional icon
+   *    - loading: boolean shows loading indicator if true
+   *    - onChange: function to process the live value (React change === HTML Input)
+   *    - onSave: function to process a confirmed change
+   *    - editDescription: description for edit button
+   *    - editableLabel: label for edit required if onSave supplied
+   *    - cancelDescription: description for edit cancel button
+   *    - saveDescription: description for edit save button
+   * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
+   *    - content: title or name of current location shown in main part of page header
+   *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
+   *    - asText: String based representation of the title
+   */
+  title: PropTypes.oneOfType([
+    PropTypes.shape({
+      // Update docgen if changed
+      text: PropTypes.string.isRequired,
+      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      loading: PropTypes.bool,
+
+      // inline edit version properties
+      editDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+      editableLabel: PropTypes.string.isRequired.if(editInPlaceRequired),
+      id: PropTypes.string.isRequired.if(editInPlaceRequired),
+      onChange: PropTypes.func,
+      onSave: PropTypes.func,
+      cancelDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+      saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+      tooltipAlignment: PropTypes.oneOf([
+        'top',
+        'top-left',
+        'top-right',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'left',
+        'right',
+      ]),
+      // Update docgen if changed
+    }),
+    PropTypes.string,
+    PropTypes.shape({
+      content: PropTypes.node.isRequired,
+      breadcrumbContent: PropTypes.node,
+      asText: PropTypes.string.isRequired,
+    }),
+  ]),
+};
diff --git a/packages/ibm-products/src/components/PageHeader/PageHeaderUtils.tsx b/packages/ibm-products/src/components/PageHeader/PageHeaderUtils.tsx
new file mode 100644
index 00000000000..5eaaaa1db01
--- /dev/null
+++ b/packages/ibm-products/src/components/PageHeader/PageHeaderUtils.tsx
@@ -0,0 +1,249 @@
+// @ts-nocheck
+/**
+ * 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 React from 'react';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+import { scrollableAncestor } from '../../global/js/utils/scrollableAncestor';
+import { SkeletonText } from '@carbon/react';
+
+export const blockClass = `${pkg.prefix}--page-header`;
+
+/**
+ * Assesses the vertical height of various elements and calls setMetrics with update
+ * @param {{}} headerRef
+ * @param {{}} offsetTopMeasuringRef
+ * @param {object} navigation
+ * @param {boolean} enableBreadcrumbScroll
+ * @param {boolean} hasActionBar
+ * @param {boolean} widthIsNarrow
+ * @param {()} setMetrics
+ */
+export const utilCheckUpdateVerticalSpace = (
+  headerRef,
+  offsetTopMeasuringRef,
+  navigation,
+  enableBreadcrumbScroll,
+  hasActionBar,
+  widthIsNarrow,
+  setMetrics
+) => {
+  const dynamicRefs = {};
+
+  const getDynamicRef = (selector) => {
+    // would love to do this differently but digging in the dom seems easier
+    // than getting a ref to a conditionally rendered item
+    /* don't know how to test resize */
+    /* istanbul ignore if */
+    if (!headerRef.current) {
+      return undefined;
+    } else {
+      const dRef = dynamicRefs[selector];
+      /* istanbul ignore else */
+      if (!dRef || /* istanbul ignore next */ dRef.parentNode === null) {
+        dynamicRefs[selector] = headerRef.current.querySelector(selector);
+      }
+    }
+    return dynamicRefs[selector];
+  };
+
+  setMetrics((previous) => {
+    // Utility function that checks the heights of various elements which are used to determine layout
+    const update = {};
+
+    const breadcrumbTitleEl = getDynamicRef(`.${blockClass}__breadcrumb-title`);
+    const breadcrumbRowEl = getDynamicRef(`.${blockClass}__breadcrumb-row`);
+    const titleRowEl = getDynamicRef(`.${blockClass}__title-row`);
+    const subtitleRowEl = getDynamicRef(`.${blockClass}__subtitle-row`);
+    const availableRowEl = getDynamicRef(`.${blockClass}__available-row`);
+    const navigationRowEl = getDynamicRef(`.${blockClass}__navigation-row`);
+    const pageActionsEl = getDynamicRef(`.${blockClass}__page-actions`);
+
+    /* istanbul ignore next */
+    update.headerHeight = headerRef.current
+      ? headerRef.current.clientHeight
+      : 0;
+    /* istanbul ignore next */
+    update.headerWidth = headerRef.current ? headerRef.current.offsetWidth : 0;
+
+    // The header offset is the vertical distance from the top of the document to
+    // the page header, which we obtain using getBoundingClientRect() for robust
+    // behavior. We use this offset as the scroll/fixed threshold.
+    const scrollableContainer = scrollableAncestor(headerRef.current);
+
+    /* istanbul ignore next */ const scrollableContainerTop =
+      scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+
+    /* istanbul ignore next */ const offsetMeasuringTop =
+      offsetTopMeasuringRef.current
+        ? offsetTopMeasuringRef.current.getBoundingClientRect().top
+        : 0;
+
+    // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
+    // top and the measuring ref top, or the difference between.
+    update.headerOffset =
+      offsetMeasuringTop !== 0
+        ? offsetMeasuringTop - scrollableContainerTop
+        : 0;
+
+    /* istanbul ignore next */
+    update.breadcrumbRowHeight = breadcrumbRowEl
+      ? breadcrumbRowEl.clientHeight
+      : 0;
+    /* istanbul ignore next */
+    update.breadcrumbRowWidth = breadcrumbRowEl
+      ? breadcrumbRowEl.offsetWidth
+      : 0;
+
+    /* istanbul ignore next */
+    update.breadcrumbTitleHeight = breadcrumbTitleEl
+      ? breadcrumbTitleEl.offsetHeight // clientHeight returns 0 when window small
+      : 1;
+
+    /* istanbul ignore next */
+    update.titleRowHeight = titleRowEl ? titleRowEl.clientHeight : 0;
+    /* istanbul ignore next */
+    update.subtitleRowHeight = subtitleRowEl ? subtitleRowEl.clientHeight : 0;
+    /* istanbul ignore next */
+    update.availableRowHeight = availableRowEl
+      ? availableRowEl.clientHeight
+      : 0;
+    /* istanbul ignore next */
+    update.navigationRowHeight = navigationRowEl
+      ? navigationRowEl.clientHeight
+      : 1;
+
+    // Base for calculating sticky top
+    update.headerTopValue = -update.headerHeight;
+    if (navigation) {
+      // adjust top for sticky with navigation
+      update.headerTopValue += update.navigationRowHeight;
+    }
+
+    if (!enableBreadcrumbScroll || !navigation) {
+      // adjust sticky top if no navigation or breadcrumb is to stay on screen
+      update.headerTopValue += update.breadcrumbRowHeight;
+    }
+
+    if (enableBreadcrumbScroll) {
+      // adjust header top value when scroll enabled for breadcrumb
+      update.headerTopValue -= navigation
+        ? hasActionBar
+          ? 0
+          : 10
+        : update.headerHeight;
+    }
+
+    // if (window) {
+    let val;
+    /* don't know how to test resize */
+    /* istanbul ignore if */
+    if (breadcrumbRowEl) {
+      val = parseFloat(
+        window
+          .getComputedStyle(breadcrumbRowEl)
+          .getPropertyValue('margin-bottom'),
+        10
+      );
+      update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
+    }
+    /* don't know how to test resize */
+    /* istanbul ignore if */
+    if (titleRowEl) {
+      val = parseFloat(
+        window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'),
+        10
+      );
+      update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
+
+      if (pageActionsEl) {
+        val = parseFloat(
+          window.getComputedStyle(pageActionsEl).getPropertyValue('margin-top'),
+          10
+        );
+        update.pageActionsSpaceAbove =
+          titleRowEl.clientHeight -
+          pageActionsEl.clientHeight +
+          update.titleRowSpaceAbove -
+          (isNaN(val) ? 0 : val);
+      }
+    }
+    if (!hasActionBar && pageActionsEl) {
+      // adjust headerTopValue when there are no page actions or action bar items (margin above title row)
+      update.headerTopValue -= update.titleRowSpaceAbove;
+    }
+
+    return { ...previous, ...update };
+  });
+};
+
+// Trigger a window scroll, if necessary, to set the collapsed state.
+export const utilSetCollapsed = (
+  collapse,
+  headerRef,
+  headerOffset,
+  headerTopValue
+) => {
+  /* don't know how to test resize */
+  /* istanbul ignore else */
+  const scrollableTarget = scrollableAncestor(headerRef.current);
+
+  if (collapse) {
+    scrollableTarget.scrollTo({
+      top: headerOffset - headerTopValue,
+      behavior: 'smooth',
+    });
+  } else {
+    scrollableTarget.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+};
+
+export const utilGetBreadcrumbItemForTitle = (
+  blockClass,
+  collapseTitle,
+  title
+) => {
+  let breadcrumbTitle;
+  if (title) {
+    if (title.text !== undefined) {
+      // Shape title provided
+      breadcrumbTitle = {
+        label: title.loading ? <SkeletonText /> : title.text,
+        title: title.text,
+      };
+    } else if (title.content !== undefined) {
+      // user defined content
+      breadcrumbTitle = {
+        label: title.breadcrumbContent ?? title.content ?? title.asText,
+        title: title.asText,
+      };
+    } else {
+      breadcrumbTitle = {
+        label: title,
+        title,
+      };
+    }
+    if (breadcrumbTitle) {
+      breadcrumbTitle.key = 'breadcrumb-title';
+      breadcrumbTitle.isCurrentPage = true;
+      breadcrumbTitle.href = '#';
+      breadcrumbTitle.className = cx([
+        `${blockClass}__breadcrumb-title`,
+        {
+          [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle,
+        },
+      ]);
+    }
+
+    if (title.shortTitle) {
+      breadcrumbTitle.shortTitle = title.shortTitle;
+    }
+
+    return breadcrumbTitle;
+  }
+};
diff --git a/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx
index 1d9038c038c..a9dbac55536 100644
--- a/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx
+++ b/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx
@@ -39,7 +39,6 @@ import {
   Heading,
 } from '@carbon/react';
 import { breakpoints } from '@carbon/layout';
-import { blockClass } from '../PageHeaderUtils';
 import { createOverflowHandler as localOverflowHandler } from './overflowHandler';
 import { createOverflowHandler } from '@carbon/utilities';
 import { ChevronUp } from '@carbon/react/icons';
@@ -57,6 +56,7 @@ interface PageHeaderProps {
   children?: React.ReactNode;
   className?: string;
 }
+const blockClass = `${pkg.prefix}--page-header`;
 const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
   function PageHeader({ className, children, ...other }: PageHeaderProps, ref) {
     const [refs, setRefs] = useState<PageHeaderRefs>({});
diff --git a/packages/ibm-products/src/components/DecoratorLink/index.js b/packages/ibm-products/src/components/ScrollGradient/index.ts
similarity index 76%
rename from packages/ibm-products/src/components/DecoratorLink/index.js
rename to packages/ibm-products/src/components/ScrollGradient/index.ts
index ede3f5934f9..d6d81bf221f 100644
--- a/packages/ibm-products/src/components/DecoratorLink/index.js
+++ b/packages/ibm-products/src/components/ScrollGradient/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { DecoratorLink } from './DecoratorLink';
+export { ScrollGradient } from './ScrollGradient.jsx';
diff --git a/packages/ibm-products/src/components/SimpleHeader/SimpleHeader.tsx b/packages/ibm-products/src/components/SimpleHeader/SimpleHeader.tsx
new file mode 100644
index 00000000000..c38b8966ae0
--- /dev/null
+++ b/packages/ibm-products/src/components/SimpleHeader/SimpleHeader.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright IBM Corp. 2023, 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 PropTypes from 'prop-types';
+
+import React, { useCallback, useEffect } from 'react';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+import pconsole from '../../global/js/utils/pconsole';
+import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
+import { isRequiredIf } from '../../global/js/utils/props-helper';
+import { Tooltip, Heading } from '@carbon/react';
+
+const blockClass = `${pkg.prefix}--simple-header`;
+const componentName = 'SimpleHeader';
+/**
+ * The SimpleHeader is not public and only used internally by CreateFullPage.
+ *
+ * Component varieties:
+ * - Header with Breadcrumbs
+ * - Header with Title
+ * - Header with Breadcrumbs and Title
+ *
+ *
+ * The component will throw a warning message if neither a title or breadcrumbs are provided
+ * since it requires at least one of them.
+ * */
+const SimpleHeader = ({
+  breadcrumbs,
+  className,
+  title,
+  noTrailingSlash = true,
+  maxVisible,
+  overflowAriaLabel,
+  overflowTooltipAlign,
+  ...rest
+}) => {
+  const warnIfNoTitleOrBreadcrumbs = useCallback(() => {
+    if (!title && !breadcrumbs?.length) {
+      pconsole.error(
+        `Warning: You have tried using a ${componentName} component without specifying a title or breadcrumbs props`
+      );
+    }
+  }, [breadcrumbs, title]);
+
+  useEffect(() => {
+    warnIfNoTitleOrBreadcrumbs();
+  }, [title, breadcrumbs, warnIfNoTitleOrBreadcrumbs]);
+
+  return (
+    <header className={cx(blockClass, className)} {...rest}>
+      {breadcrumbs?.length > 0 && (
+        <BreadcrumbWithOverflow
+          label=""
+          noTrailingSlash={noTrailingSlash}
+          className={cx(`${blockClass}__breadcrumbs`)}
+          breadcrumbs={breadcrumbs}
+          maxVisible={maxVisible}
+          overflowAriaLabel={overflowAriaLabel}
+          overflowTooltipAlign={overflowTooltipAlign}
+        />
+      )}
+      {title && (
+        <Heading className={cx(`${blockClass}__title`)}>{title}</Heading>
+      )}
+    </header>
+  );
+};
+
+export const overflowAriaLabel_required_if_breadcrumbs_exist = isRequiredIf(
+  PropTypes.string,
+  (props) => props.breadcrumbs?.length > 0
+);
+
+SimpleHeader.propTypes = {
+  /** Header breadcrumbs */
+  breadcrumbs: PropTypes.arrayOf(
+    PropTypes.shape({
+      /** breadcrumb item key */
+      key: PropTypes.string.isRequired,
+      /** breadcrumb item label */
+      label: PropTypes.string.isRequired,
+      /** breadcrumb item link */
+      href: PropTypes.string,
+      /** breadcrumb item title tooltip */
+      title: PropTypes.string,
+      /** Provide if this breadcrumb item represents the current page */
+      isCurrentPage: PropTypes.bool,
+    })
+  ),
+
+  /** Header classname */
+  className: PropTypes.string,
+
+  /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+  maxVisible: PropTypes.number,
+
+  /** A prop to omit the trailing slash for the breadcrumbs */
+  noTrailingSlash: PropTypes.bool,
+
+  /** Label for open/close overflow button used for breadcrumb items that do not fit */
+  overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
+
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: Tooltip.propTypes.align,
+  /** Header title */
+  title: PropTypes.string,
+};
+
+export { SimpleHeader };
diff --git a/packages/ibm-products/src/components/StatusIndicator/index.js b/packages/ibm-products/src/components/StatusIndicator/index.js
deleted file mode 100644
index bf6b0a966f7..00000000000
--- a/packages/ibm-products/src/components/StatusIndicator/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { StatusIndicator } from './StatusIndicator';
-export { StatusIndicatorStep } from './StatusIndicatorStep';
diff --git a/packages/ibm-products/src/components/StatusIndicator/index.ts b/packages/ibm-products/src/components/StatusIndicator/index.ts
new file mode 100644
index 00000000000..e877225748b
--- /dev/null
+++ b/packages/ibm-products/src/components/StatusIndicator/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { StatusIndicator } from './StatusIndicator.jsx';
+export { StatusIndicatorStep } from './StatusIndicatorStep.jsx';
diff --git a/packages/ibm-products/src/components/ScrollGradient/index.js b/packages/ibm-products/src/components/StringFormatter/index.ts
similarity index 75%
rename from packages/ibm-products/src/components/ScrollGradient/index.js
rename to packages/ibm-products/src/components/StringFormatter/index.ts
index f18841f58f5..0984369e2bc 100644
--- a/packages/ibm-products/src/components/ScrollGradient/index.js
+++ b/packages/ibm-products/src/components/StringFormatter/index.ts
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { ScrollGradient } from './ScrollGradient';
+export { StringFormatter } from './StringFormatter.jsx';
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
index 4d81171ad31..a910da7eb2b 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
-import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.jsx';
 import { deprecateProp } from '../../global/js/utils/props-helper';
 
 // Carbon and package components we use.
diff --git a/packages/ibm-products/src/components/UserAvatar/index.js b/packages/ibm-products/src/components/UserAvatar/index.ts
similarity index 100%
rename from packages/ibm-products/src/components/UserAvatar/index.js
rename to packages/ibm-products/src/components/UserAvatar/index.ts
diff --git a/packages/ibm-products/src/components/_Canary/index.js b/packages/ibm-products/src/components/_Canary/index.js
index f3ca1412a8c..2dbfde06d43 100644
--- a/packages/ibm-products/src/components/_Canary/index.js
+++ b/packages/ibm-products/src/components/_Canary/index.js
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { Canary } from './Canary';
+export { Canary } from './Canary.jsx';
diff --git a/packages/ibm-products/src/global/js/utils/__tests__/wrap-focus.test.js b/packages/ibm-products/src/global/js/utils/__tests__/wrap-focus.test.jsx
similarity index 100%
rename from packages/ibm-products/src/global/js/utils/__tests__/wrap-focus.test.js
rename to packages/ibm-products/src/global/js/utils/__tests__/wrap-focus.test.jsx
diff --git a/packages/ibm-products/src/global/js/utils/getNodeTextContent.js b/packages/ibm-products/src/global/js/utils/getNodeTextContent.jsx
similarity index 100%
rename from packages/ibm-products/src/global/js/utils/getNodeTextContent.js
rename to packages/ibm-products/src/global/js/utils/getNodeTextContent.jsx
diff --git a/packages/ibm-products/tsdown.config.ts b/packages/ibm-products/tsdown.config.ts
new file mode 100644
index 00000000000..90b3a310ec9
--- /dev/null
+++ b/packages/ibm-products/tsdown.config.ts
@@ -0,0 +1,47 @@
+/**
+ * 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 { defineConfig, type UserConfig } from 'tsdown';
+
+const banner = `/**
+ * Copyright IBM Corp. 2020, ${new Date().getFullYear()}
+ *
+ * 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 sharedConfig: UserConfig = {
+  entry: ['./src/index.ts'],
+  banner: () => ({
+    js: banner,
+    dts: banner,
+  }),
+  platform: 'neutral',
+  dts: true,
+  unbundle: true,
+  external: ['@carbon/icons-react', '@carbon/colors', '@floating-ui/react'],
+};
+
+export default defineConfig([
+  {
+    ...sharedConfig,
+    outDir: 'es',
+    outExtensions: () => ({ js: '.js' }),
+    onSuccess() {
+      console.info('✅ esm build succeeded!');
+    },
+  },
+  {
+    ...sharedConfig,
+    outDir: 'lib',
+    format: 'cjs',
+    onSuccess() {
+      console.info('✅ cjs build succeeded!');
+    },
+  },
+]);